您好,登錄后才能下訂單哦!
HTML5中section元素的作用是什么?這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
HTML5—新語義元素header、nav、section、article、aside、footer等
在HTML5中相對(duì)于以往版本的文檔書寫方面,追加了一些標(biāo)簽。如頁眉、頁腳、內(nèi)容區(qū)等等的元素結(jié)構(gòu)。其中在主體結(jié)構(gòu)元素中增加了article及section元素。那么他們兩個(gè)有什么區(qū)別呢,什么時(shí)候用article,什么是用section
什么是article:HTML5中的article標(biāo)簽是什么?HTML5中的article元素用在什么地方?
今天就讓我們來講講新語義元素中的<section>元素的定義:
<section>:它定義文檔中的節(jié)(section、區(qū)段)。比如章節(jié)、頁眉、頁腳或文檔中的其他部分,section通常 包含了一組內(nèi)容及其標(biāo)題。
HTML5中section元素的作用:
section元素是對(duì)頁面上的內(nèi)容分塊處理,例如對(duì)文章分段等,相鄰的section元素的內(nèi)容,應(yīng)當(dāng)是相關(guān)的,而不是像article那樣獨(dú)立。例如一篇文章:
<article> <header><h2>計(jì)算機(jī)各類語言介紹</h2></header> <p>本文列舉了部分計(jì)算機(jī)語言的一些介紹</p> <section> <h3>JavaScript</h3> <p>js是一門……</p> </section> <section> <h3>HTML</h3> <p>HTML是一門……</p> </section> <footer>版權(quán)歸微也所有</footer> </article>
HTML5中的section標(biāo)簽怎么居中:
我是覺得使用css樣式,text-align:center,這個(gè)來居中,來看看實(shí)例:
<!DOCTYPE HTML> <html> <meta charset="UTF-8" /> <head> <title>億速云</title> </head> <script src="http://lwww.php.cn/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> html, body { margin: 0; padding: 0; } .demo {} </style> <body> <div class="demo"> <section style="text-align: center;"> <h2>title</h2> <p>2017-07-11</p> </section> </div> </body> </html>
盡管section元素在技術(shù)上是可以設(shè)計(jì)樣式的,但是當(dāng)有復(fù)雜的樣式或腳本時(shí),我們?nèi)越ㄗh使用div元素。
類似于<li>元素,section元素是用來列舉內(nèi)容的。
因此在現(xiàn)實(shí)例子中,使用<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>
這只是個(gè)例子,<section>元素也可以用作其他用途。
【元素有話說】
section:
hello,ladies and gentlemen,我是section。我參加的國(guó)際會(huì)議,是這么介紹我的,“The section element represents a generic section of a document or application. A section , in this context, is a thematic grouping of content, typically with a heading.” 我是帶有語義的div,“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”我出席的場(chǎng)景一般是有文章的章節(jié)、標(biāo)簽對(duì)話框中的標(biāo)簽頁、或者論文中有編號(hào)的部分。一個(gè)網(wǎng)站的主頁可以分成簡(jiǎn)介、新聞和聯(lián)系信息等幾部分。我不僅僅是一個(gè)普通的容器標(biāo)簽。當(dāng)一個(gè)標(biāo)簽只是為了樣式化或者方便腳本使用時(shí),應(yīng)該去找我的朋友 div 。一般來說,當(dāng)元素內(nèi)容明確地出現(xiàn)在文檔大綱中時(shí),我是很好的人選。通常會(huì)帶有標(biāo)題,<section><h2></h2><p></p></section>。我會(huì)用于對(duì)網(wǎng)站或者應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊。
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)HTML5中section元素的作用是什么大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。