HTML5新特性

先羅列出H5的一些新特性，不要回答那麼具體

（一）語義化標籤：

例如：header、nav、article、aside、footer等

（二）音頻視頻API

 視頻API

1.視頻格式

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

2.實際應用

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

controls 屬性供添加播放、暫停和音量控件。
video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：

3.方法、屬性和事件

音頻API
1.音頻格式

Ogg Vorbis
MP3
Wav

2.實際應用

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

controls 屬性供添加播放、暫停和音量控件。
audio 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：

（三）Canvas畫布API

1.作用：HTML5中canvas元素用於在網頁上繪製圖形。（通過腳本，通常是 JavaScript）。不過，元素本身並沒有繪製能力（它僅僅是圖形的容器）必須使用腳本來完成實際的繪圖任務。
2.特點：

Canvas畫布是一個矩形區域，可以控制其每一個像素
Canvas使用JavaScript來控制畫圖
Canvas具有直線、矩形、圓以及添加圖像的方法

3.畫圖步驟
（1）創建一個畫布：其中標籤裏面的文字是給不支持canvas的瀏覽器看的，支持的永遠看不到。Canvas自身的寬高就是畫布本身的屬性，而css給他的寬高則可以看作是縮放，如果你縮放的太隨意，那麼畫布上的圖形可能變得你自己都認不出來。所以有個建議：除非特殊情況，一定不要用css來定義Canvas的寬高。

       <canvas id="c1" width="800" height="600">你的瀏覽器不支持canvas</canvas>

（2）繪畫環境：相當於把拿出畫布和畫筆


     window.onload = function(){
        //拿出畫布，和獲取元素的方法相同
        var oC = document.getElementById('c1');
        //其中getContext方法就是用來拿筆的，但這裏還有個參數:2d，這是什麼意思呢?
        //這個可以看作是畫筆的種類。 既然有2D，那麼就會有3d了？以後估計會有，但現在沒
        //這裏寫圖片描述有。所以我們先用這隻2d的筆吧。
        var oGC = oC.getContext('2d'); 
      };

3.用方法繪製圖形

①矩形方法：

  A.rect() 方法創建矩形。

      方法：oGC.rect(x,y,width,height);

      x 矩形左上角的 x 座標
      y 矩形左上角的 y 座標
      width 矩形的寬度，以像素計
      height    矩形的高度，以像素計

  B fillRect() 方法繪製“已填色”的矩形。默認的填充顏色是黑色。

      方法：oGC.fillRect(x,y,width,height);參數與上文相同

  C.strokeRect() 方法繪製矩形（不填色,帶邊框）。筆觸的默認顏色是黑色。

      方法：oGC.strokeRect(x,y,width,height);

  D。clearRect() 方法清空給定矩形內的指定像素。

      方法：oGC.clearRect(x,y,width,height);

②顏色，樣式，陰影

context.createLinearGradient(x0,y0,x1,y1);

參數值參數描述 x0 漸變開始點的 x 座標 y0 漸變開始點的 y 座標 x1 漸變結束點的 x 座標 y1 漸變結束點的 y 座標
context.createPattern(image,”repeat|repeat-x|repeat-y|no-repeat”); 參數值參數描述 image 規定要使用的圖片、畫布或視頻元素。 repeat 默認。該模式在水平和垂直方向重複。 repeat-x 該模式只在水平方向重複。 repeat-y 該模式只在垂直方向重複。 no-repeat 該模式只顯示一次（不重複）。
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
參數值參數描述 x0 漸變的開始圓的 x 座標 y0 漸變的開始圓的 y 座標 r0 開始圓的半徑 x1 漸變的結束圓的 x 座標 y1 漸變的結束圓的 y 座標 r1 結束圓的半徑
gradient.addColorStop(stop,color);

參數值參數描述 stop 介於 0.0 與 1.0 之間的值，表示漸變中開始與結束之間的位置。 color 在結束位置顯示的 CSS 顏色值

③邊界繪製：

lineJoin：邊界連接點樣式
miter（默認）、round（圓角）、bevel（斜角）
lineCap：端點樣式
butt（默認）、round（圓角）、square（高度多出爲寬的一半）

④繪製路徑：

beginPath：開始繪製路徑（防止後面設置影響上面繪圖）
closePath：結束繪製路徑（閉合繪圖）
save：保存路徑（與restore一起組成一個設置區）
restore：恢復路徑
moveTo：移動到繪製的新目標點（起點）
lineTo：新的目標點（終點）
clearRect：刪除一個畫布的矩形區域

⑤圓弧方法：arc(x,y,半徑,起始弧度,結束弧度,旋轉方向)

x,y：起始圓心座標
起始位置在3點鐘位置
弧度與角度的關係：弧度=角度*Math.pi/180
旋轉方向：順時針（默認：false）、逆時針（true）

l⑥繪製圓形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>繪製圓形</title>
</head>
<style>
    body{ background:black;}
    #c1{ background:white;}
    span{ color:white;}
</style>
<script>
    window.οnlοad=function(){
        var oC = document.getElementById('c1');
        var oGC = oC.getContext('2d');
        //oGC.moveTo(200,200);移動到起點
        oGC.arc(200,200,150,0,360*Math.PI/180,true);
        oGC.closePath();
        oGC.fillStyle = 'rgba(0,255,0,0.25)';//注意順序問題，顏色支持十六進制
        oGC.fill();//填充當前圖形
        oGC.stroke();
    };
