HTML 文本格式化
1. 常見文本格式化標籤
html文本格式化是將文本內容按照需求進行修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>html文本格式化標籤</h1>
<p>
<b>b_bold_加粗文本</b>
<br/>
<strong>strong_加粗文本_加重語氣</strong>
<br/>
<i>i_italic_斜體文本</i>
<br/>
<em>em_斜體文本</em>
<br/>
<big>big_放大文本</big>
<br/>
<small>small_縮小文本</small>
<br/>
<sub>sub_下標</sub>
<br/>
<sup>sup_上標</sup>
<br/>
log<sub>3</sub><sup>9</sup>=3
<br/>
<ins>ins_插入字_加下劃線</ins>
<br/>
<del>del_刪除字</del>
</p>
</body>
</html>
運行結果：
2. “計算機輸出”標籤
| 標籤 | 意義 |
|---|---|
| <code> | 定義計算機代碼 |
| <kbd | 定義鍵盤碼 |
| <samp> | 定義計算機代碼樣本 |
| <var> | 定義變量 |
| <pre> | 定義預格式文本 |
用pre標籤可以將行與複數空格表示出來。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<code>code
_ __ 冬天 是 兩個
動物 交配的
季節
</code>
<br/>
<kbd>kbd
_ __ 冬天 是 兩個
動物 交配的
季節
</kbd>
<br/>
<samp>samp
_ __ 冬天 是 兩個
動物 交配的
季節
</samp>
<br/>
<var>var
_ __ 冬天 是 兩個
動物 交配的
季節
</var>
<br/>
<pre>pre
_ __ 冬天 是 兩個
動物 交配的
季節
</pre>
</body>
</html>
運行結果：
3. 引文，引用及標籤定義
abbr
- 標籤定義及使用說明
<abbr> 標籤用來表示一個縮寫詞或者首字母縮略詞，如"WWW"或者"NATO"。
\通過對縮寫詞語進行標記，您就能夠爲瀏覽器、拼寫檢查程序、翻譯系統以及搜索引擎分度器提供有用的信息。
- 提示和註釋
提示：在某些瀏覽器中，當您把鼠標移至帶有 <abbr> 標籤的縮寫詞/首字母縮略詞上時，<abbr> 標籤的 title 屬性可被用來展示縮寫詞/首字母縮略詞的完整版本。
address
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<p>abbr定義縮寫</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<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>
<p>該段落文字從左到右顯示。</p>
<p><bdo dir="rtl">該段落文字從右到左顯示。</bdo></p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's 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>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<dfn>定義項目</dfn>
</body>
</html>
- 標籤定義及使用說明
<address> 標籤定義文檔作者/所有者的聯繫信息。
如果 <address> 元素位於 <body> 元素內部，則它表示該文檔作者/所有者的聯繫信息。
如果 <address> 元素位於 <article> 元素內部，則它表示該文章作者/所有者的聯繫信息。
<address> 元素的文本通常呈現爲斜體。大多數瀏覽器會在該元素的前後添加換行。
- 提示和註釋
提示：不應該使用 <address> 標籤來描述郵政地址，除非這些信息是聯繫信息的組成部分。
提示：<address> 元素通常被包含在 <footer> 元素的其他信息中。
bdo
- 標籤定義及使用說明
bdo 指的是 bidi 覆蓋（Bi-Directional Override）。
<bdo> 標籤用來覆蓋默認的文本方向。
- 屬性dir
值ltr(left to right)從左向右
值rtl(right to left)從右向左
blockquote
- 標籤定義及使用說明
<blockquote> 標籤定義摘自另一個源的塊引用。
瀏覽器通常會對<blockquote> 元素進行縮進。
- 提示和註釋
提示：如果標記是不需要段落分隔的短引用，請使用 <q>。
屬性cite，值爲URL，是引用的來源。
如需把頁面作爲 XHTML 進行驗證，那麼
元素必須包含塊級元素，比如：
<blockquote>
<p>這是一個長引用，這是一個長引用。</p>
</blockquote>
blockquote元素中一般嵌套p元素，用於標記被引用的文本，這些引用文本並不是直接位於blockquote元素中。
如果引文來自在線資源（包括自己網站中的其他地方），那麼可以在<blockquote>標籤的cite（引用）屬性中指明原始來源的URL。
通常瀏覽器會把blockquote元素呈現爲一段左右兩側縮進(40px)的文本。
q
- 標籤定義及使用說明
<q> 標籤定義一個短的引用。
瀏覽器經常會在這種引用的周圍插入引號。
- 提示和註釋
提示：請使用 <blockquote> 來標記摘自另一個源的塊引用。
屬性cite，值爲URL，是引用的源URL。
cite
- 標籤定義及使用說明
<cite> 標籤定義作品（比如書籍、歌曲、電影、電視節目、繪畫、雕塑等等）的標題。
註釋：人名不屬於作品的標題。
dfn
- 標籤定義及使用說明
<dfn> 標籤是一個短語標籤，用來定義一個定義項目。
提示：我們並不反對使用這個標籤，但是如果您只是爲了達到某種視覺效果而使用這個標籤的話，我們建議您使用 CSS ，這樣可能會取得更豐富的效果。
