HTML5學習筆記(1-13節)

時間 2019-11-12

標籤 html5 html 學習筆記欄目 HTML5 简体版

原文原文鏈接

來源：菜鳥HTML5教程

1、簡介：參考>>

HTML5的設計目的是爲了在移動設備上支持多媒體。css

HTML5新特性：html

用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
新的特殊內容元素，好比header、nav、article、section、footer
新的表單控件，好比 calendar、date、time、email、url、search
對本地離線存儲的更好的支持

<!DOCTYPE html>  //聲明必須位於 HTML5 文檔中的第一行
<html>
<head>
<meta charset="utf-8">  //中文網頁須要使用utf-8聲明編碼不然會亂碼
<title>文檔標題</title>
</head>
 
<body>
文檔內容......
</body>
 
</html>

HTML5 圖形html5

使用 HTML5 你能夠簡單的繪製圖形:css3

使用 <canvas> 元素。
使用內聯 SVG。
使用 CSS3 2D 轉換、CSS3 3D 轉換。

什麼是SVG？git

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

SVG優點canvas

與其餘圖像格式相比（好比 JPEG 和 GIF），使用 SVG 的優點在於：api

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

2、瀏覽器支持參考>>

<!--[if lt IE9]> 
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

標籤及屬性詳細描述：HTML5參考手冊瀏覽器

2、HTML5 瀏覽器支持參考>>

讓低版本瀏覽器支持H5方法：設置H5的8個新的HTML語義元素的CSS 的 display 屬性值爲 block緩存

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

爲 HTML 添加新元素服務器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>爲HTML 添加新元素</title>
<script>
document.createElement("myHero") //爲IE瀏覽器添加新的元素 </script>
<style>
myHero {  //爲自定義新元素設置樣式
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
}
</style> 
</head>
<body>
<myHero>個人第一個新元素</myHero> //自定義的新元素
</body>
</html>

Internet Explorer 瀏覽器問題

 Internet Explorer 8 及更早 IE 版本的瀏覽器不支持以上的方式。

咱們可使用 Sjoerd Visscher 建立的 "HTML5 Enabling JavaScript", " shiv" 來解決該問題:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

以上代碼是一個註釋，做用是在 IE 瀏覽器的版本小於 IE9 時將讀取 html5.js 文件，並解析它。

注意：國內用戶請使用本站靜態資源庫（Google 資源庫在國內不穩定）：

<!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

針對IE瀏覽器html5shiv 是比較好的解決方案。html5shiv主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能做爲父節點包裹子元素，而且不能應用CSS樣式。

完美的 Shiv 解決方案

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>  //必須放在<head>元素中，由於IE瀏覽器在解析HTML5新元素時須要先加載該文件。
  <![endif]-->
</head>
<body>
</body>
</html>

3、HTML5 新元素

H5添加的新元素：圖形的繪製，多媒體內容，更好的頁面結構，更好的形式處理，和幾個api拖放元素，定位，包括網頁應用程序緩存，存儲，網絡工做者，等。

4、HTML5 Canvas

Canvas是一個畫布容器，畫圖經過JS腳本完成。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">  //id腳本常常會用到
</canvas>

JS繪製圖像：

var c=document.getElementById("myCanvas"); //找到 <canvas> 元素 var ctx=c.getContext("2d");  //getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
ctx.fillStyle="#FF0000";     //fillStyle屬性能夠是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。
ctx.fillRect(0,0,150,75);    //定義了矩形當前的填充方式

Canvas座標：

canvas 是一個二維網格。

canvas 的左上角座標爲 (0,0)

上面的 fillRect 方法擁有參數 (0,0,150,75)。

意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。

座標實例

以下圖所示，畫布的 X 和 Y 座標用於在畫布上對繪畫進行定位。鼠標移動的矩形框上，顯示定位座標。

Canvas路徑：

在Canvas上畫線，咱們將使用如下兩種方法：

