10分鐘讀懂html5 多了啥？

更加語義化標簽(開發者可以更加優雅，瀏覽器也可以更好的理解)

搜索引擎檢索，為什么會檢索標題，不會檢索“簡介” ? 這是因為結構的不同。但是結構每個人的class命名習慣都會不一樣，無法做到規范，于是不如出新的標簽。

在有一些低版本的瀏覽器中，h5標簽不兼容，會被認為是div，并不會影響我們的功能。也可以在 script 中新加一行代碼 document.createElement("header") ,但是用了多少標簽，就要寫多少行的 document.createElement("") ，于是有一個第三方的插件 html5shiv.js

使用方法：

<!--[if lt IE 9]>
<script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->

注意：在頁面中調用Html5.js文件必須添加在頁面的head元素內，因為IE瀏覽器必須在元素解析前知道這個元素，所以這個js文件不能在頁面底部調用。

應用程序標簽

DataList

progress

屬性
鏈接關系描述

鏈接到的地方和當前文檔的關系是什么

<a href="01-sementic-tags.html" rel="pre"></a>
<a href="02-application-tags.html" rel="next"></a>

rel還出現在其他地方，

<link rel="stylesheet" href="css.css">

link本身不會請求文件，而是rel="stylesheet"才會請求文件

目前國內不流行

結構數據標記

<div itemscope itemtype="www.baidu.com">
        <div itemprop="主人">主人</div>
        <div itemprop="小狗">小狗一</div>
        <div itemprop="小狗">小狗二</div>
    </div>

可以方便搜索引擎重點抓取

很高級，但是只有google支持

ARIA

無障礙富互聯網應用程序

<label for="myinput">請輸入您的名字</label>
<input type="text" id="myinput">

為什么上面一定要label for呢？

是為了搜索引擎的理解

自定義屬性

也就是 data-* 之類的屬性，他們沒有功能性，只是為了保存dom節點的強相關的數據。

<ul id="list"></ul>
    <div id="info"></div>
    <script>
        var data={
            01:{
                name:"張三",
                age:18
            },
            02:{
                name:"李四",
                age:19
            },
            03:{
                name:"王五",
                age:20
            }
        };
        for (var X in data) {
            var item=data[X];
            var oli=document.createElement("li");
            var olist=document.getElementById("list");
            oli.appendChild(document.createTextNode(item.name));
            olist.appendChild(oli);
            oli.setAttribute("data-name",item.name);
            oli.setAttribute("data-age",item.age );
            oli.addEventListener("click", function () {
                var name=this.getAttribute("data-name");
                var age=this.getAttribute("data-age");
                alert(age+name)
            })
        }
    </script>

上面的代碼用 setattribue 方法來定義了自定義屬性，然后用getattribute又獲取到了自定義屬性。js也針對自定義屬性出了新的api,也就是 dataset['string'] ,使用這個api可以代替 getAttribute 的方法：

oli.addEventListener("click",function(){
    console.log(this.dataset["name"]);
})

智能表單
新的表單類型

<input type="date">
<input type="color">
<input type="range">

但是盡量不要在pc端使用，用戶體驗較差，不能自定義樣式。主要適配在移動端。

虛擬鍵盤適配

<input type="text" name="txt_text" id="txt_text">
<input type="number" name="txt_number" id="txt_number">
<input type="email" name="txt_email" id="txt_email">
<input type="tel" name="txt_tel" id="txt_tel">
<input type="url" name="txt_url" id="txt_url">

上面的代碼在pc端上沒有用處，主要是用在移動端可以根據不同的input的 type 來喚出不同的鍵盤。

雖然 input type="email" 看似可以驗證表單，但是真是太弱了，只是驗證有沒有 @ ，真的要驗證的話，還是要自己寫正則表達式

頁面多媒體

音頻

<audio src="A Moment of Reflection.mp3" controls="controls"></audio>

但是默認的播放器太丑了，我們一般是自己寫一個button，然后為這個button添加一個事件：

<script>
        var btn=document.getElementById("btn");
        var btn1=document.getElementById("btn1");
        var audio=document.getElementsByTagName("audio")[0];
        btn.addEventListener("click", function () {
            audio.play();
        })
        btn1.addEventListener("click",function (argument) {
            audio.pause();
        })
</script>

視頻

<video src="A Moment of Reflection.mp4" controls="controls"></video>

但是我們一般不是這樣用的，因為視頻有版權，有些瀏覽器只能支持一兩個，我們一般是source：

<video controls="controls">
<source src="下午03-網頁多媒體.web.mp4">
<source src="下午03-網頁多媒體.web.ogg">
<p>您的瀏覽器不支持</p>
</video>

還有一個插件，是可以幫我們做兼容的，是https://html5media.info/的組件，ie7以上都可以兼容。

以下是多媒體的屬性;

[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]

字幕

兼容性不是很好，現在還沒有人用

canvas

1. 2d
2. 3d

svg
優勢：體積小，質量高，效果好，可控程度高。

 

來自：http://www.cnblogs.com/dujuncheng/p/6139580.html