其他內嵌文字元素

我們已介紹過大部分的 HTML 元素,但絕對不是所有元素。我們未討論的一部分是內嵌文字元素。 有別於一般大眾的認知,HTML 原本是用於分享文件,而不是貓咪影片。輸入含括許多元素 為說明文件提供文字語意有一個模組,用於涵蓋連結和 <a> 元素。其餘的 會簡要介紹這些元素

記錄程式碼範例時,請使用 <code> 元素。變更者: 預設會以等寬字型顯示文字內容。加入多行程式碼時,請將 <code> 以巢狀結構置於 <pre> 元素,代表預先設定格式的文字。

<p>Welcome to Machine Learning Institute, where our machine learning training will help you get ready for the singularity,
  and maybe even be responsible for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to assume direct control. </p>

<data> 元素會連結指定的內容片段 機器可讀的翻譯元素的 value 屬性可為內容提供機器可讀的翻譯 元素。如果 <data> 內容與時間或日期有關,則 <time> 元素,因此必須改用代表特定時段的元素。

<time> 元素可包含 datetime 屬性,以人類可讀的格式提供使用者友善的時間和日期。 使用者可以讀取 datetime 屬性,為日曆和搜尋引擎等應用程式提供實用資訊。

在提供程式的輸出內容時,請使用 <samp> 元素來包住文字。瀏覽器通常會以等寬字型呈現這個範例或引用的輸出內容。

提供與鍵盤互動的操作說明時,<kbd> 元素它代表使用者透過鍵盤、語音輸入或任何其他文字輸入裝置輸入文字的內容。

<var> 元素可用於數學運算式或 程式設計變數多數瀏覽器會以斜體形式顯示文字內容, 如要編寫大量數學運算,請考慮使用以 XML 為基礎的 MathML 用於說明數學標記法的數學標記語言。

畢達哥定理中的二次方使用 <sup> 上標 元素。還有類似的 <sub> 子指令碼元素,指定 內嵌文字,只有在基於字體排版因素而應顯示為下標。上標和下標是數字 圖形、符號或其他小於一般型別的註解,且稍微高於或下方的行、 。

使用 <del> 表示已移除的文字或「已刪除」。 您也可以選擇加入會說明資源的 cite 設定。 變更,並將 datetime 屬性和 日期或日期和時間,格式為機器可讀的日期和時間格式。刪除線元素 <s> 可用來指出內容不再相關,但實際上並非從文件中移除。

<ins><del> 元素相反。是用於 ,指出新增的文字,也可以視需要加入 citedatetime 屬性。

定義和語言支援

如果加入縮寫或首字母縮寫,請務必在初次使用時,以純文字提供完整的完整字詞。 因為 <abbr> 開頭和結尾之間字詞的簡短表示法 標記;除非讀者知道為「HTML」和「CSS」其他影片只在第一個出現時機 在定義縮寫或縮寫,就必須使用 <abbr>title 屬性並非必要的屬性,也沒有用處。

如要定義不是縮寫或縮寫字詞的字詞,請使用定義 <dfn> 元素,識別在其周圍內容中定義的字詞。

如果定義的字詞與前後文字的語言不同,請務必加入 lang 屬性識別語言。

編寫不同方向的語言時,HTML 提供 <bdi> 元素,將可能雙向的文字與周圍文字分開處理。這段國際化 元素特別實用,因為網頁動態插入未知方向的內容。 <bdo> 元素會覆寫文字目前的方向性。 以不同方向轉譯文字W3C 提供雙向演算法簡介

在某些字元集內,我們會在字元的上方或右側放置小型註解,提供資訊 。<ruby> 元素是指 來包含這些註解,讓書寫語言 (如韓文、中文和日文) 更易於閱讀。露比 也可以用於希伯來文、阿拉伯文和越南文

使用圓括號 (<rp>) 包含在規格中 包含瀏覽器的左括號和右括號 支援顯示 <ruby>。如果瀏覽器支援 <ruby> (所有常態瀏覽器都會支援),則所有 <rp> 元素的內容 不會顯示任何資訊ruby 文字元素 (<rt>) 包含 實際註解兩者都是以巢狀結構在 <ruby> 內。

