站長(zhǎng)資訊網(wǎng)
作為一個(gè)前端開發(fā)，在瀏覽別人家的頁(yè)面時(shí)總是會(huì)習(xí)慣性的查看他們頁(yè)面的源碼，發(fā)現(xiàn)大多數(shù)網(wǎng)站的頁(yè)面，包括我自己寫的頁(yè)面中用到的最多的布局元素?zé)o外乎就是div、p、span、ul、dl、ol、li、dt、dd、strong、b，不管是什么樣的效果都是由這些元素組成。
現(xiàn)在都已經(jīng)是9102年了，html5已經(jīng)相當(dāng)成熟標(biāo)準(zhǔn)了，為什么在布局的時(shí)候不用寫html5提供的具有語義化的標(biāo)簽進(jìn)行布局呢？我個(gè)人覺得是因?yàn)槲覀儎傞_始學(xué)習(xí)布局的時(shí)候用的最多就是上面的這些標(biāo)簽，而當(dāng)html5新標(biāo)簽出來的時(shí)候我們已經(jīng)使用div布局很久了，并且可能由于工作忙的原因沒有很認(rèn)真的去了解這些標(biāo)簽的應(yīng)用場(chǎng)景，久而久之我們還是在使用div布局。
1、fieldset 標(biāo)簽
<fieldset>標(biāo)簽為表單分組標(biāo)簽，它可以將內(nèi)容相關(guān)聯(lián)的一組表單進(jìn)行分組。
1.1、應(yīng)用場(chǎng)景1 – 表單分組
如果一個(gè)表單上有很多信息需要填寫，可以使用<fieldset>標(biāo)簽將相關(guān)的表單項(xiàng)組合在一起，使表單更容易理解，表單越容易理解，訪問者就越有可能正確的填寫表單。
基本使用及默認(rèn)效果：
<fieldset> <legend>用戶基本信息</legend> <div> <label for="">用戶名</label> <input type="text"> </div> <div> <label for="">電子郵箱</label> <input type="password"> </div> <div> <label for="">密 碼</label> <input type="password"> </div> <div> <label for="">確認(rèn)密碼</label> <input type="password"> </div> </fieldset>
美化后的表單
1.2、應(yīng)用場(chǎng)景2 – 其他分組
2、figure 標(biāo)簽
<figure> 用于對(duì)元素進(jìn)行組合，一般用于圖片、視頻、圖表、代碼等。
2.1 、應(yīng)用場(chǎng)景1 – figure標(biāo)簽與圖片混合使用
<figure> <img src="search_icon.png"/> <figcaption> 搜索引擎</figcaption> </figure>
2.2、應(yīng)用場(chǎng)景2 – figure標(biāo)簽與dt、dd標(biāo)簽結(jié)合使用
<figure> <dt>這是標(biāo)題</dt> <dd>這是描述</dd> </figure>
2.3、應(yīng)用場(chǎng)景3 – figure標(biāo)簽單獨(dú)結(jié)合figurecaption標(biāo)簽使用
figure標(biāo)簽單獨(dú)結(jié)合figurecaption標(biāo)簽使用時(shí)可以實(shí)現(xiàn)類似下面的這種對(duì)某一塊內(nèi)容的說明。
<figure> <figurecaption>網(wǎng)站問題 一站解決</figurecaption> <p>海量節(jié)點(diǎn) + 海外 CDN 加速，助力企業(yè)高速、安全觸達(dá)用戶</p> </figure>
3、section 標(biāo)簽
<section>標(biāo)簽用于對(duì)網(wǎng)站或應(yīng)用程序中頁(yè)面上的內(nèi)容進(jìn)行分塊
一個(gè)section元素通常由內(nèi)容及標(biāo)題組成但當(dāng)一個(gè)容器需要被直接定義樣式或通過腳本定義行為時(shí)，推薦使用div。
section元素強(qiáng)調(diào)分段或分塊，一塊內(nèi)容分為幾段或幾塊；
article元素強(qiáng)調(diào)獨(dú)立性，一塊內(nèi)容獨(dú)立完整;
沒有標(biāo)題內(nèi)容區(qū)域塊，不要用section，即section中應(yīng)有h1-h6標(biāo)簽
可以用來呈現(xiàn)論壇的一個(gè)帖子，評(píng)論列表，可互動(dòng)的頁(yè)面模塊掛件，雜志或報(bào)紙中的一篇文章，國(guó)際時(shí)事版塊、體育版塊、娛樂版塊、文學(xué)版塊等等，像這種有版塊標(biāo)題的、內(nèi)容屬于一類的版塊等就可以使用section。
4、aside 標(biāo)簽
<aside>標(biāo)簽一般表示網(wǎng)站當(dāng)前頁(yè)面或者文章的附屬信息部分，可以包含與當(dāng)前頁(yè)面主要內(nèi)容相關(guān)的廣告、導(dǎo)航條、引用、側(cè)邊欄評(píng)語部分，以及其他區(qū)別與主要內(nèi)容的部分
5、address 標(biāo)簽
<address> 元素可以讓作者為它最近的 <article> 或者 <body> 祖先元素提供聯(lián)系信息。在后一種情況下，它應(yīng)用于整個(gè)文檔
- 當(dāng)表示一個(gè)和聯(lián)系信息無關(guān)的任意的地址時(shí)，應(yīng)使用 <p> 元素
- 這個(gè)元素不能包含除了聯(lián)系信息之外的任何信息，比如出版日期
- 通常
<address>元素可以放在當(dāng)前<section>的<footer>元素中，如果存在的話
6、menu 標(biāo)簽
<menu>標(biāo)簽可以用來定義頁(yè)面的菜單
<menu> <a href="/">首頁(yè)<a> <a href="/">新聞</a> <a href="/">視頻<a> </menu>
7、time 標(biāo)簽
<time>標(biāo)簽用來表現(xiàn)時(shí)間或日期
<p>我們?cè)诿刻煸缟?<time>9:00</time> 開始營(yíng)業(yè)。</p> <!--參數(shù)--> <p>我在 <time datetime="2019-12-16">情人節(jié)</time> 有個(gè)約會(huì)。 </p> <p> <!-- 是否為發(fā)布時(shí)間 --> <time pubdate="true">發(fā)布時(shí)間</time> </p>
8、mark 標(biāo)簽
<mark> 標(biāo)簽定義帶有記號(hào)的文本。出于引用的目的，對(duì)與另一個(gè)上下文相關(guān)的文本進(jìn)行突出顯示
<div> <h1>美女</h1> <p>四大<mark>美女</mark></p> <p>楊玉環(huán)是<mark>美女</mark></p> <p>鳳姐也是<mark>美女</mark></p> </div>
9、details 標(biāo)簽
<details>標(biāo)簽允許用戶創(chuàng)建一個(gè)可展開折疊的元件，讓一段文字或標(biāo)題包含一些隱藏的信息。
一般情況下，<details>用來對(duì)顯示在頁(yè)面的內(nèi)容做進(jìn)一步驟解釋。其展現(xiàn)出來的效果和jQuery手風(fēng)琴插件差不多。
<details> <!-- 一個(gè)details標(biāo)簽中只能有一個(gè)summary標(biāo)簽，多余的summary標(biāo) 簽會(huì)被當(dāng)做正常內(nèi)容來處理。summary標(biāo)簽用來作為details標(biāo)簽的標(biāo) 題，它必須和details標(biāo)簽使用，離開details標(biāo)簽單獨(dú)使用沒有任何意義 --> <summary>什么是html？</summary> <p>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識(shí)性的語言。</p> </details>
10、meter 標(biāo)簽
<meter>標(biāo)簽用來定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測(cè)量，meter標(biāo)簽的效果很像進(jìn)度條，但是它不作為進(jìn)度條來使用。如果要表示進(jìn)度條，通常使用progress標(biāo)簽。
<h2>66%</h2> <meter value="66" high="100" low="0" max="100" min="0"></meter>
11、ruby 標(biāo)簽
<ruby>標(biāo)簽是使用來定義ruby注釋（中文注音或字符），如果在東亞使用，顯示的是東亞字符的發(fā)音。<ruby>標(biāo)簽通常和<rt>標(biāo)簽和<rp>標(biāo)簽一起使用，<rt>標(biāo)簽用來提供注釋信息（如：拼音），<rp>標(biāo)簽用來定義瀏覽器不支持ruby標(biāo)簽時(shí)所顯示的內(nèi)容。
<ruby style="font-size: 28px;"> 李 <rp>(</rp> <rt style="font-size: 22px;">li</rt> <rp>)</rp> </ruby>
12、blockquote 標(biāo)簽
<blockquote>用于對(duì)長(zhǎng)文本的引用，用來定義一段引語，默認(rèn)效果標(biāo)簽內(nèi)的內(nèi)容會(huì)自動(dòng)有縮進(jìn)；
如這篇文章的開頭就用了<blockquote>標(biāo)簽
