什么是HTML？

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

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

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

這是以前網頁的HTML形式。而新的的HTML是這樣的：

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

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

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

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

具體html5 多了啥？

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

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

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

使用方法：

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

應用程序標簽

DataList

progress

屬性

鏈接關系描述

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

rel還出現在其他地方，

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

目前國內不流行

結構數據標記

主人

小狗一

小狗二

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

很高級，但是只有google支持

ARIA

無障礙富互聯網應用程序請輸入您的名字

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

是為了搜索引擎的理解

自定義屬性

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

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)

})

}

上面的代碼用 setattribue 方法來定義了自定義屬性，然后用getattribute又獲取到了自定義屬性。js也針對自定義屬性出了新的api,也就是 dataset['string'] ,使用這個api可以代替 getAttribute 的方法：oli.addEventListener("click",function(){ console.log(this.dataset["name"]);

})

智能表單

新的表單類型

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

虛擬鍵盤適配

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

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

頁面多媒體

音頻

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

btn.addEventListener("click", function () {

audio.play();

})

btn1.addEventListener("click",function (argument) {

audio.pause();

})

視頻

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

您的瀏覽器不支持

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

以下是多媒體的屬性;

[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]

字幕

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

canvas

2d

3d

svg

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

相關推薦：

本文原創發布php中文網，轉載請注明出處，感謝您的尊重！

總結

以上是生活随笔為你收集整理的h5是什么 www.php.cn,20分钟看懂html5 看看H5都有啥新特性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。