moveTo(x,y) 定義線條開始座標
lineTo(x,y) 定義線條結束座標

繪製線條咱們必須使用到 "ink" 的方法，就像stroke().

實例：

定義開始座標(0,0), 和結束座標 (200,100)。而後使用 stroke() 方法來繪製線條:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

在canvas中繪製圓形, 咱們將使用如下方法:

arc(x,y,r,start,stop)

實際上咱們在繪製圓形時使用了 "ink" 的方法, 好比 stroke() 或者 fill().

實例：

使用 arc() 方法繪製一個圓:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Canvas文本：

使用 canvas 繪製文本，重要的屬性和方法以下：

font - 定義字體
fillText(text,x,y) - 在 canvas 上繪製實心的文本
strokeText(text,x,y) - 在 canvas 上繪製空心的文本

使用 fillText():

JS:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

使用 strokeText():

JS:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Canvas漸變：

漸變能夠填充在矩形, 圓形, 線條, 文本等等, 各類形狀能夠本身定義不一樣的顏色。

如下有兩種不一樣的方式來設置Canvas漸變：

createLinearGradient(x,y,x1,y1) - 建立線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 建立一個徑向/圓漸變

當咱們使用漸變對象，必須使用兩種或兩種以上的中止顏色。

addColorStop()方法指定顏色中止，參數使用座標來描述，能夠是0至1.

使用漸變，設置fillStyle或strokeStyle的值爲漸變，而後繪製形狀，如矩形，文本，或一條線。

使用 createLinearGradient():

JS:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 建立漸變
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

使用 createRadialGradient():

JS:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 建立漸變
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充漸變
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Canvas圖像：

把一幅圖像放置到畫布上, 使用如下方法:

drawImage(image,x,y)

JS:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

HTML Canvas 參考手冊

標籤的完整屬性能夠參考Canvas 參考手冊.

5、HTML5 內聯 SVG

什麼是SVG?

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

SVG 使用 XML 格式定義圖形

SVG優點：

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

把 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>

SVG 與 Canvas二者間的區別

SVG 是一種使用 XML 描述 2D 圖形的語言。

Canvas 經過 JavaScript 來繪製 2D 圖形。

SVG 基於 XML，這意味着 SVG DOM 中的每一個元素都是可用的。您能夠爲某個元素附加 JavaScript 事件處理器。

在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注。若是其位置發生變化，那麼整個場景也須要從新繪製，包括任何或許已被圖形覆蓋的對象。

Canvas 與 SVG 的比較

6、HTML5 MathML

MathML 是數學標記語言，是一種基於XML（標準通用標記語言的子集）的標準，用來在互聯網上書寫數學符號和公式的置標語言。

實例：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鳥教程(runoob.com)</title>
   </head>
   <body>
      <math xmlns="http://www.w3.org/1998/Math/MathML">
         <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
                
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
                
            <msup><mi>c</mi><mn>2</mn></msup>
         </mrow>
      </math>
   </body>
</html>

如下實例添加了一些運算符：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鳥教程(runoob.com)</title>
   </head>
    
   <body>
    
      <math xmlns="http://www.w3.org/1998/Math/MathML">
        
         <mrow>            
            <mrow>
                
               <msup>
                  <mi>x</mi>
                  <mn>2</mn>
               </msup>
                    
               <mo>+</mo>
                    
               <mrow>
                  <mn>4</mn>
                  <mo>⁢</mo>
                  <mi>x</mi>
               </mrow>
                    
               <mo>+</mo>
               <mn>4</mn>
                    
            </mrow>
                
            <mo>=</mo>
            <mn>0</mn>
                 
         </mrow>
      </math>
        
   </body>
</html>

