整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
HTML5對(duì)HTML4所做的各種修改中
一個(gè)比較重大的修改就是為了使文檔結(jié)構(gòu)更加清晰、容易閱讀，增加了很多新的結(jié)構(gòu)元素。
在HTML5中，為了使文檔的結(jié)構(gòu)更加清晰明確
追加了幾個(gè)與頁(yè)眉、頁(yè)腳、內(nèi)容區(qū)塊等文檔結(jié)構(gòu)相關(guān)聯(lián)的結(jié)構(gòu)元素。
article元素
article元素表示文檔、頁(yè)面、應(yīng)用程序或站點(diǎn)中的自包含成分所構(gòu)成的一個(gè)頁(yè)面的一部分，
并且這部分專(zhuān)用于獨(dú)立地分類(lèi)或復(fù)用，例如聚合。
一個(gè)博客帖子、一個(gè)教程、一個(gè)新的故事、視頻及其腳本，都很好地符合這一定義。
除了內(nèi)容部分，一個(gè)article元素通常有它自己的標(biāo)題（通常放在一個(gè)header元素里面），有時(shí)還有自己的腳注。
section元素
section元素代表文檔或應(yīng)用程序中一般性的“段”或者“節(jié)”。“段”
在這里的上下文中，指的是對(duì)內(nèi)容按照主題的分組，通常還附帶標(biāo)題。
例如，書(shū)本的章節(jié)，帶標(biāo)簽頁(yè)的對(duì)話框的每個(gè)標(biāo)簽頁(yè)，或者一篇論文的編節(jié)號(hào)。
網(wǎng)站的主頁(yè)也可以分為不同的節(jié)，如介紹、新聞列表和聯(lián)系信息。
一個(gè)section元素通常由內(nèi)容及其標(biāo)題組成。但section元素并非一個(gè)普通的容器元素；
當(dāng)一個(gè)容器需要被直接定義樣式或通過(guò)腳本定義行為時(shí)，推薦使用div而非section元素。
section元素的作用是對(duì)頁(yè)面上的內(nèi)容進(jìn)行分塊，
或者說(shuō)對(duì)文章進(jìn)行分段，但是不要與article混淆，因?yàn)閍rticle是有著自己完整、獨(dú)立的內(nèi)容。
nav元素
nav元素用來(lái)構(gòu)建導(dǎo)航。導(dǎo)航定義為一個(gè)頁(yè)面中
（例如，一篇文章頂端的一個(gè)目錄，它可以鏈接到同一頁(yè)面的錨點(diǎn)）
或一個(gè)站點(diǎn)內(nèi)的鏈接。但是，并不是鏈接的每一個(gè)集合都是一個(gè)nav，
只需要將主要的、基本的鏈接組放進(jìn)nav元素即可。
例如，在頁(yè)腳中通常會(huì)有一組鏈接，包括服務(wù)條款、版權(quán)聲明、聯(lián)系方式等。
對(duì)于這些footer元素就足夠放置了。一個(gè)頁(yè)面中可以擁有多個(gè)nav元素，作為頁(yè)面整體或不同部分的導(dǎo)航。
nav元素的內(nèi)容可能是鏈接的一個(gè)列表，標(biāo)記為一個(gè)無(wú)序的列表，
或者是一個(gè)有序的列表，這里需要注意的是nav元素是一個(gè)包裝器，
它不會(huì)替代<ol>或<ul>元素，但是會(huì)包圍它。通過(guò)這種方式，
不能理解該元素的舊版本瀏覽器將會(huì)顯示列表元素和列表項(xiàng)，并且顯示效果完全正常
HTML是web開(kāi)發(fā)中三大規(guī)范之一，可以參考：Web前端開(kāi)發(fā)-HTML入門(mén)干貨 。
HTML產(chǎn)生于1990年，1997年的HTML4.0成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)并廣泛應(yīng)用，HTML5是在HTML4.01（1999年發(fā)布）的基礎(chǔ)上發(fā)展而來(lái)，在2008年正式發(fā)布，在2012年形成了穩(wěn)定版本。
其實(shí)在HTML4.01之后，W3C組織除了HTML5之外，為了嚴(yán)格html編寫(xiě)規(guī)范，發(fā)布了XHTML。經(jīng)過(guò)了跌宕起伏的分歧、融合之路，本來(lái)預(yù)計(jì)要逐步被XHTML替代的HTML5，最終成了W3C組織確認(rèn)的html規(guī)范。
在HTML5規(guī)范中添加了很多新元素及功能，比如： 更好的頁(yè)面結(jié)構(gòu)（語(yǔ)義化標(biāo)簽）、圖形的繪制（畫(huà)布）、多媒體（音頻、視頻）內(nèi)容、智能表單、地理位置、數(shù)據(jù)存儲(chǔ)以及多線程等。
可以通過(guò)html5test.com網(wǎng)站，測(cè)試HTML5各標(biāo)簽在各類(lèi)瀏覽器中支持程度。
html5test.com
PC瀏覽器各版本支持HTML5考量
移動(dòng)瀏覽器各版本支持HTML5考量
對(duì)于IE6、7、8來(lái)講，支持極少部分的HTML5新標(biāo)簽，IE9也是部分支持。
在低版本瀏覽器中兼容使用HTML5標(biāo)簽，有兩種方案，一：自定義標(biāo)簽；二：使用第三方j(luò)s插件
（1）自定義標(biāo)簽
可以利用添加自定義標(biāo)簽的方式為IE 瀏覽器添加 HTML5 元素。
<script>
//可以使用自定義標(biāo)簽
document.createElement("header");
document.createElement("article");
document.createElement("aside");
document.createElement("section");
document.createElement("footer");
</script>但是Internet Explorer 8 及更早 IE 版本的瀏覽器不支持以上的方式，所以采用以下方式。
（2）利用第三方j(luò)s插件
html5shiv.js是第三方插件，能夠解決IE9以下瀏覽器對(duì)html5新增標(biāo)簽的不識(shí)別，并導(dǎo)致CSS不起作用的問(wèn)題。
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!-- 專(zhuān)門(mén)針對(duì)IE瀏覽器的語(yǔ)句，且只能被IE9識(shí)別，其他瀏覽器將以下if endif語(yǔ)句認(rèn)為是注釋 -->
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head><!--[if !IE]><!--> 除IE外都可識(shí)別 <!--<![endif]-->
<!--[if IE]> 所有的IE可識(shí)別 <![endif]-->
<!--[if IE 6]> 僅IE6可識(shí)別 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可識(shí)別 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可識(shí)別 <![endif]-->
<!--[if IE 9]> 僅IE9可識(shí)別 <![endif]-->
（1）語(yǔ)義化標(biāo)簽
相對(duì)于無(wú)具體含義的div和span標(biāo)簽，語(yǔ)義化標(biāo)簽的優(yōu)點(diǎn)是方便搜索引擎能識(shí)別頁(yè)面結(jié)構(gòu)，有利于SEO。
header：該標(biāo)簽定義了頁(yè)面的頭部區(qū)域；
nav：該標(biāo)簽定義了頁(yè)面的導(dǎo)航鏈接區(qū)域；
footer：該標(biāo)簽定義了頁(yè)面或section的頁(yè)腳；
section：該標(biāo)簽定義了頁(yè)面區(qū)域；
article：該標(biāo)簽定義了頁(yè)面的內(nèi)容區(qū)域；
（2）多媒體標(biāo)簽
1）視頻標(biāo)簽
video：用來(lái)定義視頻內(nèi)容，支持多種視頻格式，包括.mp4、.ogg、.webm等，最常用的是.mp4。
<body>
<!-- src屬性設(shè)置視頻源，
width、height設(shè)置視頻大小，單位是像素，
autoplay屬性設(shè)置自動(dòng)播放，
對(duì)于google瀏覽器需要添加muted屬性,表示靜音播放，
controls屬性設(shè)置播放控件，包括播放、暫停等，
loop屬性設(shè)置視頻循環(huán)播放，
poster屬性設(shè)置視頻封面，
-->
<video
src="media/xiaomitv.mp4"
width="300"
height="100"
autoplay="autoplay"
muted="muted"
controls="controls"
loop="loop"
poster="images/a.jpg"
></video>
</body>還可以采用如下代碼，兼容多種格式的視頻文件
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>2）音頻標(biāo)簽
audio：用來(lái)定義音頻內(nèi)容，支持多種音頻格式，包括.mp3、.wav、.ogg等，最常用的是.mp3。
音頻標(biāo)簽的用法和視頻標(biāo)簽的基本一樣，屬性及屬性值含義也基本一樣。
Google的chrome瀏覽器將音頻、視頻自動(dòng)播放給默認(rèn)禁止了，視頻可以通過(guò)添加靜音播放折中解決，但是音頻單獨(dú)通過(guò)html標(biāo)簽和屬性是不能解決的，需要js配合使用。
（3）智能表單標(biāo)簽
1）新增input類(lèi)型
tel：限制輸入電話號(hào)碼，目前只有 Safari 8 支持 tel 類(lèi)型；
email：在提交時(shí)驗(yàn)證輸入內(nèi)容是否符合郵箱格式；
date：限制輸入的內(nèi)容為日期，瀏覽器會(huì)彈出日期選擇器；
time：限制輸入的內(nèi)容為時(shí)間，瀏覽器會(huì)彈出日期選擇器；
number：限制輸入的內(nèi)容僅為數(shù)字；
url：在提交時(shí)驗(yàn)證輸入內(nèi)容是否符合url格式；
<form action="">
<ul>
<li>搜索：<input type="search" name="" id="" /></li>
<li>電話：<input type="tel" /></li>
<li>郵箱：<input type="email" /></li>
<li>日期：<input type="date" /></li>
<li>時(shí)間：<input type="time" /></li>
<li>數(shù)量：<input type="number" min="1" max="5"/></li>
<li>網(wǎng)址：<input type="url" /></li>
<li>附件：<input type="file" /></li>
<li><input type="submit" /></li>
</ul>
</form>2）新增input的屬性
min和max屬性可以限制數(shù)字的最值，可以限制日期、時(shí)間類(lèi)型的最值；其屬性值為具體內(nèi)容。
required屬性表示必填項(xiàng)；其屬性值為required。
placeholder屬性表示提示信息，其屬性值為提示信息。
multiple屬性表示input類(lèi)型為file時(shí)，可以文件多選；其屬性值為multiple。
autocomplete屬性表示是否顯示之前提及過(guò)的文本信息；其屬性值為on或者off。
TML 5 是一個(gè)新的網(wǎng)絡(luò)標(biāo)準(zhǔn)，目標(biāo)在于取代現(xiàn)有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 標(biāo)準(zhǔn)。它希望能夠減少瀏覽器對(duì)于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)(plug-in-based rich internet application，RIA)，如Adobe Flash等需求。其新增的標(biāo)簽有哪些呢?
<article> 標(biāo)簽定義外部的內(nèi)容(外部?jī)?nèi)容如blog,news)。使用后感覺(jué)和P差不多，語(yǔ)義化的標(biāo)簽。
<aside >標(biāo)簽定義article以外的內(nèi)容(可用做文章的側(cè)欄).語(yǔ)義化的標(biāo)簽。
<audio>標(biāo)簽定義音樂(lè)。支持三種格式,ogg,mp3,wav。 Safari僅支持MP3 and WAV 兩種格式.
<canvas>使用JavaScript在網(wǎng)頁(yè)上繪制圖形圖像。學(xué)好算法JS無(wú)所不能. (瀏覽器說(shuō)：鴨梨很大).
<command> 定義按鈕用的.說(shuō)實(shí)話,沒(méi)用明白。
<datalist >定義選項(xiàng)列表.又是一個(gè)不知道咋用的標(biāo)簽。
<details>用于描述某個(gè)文檔部分的內(nèi)容。語(yǔ)義化的標(biāo)簽。
<summary >定義details元素標(biāo)題。語(yǔ)義化的標(biāo)簽。
<embed>定義嵌入的內(nèi)容(如插件)。必須有一個(gè)src的屬性，值是URL。可以是圖片，swf etc.
<figure>對(duì)元素進(jìn)行組合.語(yǔ)義化的標(biāo)簽。
<figcaption>定義figure的標(biāo)題.語(yǔ)義化的標(biāo)簽.
<footer>定義頁(yè)腳。語(yǔ)義化的標(biāo)簽。
<header>定義頁(yè)眉。語(yǔ)義化的標(biāo)簽。
<hgroup>對(duì)網(wǎng)頁(yè)或區(qū)段(section)的標(biāo)題進(jìn)行組合。語(yǔ)義化的標(biāo)簽。
<keygen>定義密鑰.沒(méi)用明白。
<mark>定義帶有記號(hào)的文本。突出顯示用的，會(huì)有個(gè)背景色。
<meter>定義度量衡，用于已知最大和最小值的度量。不懂，在chrome下顯示的是圖像,在firefox和safari下顯示的是<meter>
<nav>定義導(dǎo)航。語(yǔ)義化的標(biāo)簽。
<output>定義輸出類(lèi)型。應(yīng)是和表單一塊用的。
<progress>定義運(yùn)行中的進(jìn)度。進(jìn)度條效果.
<rupy><rp><rt>定義ruby注釋。
<section>定義文檔中的區(qū)段。語(yǔ)義化的標(biāo)簽,自認(rèn)為是<div>的替代品.
<source>定義媒介源(如<video>和<audio>)定義媒介資源的類(lèi)型,讓瀏覽器決定是否下載.
<time>定義時(shí)間。語(yǔ)義化的標(biāo)簽。
<video>定義視頻。IE9和Safari支持MP4，其他主流瀏覽器支持Ogg。
來(lái)源：HTML5開(kāi)發(fā)小贏家
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
