這篇文章主要介紹“HTML5中的Article和Section元素的用法”，在日常操作中，相信很多人在HTML5中的Article和Section元素的用法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5中的Article和Section元素的用法”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)服務(wù)緊隨時代發(fā)展步伐，進行技術(shù)革新和技術(shù)進步，經(jīng)過10余年的發(fā)展和積累，已經(jīng)匯集了一批資深網(wǎng)站策劃師、設(shè)計師、專業(yè)的網(wǎng)站實施團隊以及高素質(zhì)售后服務(wù)人員，并且完全形成了一套成熟的業(yè)務(wù)流程，能夠完全依照客戶要求對網(wǎng)站進行成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、建設(shè)、維護、更新和改版，實現(xiàn)客戶網(wǎng)站對外宣傳展示的首要目的，并為客戶企業(yè)品牌互聯(lián)網(wǎng)化提供全面的解決方案。

Section元素
這 是一個最容易產(chǎn)生歧義的元素。它與<div>元素有什么區(qū)別？我們一直在用<div>來劃分段落，所以除 了<div>,我們什么時候使用這個元素。我們引用官方文檔來闡述它。根據(jù)WHATWG文檔，對<section>元素做了以下 描述：
“<section>元素表示了一篇文檔或應(yīng)用中，通用段落 - WHATWG”

從描述中我們可以看出<section>元素的作用就是分段，或多或少類似于<div>。但是它仍有一個特例。在文檔中，加入了一段特別聲明：
“當一個元素僅用于風(fēng)格樣式或是為了腳本的方便，我們鼓勵作者使用<div>。<section>元素適用于，當元素的內(nèi)容需要明確的列出時。- WHATWG”

基于這一點，我們可以總結(jié)以下兩點：
第一，盡管section元素在技術(shù)上是可以設(shè)計樣式的，但是當有復(fù)雜的樣式或腳本時，我們?nèi)越ㄗh使用div元素。
第二，類似于<li>元素，section元素是用來列舉內(nèi)容的。

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

代碼如下:

<div class="blog">
<section class="post">
<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>
<section class="post">
<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>
<section class="post">
<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>

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

Article元素
從名字上，它已經(jīng)很好的詮釋了自己，但是我們?nèi)砸纯垂俜轿臋n上是如何描述它的：
“在文檔，頁面，應(yīng)用或是站點上的一個獨立部分，并且大體上，是可獨立分配，或是重復(fù)使用的，例如在發(fā)布時。這個可以是論壇帖子，雜志或是新聞，博客條目，用戶提交的評論，互動的小工具或小工具，或任何其他獨立項目的內(nèi)容?！?br/>
從上描述中，我們可以總結(jié)出<article>元素專用于結(jié)構(gòu)化文章，特別是我們要發(fā)布的，例如博客，頁面內(nèi)容或是論壇帖子。
以下例子給出了如何使用<article>構(gòu)建一個博客文章。

代碼如下:

<article class="post">
<header>
<h2>This is Blog Post Title</h2>
<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元素結(jié)合，需要的時候，可以使用<section>元素將文章分為幾個段落，如下例所示。

代碼如下:

<article class="post">
<header>
<h2>This is Blog Post Title</h2>
<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>
<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>
<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&eacute;e jujubes drag&eacute;e drag&eacute;e brownie jelly biscuit. Powder croissant jelly beans pastry.
</section>
</div>
</article>

到此，關(guān)于“HTML5中的Article和Section元素的用法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

分享名稱：HTML5中的Article和Section元素的用法
分享地址：http://jinyejixie.com/article46/iepgeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、Google、商城網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、關(guān)鍵詞優(yōu)化

廣告

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