使用您可能會錯過的這些 HTML 標籤讓您的 HTML 脫穎而出

解鎖 HTML 的隱藏寶石：您應該知道的 11 個鮮為人知的標籤

HTML 作為網頁的支柱，比許多人意識到的更通用。雖然 <code><p></p> 和 <code><h1></h1> 等熟悉的標籤是必不可少的，但一些鮮為人知的標籤提供了強大的功能和改進的可訪問性。 本文探討了 11 個此類隱藏的 HTML 瑰寶。 即使是經驗豐富的開發人員也可能會發現一些驚喜！

1. <code><abbr></abbr> 標籤：定義縮寫

<code><abbr></abbr> 標籤可以優雅地處理首字母縮寫詞和縮寫詞。 只需將縮寫包含在標籤內，並使用 <code>title 屬性提供完整意義。

懸停時，<code>title 屬性的內容顯示為工具提示，增強使用者理解。 請記住，此工具提示功能依賴懸停，這可能並非所有使用者（例如行動裝置）都可以存取。

2. <code><code> 標籤：反白程式碼片段

對於乾淨的程式碼演示，<code><code> 標籤非常寶貴。 在此標記中包含程式碼會自動將其呈現為等寬字體，從而可以輕鬆地將其與周圍的文字區分開來。 使用 CSS 進一步設定樣式可以增強可讀性。

3. <code><kbd></kbd> 標籤：代表鍵盤輸入

與<code><code>類似，<code><kbd></kbd>標籤（鍵盤標籤）是專門為表示鍵盤輸入而設計的。 封閉的文字以等寬字體顯示，直觀地指示鍵盤快速鍵或命令。 將其與 CSS 結合，打造精美的鍵盤按鈕外觀。

4. <code><datalist></datalist> 和 <code><option></option> 標籤：建立動態建議

這些標籤協同工作以建立直覺的輸入建議。

具有 <code><input> 屬性的 <code>list 元素連結到 <code><datalist></datalist> 元素（由其 <code>id 指定）。 <code><option></option> 中的 <code><datalist></datalist> 標籤提供建議值。當使用者輸入時，會出現相關建議。

5. <code><dialog></dialog> 標籤：建立簡單模態

使用 <code><dialog></dialog> 標籤建立彈出框或模式變得簡單。 新增 <code>open 屬性會顯示對話框； JavaScript 可以進一步控制其行為。

6. <code><details></details> 和 <code><summary></summary> 標籤：原生可折疊內容

使用 <code><details></details> 和 <code><summary></summary> 建立優雅的原生下拉選單，無需 CSS 或 JavaScript。

<code><details></details> 標籤充當容器，而 <code><summary></summary> 提供可點擊的標題。當您按一下摘要時，<code><details></details> 中的內容會切換可見度 - 非常適合常見問題。

7. <code><time></time> 標籤：語意時間表示

雖然在視覺上不起眼，但 <code><time></time> 標籤透過提供時間值的語義上下文顯著提高了 SEO 和可訪問性。

8. <code><ruby></ruby>、<code><rt></rt> 和 <code><rp></rp> 標籤：Ruby 註解

這些標籤有助於 Ruby 註釋，這在東亞排版中很常見，在字符上方顯示小的解釋性文本。

<code><ruby></ruby> 包含正文，<code><rt></rt> 註釋，<code><rp></rp> 為缺乏 Ruby 支援的瀏覽器提供後備內容。

9. <code><progress></progress> 標籤：建立進度條

使用 <code><progress></progress> 標籤產生不含 CSS 的進度條。

設定 <code>max 屬性為總值，<code>value 屬性為當前進度。欄自動更新。

10. <code><meter></meter> 標籤：代表音階

與 <code><progress></progress> 類似，<code><meter></meter> 顯示比例，但用於表示一系列值。

使用 <code>min、<code>max 和 <code>value 表示範圍和目前值； <code>low、<code>high 和 <code>optimum 定義影響條形顏色的閾值。

11. <code><fieldset></fieldset> 和 <code><legend></legend> 標籤：將表單元素分組

這些標籤優雅地將相關表單元素分組。

<code><fieldset></fieldset> 建立容器，<code><legend></legend> 提供描述性標題，自動定位在欄位集的邊框內。

結論

掌握這些經常被忽視的 HTML 標籤可以提高您的 Web 開發技能，創建更易於訪問、語義化和視覺上更有吸引力的網站。 快樂編碼！

追蹤我：LinkedIn | 中 | 藍天

以上是使用您可能會錯過的這些 HTML 標籤讓您的 HTML 脫穎而出的詳細內容。更多資訊請關注PHP中文網其他相關文章！