如下實例是一個 2×2 矩陣，能夠在 Firefox 3.5 以上版本查看到效果：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>菜鳥教程(runoob.com)</title>
   </head>
    
   <body>
      <math xmlns="http://www.w3.org/1998/Math/MathML">
         <mrow>
            <mi>A</mi>
            <mo>=</mo>
            <mfenced open="[" close="]">
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
            </mfenced>
         </mrow>
      </math>
   </body>
</html>

7、HTML5 拖放（Drag 和 Drop）

實例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
    ev.preventDefault();
}
 
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id); //保存被拖拽對象的id值
}
 
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
 
<p>拖動 RUNOOB.COM 圖片到矩形框中:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
 
</body>
</html>

8、HTML5 Geolocation（地理定位）

HTML5 Geolocation API 用於得到用戶的地理位置。

鑑於該特性可能侵犯用戶的隱私，除非用戶贊成，不然用戶位置信息是不可用的。

HTML5 - 使用地理定位

請使用 getCurrentPosition() 方法來得到用戶的位置。

下例是一個簡單的地理定位實例，可返回用戶位置的經度和緯度:

實例：

var x=document.getElementById("demo");
function getLocation()
{
    if (navigator.geolocation) //檢測是否支持地理定位
    {
        navigator.geolocation.getCurrentPosition(showPosition); //若是getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象
    }
    else
    {
        x.innerHTML="該瀏覽器不支持獲取地理位置。";
    }
}

function showPosition(position) //showPosition()函數得到並顯示經度和緯度
{
    x.innerHTML="緯度: " + position.coords.latitude +
    "<br>經度: " + position.coords.longitude;    
}

處理錯誤和拒絕

getCurrentPosition() 方法的第二個參數用於處理錯誤。它規定當獲取用戶位置失敗時運行的函數：

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;
    }
}

在地圖中顯示結果

如需在地圖中顯示結果，您須要訪問可以使用經緯度的地圖服務，好比谷歌地圖或百度地圖：

function showPosition(position) //咱們使用返回的經緯度數據在谷歌地圖中顯示位置（使用靜態圖像）。
{
    var latlon=position.coords.latitude+","+position.coords.longitude;

    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

Geolocation 對象 - 其餘有趣的方法

watchPosition() - 返回用戶的當前位置，並繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。

clearWatch() - 中止 watchPosition() 方法

下面的例子展現 watchPosition() 方法。您須要一臺精確的 GPS 設備來測試該例（好比 iPhone）：

var x=document.getElementById("demo");
function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.watchPosition(showPosition);
    }
    else
    {
        x.innerHTML="該瀏覽器不支持獲取地理位置。";
    }
}
function showPosition(position)
{
    x.innerHTML="緯度: " + position.coords.latitude +
    "<br>經度: " + position.coords.longitude;
}

10、HTML5 Video(視頻)

HTML5 提供了展現視頻的標準。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持Video標籤。
</video>

<video> 元素提供了播放、暫停和音量控件來控制視頻。

同時<video> 元素元素也提供了 width 和 height 屬性控制視頻的尺寸.若是設置的高度和寬度，所需的視頻空間會在頁面加載時保留。若是沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。

<video> 與</video> 標籤之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。

<video> 元素支持多個 <source> 元素. <source> 元素能夠連接不一樣的視頻文件。瀏覽器將使用第一個可識別的格式：

HTML5 <video> - 使用 DOM 進行控制

HTML5 <video> 和 <audio> 元素一樣擁有方法、屬性和事件。

<video> 和 <audio>元素的方法、屬性和事件可使用JavaScript進行控制.

其中的方法有用於播放、暫停以及加載等。其中的屬性（好比時長、音量等）能夠被讀取或設置。其中的 DOM 事件可以通知您，比方說，<video> 元素開始播放、已暫停，已中止，等等。

