您知道這八個HTML5標籤嗎？

網站構建期間，Web開發人員在網站構建過程中使用了許多HTML標籤。雖然許多人熟悉 ，

和<p></p>>的常見HTML5標籤，但一些鮮為人知的標籤具有顯著優勢。 本文探討了八個這樣的標籤，檢查了其W3C規格並提供了實際示例。 <h1></h1>

>了解html5標籤用法

> W3C規格提供概念概述，但實際應用可能具有挑戰性。 良好的做法並不總是嚴格定義；本文提供了推薦的用法示例。

鑰匙要點<p></p>

>使用來突出顯示與用戶活動相關的文本，提高可見性。

>使用

• 對不太重要的文本，最大程度地減少視覺影響。 <mark></mark>>使用
用於簡短的內聯行情，
• 用於較長的摘錄，保持語義精度。 <small></small>
實現
• ，<q></q>和<blockquote></blockquote>標記添加，刪除和校正，在編輯中有用。
>
• >與<ins></ins><del></del>組合選項，以分類選擇，增強用戶體驗。 <s></s>
• <select></select> 1。上下文突出顯示，<optgroup></optgroup>

>

標籤表示“相關性”或“審查”。 相關性與上下文有關；在特定活動中有用時，元素很重要。例如，搜索結果可以用<mark></mark>標記以指示與搜索查詢相關的。 >

實踐示例：

在“最便宜的假期套餐”頁面上，可以使用<mark></mark>來強調最便宜的套餐的價格：<mark></mark>>

最佳實踐：<mark></mark>不應僅用於樣式；為此使用CSS。 不要使用它來表示重要性（為此使用 >>）。使用

突出顯示與當前用戶操作相關。

<div class="deal-list">
  <div>
    <h2 id="Vanuatu-Cruise">Vanuatu Cruise</h2>
    <p><mark>9</mark> - 5 Nights</p>
    <p>A relaxing cruise...</p>
  </div>
  <div>
    <h2 id="Fiji-Resort-Getaway">Fiji Resort Getaway</h2>
    <p><mark>9</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet...</p>
  </div>
  <div>
    <h2 id="Pacific-Island-Hiking">Pacific Island Hiking</h2>
    <p>99 - 5 Nights</p>
    <p>Hike your way...</p>
  </div>
</div>

2。 <mark></mark>較低的重要性 <strong></strong><em></em>降低了文本大小，其語義含義的視覺副產品：表示較低的重要性。 使用它以獲取不太關鍵的信息，通常在頁腳或側邊欄中發現。 <mark></mark>>

實踐：在頁腳中： <small></small> 或產品列表中：

<small></small>

最佳實踐：

不能降低已使用 或強調的文本的重要性。 不要僅將其用於尺寸控制。

<small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small>

3。帶有

和

<h3 id="Woolen-Llama-Print-Jumper">Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small>

>的報價

>使用<q></q>用於簡短的內聯報價，<blockquote></blockquote>用於更長的塊引號。 這些是用於引號，而不是樣式（為此使用<span></span>）。

>

實例：

<q>He hasn't eaten anything as good in his whole life!</q>

<div class="deal-list">
  <div>
    <h2 id="Vanuatu-Cruise">Vanuatu Cruise</h2>
    <p><mark>9</mark> - 5 Nights</p>
    <p>A relaxing cruise...</p>
  </div>
  <div>
    <h2 id="Fiji-Resort-Getaway">Fiji Resort Getaway</h2>
    <p><mark>9</mark> - 6 Nights</p>
    <p>Includes all you can eat buffet...</p>
  </div>
  <div>
    <h2 id="Pacific-Island-Hiking">Pacific Island Hiking</h2>
    <p>99 - 5 Nights</p>
    <p>Hike your way...</p>
  </div>
</div>

最佳實踐：兩種支持屬性（源的url）和> tags（源標題）。 cite<cite></cite> 4。插入，刪除和校正

，

和<ins></ins><del></del><s></s>>

>標記添加了文本，

刪除了文本，<ins></ins>文本不再正確。 所有支持<del></del>和<s></s>屬性的屬性。 cite> datetime

實例：

>

>最佳實踐：

<small>Designed and developed by Simon Codrington. © 2016 My Company - All rights reserved</small>

>使用

用於更換原件的校正。不要僅將其用於樣式。 <s></s>5。用

組織選項 <optgroup></optgroup>>對

元素中的選項進行分類，從而改善導航。它具有

>和<optgroup></optgroup>>屬性。 <select></select> label disabled實例：

<strong></strong>最佳實踐：

<h3 id="Woolen-Llama-Print-Jumper">Woolen Llama Print Jumper</h3>
<em>.99</em><small> - Excludes tax</small>

本身無法直接選擇或定型。

> 6。預定義的選項，帶有 <optgroup></optgroup>

>定義了標籤的有效選擇，提供了下拉建議列表。 <datalist></datalist>

實例：

<datalist></datalist> <input>

>最佳實踐：

瀏覽器支持變化；驗證取決於>類型。 總之，這些經常被忽視的HTML5標籤提供了有價值的語義增強和改進的用戶體驗。 了解它們的適當使用會導致更清潔，更容易訪問和更有效的網絡開發。

以上是您知道這八個HTML5標籤嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！