本文首發於個人微信公眾號(xinjie-just)。 HTML是超文本標記語言，它提供網頁的具體內容，包括文本、表單、圖像、表格、鏈接、多媒體、列表等。其中文本是我們遇到的最多的展示內容。正確的使用文本標簽，會使頁面具有語義化，也有利於SEO。 文本標簽主要包括：abbr, address, str ...
本文首發於個人微信公眾號(xinjie-just)。
HTML是超文本標記語言，它提供網頁的具體內容，包括文本、表單、圖像、表格、鏈接、多媒體、列表等。其中文本是我們遇到的最多的展示內容。正確的使用文本標簽，會使頁面具有語義化，也有利於SEO。
文本標簽主要包括：abbr, address, strong, b, em, i, bdi, bdo, blockquote, cite, code, del, ins, s, dfn, kbd, mark, small, meter, pre, progress, q, sub, sup, time, span, var.
網頁中並不總是使用 div 和 span 就夠了。正確使用這些文本標簽，使得我們的頁面即便沒有 css 的情況下，也能良好的展示。另一方面，使用這些標簽是為了寫出別人能看得懂的代碼，而不僅僅是機器能看得懂，這也是我從學習編程以來一直在努力的方向。
1. abbr
<abbr title="解釋縮寫詞，解釋縮寫詞含義或展示其全稱">abbr 解釋縮寫詞,滑鼠懸停在其上時顯示title屬性值</abbr> <abbr title="World Health Organization">WHO</abbr>
2. address
<address>address 定義與 html 頁面和頁面一部分有關的作者、相關人士或組織的聯繫信息,通常位於頁面底部或相關部分內 （用 address 標記公司網站 “聯繫我們” 中的辦公地點，則是錯誤的用法），字體以斜體顯示</address> <address> Written by <a href="mailto:[email protected]">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
3. strong
<strong>strong 強調內容的重要性（重要程度），字體以粗體顯示</strong> <strong>stop and get out</strong>
4. b
<b>b 表示出於實用目的提醒讀者註意的一塊文字，不傳達任何額外的重要性，也不代表其他的語態和語氣，用於文章的關鍵詞、評論中的產品名、文章導語、基於文本的互動式軟體中的指示操作的文字</b> <p>他在感情上的<b>愚鈍</b>就想門窗緊閉的屋子</p>
5. em
<em>em 表示內容的著重點（唯一性），字體以斜體顯示</em> <em>I just love you</em>
6. i
<i>i 表示一塊不同於其他文字的文字，具有不同的語態或語氣，或其他不同於常規之處，用於如技術名稱、技術術語、外語中的慣用語、翻譯的散文、西方文字中的船舶名稱等</i> <i>HTML，重構，wow，解憂雜貨店，泰坦尼克號</i>
7. bdi
<bdi>bdi 允許設置一段文本，使其脫離其父元素的文本方向設置。目前只有 Firefox 和 Chrome 瀏覽器支持</bdi>
8. bdo
<bdo dir="ltr">bdo 定義文本的方向,ltr（從左到右為預設方向）</bdo> <bdo dir="ltr">This text will go left-to-right.</bdo> <bdo dir="rtl">This text will go right-to-left.</bdo>
9. blockquote
<blockquote>blockquote 表示單獨存在的引述（可長可短）</blockquote> <blockquote cite="http://www.worldwildlife.org/who/index.html">For 50 years, WWF has been protecting the future of nature. The worlds leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</blockquote>
10. cite
<cite>cite 指明對某內容源的引用或參考。如：戲劇、腳本、圖片的標題、歌曲、電影、照片、雕塑的名稱、演唱會、音樂會、規範、報紙、法律文件（不能作為對人名的引用），字體以斜體顯示</cite> <p>你我都當過警務處長，自己人太懂禮貌，虛偽！這句話出自電影<cite>《寒戰II》</cite></p>
11. code
<code>code 定義電腦代碼文本</code> <code>This is a piece of computer code: alert("這裡有再次成為好人的路,Here is the way to be a good person again.")</code>
12. del
<del>del 如果需要在前一個版本之後對頁面內容的編輯標記出來，或者對不再準確、不再相關的文本進行標記。 ins 表示添加內容， del 表示刪除內容， s 用來標記不再準確或不再相關的內容， 瀏覽器對刪除的內容加刪除線，對添加的內容加上下劃線，對 s 元素添加刪除線</del> <p>My favorite color is <del>blue</del> red!</p>
13. ins
<ins>ins 如果需要在前一個版本之後對頁面內容的編輯標記出來，或者對不再準確、不再相關的文本進行標記。 ins 表示添加內容， del 表示刪除內容， s 用來標記不再準確或不再相關的內容， 瀏覽器對刪除的內容加刪除線，對添加的內容加上下劃線，對 s 元素添加刪除線</ins> <p>My favorite color is not blue, is <ins>red</ins>!</p>
14. s
<s>s 如果需要在前一個版本之後對頁面內容的編輯標記出來，或者對不再準確、不再相關的文本進行標記。 ins 表示添加內容， del 表示刪除內容， s 用來標記不再準確或不再相關的內容， 瀏覽器對刪除的內容加刪除線，對添加的內容加上下劃線，對 s 元素添加刪除線</s> <p><s>You think I love you!</s></p> <p>As a matter of fact, I love her!</p>
15. dfn
<dfn>dfn 短語標簽，定義一個項目。對其做語義上的區分，用 dfn 包圍要定義的術語，而不是包圍定義</dfn> <p>There is a item, <dfn>txhy APP</dfn></p>
16. mark
<mark>mark 用於提起讀者對特定文本片段的註意，對文本添加黃色背景。可以在樣式表中添加 mark{ background: yellow;} 讓瀏覽器實現同樣的效果</mark> <p>Do not forget to buy <mark>milk</mark> today.</p>
17. small(非常常見，又容易用錯或直接不使用)
<small>small 免責聲明、註解、署名、版權信息、法律限制等(標記短語，不要標記過長文字)，字體以小字型大小顯示</small> <p>example: <small>京公網安備11000002000001號（百度備案號）</small></p>
18. pre
<pre>pre 定義預格式文本</pre> <pre> 給重要的人寫信，一定要自己親筆手寫。 別人認真問的問題，一定要認真回答。 </pre>
19. q
<q>q 用於短的引述</q> <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q>We hope they succeed.</p>
20. sub
<sub>sub 創建下標.下標文本將會顯示在當前文本流中字元高度的一半為基準線的下方，但是與當前文本流中文字的字體和字型大小都是一樣的</sub> <p>我們知道，H<sub>2</sub>O分解將生成H<sub>2</sub>和O<sub>2</sub></p>
21. sup
<sup>sup 創建上標。上標文本將會顯示在當前文本流中字元高度的一半為基準線的上方，但是與當前文本流中文字的字體和字型大小都是一樣的</sup> <p>時間就像海綿里的水，擠一擠總會有的<sup>[1]</sup></p>
22. time
<time>time 標記時間、日期、時間段. 標簽定義西曆的時間（24 小時制）或日期，時間和時區偏移是可選的</time> <p>We open at <time>10:00</time> every morning.</p> <p>I have a date on <time datetime="2008-02-14">Valentines day</time>.</p>
23. span
<span>span 同 div 一樣，沒有任何語義，只適合包圍字詞和短語。可對文檔進行分離，然後添加適當的樣式。</span> <p><span style="color:blue;"> just </span>受<span style="color:darkolivegreen;"> cting </span>影響，生活變得有趣多了</p>
24. var
<var>定義變數</var> <var>variable</var>
