11 個不尋常的 HTML 標籤可提高您的 Web 開發技能

要點

考慮利用標題和標籤等分層元素來構建可折疊的部分，從而形成直觀的界面，同時以最小的混亂程度保持視覺吸引力。

使用指定標籤納入顯著註釋，以強調網站內容中的重要術語、表達或在線發現。

通過使用適當的 HTML 標籤來合併語義豐富的日期和時間信息，可以顯著增強依賴屏幕閱讀器技術的視覺障礙或其他殘障人士的輔助功能體驗。

作為精通Web 開發的個人，必須全面了解基本的HTML 元素，例如用於定義部分的“`”、用於文本格式化的“”以及用於在網頁中嵌入圖像的“” 。儘管如此，HTML 的功能遠遠超出了這些基本結構。

通過利用這些特殊的標籤，人們可以增強其 Web 應用程序的功能，使其在該領域中脫穎而出，並創造一種更獨特的用戶體驗。

和

當面對大量數據時，使用“ ”和“ ”元素可能非常有利，否則這些數據在立即接觸後可能會讓讀者感到難以承受。這些標籤可以實現信息的戰略傳播，允許用戶有選擇地披露細節，同時提供初始摘要以供上下文理解。

這些標記元素的使用有助於創建帶有標題或概述的可折疊部分，網站訪問者可以選擇通過單擊它來激活該部分以公開其內容。方便的是，“詳細信息”組件中包含的信息默認情況下保持隱藏，確保網頁材料的組織良好。

您網站的用戶可以輕鬆選擇摘要，以便通過簡單的點擊即可訪問隱藏的數據。

 <details>
  <summary>Click to reveal more information</summary>

  <p>This content will be hidden by default but will appear when the user
  clicks the summary.</p>
</details>

在內容中使用標籤可以隱藏大部分文本、代碼或其他數據，從而形成簡化且用戶友好的界面。此外，這種方法可以提高人們在界面設計領域的熟練程度。

`` HTML 元素使用戶能夠通過改變其視覺外觀來強調其內容的特定部分。通過使用此元素，網絡瀏覽器通常會分配獨特的黃色色調作為所包含文本的背景，從而將查看者的注意力引導到標記的部分。

當人們想要強調網頁內容中的特定術語、關鍵短語或搜索結果時，此功能尤其有利。

 <p>
  You can use the <mark>mark</mark> tag to highlight important words or
  phrases.
</p> 

事實上，包含搜索功能的網站可以利用“ ”元素來強調顯示結果中存在用戶查詢的情況，從而促進最終用戶識別相關數據。

在某些情況下，可能會發生特定上下文中包含的信息失去其相關性或過期的情況，但人們可能希望出於存檔原因保留所述數據或說明在特定時間段內發生的更改。

HTML 標籤用於指示網頁內容中已刪除的文本，該文本以刪除線的外觀顯示。

 <p>
  This product is <s>out-of-stock</s> currently available at a discounted
  price!
</p> 

本實例包括指示，由此通過水平標記呈現表示商品不可用的內容，其用於表明庫存位置已經經歷了轉變。

元素是一種多功能 HTML 組件，可用於為書面內容注入語義豐富的日期和時間信息。

利用

 <p>
  The Declaration of Independence was signed on
  <time datetime="1776-07-04">July 4, 1776</time>.
</p> 

利用``元素可以更好地組織您的內容，從而提高更廣泛用戶的可訪問性，包括那些使用屏幕閱讀器等輔助技術的用戶。

跨網站各個組件進行錯綜複雜的多語言內容管理可能會帶來一定的複雜性，特別是在單個元素的不同格式要求方面。

HTML 元素提供了一種突出顯示網頁中特定內容的解決方案，必鬚根據語言考慮將其與頁面的其他部分區分開來。通過利用此標籤，Web 開發人員可以確保根據必要的特定於語言的規則正確呈現和顯示指定的文本。

 <p>
  <bdi>5,000</bdi> people attended the conference.
</p> 

`` HTML 元素在其範圍內封裝了五千的數值。通過這樣做，可以防止由於另一種語言的文本內容或需要不同的樣式選擇而對圖形造成任何潛在的破壞。

, ,

在東亞印刷術中，經常使用注音假名或拼音註釋等語音指示符來輔助發音，因此使用“”和“”等 HTML 元素變得尤為重要。此外，出於進一步澄清的目的，也可以使用``標籤。

 <p>
  I'm learning
  <ruby>漢<rt>かん</rt></ruby>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p> 

本實例的特徵是其中包含漢字“漢”（漢字）的組件，而其對應元素則包含相應的音標“かん”。對於無法處理 ruby​​ 註釋的瀏覽器，合併的組件可作為補充的括號替代方案。

元素作為一種建議在擴展單詞中換行的機會，允許瀏覽器自行決定相應地換行文本。這可以防止出現斷線並保持內容佈局的完整性。

 <p>
  This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a?query=string.
</p> 

在所考慮的實例中，擴展的 URL 合併了表示為“ ”的 HTML 代碼，該代碼允許 Web 瀏覽器在需要時將其分割為兩個顯示行，從而保持相鄰文本元素的視覺排列。

和

當使用科學或數學符號時，可以使用“”和“”HTML 標籤來分別創建下標和上標文本。當處理需要特定排版調整以確保可讀性和準確性的複雜方程或符號表示時，這些元素特別有用。

 <p>
  The chemical formula for water is H<sub>2</sub>O,
  and the Pythagorean theorem is
  a<sup>2</sup> \+ b<sup>2</sup> = c<sup>2</sup>.
</p> 

該實例使用 HTML 元素來顯示`H2` 標題中的上標值“2”，而 標籤用於表示畢達哥拉斯定理中的冪。

HTML 元素可用於表示預定義範圍內的標量測量值，包括磁盤使用情況、評級和考試分數。這種多功能組件允許開發人員使用帶有視覺指示器的滑動標尺輕鬆顯示數值，使其成為以清晰直觀的方式傳達相對大小的有效方法。

通過利用“value”、“min”和“max”屬性值，可以分別建立當前測量值、最小允許值和最大可能值。

 <meter value="75" min="0" max="100">75%</meter> 

在本例中，儀表元素表示相當於百分之七十五的測試成績。

在創建表現出所需行為特徵的對話框、覆蓋層或模式時，HTML 中的“ ”元素可作為一種高效且通用的解決方案。該元素允許用戶在加載網頁時使用“open”屬性默認顯示對話框。 `` 元素提供了一種簡化的方法來製作具有功能性和視覺吸引力的模式彈出窗口的用戶界面。

 <dialog open>
  <p>This is a dialog box!</p>
  <button>Close</button>
</dialog> 

加載網頁後，由於“打開”屬性的存在，會出現一個顯示段落和暫停選項卡的基本對話框。對於更複雜的交互性，可以使用JavaScript來個性化所述對話框的內容和操作。

使用“HTML”元素可以在“下拉界面”內對相關選擇進行排列和分類，從而提高導航便利性和選項選擇效率。

元素充當聚合相關 元素的容器，這些元素本身嵌套在 元素中。

通過利用視覺上組織的分組或分類，下拉菜單可以以有序且易於導航的方式有效地呈現選項。

元素需要包含 label 屬性，該屬性指定關聯選項集的名稱或標題。

元素能夠容納多個 元素作為其後代，這些元素共同代表該組所包含的各種替代方案。

例如:

 <select>
  <optgroup label="Asia">
    <option value="kr">South Korea</option>
  </optgroup>

  <optgroup label="Europe">
    <option value="de">Germany</option>
  </optgroup>
</select> 

“亞洲”和“歐洲”。在每個區域中，都有由特定於國家/地區的標籤表示的子類別。

提高您的 Web 開發能力

在您的 Web 開發庫中利用未被充分重視的 HTML 標籤可以顯著提高您在該領域的熟練程度。儘管這些標籤可能沒有得到廣泛認可，但它們提供了針對特定場景定制的有用功能。

將這些屬性融入到一個人的熟練程度中不僅可以提高用戶的參與度和適應性，還可以加快 Web 開發工作流程。儘管乍一看它們似乎很陌生，但它們對您作為 Web 開發人員的道路的影響至關重要。