html5相關

時間 2019-11-29

標籤 html5 html 相關欄目 HTML5 简体版

原文原文鏈接

1.語義化標籤：html

header\section\aside\footerhtml5

2.音視頻播放：web

video\audiocanvas

其中video支持ogg\mpeg4\webm格式的視頻；瀏覽器

3.canvas服務器

一.畫矩形：cookie

1 function draw(){
2   var canvas = document.getElementById('mycanvas');
3   if (canvas.getContext){
4     var ctx = canvas.getContext('2d');
5     ctx.fillRect(25,25,100,100);
6     ctx.clearRect(45,45,60,60);
7     ctx.strokeRect(50,50,50,50);
8   }
9 }

二.畫線條：session

function drawShape(){
    var canvas = document.getElementById('mycanvas');

    if (canvas.getContext){

        var ctx = canvas.getContext('2d');

        ctx.beginPath();
        ctx.moveTo(25,25);
        ctx.lineTo(105,25);
        ctx.lineTo(25,105);
        ctx.fill();
    
        ctx.beginPath();
        ctx.moveTo(125,125);
        ctx.lineTo(125,45);
        ctx.lineTo(45,125);
        ctx.closePath();
        ctx.stroke();

  } 
}

三.畫曲線：ide

 1 function drawShape(){
 2     var canvas = document.getElementById('mycanvas');
 3 
 4   if (canvas.getContext){
 5 
 6     // use getContext to use the canvas for drawing
 7     var ctx = canvas.getContext('2d');
 8     // Draw shapes
 9     ctx.beginPath();
10     ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
11     ctx.moveTo(110,75);
12     ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
13     ctx.moveTo(65,65);
14     ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
15     ctx.moveTo(95,65);
16     ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
17     ctx.stroke();
18 
19   }
20 }

其中arc(x, y, radius, startAngle, endAngle, anticlockwise)ui

x,y：圓心座標

radius ：半徑

startAngle和 endAngle分別是起末弧度（以 x 軸爲基準）

anticlockwise爲 true表示逆時針，反之順時針

4.一些新的input元素

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

html5新的Input類型有：email , url , number , range , Date pickers(date,month,week,time,datetime,datetime-local) , search , color

input新增的一些屬性：

autoconmplete

autoconmplete能夠賦值爲 on 或者 off。當爲 on的時候，瀏覽器能自動存儲用戶輸入的內容。當用戶返回到曾經填寫過值的頁面的時候，瀏覽器能把用戶寫過的值自動填寫在相應的input框裏。

autofocus

autofocus 能夠賦值爲 autofocus，也就是在頁面加載完成的時候自動聚焦到這個input標籤，天然 type="hidden"的時候是不能用的。這個也是一個比較常見的效果，至今爲止的實現方法是用js。在頁面加載完時執行聚焦操做，如今也被一個屬性搞定了。

能夠想象，一個頁面至多隻有一個input標籤會設置 autofocus，不然必然不會達到預期效果。由於不可能同時聚焦在兩個input上。

required

input的有一個強力新增屬性，免去驗證的麻煩。能夠賦值爲 required。

好比用戶註冊頁面的用戶名和密碼都是必填的，只要設置一個required就能夠了。而在之前是須要js來驗證或者後臺驗證的。

注意：這裏required屬性是須要用戶來填寫的，因此TYPE是button、submit、reset等等不須要用戶填寫選擇的類型是不可使用這個屬性的。

placeholder

這個新增屬性也是很是使用，用在type= text email等等類型的時候，提示用戶輸入信息的格式或者內容等等。這個效果在以前也是須要js來實現的。

list屬性

這個屬性顯示相似於百度搜索框那種聯想框效果，也是很是實用的一個屬性。

注意從這個屬性使用的特色：須要有對應的datalist標籤；datalist子標籤option支持 value和lable兩個屬性；list的屬性值要和datalist的id一致。

min\max屬性

能夠來限制數值範圍，minheight、maxheight屬性來限制字符串長度。此次maxlength終於有好朋友minlength了。

5.web storage

存儲相關的主要是localStorage和sessionStorage.比較下web storage和cookie:

