html5不常用標籤可以怎麼使用？

作為一個前端開發，在瀏覽別人家的頁面時總是會習慣性的查看他們頁面的源碼，發現大多數網站的頁面，包括我自己寫的頁面中用到的最多的佈局元素無外乎就是div、p、span、ul、dl 、ol、li、dt、dd、strong、b，不管是什麼樣的效果都是由這些元素組成。

現在都已經是9102年了，html5已經相當成熟標準了，為什麼在佈局的時候不用寫html5提供的具有語義化的標籤進行佈局呢？我個人覺得是因為我們剛開始學習佈局的時候用的最多就是上面的這些標籤，而當html5新標籤出來的時候我們已經使用div佈局很久了，並且可能由於工作忙的原因沒有很認真的去了解這些標籤的應用場景，久而久之我們還是在使用div版面。

1、fieldset 標籤

<fieldset></fieldset>標籤為表單分組標籤，它可以將內容關聯的一組表單分組。

1.1、應用場景1 - 表單分組

#如果一個表單上有很多資訊需要填寫，可以使用<fieldset>標籤將相關的表單項目組合在一起，使表單更容易理解，表單越容易理解，訪客就越有可能正確的填寫表單。 </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></figure> 用於對元素進行組合，一般用於圖片、影片、圖表、程式碼等。

2.1 、應用程式場景1 - ##figure標籤與圖片混合使用

<figure>
  <img  src="/static/imghwm/default1.png"  data-src="search_icon.png"  class="lazy"  / alt="html5不常用標籤可以怎麼使用？" >
  <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元素通常由內容及標題組成

##但當一個容器需要被直接定義樣式或透過腳本定義行為時，建議使用div。
section元素強調分段或分塊，一塊內容分成幾段或幾塊；article元素強調獨立性，一塊內容獨立完整;

沒有標題內容區域區塊，不要用section，即section中應有h1-h6標籤

可以用來呈現論壇的一個帖子，評論列表，可互動的頁面模組掛件，雜誌或報紙中的一篇文章，國際時事版塊、體育版塊、娛樂版塊、文學版塊等等，像這種有版塊標題的、內容屬於一類的版塊等就可以使用section。

4、aside 標籤

<aside></aside>標籤一般表示網站目前頁面或文章的附屬資訊部分，可以包含

與目前頁面主要內容相關的廣告、導覽條、引用、側邊欄評論部分

，以及其他區別與主要內容的部分<h2 id="code-address-code-标签">5、<code>address 标签

<address></address> 元素可以让作者为它最近的 <article> </article>或者  祖先元素提供联系信息。在后一种情况下，它应用于整个文档

• 当表示一个和联系信息无关的任意的地址时，应使用 

   元素

• 这个元素不能包含除了联系信息之外的任何信息，比如出版日期
• 通常<address> </address>元素可以放在当前<section></section>的 <footer></footer> 元素中，如果存在的话

6、menu 标签

<menu></menu>标签可以用来定义页面的菜单

<menu>
  <a href="/">首页<a>
    <a href="/">新闻</a>
    <a href="/">视频<a>
</menu>

7、time 标签

<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></mark> 标签定义带有记号的文本。出于引用的目的，对与另一个上下文相关的文本进行突出显示

<div>
  <h1 id="美女">美女</h1>
  <p>四大<mark>美女</mark></p>
  <p>杨玉环是<mark>美女</mark></p>
  <p>凤姐也是<mark>美女</mark></p>
</div>

9、details 标签

<details></details>标签允许用户创建一个可展开折叠的元件，让一段文字或标题包含一些隐藏的信息。

一般情况下，<details></details>用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jQuery手风琴插件差不多。

<details>
  <!-- 一个details标签中只能有一个summary标签，多余的summary标
  签会被当做正常内容来处理。summary标签用来作为details标签的标
  题，它必须和details标签使用，离开details标签单独使用没有任何意义 -->
  <summary>什么是html？</summary>
  <p>HTML称为超文本标记语言，是一种标识性的语言。</p>
</details>

10、meter 标签

<meter></meter>标签用来定义已知范围或分数值内的标量测量，meter标签的效果很像进度条，但是它不作为进度条来使用。如果要表示进度条，通常使用progress标签。

<h2 id="">66%</h2>
<meter value="66" high="100" low="0" max="100" min="0"></meter>

11、ruby 标签

<ruby></ruby>标签是使用来定义ruby注释（中文注音或字符），如果在东亚使用，显示的是东亚字符的发音。
<ruby></ruby>标签通常和<rt></rt>标签和<rp></rp>标签一起使用，<rt></rt>标签用来提供注释信息（如：拼音），<rp></rp>标签用来定义浏览器不支持ruby标签时所显示的内容。

<ruby   style="max-width:90%">
  李
  <rp>(</rp>
  <rt style="font-size: 22px;">li</rt>
  <rp>)</rp>
</ruby>

12、blockquote 标签

<blockquote></blockquote>用于对长文本的引用，用来定义一段引语，默认效果标签内的内容会自动有缩进；
如这篇文章的开头就用了<blockquote></blockquote>标签

以上是html5不常用標籤可以怎麼使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！