第 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>
网友评论