請注意,如果瀏覽器支援 <ruby>,就不會顯示括號。

強調文字

您可以運用多個元素,根據語意原因強調文字,以強調文字 (而非 因此請非常考慮此事

  • 使用 <em> 元素來強調或突顯特定內容。 <em> 元素可以是巢狀結構,而每個巢狀結構層級代表的強調度較高。這個元素含有語意 並可用於通知螢幕閱讀器、Alexa 和 Siri 等聽覺使用者代理程式,以提供文意
  • 使用 <mark> 元素識別或醒目顯示文字 例如突顯 (或「標示」) 搜尋字詞在搜尋結果中出現的位置。這樣一來, 以便快速識別內容,而不加上強調或重要性。
  • <strong> 元素會將文字標示為高強度 重要性。瀏覽器在顯示內容時,通常會使用較大的字型粗細。
  • 請參閱「文字基本概念」一文中的 <cite> 元素。 用於標記書籍、文章或其他創作作品的標題,或標記此類內容的縮寫參考資料或引用中繼資料, 例如書籍的 ISBN 編號

先前有三個元素暫時淘汰,但已重新加回 HTML。請謹慎運用 但由於這些註解提供的語意值很少,甚至沒有,所以請一律使用 CSS 在 HTML 元素上設定樣式。

<i>

<i> 元素可用於技術詞彙、外語 (再次提醒您,lang 屬性可用來識別 語言、想法或飛船名稱。這個元素的用途是針對特定原因區分內嵌內容和周圍文字。 例如慣用文字、技術詞彙和分類名詞這個元素不應單純將文字設為斜體,

MLW 針對 Toasty McToastface 研討會評論底部的奇怪文字使用 <span> 元素。<span> 元素提供一個通用 In-Line 容器,該容器沒有語意,並不代表任何內容。這樣做也會適當使用 <i>

<i> 元素的預設樣式是以斜體字型顯示。在此範例中,我們設定了 font-style: normal 因為該字元無法以斜體顯示。

<u>

<u> 元素適用於含有非文字註解的內容。例如: 建議您為拼寫錯誤的字詞加上註解內容預設會加上底線,但您可以透過 CSS 或 例如:加上紅色波浪形底線來模仿文書處理器文法錯誤指標。

<p>I always spell <u>licence</u> wrong</p>

<b>

<b> 元素可用來將注意力吸引到不屬於文字的文字 否則都很重要這個元素不會傳達任何特殊的語意資訊,只有在其他部分都要求時才使用 元素就會有關聯。我無法想出有效的用途,並未提供任何示例這是「上一個度假村」 這個元素

留白

當你想用換行符號 (例如寫詩或實際地址時) 時,可以使用自閉式換行元素。 <br>,可用來新增回車字元。

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

為了在切線性內容的各部分之間 (例如書籍的章節之間) 使用分隔符或分隔字元 建議提供 <hr> 元素。HR 代表「水平規則」。瀏覽器通常會算繪水平線,但這個元素具有語意含義。 預設的角色separator

HTML 也具有允許斷詞的元素。自動關閉 <wbr> 元素會向瀏覽器提供建議,判斷某個字詞可能會溢出容器,瀏覽器位置即為瀏覽器 可選擇換行通常用來在 長網址且不會加上連字號。

例如,在 Hal 生物學中,會用位元組代碼寫出文字,每個位元組以空格分隔。位元組程式碼 沒有空格如要讓長字串在行需要換行時只在位元組之間換行,請加入 在每個廣告插播機會中的 <wbr> 元素:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

<br><hr><wbr> 元素都是 void 元素,因此不能含有任何子節點 (非巢狀結構節點) 元素或文字這些物件全都沒有「內部」因為內容可以儲存,也沒有結束標記。

隨堂測驗

測試您對內嵌文字的瞭解程度。

顯示程式碼範例時,該使用哪一個元素?

<data>
<code>
<kbd>

<ruby> 元素的用途為何?

適用於部分語言的註解。
包含裝飾元素。
凸顯元素內容。