HTML5中的Article和Section元素怎么使用

這篇文章主要介紹“HTML5中的Article和Section元素怎么使用”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“HTML5中的Article和Section元素怎么使用”文章能幫助大家解決問(wèn)題。

成都創(chuàng)新互聯(lián)長(zhǎng)期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為介休企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)，介休網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

HTML5帶出了一系列新元素，并且將在未來(lái)被廣泛應(yīng)用。然而，有一些元素在使用時(shí)易被混淆，包括以下兩個(gè)新元素：<article>和<section>。

最常被問(wèn)起的問(wèn)題是：在什么情況下我們應(yīng)該使用這些元素？以及我們應(yīng)該如何正確的使用這些元素？

Section元素

這是一個(gè)最容易產(chǎn)生歧義的元素。它與<div>元素有什么區(qū)別？我們一直在用<div>來(lái)劃分段落，所以除了<div>,我們什么時(shí)候使用這個(gè)元素。我們引用官方文檔來(lái)闡述它。根據(jù)WHATWG文檔，對(duì)<section>元素做了以下描述：

“<section>元素表示了一篇文檔或應(yīng)用中，通用段落 - WHATWG”

從描述中我們可以看出<section>元素的作用就是分段，或多或少類似于<div>。但是它仍有一個(gè)特例。在文檔中，加入了一段特別聲明：

“當(dāng)一個(gè)元素僅用于風(fēng)格樣式或是為了腳本的方便，我們鼓勵(lì)作者使用<div>。<section>元素適用于，當(dāng)元素的內(nèi)容需要明確的列出時(shí)。- WHATWG”

基于這一點(diǎn)，我們可以總結(jié)以下兩點(diǎn)：

第一，盡管section元素在技術(shù)上是可以設(shè)計(jì)樣式的，但是當(dāng)有復(fù)雜的樣式或腳本時(shí)，我們?nèi)越ㄗh使用div元素。

第二，類似于<li>元素，section元素是用來(lái)列舉內(nèi)容的。

因此在現(xiàn)實(shí)例子中，使用<section>元素的原因是結(jié)構(gòu)化的列出博客的內(nèi)容，代碼如下：

代碼如下:

<h3 class="post-title">Blog Post Title</h3>

<p class="post-excerpt">Ice cream tart powder jelly-o.

Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>

</section>

<h3 class="post-title">Blog Post Title</h3>

<p class="post-excerpt">Ice cream tart powder jelly-o.

Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>

</section>

<h3 class="post-title">Blog Post Title</h3>

<p class="post-excerpt">Ice cream tart powder jelly-o.

Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.</p>

</section>

</div>

這只是個(gè)例子，<section>元素也可以用作其他用途。

Article元素

從名字上，它已經(jīng)很好的詮釋了自己，但是我們?nèi)砸纯垂俜轿臋n上是如何描述它的：

“在文檔，頁(yè)面，應(yīng)用或是站點(diǎn)上的一個(gè)獨(dú)立部分，并且大體上，是可獨(dú)立分配，或是重復(fù)使用的，例如在發(fā)布時(shí)。這個(gè)可以是論壇帖子，雜志或是新聞，博客條目，用戶提交的評(píng)論，互動(dòng)的小工具或小工具，或任何其他獨(dú)立項(xiàng)目的內(nèi)容?！?/p>

從上描述中，我們可以總結(jié)出<article>元素專用于結(jié)構(gòu)化文章，特別是我們要發(fā)布的，例如博客，頁(yè)面內(nèi)容或是論壇帖子。

以下例子給出了如何使用<article>構(gòu)建一個(gè)博客文章。

代碼如下:

<h2>This is Blog Post Title</h2>

<ul>

<li class="author">Author Name</li>

<li class="categories">Save in Categories</li>

</ul>

</div>

</header>

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元素結(jié)合，需要的時(shí)候，可以使用<section>元素將文章分為幾個(gè)段落，如下例所示。

代碼如下:

<h2>This is Blog Post Title</h2>

<ul>

<li class="author">Author Name</li>

<li class="categories">Save in Categories</li>

</ul>

</div>

</header>

<h3>This is the Sub-Heading</h3>

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>

<h4>This is another Sub-Heading</h4>

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>

關(guān)于“HTML5中的Article和Section元素怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

文章名稱：HTML5中的Article和Section元素怎么使用
文章源于：http://www.muchs.cn/article2/jpjpic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、關(guān)鍵詞優(yōu)化、網(wǎng)站導(dǎo)航、域名注冊(cè)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容