文章目錄
第4章 文本
選擇元素不是爲了使用其樣式，而是爲了描述內容，比如不能爲了讓文字變成斜體就使用em,em是用來標記強調的文本的。
4.1 添加段落
<p>:HTML會忽略你在文本編輯器中輸入的回車符和其他額外的空格。要在網頁中開始一個新的段落，應該使用p元素
4.2 指定細則
small表示細則一類的旁註（side comment），“通常包括免責聲明、注意事項、法律限制、版權信息等。有時我們還可以用它來表示署名，或者滿足許可要求。”
small通常是行內文本中的一小塊，而不是包含多個段落或其他元素的大塊文本
1.例子一：
Order now to receive free shipping. (Some restrictions may apply.)
2.例子二：在上面的兩個例子中，我們用
small元素來表示簡短的法律聲明。在第二個例子中，small表示的是包含在頁面級footer裏的版權聲明，這是一種常見的用法
提示 用
small標記頁面的版權信息是一種常見的做法。不過，small只適用於短語，因此不要用它標記長的法律聲明，如“使用條款”和“隱私政策”頁面。根據需要，應該用段落或其他語義標籤標記這些內容。
4.3 標記重要和強調的文本
strong元素：表示內容的重要性。em元素：表示內容的着重點。
This is my pen.I like it.
提示 不要使用b元素代替strong，也不要使用i元素代替em。儘管它們在瀏覽器中顯示的樣式是一樣的，但它們的含義卻很不一樣
HTML5中重新定義的
b和i元素
HTML5強調元素的語義，而非表現。b和i元素是早期HTML遺留下來的產物，它們分別用於將文本變爲粗體和斜體（那時CSS還未出現）。HTML4和XHTML1當然拋棄了它們，因爲它們本質上是用於表現的。當時的規範建議編碼人員用strong替代b，用em替代i。不過，事實證明，em和strong有時在語義上並不合適。爲此，HTML5重新定義了b和i。
傳統出版業裏的某些排版規則在現有的HTML語義中還找不到對應物，其中就包括用斜體表示植物學名（如“Ulmus americana is the Massachusetts state tree.”）、具體的交通工具名稱（如“We rode the Orient Express.”）及外來語（如“The couple exhibited a joie de vivre that was infectious.”）。這些詞語不是爲了強調而加上斜體的，只是樣式上的慣例。
爲了應對這些情況，HTML5沒有創建一些新的語義化元素（進一步把事情搞複雜），而是採取了一種很實際的做法，直接利用現有元素：em用於所有層次的強調，strong用於表示重要性，而其他情況則使用b和i。
這意味着，儘管b和i並不包含任何明顯的語義，但讀者仍能發現它們與周邊文字的差別。而且你還可以通過CSS改變它們粗體或斜體的樣式。HTML5強調，b和i應該是其他元素（如strong、em、cite等）都不適用時的最後選擇。
b元素簡介
HTML5將b重新定義爲：
b元素表示出於實用目的提醒讀者注意的一塊文字，不傳達任何額外的重要性，也不表示其他的語態和語氣，用於如文檔摘要裏的關鍵詞、評論中的產品名、基於文本的交互式軟件中指示操作的文字、文章導語等。
例如：
<p>The <b>XR-5</b>, also dubbed the <b>Extreme Robot 5</b>, is the best robot we've ever tested.</p>
b元素默認顯示爲粗體。
i元素簡介
HTML5將i重新定義爲：
i元素表示一塊不同於其他文字的文字，具有不同的語態或語氣，或其他不同於常規之處，用於如分類名稱、技術術語、外語裏的慣用語、翻譯的散文、西方文字中的船舶名稱等。
例如：
<p>The <i lang="la">Ulmus americana</i> is the Massachusetts state tree.</p>
<p>We rode the <i>Orient Express</i>.<p>
<p>The couple exhibited a <i lang="fr">joie de vivre</i> that was infectious.<p>
i元素默認顯示爲斜體。
4.4 創建圖
figure元素：插入圖片、圖表、圖形、代碼以及其他的獨立內容figcaption元素：figure的標題，出現在figure內容的開頭或結尾處。
<figure>
<figcaption>花木蘭</figcaption>
<img src="花木蘭 冠軍飛將.jpeg">
<figcaption>冠軍飛將</figcaption>
<code>console.log("hello mulan！")</code>
</figure>
4.5 指明引用或參考
cite元素：指明某內容源的引用或參考，例如，戲劇、腳本或圖書的標題，歌曲、電影、照片、或雕塑的名稱，演唱會或音樂會，規範、報紙或法律文書等。
4.6 引述文本
bolckquote元素：引述塊級文本q元素：引述行內文本 （瀏覽器會默認添加雙引號）
由於
q元素的跨瀏覽器問題，開發時要避免使用q元素，而是選擇直接輸入正確的引號或使用字符實體。
4.7 時間
time元素：定義公曆的時間（24 小時制）或日期，時間和時區偏移是可選的datetime屬性：規定日期 / 時間。否則，由元素的內容給定日期 / 時間。
該元素能夠以機器可讀的方式對日期和時間進行編碼，這樣，舉例說，用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也能夠生成更智能的搜索結果。
格式：
YYYY-MM-DDThh:mm:ss或者YYYY-MM-DDT:hh:mm.sss
例如：1985-11-03T17:19:40
如果表示時間段，需要用nh nm ns
例如：<p>這個會議持續了<time>2h 41m 3s</time>
<p>我們在每天早上 <time>9:00</time> 開始營業。</p>
<p>我在 <time datetime="2008-02-14">情人節</time> 有個約會。</p>
提示：不能在
time元素中嵌套另一個time元素，也不能在沒有datetime屬性的time元素中包含其他元素（只能包含文本）
4.8解釋縮寫詞
<abbr title="abbreviation">abbr</abbr>
<abbr title="National Basketball Association">NBA</abbr>
<abbr>NFL</abbr>(National Football League)
頁面顯示效果：
方式一：
| NBA |
|---|
方式二：
| NFL(National Football League) |
|---|
方式二對手機用戶友好，這些用戶沒辦法移到
<abbr>元素上查看title提示框
4.9 定義術語
dfn元素：定義術語（只是包圍術語詞兒，而不包圍定義）
<p>The contestant was asked to spell "pleonasm".
She requested the definition and was told that <dfn>pleonasm</dfn> means "a redundant word or expression"(Ref:<cite><a href="http://dictionary.reference.com/browse/pleonasm" rel="external">dictionary.com</a></cite>).</p>
4.10 上標和下標
sub：下標sup：上標
<a href="#footnote-1" title="Read footnote 1"><sup>1</sup></a>.
<a href="#footnote-2" title="Read footnote 2"><sup>2</sup></a>.
<footer>
<p id="footnote-1"><sup>1</sup>It means Paul in English.</p>
<p id="footnote-2"><sup>2</sup>In 1963,Ibelieve.</p>
</footer>
The1.
The2.
4.11 添加作者聯繫信息
address元素：用以定義有關作者、相關人士或組織的聯繫信息，通常位於相關部分內或者頁面底部
address元素的內容通常是作者的電子郵件地址或者指向聯繫信息頁的鏈接。但address不能用來標記公司網站“聯繫我們”頁面中的辦公地點
提示
address只能包含作者的聯繫信息，不能包括其他內容，如文檔或文章的最後修改時間。此外，HTML5禁止在address裏包含以下元素：h1～h6、article、address、aside、footer、header、hgroup、nav和section
4.12 標註編輯和不再準確的文本
ins元素：代表添加內容,標記新插入文本del元素：代表刪除內容，標記以刪除文本s元素：標記不再準確或不再相關的文本
<ul>
<li><del>2 desks</del></li>
<li>1 chalkboard</li>
<li><del>4 solar-powered tablets</del></li>
<li><ins>1 bicycle</ins></li>
</ul>
<s>HTML4 HTML3 HTML2 HTML1</s>
效果如下：
2 desks- 1 chalkboard
4 solar-powered tablets- 1 bicycle
del和ins是少有的既可以包圍短語內容（HTML5之前稱“行內元素”）又可以包圍塊級內容的元素
4.13 標記代碼
code元素：標記代碼或文件名
<code><ul id="thumbnail"></code>
<ul id=“thumbnail”>
注意 code元素中需要表示左右尖括號的話應該要用
<和>，否則瀏覽器會將這些代碼當做HTML元素處理 （lt:less than,gt:greater than）
4.14 使用預格式化的文本
pre元素：保持文本固有的換行和空格，這是表現計算機代碼示例的理想元素
<pre>
<code>
abbr[title]{
border-bottom:1px dotted #000;
}
</code>
</pre>
效果如下：
abbr[title]{
border-bottom:1px dotted #000;
}
對比效果（不用<pre>）：
abbr[title]{
border-bottom:1px dotted #000;
}
4.15 突出顯示文本
mark元素：突出顯示文本
4.16 創建換行
br元素：強制換行
提示 在HTML5中，輸入
<br />或<br>都是有效的
4.17 創建span
span元素：沒有任何語義，適合包圍資瓷或短語內容（div適合包圍塊級內容）
4.18 其他元素
mater元素：表示分數的值或意志範圍的測量結果
簡單地說，它代表的是投票結果（如“30% Smith，37% Garcia，33% Hawkins”）、已售票數（如“共850張，已售811張”）、考試分數（如“百分制的90分”）、磁盤使用量（如“256GB中的74GB”）等測量數據。
<p>project completion staus:<meter value="0.80">80% completed</meter></p>
<p>Car brake pad wear:<meter low="0.25" high="0.75" optimum="0" value="0.21">21% worn</meter>
<p>Miles walked during half-marathon:<meter min="0" max="13.1" value="5.5" title="Miles">4.5</meter></p>
效果如下：
project completion staus:80% completed
Car brake pad wear:21% worn
Miles walked during half-marathon:4.5