新增的主體結構元素
主體結構元素：article、section、nav、aside
非主體結構元素：header、hgroup、footer、address
article元素
article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。它可以是一篇博客或報刊中的文章、一篇論壇帖子、一段用戶評論或獨立的插件，或者其他任何獨立的內容。
除了內容部分，一個article通常有它自己的標題（一般放在header里面），有時還有自己的腳注。
<article>
<header>
<h1>蘋果</h1>
<p>發(fā)表日期: <time pubdate="pubdate">2010/10/09</time></p>
</header>
<p><b>蘋果</b> ，植物類水果，多次花果...（“蘋果”文章正文）</p>
<footer>
<p><small>著作權歸***公司所有。</small></p>
</footer>
</article>
article元素是可以嵌套使用的，內層的內容在原則上需要與外層的內容相關聯(lián)。
<article>
<header>
<h1>蘋果</h1>
<p>發(fā)表日期:
<time pubdate datetime="2010/10/09">2010/10/09</time>
</p>
</header>
<p><b>蘋果</b> ，植物類水果，多次花果...（“蘋果”文章正文）</p>
<section>
<h2>評論</h2>
<article>
<header>
<h3>發(fā)表者：陸凌牛</h3>
<p><time pubdate datetime="2010-10-10T19:10-08:00">1小時前</time></p>
</header>
<p>我喜歡蘋果，我最喜愛的品種是紅富士。</p>
</article>
<article>
<header>
<h3>發(fā)表者：張玉</h3>
<p><time pubdate datetime="2010-10-10T19:15-08:00">1小時前</time></p>
</header>
<p>蘋果？我不喜歡，我喜歡吃橘子。</p>
</article>
</section>
</article>
article元素也可以用來表示插件，它的作用是使插件看起來好像內嵌在頁面中一樣。
<article>
<h1>My Fruit Spinner</h1>
<object>
<param name="allowFullScreen" value="true">
<embed src="#" width="600" height="395"></embed>
</object>
</article>
section元素
section元素用于對網(wǎng)站或應用程序中頁面上的內容進行分塊。一個section元素通常由內容及其標題組成。但section元素并非一個普通的容器元素，當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div而非section元素。
通常不推薦為那些沒有標題的內容使用section元素，它的作用是對內容進行分塊，或對文章進行分段。
<article>
<h1>蘋果</h1>
<p><b>蘋果</b> ，植物類水果，多次花果...</p>
<section>
<h2>紅富士</h2>
<p>紅富士是從普通富士的芽(枝)變中選育出的著色系富的統(tǒng)稱...</p>
</section>
<section>
<h2>國光</h2>
<p>國光蘋果品，又名小國光、萬壽。原產(chǎn)美國，1600年發(fā)現(xiàn)的偶然實生苗...</p>
</section>
</article>
在H5中，article可以看成是一種特殊種類的section元素。section元素強調分段或分塊，而article強調獨立性。
總結：
- 不要將
section元素用作設置樣式的頁面容器。 - 如果
article元素、aside元素或nav元素更符合使用條件，不要使用section。 - 不要為沒有標題的內容區(qū)塊使用
section元素。
nav元素
nav元素是一個可以用作頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或當前頁面的其他部分。并不是所有的鏈接組都要放進nav元素，只需要將主要的、基本的鏈接組放進nav元素即可。
<h1>技術資料</h1>
<nav>
<ul>
<li><a href="/">主頁</a></li>
<li><a href="/events">開發(fā)文檔</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>HTML5與CSS3的歷史</h1>
<nav>
<ul>
<li><a href="#HTML5">HTML5的歷史</a></li>
<li><a href="#CSS3">CSS3的歷史</a></li>
...more...
</ul>
</nav>
</header>
<section id="HTML5">
<h1>HTML5的歷史</h1>
<p>講述HTML5的歷史的正文</p>
</section>
<section id="CSS3">
<h1>CSS3的歷史</h1>
<p>講述CSS3的歷史的正文</p>
</section>
...more...
<footer>
<p>
<a href="?edit">編輯</a> |
<a href="?delete">刪除</a> |
<a href="?rename">重命名</a>
</p>
</footer>
</article>
<footer>
<p><small>版權所有：xxx</small></p>
</footer>
nav元素可以用于以下場合：
- 傳統(tǒng)導航條
- 側邊欄導航
- 頁內導航
- 翻頁操作
aside元素
aside元素用來表示當前頁面或文章的附屬信息部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其它類似的有別于主要內容的部分。
aside元素主要有以下兩種用法：
1）被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的參考資料、名詞解釋等。
<header>
<h1>F#入門</h1>
</header>
<article>
<h1>第四節(jié) 詞法閉包</h1>
<p>lambda表達式可以創(chuàng)建詞法閉包...(文章正文）</p>
<aside>
<!-- 因為這個aside元素被放置在一個article元素內部，
所以分析器將這個aside元素的內容理解成是和article元素的內容相關聯(lián)的。 -->
<h1>名詞解釋</h1>
<dl>
<dt>F#</dt>
<dd>F#為.Net2010中引入的新型函數(shù)型編程語言</dd>
</dl>
<dl>
<dt>詞法閉包</dt>
<dd>詞法閉包是指，將創(chuàng)建lambda表達式時的環(huán)境保存起來...(詳細解釋）</dd>
</dl>
</aside>
</article>
2)在article元素之外使用，作為頁面或站點全局的附屬信息部分。最典型的形式是側邊欄，其中的內容可以是友情鏈接、博客中其他文章列表、廣告單元等。
<aside>
<nav>
<h2>評論</h2>
<ul>
<li><a >erway</a> 10-24 14:25</li>
<li><a >太陽雨</a> 10-22 23:48<br/>
<a >頂，拜讀一下老牛的文章</a>
</li>
<li>
<a >新浪官博</a>08-12 08:50<br/>
<a href="#">恭喜！您已經(jīng)成功開通了博客</a>
</li>
</ul>
</nav>
</aside>
time元素
time元素代表24小時中的某個時刻或某個日期，表示時刻時允許帶時差。它可以定義很多格式的日期和時間。
<time datetime="2017-1-1">1月1日</time>
<time datetime="2017-1-1T20:00">我生日</time>
<time datetime="2017-1-1T20:00Z">我生日</time>
<time datetime="2017-1-1T20:00+09:00">我生日</time>
編碼時機器讀到的部分在datetime屬性里，而元素的開始標記和結束標記中間的部分是顯示在網(wǎng)頁上的。datetime屬性中日期與時間之間要用T文字分隔，T表示時間。時間加上Z文字表示給機器編碼時使用UTC標準時間，最后一行加上了時差，表示向機器編碼另一個地區(qū)時間，如果是編碼本地時間，則不需要添加時差。
pubdate屬性
pubdate屬性是一個可選的、boolean值的屬性，它可以用到article元素中的time元素上，意思是time元素代表了文章（article元素的內容）或整個網(wǎng)頁的發(fā)布日期。
<article>
<header>
<h1>關于<time datetime=2010-10-29>10月29日</time>的舞會通知</h1>
<p>發(fā)布日期:<time datetime=2010-10-11 pubdate>2010年10月11日</time></p>
</header>
<p>大家好:我是法律系3年級學生代表,......(關于舞會的通知)</p>
</article>
新增的非主體結構元素
header元素
header元素是一種具有引導和導航作用的結構元素。通常用來放置整個頁面或頁面內的一個內容區(qū)塊的標題，但也可以包含其它內容，例如數(shù)據(jù)表格、搜索表單或相關的logo圖片。
<header>
<h1>網(wǎng)頁標題</h1>
</header>
<article>
<header>
<h1>文章標題</h1>
</header>
<p>文章正文</p>
</article>
一個header元素通常包括至少一個h1~h6元素，也可以包括hgroup元素，還可以包括nav或其他元素。
hgroup
hgroup元素是將標題及其子標題進行分組的元素。hgroup元素通常會將h1~h6元素進行分組比如一個內容區(qū)塊的標題及其子標題算一組。如果文章只有一個主標題，是不需要hgroup元素的。
<article>
<header>
<h1>文章標題</h1>
<p><time datetime="2010-03-20">2010年10月29日</time></p>
</header>
<p>文章正文</p>
</article>
如果文章有主標題，主標題下邊有子標題，就需要用hgroup元素了。
<article>
<header>
<hgroup>
<h1>文章主標題</h1>
<h2>文章子標題</h2>
</hgroup>
<p><time datetime="2010-03-20">2010年10月29日</time></p>
</header>
<p>文章正文</p>
</article>
footer元素
footer元素可以作為其上層父級內容區(qū)塊或是一個根區(qū)塊的腳注。footer通常包括其相關區(qū)塊的腳注信息，如作者、相關閱讀鏈接及版權信息等。
<footer>
<ul>
<li>版權信息</li>
<li>站點地圖</li>
<li>聯(lián)系方式</li>
</ul>
</footer>
還可以為article元素和section元素添加footer元素。
<article>
文章內容
<footer>
文章的腳注
</footer>
</article>
<section>
分段內容
<footer>
分段內容的腳注
</footer>
</section>
address元素
address元素用來在文檔中呈現(xiàn)聯(lián)系信息，包括文檔作者或文檔維護者的名字、網(wǎng)站鏈接、電子郵箱、真實地址、電話號碼等。
<footer>
<div>
<address>
<a title="文章作者：xxx" >陸凌牛</a>
</address>
發(fā)表于<time datetime="2020-10-04">2020年10月4日</time>
</div>
</footer>
增強的頁面元素
新增的figure元素與figcaption元素
figure元素也是一種元素的組合，帶有可選標題。figure元素用來表示網(wǎng)頁上一塊獨立的內容，將其從網(wǎng)頁上移除后不會對網(wǎng)頁上的其他內容產(chǎn)生任何影響。figure元素所表示的內容可以是圖片、統(tǒng)計圖或代碼示例。
figcaption元素表示figure元素的標題，它從屬于figure元素 ， 必須書寫在figure元素內部，可以書寫在figure元素內的其他從屬元素的前面或后面。一個figure元素內最多只允許放置一個figcaption元素，但允許放置多個其他元素。
<figure>
<figcaption>我喜愛的明星</figcaption>
</figure>
figure元素所表示的內容通常是圖片、統(tǒng)計圖或代碼示例，但并不僅限于此，它同樣可以用來表示音頻插仲件、 視頻插件或統(tǒng)計表格等。
新增的mark元素
mark元素表示頁面中需要突出顯示或高亮顯示的，對于當前用戶具有參考作用的一段文字。它通常使用于引用原文的時候，目的是引起讀者的注意。
除了在搜索結果中高亮顯示關鍵詞之外，mark元素的另一個主要作用是在引用原文的時候，為了某種特殊目的而把原文作者沒有特別重點標示的內容給標示出來。
劉德華：光芒萬丈的不老情人
<p>
有人說華仔是東方的<mark>湯姆?克魯斯</mark>，是憂郁的王子<mark>勞倫斯?奧立佛</mark>。
華仔那張以鷹鉤鼻為核心的臉蛋的確有些歐美人的韻味，與一般的亞洲人的臉不太一樣。
</p>
新增的progress元素
progress元素代表一個任務的完成進度，這個進度可以是不確定的，只是表示進度正在進行，但不清楚還有多少工作量沒有完成，也可以用0到某個最大數(shù)字之間的數(shù)字來表示準確的進度完成情況(譬如進度百分比)。
該元素具有兩個屬性來表示當前任務完成情況，value屬性表示已經(jīng)完成了多少工作量，max屬性表示總共有多少工作量。工作量的單位是隨意的，不用指定。
在屬性設定的時候，value屬性和max屬性只能指定為有效的浮點數(shù)，value屬性的值必須大于0，且小于或等于max屬性，max屬性的值必須大子0。
<script>
var progressBar = document.getElementById('p');
function button_onclick(){
var progressBar = document.getElementById('p');
progressBar.getElementsByTagName('span')[0].textContent ="0";
for(var i=0;i<=100;i++)
updateProgress(i);
}
function updateProgress(newValue) {
var progressBar = document.getElementById('p');
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
}
</script>
<section>
<h2>progress元素的使用示例</h2>
<p>完成百分比: <progress id="p" max=100><span>0</span>%</progress></p>
<input type="button" onclick="button_onclick()" value="請點擊"/>
</section>
新增的meter元素
meter元素表示規(guī)定范圍內的數(shù)量值。例如磁盤使用量，對某個候選者的投票人數(shù)占總投票人數(shù)的比例等。
meter元素有如下六個屬性：
- value：在元素中特地表示出來的實際值。默認為0，可以給該屬性指定一個浮點小數(shù)值
- mín：指定規(guī)定的范圍時允許使用的最小值，默認為0，設定該屬性時設定的值不能小于0
- max：指定規(guī)定的范圍時允許使用的最大值，如果設定時該屬性值小于
min屬性的值， 那么把min屬性的值視為最大值。max屬性的默認值為1 - low：規(guī)定范圍的下限值。必須小于或等于
high屬性的值。同樣的，如果low屬性值小于min屬性的值，那么把min屬性的值視為low屬性的值 - high：規(guī)定范圍的上限值。如果該屬性值小于
low屬性的值，那么把low屬性的值視為high屬性的值。同樣的，如果該屬性值大于max屬性的值，那么把max屬性的值視為high屬性的值 - optimum：最佳值，屬性值必須在
min屬性值與max屬性值之間，可以大于high屬性值
<p>磁盤使用量 : <meter value="40" min="0" max="160" > 40/160</meter>GB</p>
<p>你的得分是 :
<meter value="91" min="0" max="100" low="40" high="90" optimum="100'>A+</meter>
</ p>
<!--不是一定要使用屬性-->
<meter>80%</meter>
<meter>3/4</meter>
<!--下面寫法是不正確的，因為畫面上什么都不顯示 -->
<meter min="0" max="100" value="75"></meter>
改良的ol列表
在H5中，將ol列表進行了改良，為它添加了start屬性與reversed屬性。
如果不想ol元素所代表的列表編號從1開始，可以使用star屬性來自定義編號的初始值。
<ol start=5>
<li>列表內容5</li>
<li>列表內容6</li>
<li>列表內容7</li>
</ol>
如果想對列表進行反向排序，可以使用ol列表的reversed屬性。
<ol reversed>
改良的dl列表
在HTML4中，dl元素是一個專門用來定義術語的列表，dl列表中包括幾條術語定義，列表中的每一項包含一個術語及一個或多個對那條術語的定義，這些術語與名詞解釋是多對多的關系一一一條術語可以有多個定義，但不同的術語又可能存在相同的定義，因此，從總體來說，這些術語的定義是模糊的、混亂的，經(jīng)常被誤解、錯用或者根本就不被使用了。
在H5中，將該元素進行重新定義，重新定義后的dl列表包含多個帶名字的列表項。每一項包含一條或多條帶名字的dt元素，用來表示術語，dt元素后面緊跟一個或多個dd元素，用來表示定義。在一個元素內，不允許有相同名字的dt元素，不允許有重復的術語。
dl列表可以用來定義文章或網(wǎng)頁上的術語解釋。
<article>
<h1>aritcle元素</h1>
<p>一塊獨立的內容。它可以用來表示RRS中一塊獨立的內容，也可以用來表示博客中獨立的一篇文章。...</p>
<aside>
<h2>術語解釋</h2>
<dl>
<dt><dfn>RSS</dfn></dt>
<dd>RSS也叫聚合RSS是在線共享內容的一種簡易方式(也叫聚合內容)...</dd>
<dt><dfn>博客</dfn></dt>
<dd>博客，又譯為網(wǎng)絡日志、部落格或部落閣等，是一種通常由個人管理...</dd>
</dl>
</aside>
</article>
dl列表也可以用來表示一些頁面或article元素中內容的輔助信息，例如作者、類別等。
<dl>
<dt>作者</dt>
<dd>陸凌牛</dd>
<dt>出版社</dt>
<dd>機械工業(yè)出版社</dd>
<dt>類別</dt>
<dd>網(wǎng)絡開發(fā)</dd>
</dl>
加以嚴格限制的cite元素
cite元素表示作品(例如一本書、一 篇文章、一首歌曲等)的標題。該作品可以在頁面中被詳細引用，也可以只在頁面中提一下。
在HTML4中，cite元素可以用來表示作者，但在H5中明確規(guī)定了不能用cite元素表示包括作者在內的任何人名，因為人名不是標題 (當然除非標題就是一個人的名字)。但是為了與HTML4或之前版本的網(wǎng)頁兼容，并沒有把它當作錯誤，所以這只是一個規(guī)定而已。
<h3>cite元素示例</h3>
<p>我最喜歡的電影是由甄子丹主演的<cite>精武風云</cite>。</p>
重新定義的small元素
在H5中，對small元素進行了重新定義，使其由原來的通用展示性元素變?yōu)楦唧w的、專門用來標識所謂"小字印刷體"的元素，通常用在諸如免責聲明、注意事項、能律規(guī)定、與版權相關等的法律性聲明文字中，同時不允許被應用在頁面主內容中，只允許被當做輔助信息用inline方式內嵌在頁面上使用。同時，small元素也不意味著元素中內容字體會變小，如果需要將字體變小，需要配合著css樣式表來使用。
