溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么使用html5不常用標(biāo)簽

發(fā)布時(shí)間：2020-07-29 09:57:20 來源：億速云 閱讀：224 作者：Leah 欄目：web開發(fā)

怎么使用html5不常用標(biāo)簽？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

作為一個(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提供的具有語(yǔ)義化的標(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)效果：

怎么使用html5不常用標(biāo)簽

<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>

美化后的表單

怎么使用html5不常用標(biāo)簽

1.2、應(yīng)用場(chǎng)景2 - 其他分組

怎么使用html5不常用標(biāo)簽

怎么使用html5不常用標(biāo)簽

2、figure 標(biāo)簽

<figure> 用于對(duì)元素進(jìn)行組合，一般用于圖片、視頻、圖表、代碼等。

2.1 、應(yīng)用場(chǎng)景1 - figure標(biāo)簽與圖片混合使用

怎么使用html5不常用標(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é)合使用

怎么使用html5不常用標(biāo)簽

<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)容的說明。

怎么使用html5不常用標(biāo)簽

<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)有h2-h7標(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)語(yǔ)部分，以及其他區(qū)別與主要內(nèi)容的部分

5、address 標(biāo)簽

<address> 元素可以讓作者為它最近的 <article> 或者 <body> 祖先元素提供聯(lián)系信息。在后一種情況下，它應(yīng)用于整個(gè)文檔

  • 當(dāng)表示一個(gè)和聯(lián)系信息無(wú)關(guān)的任意的地址時(shí)，應(yīng)使用 <p> 元素
  • 這個(gè)元素不能包含除了聯(lián)系信息之外的任何信息，比如出版日期
  • 通常<address> 元素可以放在當(dāng)前<section>的 <footer> 元素中，如果存在的話

怎么使用html5不常用標(biāo)簽

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)行突出顯示

怎么使用html5不常用標(biāo)簽

<div>
  <h2>美女</h2>
  <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)琴插件差不多。

怎么使用html5不常用標(biāo)簽

<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)記語(yǔ)言，是一種標(biāo)識(shí)性的語(yǔ)言。</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)簽。

怎么使用html5不常用標(biāo)簽

<h3>66%</h3>
<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)容。

怎么使用html5不常用標(biāo)簽

<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)文本的引用，用來定義一段引語(yǔ)，默認(rèn)效果標(biāo)簽內(nèi)的內(nèi)容會(huì)自動(dòng)有縮進(jìn)；
如這篇文章的開頭就用了<blockquote>標(biāo)簽

怎么使用html5不常用標(biāo)簽

關(guān)于怎么使用html5不常用標(biāo)簽問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問一下細(xì)節(jié)

免責(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)容。

AI
助
手