例中簡單的方法，向咱們演示瞭如何使用 <video> 元素，讀取並設置屬性，以及如何調用方法。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head>
<body> 
<div style="text-align:center"> 
  <button onclick="playPause()">播放/暫停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">縮小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的瀏覽器不支持 HTML5 video 標籤。
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
    if (myVideo.paused) 
      myVideo.play(); 
    else 
      myVideo.pause(); 
} 

    function makeBig()
{ 
    myVideo.width=560; 
} 

    function makeSmall()
{ 
    myVideo.width=320; 
} 

    function makeNormal()
{ 
    myVideo.width=420; 
} 
</script> 
</body> 
</html>

11、HTML5 Audio(音頻)

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>

control 屬性供添加播放、暫停和音量控件。

在<audio> 與 </audio> 之間你須要插入瀏覽器不支持的<audio>元素的提示文本。

<audio> 元素容許使用多個 <source> 元素. <source> 元素能夠連接不一樣的音頻文件，瀏覽器將使用第一個支持的音頻文件

12、HTML5 新的 Input 類型

HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

本章全面介紹這些新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

注意:並非全部的主流瀏覽器都支持新的input類型，不過您已經能夠在全部主流的瀏覽器中使用它們了。即便不被支持，仍然能夠顯示爲常規的文本域。

Input 類型: color

color 類型用在input字段主要用於選取顏色，以下所示：

選擇你喜歡的顏色: <input type="color" name="favcolor">

Input 類型: date

date 類型容許你從一個日期選擇器選擇一個日期。】

生日: <input type="date" name="bday">

Input 類型: datetime

生日 (日期和時間): <input type="datetime" name="bdaytime">

Input 類型: datetime-local

生日 (日期和時間): <input type="datetime-local" name="bdaytime">

Input 類型: email

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

Input 類型: month

month 類型容許你選擇一個月份。

生日 (月和年): <input type="month" name="bdaymonth">

Input 類型: number

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

數量 ( 1 到 5 之間 ): <input type="number" name="quantity" min="1" max="5">

Input 類型: range

range 類型用於應該包含必定範圍內數字值的輸入域。range 類型顯示爲滑動條。

定義一個不須要很是精確的數值（相似於滑塊控制）:

<input type="range" name="points" min="1" max="10">

請使用下面的屬性來規定對數字類型的限定：

max - 規定容許的最大值
min - 規定容許的最小值
step - 規定合法的數字間隔
value - 規定默認值

Input 類型: search

search 類型用於搜索域，好比站點搜索或 Google 搜索。

Search Google: <input type="search" name="googlesearch">

Input 類型: tel

電話號碼: <input type="tel" name="usrtel">

Input 類型: time

time 類型容許你選擇一個時間。

選擇時間: <input type="time" name="usr_time">

Input 類型: url

url 類型用於應該包含 URL 地址的輸入域。

在提交表單時，會自動驗證 url 域的值。

添加您的主頁: <input type="url" name="homepage">

提示: iPhone 中的 Safari 瀏覽器支持 url 輸入類型，並經過改變觸摸屏鍵盤來配合它（添加 .com 選項）。

Input 類型: weekweek 類型容許你選擇周和年。

選擇周: <input type="week" name="week_year">

十3、HTML5 表單元素

HTML5 有如下新的表單元素:

<datalist>
<keygen>
<output>

HTML5 <datalist> 元素

<datalist> 元素規定輸入域的選項列表。

<datalist> 屬性規定 form 或 input 域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：

使用 <input> 元素的列表屬性與 <datalist> 元素綁定.

<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

HTML5 <keygen> 元素

<keygen> 元素的做用是提供一種驗證用戶的可靠方法。

<keygen>標籤規定用於表單的密鑰對生成器字段。

當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

私鑰（private key）存儲於客戶端，公鑰（public key）則被髮送到服務器。公鑰可用於以後驗證用戶的客戶端證書（client certificate）。

<form action="demo_keygen.asp" method="get">
用戶名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

HTML5 <output> 元素

<output> 元素用於不一樣類型的輸出，好比計算或腳本輸出：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>