HTML系列（三）：文字設置

時間 2019-11-14

標籤 html 系列文字設置欄目 HTML 简体版

原文原文鏈接

1、標題css

標題的h1到h6標籤，這裏再也不贅述。值得一提的是，H5中新定義了一個元素<hgroup>，用來將標題和副標題羣組。通常在header裏將一組標題組合在一塊兒，變成一個區塊：程序員

 1 <body>
 2     <header>
 3         <hgroup>
 4             <h1> 阿里旅行·去啊 </h1>
 5             <h2> 阿里旅行·去啊是阿里巴巴旗下的綜合性旅遊出行服務平臺 </h2>
 6             <p>阿里旅行·去啊，世界觸手可行</p>
 7         </hgroup>
 8     </header>
 9     <article>
10  阿里旅行·去啊整合數千家機票代理商、航空公司、旅行社、旅行代理商資源，直籤酒店，客棧賣家等爲廣大旅遊者提供特價機票，酒店預訂，客棧查詢，國內外度假信息，門票購買，簽證代理，旅遊卡券，租車，郵輪等旅遊產品的信息搜索，購買及售後服務。全程採用支付寶擔保交易，安全、可靠、有保證。 11     </article>
12 <body>
13 </body>

2、關鍵字和產品名稱編程

標籤包裹的部分比其他部分更重要，呈現爲粗體。如下場景可使用b標籤：文檔的摘要中的關鍵字；產品描述中的產品名；其餘文本在須要加粗顯示的狀況下。瀏覽器

根據H5規範，再沒有其餘更合適的標籤時，才把b做爲最後的選項。H5聲明用h1到h6表示標題，em表示要強調的文本，strong來表示重要文本，mark表示標註的、突出顯示的文本。安全

3、強調less

標籤表示強調其中的文本，用斜體來顯示。可是若是隻是單純的想要斜體效果，請使用i標籤。字體

4、外文或科技術語搜索引擎

標籤也是顯示斜體效果，使用場景爲：表示轉述句；表示分類名稱；習語。spa

5、重要文字設計

和同樣用於強調文本，但它強調的程度更強一些。顯示效果爲加粗。

6、刪除線<s></s>

<s>顯示效果爲刪除線，能夠和<ins>標籤配合使用。H5中的刪除線用<del> 。

7、下劃線

能夠在css樣式屬性中的text-decoration設置爲underline來爲文字添加下劃線，也能夠利用u標籤設置。在H5中再也不支持u標籤。若是不是超連接的話不建議添加下劃線。

8、小號字體內容

9、上標，下標

包含在 標籤和其結束標籤 中的內容將會以當前文本流中字符高度的一半來顯示，可是與當前文本流中文字的字體和字號都是同樣的。提示：這個標籤在向文檔添加腳註以及表示方程式中的指數值時很是有用。若是和 <a> 標籤結合起來使用，就能夠建立出很好的超連接腳註。

10、指明能夠安全換行的建議位置

是H5中新增的元素。若是單詞太長，或者擔憂瀏覽器會在錯誤的位置換行，那麼您可使用 元素來進行換行。將元素放在一個單詞內部，好比reckless，當瀏覽器寬度合適時，不拆單詞；當瀏覽器寬度不適時，在reck後換行。注意：IE8如下版本不支持。

11、<code>,<var>,<kbd>,<abbr>,<dfn>

<code> 標籤用於表示計算機源代碼或者其餘機器能夠閱讀的文本內容。

軟件代碼的編寫者已經習慣了編寫源代碼時文本表示的特殊樣式。<code> 標籤就是爲他們設計的。包含在該標籤內的文本將用等寬、相似電傳打字機樣式的字體（Courier）顯示出來，對於大多數程序員來講，這應該是十分熟悉的。只應該在表示計算機程序源代碼或者其餘機器能夠閱讀的文本內容上使用 <code> 標籤。雖然 <code> 標籤一般只是把文本變成等寬字體，但它暗示着這段文本是源程序代碼。未來的瀏覽器有可能會加入其餘顯示效果。例如，程序員的瀏覽器可能會尋找 <code> 片斷，並執行某些額外的文本格式化處理，如循環和條件判斷語句的特殊縮進等。

提示：若是隻是但願使用等寬字體的效果，請使用<tt>標籤。或者，若是想要在嚴格限制爲等寬字體格式的文本中顯示編程代碼，請使用 <pre>標籤。

<var> 標籤表示變量的名稱，或者由用戶提供的值。

<var> 標籤是計算機文檔中應用的另外一個小竅門，這個標籤常常與<code>和 <pre>一塊兒使用，用來顯示計算機編程代碼範例及相似方面的特定元素。用 <var> 標籤標記的文本一般顯示爲斜體。

