第 2 章 HTML 5 的常用元素與屬性
HTML 5 保留了原有 HTML 規(guī)范的絕大部分元素和屬性，刪除了少量元素和屬性——主要刪除了文檔樣式相關(guān)的各種元素和屬性。HTML 5 推薦使用 CSS 樣式單來控制 HTML 文檔樣式。
2.1 HTML 5 保留的常用元素
2.1.1 基本元素
HTML 5 保留的基本元素
<html>：根元素
<head>：頁面頭部
<title>：頁面標(biāo)題
<body>：頁面主體
<style>：樣式定義
<h1> 到 <h6>：標(biāo)題一到標(biāo)題六
<p>：段落，段落之間有間距。
<br>：換行
<hr>：水平線
<div>：文檔中的節(jié)，自動換行。
<span>：文檔中的節(jié)，不自動換行。
程序清單 basic.html
<!DOCTYPE html>
<html>
<head>
<title>基本標(biāo)簽</title>
</head>
<body>
<!-- 標(biāo)題一到標(biāo)題六 -->
<h1>瘋狂 Java 講義</h1>
<h2>瘋狂 Android 講義</h2>
<h3>輕量級 Java EE 企業(yè)應(yīng)用實(shí)戰(zhàn)</h3>
<h4>瘋狂 XML 講義</h4>
<h5>瘋狂 Ajax 講義</h5>
<h6>經(jīng)典 Java EE 企業(yè)應(yīng)用實(shí)戰(zhàn)</h6>
<!-- 水平線 -->
<hr>
<!-- 用三個(gè) span 定義三節(jié) -->
<span>Tomcat</span>
<span>Jetty</span>
<span>Resin</span>
<!-- 換行 -->
<br>
<!-- 用三個(gè) div 定義三節(jié) -->
<div>Tomcat</div>
<div>Jetty</div>
<div>Resin</div>
<!-- 用三個(gè) p 定義三個(gè)段落 -->
<p>Tomcat</p>
<p>Jetty</p>
<p>Resin</p>
</body>
</html>
2.1.2 文本格式化元素
<b>：粗體文本
<i>：斜體文本
<em>：強(qiáng)調(diào)文本，斜體顯示，外觀與 <i> 相同。
<strong>：粗體文本，代表重要的文本，外觀與 <b> 相同。
<small>：小號字體文本
<sup>：上標(biāo)文本
<sub>：下標(biāo)文本
<bdo>：文本顯示方向，屬性 dir="ltr" 表示從左到右顯示文本，屬性 dir="rtl" 表示從右到左顯示文本。
程序清單 text.html
<!DOCTYPE html>
<html>
<head>
<title>文本格式化標(biāo)簽</title>
</head>
<body>
<span><b>加粗文本</b></span><br>
<span><i>斜體文本</i></span><br>
<span><b><i>粗斜體文本</i></b></span><br>
<span><em>被強(qiáng)調(diào)的文本</em></span><br>
<p><strong>加粗文本</strong></p>
<small><span>小號字體文本</span></small><br>
<div>普通文本<sup>上標(biāo)文本</sup></div>
<span>普通文本<strong><sub>下標(biāo)加粗文本</sub></strong></span><br>
<bdo dir="ltr">從左向右排列的文本</bdo><br>
<bdo dir="rtl">從右向左排列的文本</bdo><br>
</body>
</html>
2.1.3 語義相關(guān)元素
<abbr>：定義縮寫，屬性 title 代表縮寫的全稱。
<address>：定義地址，瀏覽器會斜體顯示。
<blockquote>：引用帶換行的長文本，瀏覽器會自動縮進(jìn)。屬性 cite 指定來源 URL。
<q>：引用不帶換行的短文本，瀏覽器會自動添加引號。
<cite>：引用電影、歌曲、書等作品的標(biāo)題，瀏覽器會斜體顯示。
<code>：引用代碼
<dfn>：專業(yè)術(shù)語，瀏覽器會粗體或斜體顯示。
<del>：被刪除文本，瀏覽器會自動加中劃線。
<ins>：插入文本，瀏覽器會自動加下劃線。
<pre>：定義預(yù)格式化文本，里面的所有空格符都會被保留。
<samp>：示范文本
<kbd>：鍵盤文本，代表鍵盤輸入。
<var>：變量，瀏覽器會斜體顯示。
<!DOCTYPE html>
<html>
<head>
<title>語義相關(guān)元素</title>
</head>
<body>
<!-- 用 q 引用短文本 -->
<p>瘋狂 Java 的精神是<q cite="http://www.fkjava.org">瘋狂源自夢想，技術(shù)成就輝煌</q>。這也是所有瘋狂 Java 程序員的精神。</p>
<div>
<!-- 用 blockquote 引用長文本 -->
<blockquote>
錦瑟無端五十弦，一弦一柱思華年。<br>
莊生曉夢迷蝴蝶，望帝春心托杜鵑。<br>
滄海月明珠有淚，藍(lán)田日暖玉生煙。<br>
此情可待成追憶，只是當(dāng)時(shí)已惘然。<br>
</blockquote>
是唐朝詩人李商隱的代表作，詩中隱藏中一種淡淡的憂傷，讓人無法言說，但又無以譴懷。
</div>
<!-- 用 cite 引用作品標(biāo)題 -->
<p><cite>《芙蓉鎮(zhèn)》</cite>、<cite>《藍(lán)風(fēng)箏》</cite>是國內(nèi)導(dǎo)演拍攝的最有思考深度的兩部電影。</p>
<p> 下面代碼定義了一個(gè) Java 類：<br>
<!-- 用 code 引用代碼 -->
<code>
public class Cat <br>
{<br>
private int name = "garfield";<br>
}<br>
</code>
</p>
<!-- 用 pre 定義預(yù)格式化文本 -->
<pre>
public class Cat
{
private int name = "garfield";
}
</pre>
<p>
<!-- 用 abbr 定義縮寫 -->
瘋狂 Java 教育中心的縮寫是 <abbr title="瘋狂 Java 教育">fkjava</abbr>。
<!-- 用 address 定義地址 -->
瘋狂軟件地址是<address>廣州市天河區(qū)車陂大崗路 4 號灃宏大廈 3006-3011</address>
</p>
<!-- 用 dfn 定義專業(yè)術(shù)語 -->
<p><dfn>HTML</dfn> 是一種廣為人知的標(biāo)記語言。</p>
<p> 可通過輸入如下命令：<br>
<!-- 用 kbd 定義鍵盤文本 -->
<kbd>ls -l</kbd><br>
在 Linux 的 Shell 窗口查看當(dāng)前目錄下所有文件、目錄的詳細(xì)信息。
</p>
<p> 如果您在閱讀瘋狂 Java 體系圖書時(shí)，遇到有任何無法理解的技術(shù)問題，<br>
請登錄 www.fkjava.org 發(fā)帖提問，可按如下示例內(nèi)容發(fā)帖：<br>
<!-- 使用 samp 定義范例文本 -->
<samp>
我在閱讀 XXX 圖書的第 X 章、第 X 節(jié)時(shí)，遇到一個(gè) XXX 問題，<br>
錯誤提示信息是：XXX。
</samp>
</p>
<!-- 用 var 定義變量 -->
<var>i</var>、<var>j</var>、<var>k</var> 通常用于作為循環(huán)計(jì)數(shù)器變量。
<!-- 用 del 定義被刪除文本，用 ins 定義插入文本。 -->
<p>Android 是一個(gè)<del>開發(fā)</del><ins>開放</ins>式的手機(jī)、平板電腦操作系統(tǒng)。</p>
</body>
</html>
