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