就像其餘與計算機編程和文檔相關的標籤同樣，<var> 標籤不僅是讓用戶更容易理解和瀏覽你的文檔，並且未來某些自動系統還能夠利用這些恰當的標籤，從你的文檔中提取信息以及文檔中提到的有用參數。咱們再一次強調，提供給瀏覽器的語義信息越多，瀏覽器就能夠越好地把這些信息展現給用戶。

<kbd> 標籤訂義鍵盤文本。它用來表示文本是從鍵盤上鍵入的。瀏覽器一般用等寬字體來顯示該標籤中包含的文本。

<abbr> 標籤最初是在 HTML 4.0 中引入的，表示它所包含的文本是一個更長的單詞或短語的縮寫形式，好比 "WWW" 或 "NATO"。經過對縮寫進行標記，您可以爲瀏覽器、拼寫檢查和搜索引擎提供有用的信息。

提示：能夠在 <abbr> 標籤中使用全局的 title 屬性，這樣就可以在鼠標指針移動到 <abbr> 元素上時顯示出簡稱/縮寫的完整版本。

<dfn> 標籤可標記那些對特殊術語或短語的定義。其最近的父元素必須包含術語的定義。

如今流行的瀏覽器一般用斜體來顯示 <dfn> 中的文本。未來，<dfn> 還可能有助於建立文檔的索引或術語表。與其餘許多基於內容的樣式和物理樣式標籤同樣，<dfn> 標籤儘可能少用爲妙。

12、引用

<q> 標籤訂義短的引用。瀏覽器常常在引用的內容周圍添加引號。<q> 標籤在本質上與<blockquote>是同樣的。不一樣之處在於它們的顯示和應用。<q> 標籤用於簡短的行內引用。若是須要從周圍內容分離出來比較長的部分（一般顯示爲縮進的塊），請使用 <blockquote> 標籤。

可選的屬性：

屬性	值	描述
cite	citation	定義引用的出處或來源（citation）

<cite> 標籤一般表示它所包含的文本對某個參考文獻的引用，好比書籍或者雜誌的標題。按照慣例，引用的文本將以斜體顯示。

用 <cite> 標籤把指向其餘文檔的引用分離出來，尤爲是分離那些傳統媒體中的文檔，如書籍、雜誌、期刊，等等。若是引用的這些文檔有聯機版本，還應該把引用包括在一個 <a> 標籤中，從而把一個超連接指向該聯機版本。

<cite> 標籤還有一個隱藏的功能：它可使你或者其餘人從文檔中自動摘錄參考書目。咱們能夠很容易地想象一個瀏覽器，它可以自動整理引用表格，並把它們做爲腳註或者獨立的文檔來顯示。<cite> 標籤的語義已經遠遠超過了改變它所包含的文本外觀的做用。

十3、文字排版方向

<bdo> 元素可覆蓋默認的文本方向。

可選屬性：

屬性	值	描述
dir	ltr rtl	定義文字的方向,rtl表示從右向左書寫。

bdi 指的是 bidi 隔離。<bdi> 標籤容許設置一段文本，使其脫離其父元素的文本方向設置。在發佈用戶評論或其餘沒法徹底控制的內容時，該標籤頗有用。<bdi> 標籤是 HTML5 中的新標籤。目前只有 Firefox 和 Chrome 支持 <bdi> 標籤。

十4、使用預先編排好格式的內容

<pre> 元素可定義預格式化的文本。被包圍在 pre 元素中的文本一般會保留空格和換行符。而文本也會呈現爲等寬字體。

<pre> 標籤的一個常見應用就是用來表示計算機的源代碼。

能夠致使段落斷開的標籤（例如標題、 和 <address> 標籤）毫不能包含在 <pre> 所定義的塊裏。儘管有些瀏覽器會把段落結束標籤解釋爲簡單地換行，可是這種行爲在全部瀏覽器上並不都是同樣的。

爲了使包含在pre元素中的文本內容能正確換行，一般須要配上如下樣式代碼：

<style type="text/css"> pre{ white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;       
    }
</style>

提示：在用<pre>標籤訂義計算機源代碼時，請使用符號實體來表示特殊字符，好比"<"表明"<"，">"表明">"，"&"表明"&"。

十5、使用下拉列表<datalist>

<datalist> 標籤訂義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。

提示： input 元素的 list 屬性必定要和 datalist的id屬性值相同。

<input list="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value="Volvo">
</datalist>

datalist是H5的新標籤，目前只有 Firefox 和 Opera 支持 <datalist> 標籤。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。