怎么使用html5不常用標(biāo)簽-創(chuàng)新互聯(lián)

創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商，新人活動買多久送多久，劃算不套路！

創(chuàng)新互聯(lián)建站2013年開創(chuàng)至今，先為鎮(zhèn)江等服務(wù)建站，鎮(zhèn)江等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為鎮(zhèn)江企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

作為一個前端開發(fā)，在瀏覽別人家的頁面時總是會習(xí)慣性的查看他們頁面的源碼，發(fā)現(xiàn)大多數(shù)網(wǎng)站的頁面，包括我自己寫的頁面中用到的最多的布局元素?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)了，為什么在布局的時候不用寫html5提供的具有語義化的標(biāo)簽進(jìn)行布局呢？我個人覺得是因為我們剛開始學(xué)習(xí)布局的時候用的最多就是上面的這些標(biāo)簽，而當(dāng)html5新標(biāo)簽出來的時候我們已經(jīng)使用div布局很久了，并且可能由于工作忙的原因沒有很認(rèn)真的去了解這些標(biāo)簽的應(yīng)用場景，久而久之我們還是在使用div布局。

1、fieldset 標(biāo)簽

<fieldset>標(biāo)簽為表單分組標(biāo)簽，它可以將內(nèi)容相關(guān)聯(lián)的一組表單進(jìn)行分組。

1.1、應(yīng)用場景1 - 表單分組

如果一個表單上有很多信息需要填寫，可以使用<fieldset>標(biāo)簽將相關(guān)的表單項組合在一起，使表單更容易理解，表單越容易理解，訪問者就越有可能正確的填寫表單。

基本使用及默認(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)用場景2 - 其他分組

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

2、figure 標(biāo)簽

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

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

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

<figure>
  <img src="search_icon.png"/>
  <figcaption> 搜索引擎</figcaption>
</figure>

2.2、應(yī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)用場景3 - figure標(biāo)簽單獨結(jié)合figurecaption標(biāo)簽使用

figure標(biāo)簽單獨結(jié)合figurecaption標(biāo)簽使用時可以實現(xiàn)類似下面的這種對某一塊內(nèi)容的說明。

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

<figure>
  <figurecaption>網(wǎng)站問題 一站解決</figurecaption>
  <p>海量節(jié)點 + 海外 CDN 加速，助力企業(yè)高速、安全觸達(dá)用戶</p>
</figure>

3、section 標(biāo)簽

<section>標(biāo)簽用于對網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊

一個section元素通常由內(nèi)容及標(biāo)題組成
但當(dāng)一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div。

section元素強調(diào)分段或分塊，一塊內(nèi)容分為幾段或幾塊；
article元素強調(diào)獨立性，一塊內(nèi)容獨立完整;

沒有標(biāo)題內(nèi)容區(qū)域塊，不要用section，即section中應(yīng)有h2-h7標(biāo)簽

可以用來呈現(xiàn)論壇的一個帖子，評論列表，可互動的頁面模塊掛件，雜志或報紙中的一篇文章，國際時事版塊、體育版塊、娛樂版塊、文學(xué)版塊等等，像這種有版塊標(biāo)題的、內(nèi)容屬于一類的版塊等就可以使用section。

4、aside 標(biāo)簽

<aside>標(biāo)簽一般表示網(wǎng)站當(dāng)前頁面或者文章的附屬信息部分，可以包含與當(dāng)前頁面主要內(nèi)容相關(guān)的廣告、導(dǎo)航條、引用、側(cè)邊欄評語部分，以及其他區(qū)別與主要內(nèi)容的部分

5、address 標(biāo)簽

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

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

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

6、menu 標(biāo)簽

<menu>標(biāo)簽可以用來定義頁面的菜單

<menu>
  <a href="/">首頁<a>
    <a href="/">新聞</a>
    <a href="/">視頻<a>
</menu>

7、time 標(biāo)簽

<time>標(biāo)簽用來表現(xiàn)時間或日期

<p>我們在每天早上 <time>9:00</time> 開始營業(yè)。</p>
<!--參數(shù)-->
<p>我在 <time datetime="2019-12-16">情人節(jié)</time> 有個約會。 </p>
<p>
  <!-- 是否為發(fā)布時間 -->
  <time pubdate="true">發(fā)布時間</time>
</p>

8、mark 標(biāo)簽

<mark> 標(biāo)簽定義帶有記號的文本。出于引用的目的，對與另一個上下文相關(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)建一個可展開折疊的元件，讓一段文字或標(biāo)題包含一些隱藏的信息。

一般情況下，<details>用來對顯示在頁面的內(nèi)容做進(jìn)一步驟解釋。其展現(xiàn)出來的效果和jQuery手風(fēng)琴插件差不多。

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

<details>
  <!-- 一個details標(biāo)簽中只能有一個summary標(biāo)簽，多余的summary標(biāo)
  簽會被當(dāng)做正常內(nèi)容來處理。summary標(biāo)簽用來作為details標(biāo)簽的標(biāo)
  題，它必須和details標(biāo)簽使用，離開details標(biāo)簽單獨使用沒有任何意義 -->
  <summary>什么是html？</summary>
  <p>HTML稱為超文本標(biāo)記語言，是一種標(biāo)識性的語言。</p>
</details>

10、meter 標(biāo)簽

<meter>標(biāo)簽用來定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測量，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)簽時所顯示的內(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>用于對長文本的引用，用來定義一段引語，默認(rèn)效果標(biāo)簽內(nèi)的內(nèi)容會自動有縮進(jìn)；
如這篇文章的開頭就用了<blockquote>標(biāo)簽

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

關(guān)于怎么使用html5不常用標(biāo)簽問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道了解更多相關(guān)知識。

名稱欄目：怎么使用html5不常用標(biāo)簽-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://chinadenli.net/article0/cdjpoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、定制開發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站維護(hù)、網(wǎng)站導(dǎo)航、做網(wǎng)站

聲明：本網(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)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么使用html5不常用標(biāo)簽-創(chuàng)新互聯(lián)