cookie的存儲限制在了4k以內，相比來講，session storage有了更大的存儲空間，但至於具體多大，這要參照具體瀏覽器。

cookie有一個機制，就是在每次客戶端請求服務器的時候都會將cookie發送給服務器，這無疑會作不少沒必要要的操做，由於並非每次請求服務器都須要cookie的全部信息，而session storage很好的解決了這個問題，它不是採起自動發送的方式，這樣就減小了沒必要要的工做。

經過sessionStorage所存儲數據的生命週期，和Session相似，關閉瀏覽器（或標籤頁）後數據就不存在了。但刷新頁面或使用「前進」、「後退按鈕」後sessionStorage仍然存在。

session storage每一個窗口的值都是獨立的（每一個窗口都有本身的數據），它的數據會隨着窗口的關閉而消失，窗口間的sessionStorage也是不能夠共享的。

setItem中的key、value使用的是字符串的形式進行存儲的。也就是說若是有以下的代碼：setItem(‘count’, 1);經過getItem(‘count’) + 5 獲得的將不是預期的6(整數)，而是’16’(字符串)。

再次使用setItem設置已經存在的key的value時，新的值將替代舊的值。

當存儲中的數據發生改變時，會觸發相應的事件（window.onstorage），但目前各瀏覽器對此事件的支持並不完善，暫時能夠忽略。

關於microdata

對於那些喜歡語義網的人來講，HTML5 是很是吸引人的。Microdata 使得之前舊的表現元素有了新的語義意義。基於頁面的內容，咱們可使用屬性來定義一組內嵌的名字—— 值對來表達頁面內容元素的語義，它給咱們一種新的方式來添加額外的語義信息。

Microdata 以自定義的詞彙表（vocabulary）爲中心，能夠想象 HTML5 中全部的元素集合爲一個詞彙表，這個詞彙表包含描述段落（section）或文章（article）的元素，可是不包含描述事件（event）或組織（organization）的元素。若是想在 Web 頁面中表示一個事件或組織，則須要定義本身的詞彙表，Microdata 容許你這麼作，任何人均可以定義本身的詞彙表，而且將其包含在本身的 Web 頁面中。

Microdata 由名字 / 值（name/value）對組成，每個詞彙表定義一組命名的屬性。例如，對於人這個詞彙表，能夠定義名字、頭像、地址等屬性。爲了在頁面中包含特定的 Microdata 屬性值（value），須要在特定的地方提供 Microdata 屬性名（name）。根據你聲明屬性名的位置，Microdata 有提取屬性值的規則。

Microdata 中範圍（scoping）的概念很重要，對於這個概念，能夠想象 DOM 中元素的父子關係。元素 <HTML> 一般包含兩個子元素，<HEAD> 和 <BODY>，元素 <BODY> 能夠有不少子元素，這些子元素又能夠有本身的子元素。Microdata 重用 DOM 的等級結構提供一種方式表達：這個元素（element）中全部的屬性（properties）都來自這個詞彙表（vocabulary）。它容許在一個頁面中使用多個詞彙表（vocabulary），並且詞彙表之間能夠內嵌，這些所有經過對 DOM 自有結構的使用完成。

Microdata 是用來對 Web 頁面上已經存在的數據提供附加的語義，它並非被設計用來做爲獨立的數據格式，它是對 HTML 的一種補充。若是能正確地使用 HTML，Microdata 將很好的工做，可是 HTML 的詞彙表表達能力並非很強。

關於html5 裏面的 role 屬性

使用role屬性告訴輔助設備（如屏幕閱讀器）這個元素所扮演的角色，屬於WAI-ARIA. 例如點擊的按鈕，就是role="button"；會讓這個元素可點擊.

下面列舉了一個例子：

<ul role="menubar">
 
 <!-- Rule 2A: "File" label via aria-labelledby -->
  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
    <ul role="menu">

      <!-- Rule 2C: "New" label via Namefrom:contents -->
      <li role="menuitem">New</li>
      <li role="menuitem">Open…</li>
      …
    </ul>
  </li>
  …
</ul>

具體能夠參考http://www.w3.org/TR/wai-aria/roles

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。