20分鐘看懂html5 看看H5都有啥新特性

什麼是HTML？

HTML（Hyper Text Mark-up Language）。超文本標記語言。 HTML文字是由HTML指令組成的描述性文本，HTML指令可以說明文字、圖形、動畫、聲音、表格、連結等。 HTML的結構包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內容。 （HTML影片教學）

什麼是HTML5？

我們所謂的HTML5所能達到的效果，並不是孤立的HTML升級版，而是HTML+CSS3+JS綜合起來的表現。 HTML也只是一個標記語言，只是他進行了更語義化的優化，增加了一些被認為更科學的標籤，也去掉了一些標籤，但標記是標記，行為是行為，沒有CSS3、沒有JS，HTML也永遠只是個HTML而已。 （html5影片教學）

簡單的說，HTML5比之前的HTML版本的標籤更加語義化，更加標準化，並且增加了一些新的標籤。請看下圖：

這是先前網頁的20分鐘看懂html5 看看H5都有啥新特性。而新的的HTML是這樣的：

很顯然，HTML5已經不再像以前那樣一個DIV打天下了，新加了語意化的新標籤。可能會讓前段工程師在團隊協作上更容易，因為有了統一的新標準。

圖像一點來說吧，一個百貨倉庫，管理員老王來收拾倉庫，把各種衣帽鞋子和百貨分類放入不同的盒子中，在盒子上貼上標籤並寫上自認為合適的名字。那些盒子我們可以理解為DIV，標籤上的起的名字class貨id。

那好了，問題來了。老王下班了回家了，老李來接班，老李看了老王收拾的情況就開始罵街了，因為他看不懂老王在盒子上寫的標籤，害的他要挨個盒子打開看看究竟裡面放著什麼，這大大的降低了工作效率。

現在的HTML5就是直接把標記好了的盒子交給了老王，他可以根據不同的盒子來裝不同的衣帽鞋子，這樣等到老張來接班的時候就方便多了。而且不只這樣，HTML5提供了更多的標籤來讓老張和老王們不用在麻煩其他同事而能獨立完成一些以前來講比較複雜的工作。

具體html5 多了啥？

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

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

在有一些低版本的瀏覽器中，h5標籤不相容，會被認為是p，不會影響我們的功能。也可以在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"才會請求檔案

目前國內不流行

結構資料標記

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

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

很高級，但只有google支援

ARIA

無障礙富互聯網應用程式

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

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

是為了搜尋引擎的理解

自訂屬性

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

<ul id="list"></ul>
    <p id="info"></p>
    <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>

还有一个插件，是可以帮我们做兼容的，是html5media.info/的组件，ie7以上都可以兼容。

以下是多媒体的属性;

[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]

字幕

兼容性不是很好，现在还没有人用

canvas

2d

3d

svg

优势：体积小，质量高，效果好，可控程度高。

相关推荐：

成为一名优秀的前端工程师需要学什么？

web前端学习路线:WEB前端开发快速入门