全棧之前端 | 3.HTML格式化輸出標簽元素學習篇
設為「?? 星標」帶你從基礎入門 到 全棧實踐 再到 放棄學習！
涉及 網絡安全運維、應用開發、物聯網IOT、學習路徑 、個人感悟 等知識分享。
希望各位看友多多支持【關注、點贊、評論、收藏、投幣】，助力每一個夢想。
【WeiyiGeek Blog's - 花開堪折直須折，莫待無花空折枝 】
作者主頁: 【 https://weiyigeek.top 】
博客地址: 【 https://blog.weiyigeek.top 】
作者答疑學習交流群：歡迎各位志同道合的朋友一起學習交流【點擊 ?? 加入交流群】, 或者關注公眾號回復【學習交流群】。
首發地址: https://mp.weixin.qq.com/s/RYC_CYkK_AR_bunkpSMGDA
0x00 前言簡述
本章節，主要介紹HTML定義很多供格式化輸出的元素, 比如粗體和斜體字以及刪除線等，具體講解如下述所示：
常規格式輸出標簽
通常，使用格式化標簽定義文本展示與含義，在html5中不同語義部分是建議使用對應語義標簽，所以下述按照使用出現頻率進行講解:
<small>：定義小號文本。<b>: 定義粗體文本。<i>: 定義斜體文本。<em>：定義強調文本。<strong>：定義語氣更為強烈的強調文本。
<sub>定義下標文本。<sup>定義上標文本。<u>：定義下劃線文本。<s>：定義加刪除線的文本。<del>：定義被刪除文本。<ins>: 定義被插入文本。
計算機代碼輸出標簽
通常，HTML 使用可變的字母尺寸，以及可變的字母間距，在顯示計算機代碼示例時，并不需要如此，<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和間距。
<pre>: 表示預定義格式文本。<var>: 定義文本的變量部分, 表示變量的元素。<kbd>: 定義鍵盤文本。<code>: 定義計算機代碼文本。<samp>: 定義計算機代碼樣本。
引用、引用和術語定義標簽
通常，我們會在網頁中看到文字的長短引用，字母的縮寫，以及文字展示方向，其實現通常有如下標簽展現。
<q>: 定義短的引用<blockquote>: 定義長(塊)的引用。<cite>: 定義引用、引證 (citation)。<dfn>: 定義一個定義項目。<abbr>: 定義一個名稱的簡寫或者縮寫。<address>: 定義文檔作者或擁有者的聯系信息。<bdo>: 定義文本的方向。<wbr>New 規定在文本中的何處適合添加換行符。
HTML5 新增格式化標簽
<mark>New 定義帶有記號的文本。<bdi>New 允許您設置一段文本，使其脫離其父元素的文本方向設置。<rp>New 定義不支持 ruby 元素的瀏覽器所顯示的內容。<rt>New 定義字符（中文注音或字符）的解釋或發音。<ruby>New 定義 ruby 注釋（中文注音或字符）。<time>New 定義一個日期/時間<meter>New 定義度量衡。僅用于已知最大和最小值的度量。<progress>New 定義運行中的任務進度（進程）。<dialog>New : 定義一個對話框或者窗口
HTML5 移除格式化標簽
<big>: HTML5不再支持。定義大號文本。<tt>: HTML5不再支持。定義打字機文本。<center>: HTML5不再支持。HTML 4.01 已廢棄。定義居中文本。<font>: HTML5不再支持。HTML 4.01 已廢棄。定義文本的字體、尺寸和顏色<strike>: HTML5不再支持。HTML 4.01 已廢棄。定義加刪除線的文本。<acronym>: HTML5不再支持。標簽在 HTML 4 中用于定義首字母縮寫詞。
0x01 格式化輸出元素
small 標簽
描述: 該標簽和它所對應的 <big>(不建議使用) 標簽一樣，但它是縮小字體而不是放大。
如果被包圍的字體已經是字體模型所支持的最小字號，那么 <small> 標簽將不起任何作用。
示例:
<small>定義小號字</small>
<small>呈現小號字體效果</small>
<p>這是一個普通的文本- <small>呈現小號字體效果.</small></p>
b 標簽
描述: 呈現粗體文本效果.
示例:
<b>呈現粗體文本效果</b>
<p>這是一個普通的文本-<b>這是一個加粗文本.</b></p>
溫馨提示: HTML 5 規范聲明：標題應該用 <h1> - <h6> 標簽表示，被強調的文本應該用 <em> 標簽表示，重要的文本應該用 <strong> 標簽表示，被標記的或者高亮顯示的文本應該用 <mark> 標簽表示。
i 標簽
描述: 顯示斜體文本效果.
示例:
<i>斜體</i>
<i>呈現斜體文本效果</i>
<p>這是一個普通的文本-<i>這是一個斜體文本效果.</i></p>
em 標簽
描述：<em> 標簽告訴瀏覽器把其中的文本表示為強調的內容，對于所有瀏覽器來說，這意味著要把這段文字用斜體來顯示。
除強調之外，當引入新的術語或在引用特定類型的術語或概念時作為固定樣式的時候，也可以考慮使用 <em> 標簽。
例如，W3School 經常對重要的術語使用 <em> 標簽，<em> 標簽可以用來把這些名稱和其他斜體字區別開來。
示例:
<em>定義語氣為強調的內容</em>
<p>這是一個普通的文本- <em style="color:black">定義語氣為強調的內容</em></p>
strong 標簽
描述: 把文本定義為語氣更強的強調的內容（加重語氣）。
示例:
<strong>加重語氣<strong>
<strong>定義語氣更為強烈的強調文本</strong>
<p>這是一個普通的文本- <strong>定義語氣更為強烈的強調文本.</strong></p>
sup 標簽
描述: <sup> 標簽可定義上標文本與主要的文本相比，應該展示得更高并且更小。
示例:
<sup>定義上標字</sup>
<p>This text is <sup>superscripted</sup></p>
<p>這是一個普通的文本- 這段文本包含上標:x<sup>2</sup>+y<sup>2</sup>=8</p>
sub 標簽
描述: 定義下標文本, 與主要的文本相比，應該展示得更低并且更小。
示例:
<sub>定義下標字</sub>
<p>The chemical formula of water: H<sub>2</sub>O</p>
<p>這是一個普通的文本- 這段文本包含下標:H<sub>2</sub>O<</p>
u 標簽
描述: 定義下劃線文件，表示一個需要標注為非文本化（non-textual）的內聯文本域。
示例:
<u>下劃線 ,不贊成使用，使用樣式（style）代替</u>
<p>這是一個普通的文本- 作者博客站點：<u style="text-decoration: #f00 wavy underline">https://weiyigeek.top</u></p>
溫馨提示: 此元素以前在舊版本的 HTML 中稱為“下劃線”元素，但有時仍會以這種方式被濫用, 要為文本加下劃線，您應該應用包含 CSS text-decoration 屬性設置為 underline 的樣式。
s 標簽
描述: 該元素使用刪除線來渲染文本，使用 <s> 元素來表示不再相關，或者不再準確的事情。但是當表示文檔編輯時，不提倡使用 <s> , 為此，提倡使用 <del> 和 <ins> 元素。
示例:
<p>這是一個普通的文本- <s>不贊成使用，使用 del 代替</s></p>
<span style="text-decoration:line-through;">Today's Special:</span> SOLD OUT
del 標簽
描述: 該標簽表示一些被從文檔中刪除的文字內容，比如可以在需要顯示修改記錄或者源代碼差異的情況使用這個標簽。
屬性:
- cite: 提供一個 URI，其中的資源解釋作出修改的原因（比如：根據某次會議討論）。
- datetime:這個屬性說明修改的時間和日期，這里的時間和日期格式要符合規范。
示例:
<del cite="./weiyigeek.top.html" datetime="2022-05">定義從文檔中被刪除文本。</del>
<p>這是一個普通的文本- 從文檔中刪除作者博客站點文字內容：<del style="color:#a4d">https://blog.weiyigeek.top</del></p>
ins 標簽
描述: 該標簽表示一些被從文檔中添加（插入）的文字內容，比如可以在需要顯示更新記錄或者源代碼差異的情況使用這個標簽。
屬性: 同 del 標簽屬性。
示例:
<ins cite="./weiyigeek.top.html" datetime="2023-02">定義從文檔中被添加(插入)的文本。</ins>
<p>這是一個普通的文本- 從文檔中添加(插入)作者作者博客站點：<del style="color:#a4d">https://blog.weiyigeek.top</del></p>
溫馨提示: ins其展現效果與<u>相似都是下劃線，但通常與del一同使用，用來描述文檔中的更新和修正。
上述文本格式化標簽全部示例總結（一）
html代碼:
<h1 style="text-align:Center;color:red;">文本格式化標簽</h1>
<b style="color:yellow">粗體文字</b>
<big style="color:blue">大號字</big>
<em style="color:black">著中文字</em>
<br />
<i>斜體</i>
<small>定義小號字</small>
<strong>加重語氣<strong>
<br />
<sub>定義下標</sub>
<sup>定義上標字</sup>
<ins>插入字,其實就是下劃線</ins>
<del>刪除線字</del>
<br />
<s>不贊成使用，使用 del 代替</s>
<strike>不贊成使用，使用 del 代替</strike>
<br/>
<u>下劃線,不贊成使用，使用樣式（style）代替</u>
展現結果:
var 標簽
描述: 該標簽表示變量的名稱，或者由用戶提供的值, 主要用于表示數學表達式或編程上下文中的變量名稱，其標記的文本通常顯示為斜體。
這個標簽經常與 <code> 和 <pre> 標簽一起使用，用來顯示計算機編程代碼范例及類似方面的特定元素。
示例: 定義文本的變量部分。
<!-- 示例1.簡單示例 -->
<var>var test="123456"</var>
<!-- 示例2.使用 <var> 來代表數學方程式的變量名稱。 -->
<p>一個簡單的方程式：<var>x</var> = <var>y</var> + 2</p>
<!-- 示例3.使用 CSS 可以為 <var> 元素覆蓋樣式。 -->
<style>
var {
font: bold 15px "Courier", "Courier New", monospace;
}
</style>
<p>變量 <var>minSpeed</var> 和 <var>maxSpeed</var> 控制設備的最低和最高速度，以每分鐘轉（RPM）計算。</p>
pre 標簽
描述: 表示預定義格式文本，在該元素中的文本通常按照原文件中的編排，以等寬字體的形式展現出來，文本中的空白符（比如空格和換行符）都會顯示出來。(緊跟在 <pre> 開始標簽后的換行符也會被省略)
pre 元素中允許的文本可以包括物理樣式和基于內容的樣式變化，還有鏈接、圖像和水平分隔線，當把其他標簽（比如 <a> 標簽）放到 <pre> 塊中時，就像放在 HTML/XHTML 文檔的其他部分中一樣即可
示例: 定義預格式文本
<!-- 示例1.標簽中的特殊符號被轉換為符號實體，比如 "<" 代表 "<"，">" 代表 ">"-->
<pre>
<html>
<head>
</head>
<body>
</body>
</html>
</pre>
<!-- 示例2.簡單嘗試一下 -->
<pre>
L TE
A A
C V
R A
DOU
LOU
REUSE
QUE TU
PORTES
ET QUI T'
ORNE O CI
VILISé
OTE- TU VEUX
LA BIEN
SI RESPI
RER - Apollinaire
</pre>
溫馨提示：建議在使用 pre 標簽格式化文檔中使用空格，而不是 tab 制表符（每個制表符占據8個字符的位置），以確保文本正常的水平位置。
溫馨提示: 在使用 pre 標簽定義計算機源碼時，請使用實體符號表示特殊字符（例如，<），并且通常與<code>標簽結合使用，以獲得更加精確的語義。
kbd 標簽
描述: 該標簽是鍵盤輸入元素，用于表示用戶輸入，它將產生一個行內元素，以瀏覽器的默認 monospace 字體顯示。
示例: 定義鍵盤文本。
<!-- 示例1.簡單嘗試 -->
鍵入 <kbd>quit</kbd> 來退出程序，或者鍵入 <kbd>menu</kbd> 來返回主菜單。
<!-- 示例2.基本示例 -->
<p>Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p>
<p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
溫馨提示: 當<kbd>元素處于<samp>元素之中時，它代表著被系統回顯的輸入, 而當其包含<samp>元素時，該輸入是基于系統輸出的，比如調用某個菜單項。
溫馨提示: 當<kbd>元素處于另一個<kbd>元素之中時，它代表了一個實際的按鍵，或是該輸入機制下的某個單位輸入。
code 標簽
描述: 該標簽用于呈現計算機源代碼或者其他機器可以閱讀的文本內容，但它不保留多余的空格和折行，通常瀏覽器的默認等寬字體顯示。
包含在該標簽內的文本將用等寬、類似電傳打字機樣式的字體（Courier）顯示出來，雖然 <code> 標簽通常只是把文本變成等寬字體，但它暗示著這段文本是源程序代碼。
示例: 例如，程序員的瀏覽器可能會尋找 <code> 片段，并執行某些額外的文本格式化處理，如循環和條件判斷語句的特殊縮進等。
<!-- 示例1.常規示例 -->
<p>Regular text. <code>This is code.</code> Regular text.</p>
<!-- 示例2.一段Shell腳本for循環-->
<code>
for i in 1,2,3,4
do
echo "$i"
done
</code>
溫馨提示: 如果只是希望使用等寬字體的效果，請使用 <tt>(不建議) 標簽，或者，如果想要在嚴格限制為等寬字體格式的文本中顯示編程代碼，請使用 <pre>(建議) 標簽。
samp 標簽
描述: 該標簽表示一段用戶應該對其沒有什么其他解釋的文本字符，要從正常的上下文抽取這些字符時，通常使用瀏覽器缺省的 monotype 字體（例如 Lucida Console）。
屬性:
示例:
<!-- 示例1 -->
<samp> 標簽并不經常使用。只有在要從正常的上下文中將某些短字符序列提取出來，對它們加以強調的極少情況下，才使用這個標簽。
注釋：在 HTML 中，用于 "ae" 連字的特殊實體是 "æ"，大多數瀏覽器都會將它轉換成相應的 "?" 連字字符。
<!-- 示例2 -->
<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>
上述計算機文本格式化標簽輸出全部示例總結（二）
示例代碼:
<p><b>注釋:</b>這些標簽常用于顯示計算機/編程代碼</p>
<code>
#include <stdio.h>
int main(){
printf("Hello Code Tag!!!!");
return 0;
}
</code>
<br />
<kbd style="color:fuchsia;">Keyboard input F1,鍵盤鍵碼</kbd>
<br />
<samp style="color:green;">Sample text,計算機代碼樣本</samp>
<br />
<tt style="color:lime;">Teletype text，打印機代碼</tt>
<br />
<var style="color:maroon">Computer variable，定義變量</var>
<br />
<pre style="color:olive">標簽很適合顯示計算機代碼：
#include <stdio.h>
int main(){
printf("Hello Code Tag!!!!");
return 0;
}
</pre>
<listing>不贊成使用,使用 pre代替
for i = 1 to 10
print i
next i
</listing>
<xmp>不贊成使用,使用 pre代替
這是預格式文本。
它保留了 空格和換行。
</xmp>
執行結果:
abbr 標簽
描述:<abbr> 標簽指示簡稱或縮寫，比如 "WWW" 或 "NATO",通過對縮寫進行標記，您能夠為瀏覽器、拼寫檢查和搜索引擎提供有用的信息。
屬性:
- title 屬性: 可用于在鼠標指針移動到元素上時顯示出縮寫的完整版本。
示例:
<!-- 示例1.鼠標移動到上面的時候進行顯示 abbreviation -->
<abbr title="abbreviation">abbr.</abbr>
<!-- 示例2.PRC簡稱介紹 -->
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
<!-- 示例3.使用style修改該屬性樣式 -->
abbr {
font-style: italic;
color: chocolate;
}
<p>You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your <abbr>HTML</abbr> (HyperText Markup Language).
<!-- 示例4.復制文章中會將嵌入到文章圖標里的文字進行復制。 -->
<style>
.visually-hidden {
clip: rect(1px,1px,1px,1px)!important;
border: 0!important;
-webkit-clip-path: inset(50%)!important;
clip-path: inset(50%)!important;
height: 1px!important;
margin: -1px!important;
overflow: hidden!important; /** 關鍵點 **/
padding: 0!important;
position: absolute!important;
white-space: nowrap!important;
width: 1px!important;
}
</style>
<abbr class="icon icon-deprecated" title="已棄用。請不要在新的網站中使用。">
<span class="visually-hidden">已棄用</span>
</abbr>
address 標簽
描述: <address> 標簽定義文檔或文章的作者/擁有者的聯系信息,該元素中的文本在瀏覽器中通常呈現為斜體，且會在 address 元素前后添加折行。
如果
<address>元素位于<body>元素內，則它表示文檔聯系信息。
如果<address>元素位于<article>元素內，則它表示文章的聯系信息。
示例:
<!-- 示例1.此例演示如何在 HTML 網頁中寫地址 -->
<address>
學府大道 <br />
南岸區 <br />
重慶市 <br />
中國 <br />
Email 郵件<a href="mailto:test@qq.com?cc=test1@qq.com&bbc=www@tss.com&subject=Testmail&body=Test%20SendMAIL">Check mail</a>
<!-- 示例2.使用CSS樣式更改標簽 -->
<style>
a[href^='mailto']::before {
content: '?? ';
}
a[href^='tel']::before {
content: '?? ';
}
</style>
<address>
<a href="mailto:master@weiyigeek.top">master@weiyigeek.top</a><br>
<a href="tel:+18888888888">(86) 18888888888</a>
</address>
溫馨提示: 由<address>元素中任何形式的內容所提供的聯系信息適用于上下文的背景信息，可以是必要的任何一種聯系方式，比如真實地址、URL、電子郵箱、電話號碼、社交媒體賬號、地理坐標等等。此元素應該包含聯系信息對應的個人、團體或組織的名稱。
bdo 標簽
描述：該標簽是雙向文本替代元素 (<bdo>) 改寫了文本的方向性，使文本以不同的方向渲染呈現出來 (override 可以翻譯很多意思，編程語言中多用覆蓋，重載；這里采用了 Google 的整體翻譯，取替代替換改寫之意)
屬性：
- dir ：在此元素內容中呈現文本的方向，可能的值是
ltr: 指示文本應從左到右的方向或者rtl: 指示文本應從右到左的方向
示例:
<!-- 示例1.正序顯示文本 -->
<bdo dir="ltr">Here is some Hebrew text</bdo>
<!-- 示例2.倒序顯示文本 -->
<bdo dir="rtl">Here is some Hebrew text</bdo>
q 標簽
描述: 標簽（Quotation）定義短的引用，而 q 元素不會有任何特殊的呈現，瀏覽器經常在引用的內容周圍添加引號。
屬性：
- cite ：屬性的值是 URL，意在指出被引用的文本的源文檔或者源信息。
示例:
<!-- 示例1.瀏覽器會對q標簽打"" -->
這是一個短引用：<q>短短的引用，short Reference！！</q>
<!-- 示例2.使用屬性值指定引用來源 -->
<p>WeiyiGeek 的
<q cite="https://weiyigeek.top">個人主頁域名地址</q>.
</p>
blockquote 標簽
描述: 該標簽定義塊引用（HTML 塊級引用元素），其元素之間的所有文本都會從常規文本中分離出來，經常會在左、右兩邊進行縮進（增加外邊距），而且有時會使用斜體，也就是說，塊引用擁有它們自己的空間。
屬性：
- cite : 是一個標注引用的信息的來源文檔或者相關信息的 URL。
示例：
<!-- 示例1.瀏覽器會縮進元素內容文本 -->
<blockquote cite="https://blog.weiyigeek.top">這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用</blockquote>
溫馨提示: 若要修改被引用內容的縮進距離，可以使用 CSS margin-left 和/或 margin-right 屬性，或使用 margin 縮寫屬性
cite 標簽
描述：引用（Citation）標簽 (<cite>) 表示一個作品的引用，如書籍、雜志、期刊，等等.
如果引用的這些文檔有聯機版本，還應該把引用包括在一個 <a> 標簽中，從而把一個超鏈接指向該聯機版本。
示例:
<!-- 示例1 -->
<a >定義引用、引證于<cite title="百度百科">百度百科 </cite></a>
<!-- 示例2 -->
More information can be found in <cite>[ISO-0000]</cite>.
溫馨提示: <cite> 標簽的語義已經遠遠超過了改變它所包含的文本外觀的作用；它使瀏覽器能夠以各種實用的方式來向用戶表達文檔的內容。
溫馨提示：W3C 標準允許在 <cite> 元素中包含引用內容的作者信息。然而 WHATWG 規范不允許在 元素中出現人名。
dfn 標簽
描述：<dfn> 表示術語的一個定義, 現在流行的瀏覽器通常用斜體來顯示 <dfn> 中的文本，將來 <dfn> 還可能有助于創建文檔的索引或術語表。
<!-- 示例1.常規使用 -->
<a ><dfn title="百度百科">定義一個定義項目百度百科 </dfn></a>
<!-- 示例2.如果 <dfn> 元素包含具有標題的 <abbr> 元素，則 title 定義項目： -->
<p>The<dfn><abbr title="World Health Organization">WHO</abbr></dfn>was founded in 1948.</p>
<p>對縮寫進行標記能夠為瀏覽器、翻譯系統以及搜索引擎提供有用的信息。</p>
<!-- 示例3 -->
<!-- Define "The Internet" -->
<p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.</p>
<!-- 示例4 -->
<dl>
<!-- Define "World-Wide Web" and reference definition for "the Internet" -->
<dt>
<dfn>
<abbr title="World-Wide Web">WWW</abbr>
</dfn>
</dt>
<dd>The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on <a href="#def-internet">the Internet</a>.</dd>
</dl>
溫馨提示: 下面我們再來看看下述都是HTML5新增標簽。
bdi 標簽
描述: HTML 雙向隔離元素（<bdi>）告訴瀏覽器的雙向算法將其包含的文本與周圍的文本隔離，當網站動態插入一些文本且不知道所插入文本的方向性時，此功能特別有用。
屬性:
- dir : 根據元素內容決定元素內容的方向, 注意該屬性不繼承父元素, 如果沒有設置默認值即為 auto.
示例:
<p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed left-to-right.</p>
<p dir="rtl">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>
<ul>
<li><bdi style="color: red;" dir="ltr">WeiyiGeek</bdi>: 1st place</li>
<li><span style="color: blue;" dir="rtl">Geeker</span>: 2nd place</li>
</ul>
meter 標簽
描述: 定義度量衡, 用來顯示已知范圍的標量值或者分數值。
屬性:
- value : 如果設置了最小值和最大值（分別由 min 屬性和 max 屬性定義），它必須介于最小值和最大值之間。
- min : 值域的最小邊界值。如果沒設置，默認為 0。
- max : 值域的上限邊界值。如果沒設置，默認為 1。
- low : 定義了低值區間的上限值（譯者注：如果 value 介于 min 和 low 之間，該元素就會表現出低值的視覺效果，value 落在
[min,low]、[high,max]等不同的區間會使瀏覽器渲染該元素時出不同的視覺效果）。 - high : 定義了高值區間的下限值。
- optimum : 這個屬性用來指示最優/最佳取值。
- form : 該屬性將本元素與對應的 form 元素關聯。
示例:
<!-- 1.簡單示例 -->
<p> Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter></p>
<!-- 2.高低值區間示例,本例中 min 屬性被省略 -->
<p>當值為 90 ： He got a <meter low="60" high="80" max="100" value="90">A</meter> on the exam</p>
<p>當值為 80 ： He got a <meter low="60" high="80" max="100" value="80">B</meter> on the exam</p>
<p>當值為 59 ： He got a <meter low="60" high="80" max="100" value="59">B</meter> on the exam</p>
<p>當值為 91 : <meter low="60" optimum="90" high="80" max="100" value="91">A</meter></p>
progress 標簽
描述: HTML中的 <progress> 元素用來顯示一項任務的完成進度, 瀏覽器中該元素都顯示為一個進度條形式。
屬性:
- max : 該屬性描述了這個progress元素所表示的任務一共需要完成多少工作。
- value : 該屬性用來指定該進度條已完成的工作量。
示例:
<!-- 進度條示例 -->
<progress value="70" max="100">70 %</progress>
rp 標簽
描述: <rp> 元素用于為那些不能使用 <ruby>元素展示 ruby 注解的瀏覽器，提供隨后的圓括號。
說明: 用于展示東亞文字的發音，例如使用日語羅馬音和漢語拼音的文字。
rt 標簽
描述： Ruby 文本 (<rt>) 元素包含字符的發音，字符在 ruby 注解中出現，它用于描述東亞字符的發音, 這個元素始終在 <ruby> 元素中使用
說明： 簡單的說就是注釋文字拼音。
ruby 標簽
描述: HTML<ruby> 元素被用來展示東亞文字注音或字符注釋。
示例:
<!-- 示例 1: 字 -->
<ruby>
漢 <rp>(</rp><rt>han</rt><rp>)</rp>
字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>
<!-- 示例 2: 詞 -->
<ruby>
明 日 <rp>(</rp><rt>ming ri</rt><rp>)</rp>
</ruby>
wbr 標簽
描述: 規定一個文本中的位置，其中瀏覽器可以選擇來換行，雖然它的換行規則可能不會在這里換行, 即以便避免將標點符號留在行尾。
說明: 在 UTF-8 編碼的頁面中， <wbr> 表現為 U+200B ZERO-WIDTH SPACE （零寬空格）代碼點。特別是，它表現為 Unicode bidi BN 代碼點，也就是說，它對 bidi-ordering 沒有影響：<div dir=rtl>123,<wbr>456</div> 展示 123,456 而不是 456,123，當不拆成的兩行時候。
溫馨提示： 出于相同原因 <wbr>元素不會在換行的地方引入連字符, 為了使連字符僅僅在行尾出現，使用連字符軟實體 (& shy;) 來代替。
示例:
<p>此處正在測試wbr標簽: <wbr> 一段很長的文字，文章!<wbr> 以便避免將標點符號留在行尾.</p>
<p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p>
time 標簽
描述: 該 time 標簽用來表示 24 小時制時間或者公歷日期，若表示日期則也可包含時間和時區。
注意: 此元素意在以機器可讀的格式表示日期和時間。有安排日程表功能的應用可以利用這一點。
屬性:
- datetime: 該屬性表示此元素的時間和日期，并且屬性值必須是一個有效的日期格式，并可包含時間。
- pubdate: 此布爾屬性指定元素給定的日期和時間是文檔的發布日期。
示例:
<!-- 常規 示例 -->
<p>音樂會<time>20:00<time>點開始。
<!-- pubdate 示例 -->
<article>
<p>This article was created on <time pubdate>2011-01-28</time>.</p>
</article>
<!-- datetime 示例 -->
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>
dialog 標簽
描述: 該 <dialog> 元素表示一個對話框或其他交互式組件，例如一個可關閉警告、檢查器或者窗口。
屬性:
- open: 指示這個對話框是激活的和能互動的, 當沒有設置 open 屬性時，對話框不應該顯示給用戶。推薦使用
.show() 或 .showModal()方法來渲染對話框，而不是使用 open 屬性。
示例:
<!-- 示例1.渲染一個非模態對話框 -->
<dialog open>
<p>Greetings, one and all!</p>
<form method="dialog">
<button value="Yes">Yes</button>
<button value="No">No</button>
</form>
</dialog>
<!-- 示例2.Simple modal dialog containing a form -->
<dialog id="favDialog">
<form method="dialog">
<p>
<label>Favorite animal:
<select>
<option value="default">Choose…</option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select>
</label>
</p>
<div>
<button value="cancel">Cancel</button>
<button id="confirmBtn" value="default">Confirm</button>
</div>
</form>
</dialog>
<p>
<button id="updateDetails">Update details</button>
</p>
<output></output>
<script>
const updateButton = document.getElementById('updateDetails');
const favDialog = document.getElementById('favDialog');
const outputBox = document.querySelector('output');
const selectEl = favDialog.querySelector('select');
const confirmBtn = favDialog.querySelector('#confirmBtn');
// If a browser doesn't support the dialog, then hide the
// dialog contents by default.
if (typeof favDialog.showModal !== 'function') {
favDialog.hidden = true;
/* a fallback script to allow this dialog/form to function
for legacy browsers that do not support <dialog>
could be provided here.
*/
}
// "Update details" button opens the <dialog> modally
updateButton.addEventListener('click', () => {
if (typeof favDialog.showModal === "function") {
favDialog.showModal();
} else {
outputBox.value = "Sorry, the <dialog> API is not supported by this browser.";
}
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener('change', (e) => {
confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener('close', () => {
outputBox.value = `${favDialog.returnValue} button clicked - ${(new Date()).toString()}`;
});
</script>
執行結果:
特別注意: tabindex 屬性不能被使用在 <dialog> 元素上。
<form>元素可關閉含有屬性 method="dialog" 的對話框。當提交表單時，對話框的 returnValue (en-US) 屬性將會等于表單中被使用的提交按鈕的 value。::backdrop CSS偽元素可用于給使用 HTMLDialogElement.showModal() (en-US) 顯示的<dialog>元素背景添加樣式，例如在對話框被打開激活時，調暗背景中不可訪問的內容。
- 目前只有 Chrome 、Edge 、火狐和 Safari 6 支持 dialog 標簽，在未來相信更多瀏覽器會兼容。
本章實踐完畢，
綜合實踐：
示例文件: https://github.com/WeiyiGeek/DevelopLearnig/blob/main/fore-end/HTML/example/study/02.Format.html
網頁效果：
好的，本小節到此完畢！
原文地址: https://blog.weiyigeek.top/2023/2-22-717.html
本文至此完畢，更多技術文章，盡情期待下一章節！
專欄書寫不易，如果您覺得這個專欄還不錯的，請給這篇專欄 【點個贊、投個幣、收個藏、關個注，轉個發，留個言】(人間六大情)，這將對我的肯定，謝謝！。
點擊 ?? 關注「 全棧工程師修煉指南」公眾號
微信溝通交流: weiyigeeker (點擊添加)
交流溝通群：629184198 或 關注公眾號回復【學習交流群】
溫馨提示: 由于作者水平有限，本章錯漏缺點在所難免,希望讀者批評指正，并請在文章末尾留下您寶貴的經驗知識，聯系郵箱地址 master@weiyigeek.top 或者關注公眾號 WeiyiGeek 聯系我。
本文來自博客園，作者：全棧工程師修煉指南，轉載請注明原文鏈接：http://www.rzrgm.cn/WeiyiGeek/p/17305145.html。
歡迎關注博主【WeiyiGeek】公眾號以及【極客全棧修煉】小程序
浙公網安備 33010602011771號