</script>
<body>
    <canvas id="c1" width="400" height="400">
        <span>不支持canvas瀏覽器</span>
    </canvas> <!--默認：寬300 高150-->
</body>
</html>

⑦繪製線條

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

⑧繪製三角形

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
<!--設置畫布大小-->
canvas.width = 1024;
canvas.height = 768;

context.moveTo(100,100);
context.lineTo(700,700);
context.lineTo(100,700);
context.lineTo(100,100);

<!-- 填充圖形-->
context.fillStyle = "rgb(2,100,30)";
context.fill();

context.lineWidth = 5;
context.strokeStyle = "#005588";
context.stroke();
}
</script>
</body>
</html>

（四）地理API

1.請使用 getCurrentPosition() 方法來獲得用戶的位置。
2.實際應用

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="該瀏覽器不支持獲取地理位置。";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="用戶拒絕對獲取地理位置的請求。"
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="位置信息是不可用的。"
      break;
    case error.TIMEOUT:
      x.innerHTML="請求用戶地理位置超時。"
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="未知錯誤。"
      break;
    }
  }
</script>

1.檢測是否支持地理定位
2.如果支持，則運行 getCurrentPosition() 方法。如果不支持，則向用戶顯示一段消息。
3.如果getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象
4. showPosition() 函數獲得並顯示經度和緯度
5.第一個函數用於獲取成功之後的操作，第二個函數用於處理錯誤，它規定當獲取用戶位置失敗時運行的函數：

（五）、WEB存儲

（一）localStorage 方法——-沒有時間限制的數據存儲

localStorage 方法存儲的數據沒有時間限制。第二天、第二週或下一年之後，數據依然可用。

如何創建？

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

對用戶訪問頁面的次數進行計數：

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

（二）sessionStorage 方法

sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。

如何創建？

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

對用戶在當前 session 中訪問頁面的次數進行計數：

<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

（六）、表單控件

（一）HTML5 新的 Input 類型

email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

1.email
email 類型用於應該包含 e-mail 地址的輸入域。在提交表單時，會自動驗證 email 域的值。

E-mail: <input type="email" name="user_email" />

2.url
url 類型用於應該包含 URL 地址的輸入域。在提交表單時，會自動驗證 url 域的值。

Homepage: <input type="url" name="user_url" />

3.number
number 類型用於應該包含數值的輸入域。您還能夠設定對所接受的數字的限定：

Points: <input type="number" name="points" min="1" max="10" />

4.Date Pickers（日期選擇器）

HTML5 擁有多個可供選取日期和時間的新輸入類型：

date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間（小時和分鐘）
datetime - 選取時間、日、月、年（UTC 時間）
datetime-local - 選取時間、日、月、年（本地時間）

Date: <input type="date" name="user_date" />

5.search
search 類型用於搜索域，比如站點搜索或 Google 搜索。search 域顯示爲常規的文本域。

（七）、內聯SVG

1.什麼是SVG？

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用於定義用於網絡的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
SVG 是萬維網聯盟的標準

2.SVG 的優勢

SVG 圖像可通過文本編輯器來創建和修改
SVG 圖像可被搜索、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大

3.實例：將 SVG 元素直接嵌入 HTML 頁面中

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

（八）、Web Workers

1.什麼是 Web Worker？

當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。web worker 是運行在後臺的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。

2.實例代碼

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />

<script>
var w;
//在創建 web worker 之前，請檢測用戶的瀏覽器是否支持它：
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
    //檢測是否存在 worker，如果不存在，- 它會創建一個新的 web worker 對象，然後
    //運行 "demo_workers.js" 中的代碼：
  if(typeof(w)=="undefined")
    {
    w=new Worker("demo_workers.js");
    }  
//向 web worker 添加一個 "onmessage" 事件監聽器：當 web worker 傳遞消息時
//，會執行事件監聽器中的代碼。event.data 中存有來自 event.data 的數據。
  w.onmessage = function (event) {
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}
//如需終止 web worker，並釋放瀏覽器/計算機資源，請使用 terminate() 方法：
function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

（九）、HTML 5 拖放

拖放是一種常見的特性，即抓取對象以後拖到另一個位置。在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69" />

</body>
</html>

具體解釋參考這裏

（十）、移除的標籤

純表現的元素

          <basefont> 默認字體，不設置字體，以此渲染
          <font> 字體標籤
          <center> 水平居中
          <u> 下劃線
          <big> 大字體
          <strike> 中橫線
          <tt> 文本等寬

框架集

          <frameset>
          <noframes>
          <frame>

我的絕倫大人

發佈了31 篇原創文章 · 獲贊 9 · 訪問量 1萬+

私信關注

HTML5新特性

HTML5新特性

（一）語義化標籤：

（二）音頻視頻API

（三）Canvas畫布API

（四）地理API

（五）、WEB存儲

（六）、表單控件

（七）、內聯SVG

（八）、Web Workers

（九）、HTML 5 拖放

（十）、移除的標籤

SQL優化-20231016

CSS預處理器和後處理器

css剩餘部分

跨域

BFC神奇背後的原理

CSS居中問題

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結