第 2 章 HTML 5 的常用元素与属性

HTML 5 保留了原有 HTML 规范的绝大部分元素和属性，删除了少量元素和属性——主要删除了文档样式相关的各种元素和属性。HTML 5 推荐使用 CSS 样式单来控制 HTML 文档样式。

2.1 HTML 5 保留的常用元素

2.1.1 基本元素

HTML 5 保留的基本元素

<html>：根元素

<head>：页面头部

<title>：页面标题

<body>：页面主体

<style>：样式定义

<h1> 到 <h6>：标题一到标题六

<p>：段落，段落之间有间距。

<br>：换行

<hr>：水平线

<div>：文档中的节，自动换行。

<span>：文档中的节，不自动换行。

程序清单 basic.html

<!DOCTYPE html>
<html>
<head>
    <title>基本标签</title>
</head>
<body>
    <!-- 标题一到标题六 -->
    <h1>疯狂 Java 讲义</h1>
    <h2>疯狂 Android 讲义</h2>
    <h3>轻量级 Java EE 企业应用实战</h3>
    <h4>疯狂 XML 讲义</h4>
    <h5>疯狂 Ajax 讲义</h5>
    <h6>经典 Java EE 企业应用实战</h6>
    
    <!-- 水平线 -->
    <hr>

    <!-- 用三个 span 定义三节 -->
    <span>Tomcat</span>
    <span>Jetty</span>
    <span>Resin</span>

    <!-- 换行 -->
    <br>

    <!-- 用三个 div 定义三节 -->
    <div>Tomcat</div>
    <div>Jetty</div>
    <div>Resin</div>

    <!-- 用三个 p 定义三个段落 -->
    <p>Tomcat</p>
    <p>Jetty</p>
    <p>Resin</p>
</body>
</html>

2.1.2 文本格式化元素

<b>：粗体文本

<i>：斜体文本

<em>：强调文本，斜体显示，外观与 <i> 相同。

<strong>：粗体文本，代表重要的文本，外观与 <b> 相同。

<small>：小号字体文本

<sup>：上标文本

<sub>：下标文本

<bdo>：文本显示方向，属性 dir="ltr" 表示从左到右显示文本，属性 dir="rtl" 表示从右到左显示文本。

程序清单 text.html

<!DOCTYPE html>
<html>
<head>
    <title>文本格式化标签</title>
</head>
<body>
    <span><b>加粗文本</b></span><br>
    <span><i>斜体文本</i></span><br>
    <span><b><i>粗斜体文本</i></b></span><br>
    <span><em>被强调的文本</em></span><br>
    <p><strong>加粗文本</strong></p>
    <small><span>小号字体文本</span></small><br>
    <div>普通文本<sup>上标文本</sup></div>
    <span>普通文本<strong><sub>下标加粗文本</sub></strong></span><br>
    <bdo dir="ltr">从左向右排列的文本</bdo><br>
    <bdo dir="rtl">从右向左排列的文本</bdo><br>
</body>
</html>

2.1.3 语义相关元素

<abbr>：定义缩写，属性 title 代表缩写的全称。

<address>：定义地址，浏览器会斜体显示。

<blockquote>：引用带换行的长文本，浏览器会自动缩进。属性 cite 指定来源 URL。

<q>：引用不带换行的短文本，浏览器会自动添加引号。

<cite>：引用电影、歌曲、书等作品的标题，浏览器会斜体显示。

<code>：引用代码

<dfn>：专业术语，浏览器会粗体或斜体显示。

<del>：被删除文本，浏览器会自动加中划线。

<ins>：插入文本，浏览器会自动加下划线。

<pre>：定义预格式化文本，里面的所有空格符都会被保留。

<samp>：示范文本

<kbd>：键盘文本，代表键盘输入。

<var>：变量，浏览器会斜体显示。

<!DOCTYPE html>
<html>
<head>
    <title>语义相关元素</title>
</head>
<body>
    <!-- 用 q 引用短文本 -->
    <p>疯狂 Java 的精神是<q cite="http://www.fkjava.org">疯狂源自梦想，技术成就辉煌</q>。这也是所有疯狂 Java 程序员的精神。</p>

    <div>
        <!-- 用 blockquote 引用长文本 -->
        <blockquote>
            锦瑟无端五十弦，一弦一柱思华年。<br>
            庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br>
            沧海月明珠有泪，蓝田日暖玉生烟。<br>
            此情可待成追忆，只是当时已惘然。<br>
        </blockquote>
        是唐朝诗人李商隐的代表作，诗中隐藏中一种淡淡的忧伤，让人无法言说，但又无以谴怀。
    </div>

    <!-- 用 cite 引用作品标题 -->
    <p><cite>《芙蓉镇》</cite>、<cite>《蓝风筝》</cite>是国内导演拍摄的最有思考深度的两部电影。</p>

    <p> 下面代码定义了一个 Java 类：<br>
        <!-- 用 code 引用代码 -->
        <code>
            public class Cat <br>
            {<br>
                private int name = "garfield";<br>
            }<br>
        </code>
    </p>

    <!-- 用 pre 定义预格式化文本 -->
    <pre>
        public class Cat
        {
            private int name = "garfield";
        }
    </pre>

    <p>
        <!-- 用 abbr 定义缩写 -->
        疯狂 Java 教育中心的缩写是 <abbr title="疯狂 Java 教育">fkjava</abbr>。
        <!-- 用 address 定义地址 -->
        疯狂软件地址是<address>广州市天河区车陂大岗路 4 号沣宏大厦 3006-3011</address>
    </p>

    <!-- 用 dfn 定义专业术语 -->
    <p><dfn>HTML</dfn> 是一种广为人知的标记语言。</p>

    <p> 可通过输入如下命令：<br>
        <!-- 用 kbd 定义键盘文本 -->
        <kbd>ls -l</kbd><br>
        在 Linux 的 Shell 窗口查看当前目录下所有文件、目录的详细信息。
    </p>

    <p> 如果您在阅读疯狂 Java 体系图书时，遇到有任何无法理解的技术问题，<br>
        请登录 www.fkjava.org 发帖提问，可按如下示例内容发帖：<br>
        <!-- 使用 samp 定义范例文本 -->
        <samp>
            我在阅读 XXX 图书的第 X 章、第 X 节时，遇到一个 XXX 问题，<br>
            错误提示信息是：XXX。
        </samp>
    </p>

    <!-- 用 var 定义变量 -->
    <var>i</var>、<var>j</var>、<var>k</var> 通常用于作为循环计数器变量。

    <!-- 用 del 定义被删除文本，用 ins 定义插入文本。 -->
    <p>Android 是一个<del>开发</del><ins>开放</ins>式的手机、平板电脑操作系统。</p>
</body>
</html>

第 2 章 HTML 5 的常用元素与属性