HTML5中的Article和Section元素認識及使用_HTML5教程
推薦：用HTML5實現(xiàn)網(wǎng)站在windows8中貼靠的方法本篇文章小編為大家介紹，用HTML5實現(xiàn)網(wǎng)站在windows8中貼靠的方法。需要的朋友參考下
HTML5帶出了一系列新元素，并且將在未來被廣泛應用。然而，有一些元素在使用時易被混淆，包括以下兩個新元素：<article>和<section>。
最常被問起的問題是：在什么情況下我們應該使用這些元素？以及我們應該如何正確的使用這些元素？
Section元素
這 是一個最容易產(chǎn)生歧義的元素。它與<div>元素有什么區(qū)別？我們一直在用<div>來劃分段落，所以除 了<div>,我們什么時候使用這個元素。我們引用官方文檔來闡述它。根據(jù)WHATWG文檔，對<section>元素做了以下 描述：
“<section>元素表示了一篇文檔或應用中，通用段落 - WHATWG”
從描述中我們可以看出<section>元素的作用就是分段，或多或少類似于<div>。但是它仍有一個特例。在文檔中，加入了一段特別聲明：
“當一個元素僅用于風格樣式或是為了腳本的方便，我們鼓勵作者使用<div>。<section>元素適用于，當元素的內(nèi)容需要明確的列出時。- WHATWG”
基于這一點，我們可以總結以下兩點：
第一，盡管section元素在技術上是可以設計樣式的，但是當有復雜的樣式或腳本時，我們?nèi)越ㄗh使用div元素。
第二，類似于<li>元素，section元素是用來列舉內(nèi)容的。
因此在現(xiàn)實例子中，使用<section>元素的原因是結構化的列出博客的內(nèi)容，代碼如下：
復制代碼 代碼如下:m.ghpqjb.com
<div class="blog">
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
<section class="post">
<h2 class="post-title">Blog Post Title</h2>
<p class="post-excerpt">Ice cream tart powder jelly-o.
Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>
</section>
</div>
這只是個例子，<section>元素也可以用作其他用途。
Article元素
從名字上，它已經(jīng)很好的詮釋了自己，但是我們?nèi)砸纯垂俜轿臋n上是如何描述它的：
“在文檔，頁面，應用或是站點上的一個獨立部分，并且大體上，是可獨立分配，或是重復使用的，例如在發(fā)布時。這個可以是論壇帖子，雜志或是新聞，博客條目，用戶提交的評論，互動的小工具或小工具，或任何其他獨立項目的內(nèi)容。”
從上描述中，我們可以總結出<article>元素專用于結構化文章，特別是我們要發(fā)布的，例如博客，頁面內(nèi)容或是論壇帖子。
以下例子給出了如何使用<article>構建一個博客文章。
復制代碼 代碼如下:m.ghpqjb.com
<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
halvah gummies danish biscuit applicake gingerbread jelly-o pastry.
</div>
</article>
此外，<article>元素還可與section元素結合，需要的時候，可以使用<section>元素將文章分為幾個段落，如下例所示。
復制代碼 代碼如下:m.ghpqjb.com
<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
<section>
<h2>This is the Sub-Heading</h2>
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
gummies danish biscuit applicake gingerbread jelly-o pastry.
</section>
<section>
<h3>This is another Sub-Heading</h3>
Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
Cheesecake gummi bears dragée jujubes dragée dragée brownie jelly biscuit. Powder croissant jelly beans pastry.
</section>
</div>
</article>
總結
如萬維網(wǎng)的創(chuàng)始人和W3C的董事所預測的那般，所有HTML5創(chuàng)造出來的新元素都是為了是網(wǎng)絡結構更加語義化。如何正確的應用這些元素在網(wǎng)絡開發(fā)者和設計者之間，仍存有爭論。
無論如何，不要混淆觀點。如我之前提出的，只要是合理的情況，且你看到使用了它使得結構變得意義非凡，那么請用它。
分享：HTML5之HTML元素擴展(下)—增強的Form表單元素值得關注在HTML5增強的元素中，最值得關注的就是表單元素;在HTML5中，表單已經(jīng)做了重大的修整，一些以前需要通過JavaScript編碼實現(xiàn)的功能現(xiàn)在無需編碼就可輕松實現(xiàn),感興趣的朋友可以詳細了解下，或許對你有所幫助
相關HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對各個標簽的定義與規(guī)定：body的介紹
- 關于HTML5的安全問題開發(fā)人員需要牢記的
- 關于HTML5的22個初級技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實踐-圖片設置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡介
- HTML5 Web存儲方式的localStorage和sessionStorage進行數(shù)據(jù)本地存儲案例應用
- Bootstrap 學習分享
- input元素的url類型和email類型簡介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- HTML中fieldset標簽概述及使用方法
- HTML5之SVG 2D入門12—SVG DOM及DOM操作介紹
- html5 Canvas畫圖教程(10)—把面拆成線條模擬出圓角矩形
- 基于Modernizr 讓網(wǎng)站進行優(yōu)雅降級的分析
- html5 web本地存儲將取代我們的cookie
- 在html5的Canvas上繪制橢圓的幾種方法總結
- HTML5本地存儲之Database Storage應用介紹
- 使用css創(chuàng)建三角形 使用CSS3創(chuàng)建3d四面體原理及代碼(html5實踐)
- html5 跨文檔消息傳輸示例探討
- html5 Canvas畫圖教程(11)—使用lineTo/arc/bezierCurveTo畫橢圓形
- 相關鏈接：
- 教程說明：
HTML5教程-HTML5中的Article和Section元素認識及使用
。