语义相关元素 | 江离书生

HTML5保留了如下语义相关元素。

<abbr>：用于表示一个缩写。使用该元素时通常建议指定title属性，该属性用于指定该缩写所代表的全称。
<address>：用于表示一个地址。浏览器通常会用斜体字显示<address../>所包含的文本<blockquote>：用于定义一段长的引用文本。浏览器会使用缩进的方式显示这段被引用文本。使用<blockquote.../>元素时可指定 cite 属性，该属性用于指定该引用文本所引用的网址 URL 或出处。
<g>：用于定义一段短的引用文本。浏览器会为这段被引用文本添加引号。

<blockquote.../>与<q.../>元素的作用基本相似，区别只是<blockquote.../>用于引用一段带换行的、大段文本；但<q.../>元素则用于引用一段不带换行的、较短的文本。

<cite>：用于表示作品（一本书、一部电影、一首歌曲）的标题。常常浏览器会用斜体字显示<cite.../>所包含的文本。

在 HTML4 中，<cite.../>元素可用于表示作者，而 HTML5 明确规定<cite.../>元素不能用于表示包括作者在内的任何人名（除非作品的标题就是人名)，但在实际开发中，为了与 HTML4 兼容，即使用<cite.../>元素表示人名也不会认为是错误的。

<code>：用于表示一段计算机代码。
<dfn>：用于定义一个专业术语。浏览器通常会用粗体或斜体字显示<dfn.../>所包含的文本。
<del>：定义文档中被删除的文本。浏览器通常会以中画线形式显示<del>包含的文本。
<ins>：定义文档中插入的文本。浏览器通常会以下画线形式显示包含的文本。

<del.../>元素和<ins.../>元素通常结合使用，用于表示文档被“修订”的效果。其中<del.../>元素表示被删除，而<ins.../>表示更新的文本。而且使用这两个元素时都可以指定如下两个属性。

cite：该属性值为一个 URL，该 URL 对应的文本解释了文本被删除或插入的原因。

datetime：定义文本被删除或插入的日期、时间。

<pre>：用于表示该元素所包含的文本已经进行了“预格式化”。也就是说，<pre.../>元素所包含文本中的空格、回车、Tab 键和其他格式字符都会被保留下来，但浏览器会处理<pre.../>元素内大部分 HTML 元素。
<samp>：用于定义示范文本内容。
<kbd>；用于定义键盘文本。该元素用于表示文本是通过键盘输入的。通常在计算机使用文档、使用说明中会经常使用该元素。
<var>：用于表示一个变量。浏览器通常会用斜体字显示<var.../>所包含的文本。

下面的页面片段使用了<q.../>、<blockquote.../>、<cite.../>等语义相关的元素来定义 HTML 面。

<body>
<!--使用 q 表示一段短的引用文本-->
<p>疯狂Java的精神是<q>疯狂源自梦想，技术成就辉煌</q>
这也是所有疯狂Java程序员的精神。</p>
<div>
<!--使用 blockquote 表示一段长的引用文本 -->
<blockquote cite="李义山诗集">
锦瑟无端五十弦，一弦一柱思华年。<br>
庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br>
沧海月明珠有泪，蓝田日暖玉生烟。<br>
此情可待成追忆，只是当时已惘然。</blockquote>
是唐朝诗人李商隐的代表作，诗中隐藏着一种淡淡的忧伤，让人无法言说，但又无以谴怀。</div>
<p>
<cite>《芙蓉镇》</cite>、<cite>《蓝风筝》</cite>是国内导演拍摄得很有思考深度的两部电影。</p>
<p>
下面代码定义了一个Java类：<br>
<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>
</body>

使用浏览器浏览该页面，将可以看到如图 2.3 所示的效果。

HTML中语义相关元素的效果（一）

下面的页面片段使用了<abbr.../>、<address.../>、<code.../>等语义相关的元素来定义HTML页面。

<body>
<!--使用 abbr 定义缩写-->
疯狂 Java 教育中心的缩写是<abbr title="疯狂Java 教育">fkjava</abbr>。
<!--使用 address 定义地址-->
疯狂软件地址是<address>广州市天河区车陂大岗路4号沣宏大厦 3006-3011</address>
<!--使用 dfn 定义专业术语-->
<p>
<dfn>HTML</dfn>是一种广为人知的标记语言。
</p>
<p>
可通过输入如下命令：<br>
<kbd>list -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>

使用浏览器浏览该页面，将可以看到如图 2.4 所示的效果。

HTML中语义相关元素的效果（二）