2.2 HTML5保留的基本元素(1)

基本元素

HTML 5保留的基本元素有如下几个。
➢　：定义HTML注释。位于之间的内容会被当成注释处理。
➢　<html>：它是HTML 5文档的根元素。但HTML 5允许完全省略这个元素。
➢　<head>：它用于定义HTML 5文档的页面头部分。但HTML 5允许完全省略这个元素。
➢　<title>：它用于定义HTML 5文档的页面标题。
➢　<body>：它用于定义HTML 5文档的页面主体部分，该标签可以指定id、class、style等核心属性，还可以指定onload、onunload、onclick、ondblclick、onmousedown、onmouseup、onmouseover、onmousemove、onmouseout、onkeypress、onkeydown、onkeyup等事件属性，这些属性用于指定JavaScript脚本。
➢　<style>：该元素用于引入样式定义。关于该元素的用法请参考本书关于CSS章节的介绍。
➢　<h1>到<h6>：定义标题一到标题六。
➢　<p>：定义段落，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。
➢　<br>：插入一个换行，该标签可以指定id、class、style等核心属性。
➢　<hr>：定义水平线，该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。HTML 5中<hr.../>还代表了主题结束的语义。
➢　<div>：定义文档中的节。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。
➢　<span>：与<div>基本相似，区别是该定义的节默认不会换行。该标签可以指定和<div>相同的属性。

提示

　　几乎所有的HTML元素都可指定id、style和class属性。其中id属性用于为HTML元素指定一个唯一标识，该标识是通过DOM访问HTML元素的重要途径。class和style属性是CSS样式相关属性，关于CSS样式的作用和用法请参考本书关于CSS章节的介绍。

例子：

下面一份基本的HTML 5文档中包含了这些标签，页面代码如下:

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>基本标签</title>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
</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>Jetty<p>Resin
</body>  
</html>

提示

　　<span.../>、<div.../>和<p.../>三个元素的效果有点类似，它们都可作为其他内容的“容器”——容纳文本和其他内容。在默认情况下，<span.../>元素不会导致换行，而<div.../>元素会导致换行，而<p.../>元素会产生一个段落，所以段落和段落之间默认有更大的间距。
　　除此之外，还有一点需要指出：<span.../>元素和<p.../>元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等内容，<p.../>可以包含<span.../>元素，但<span.../>不能包含<p.../>；<div.../>元素除了可以包含上面这些内容之外（包括<p.../>和<span.../>），还可以包含<h1.../>到<h6.../>、<form.../>、<table.../>、列表项元素和<div.../>元素——由此可见，<div.../>元素可以包含更多内容。

文本格式化元素

➢　<b>：定义粗体文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。
➢　<i>：定义斜体文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。
➢　<em>：定义强调文本，实际效果与斜体文本差不多。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。
➢　<strong>：定义粗体文本。与<b>标签的作用和用法基本相同。
➢　<small>：定义小号字体文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。
➢　<sup>：定义上标文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。 ➢　<sub>：定义下标文本。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。
➢　<bdo>：定义文本显示的方向。该标签可以指定id、class、style等核心属性，还可以指定onclick等各种事件属性。除此之外，该标签也可以指定dir属性，该属性值只能是ltr或者rtl。

提示：

　　1.HTML 5为<strong.../>元素增加了语义，使用<strong.../>包起来的文本代表重要的文本。
　　2.HTML 5定义了<small.../>元素专门用于标识所谓的“小字印刷体”，通常用来标注诸如免责声明、注意事项、法律规定和版权相关的声明性文字。

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <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>

语义相关元素

➢　<abbr>：用于表示一个缩写。使用该元素时可指定如下属性。
title，该属性用于指定该缩写所代表的全称。
➢　<address>：用于表示一个地址。浏览器通常会用斜体字显示<address.../>所包含的文本。
➢　<blockquote>：用于定义一段长的引用文本。浏览器会使用缩进的方式显示这段被引用文本。使用<blockquote.../>元素时可指定如下属性。
cite：该属性指定该引用文本所引用的网址URL。
➢　<q>：用于定义一段短的引用文本。浏览器会为这段被引用文本添加引号。
➢　<cite>：用于表示作品（一本书、一部电影、一首歌曲）的标题。常常浏览器会用斜体字显示<cite.../>所包含的文本。
➢　<dfn>：用于定义一个专业术语。浏览器通常会用粗体或斜体字显示所包含的文本。
➢　<del>：定义文档中被删除的文本。浏览器通常会以中画线形式显示<del>包含的文本。
➢　<ins>：定义文档中插入的文本。浏览器通常会以下画线形式显示<ins>包含的文本。
➢　<kbd>：用于定义键盘文本。该元素用于表示文本是通过键盘输入的。通常在计算机使用文档、使用说明中会经常使用该元素。
➢　<var>：用于表示一个变量。浏览器通常会用斜体字显示<var.../>所包含的文本。

提示

　　1.<blockquote.../>与<q.../>元素的作用基本相似，区别只是<blockquote.../>用于引用一段带换行的、大段文本；但<q.../>元素则用于引用一段不带换行的、较短的文本。
　　2.<del.../>元素和<ins.../>元素通常结合使用，用于表示文档被“修订”的效果。其中<del.../>元素表示被删除，而<ins.../>表示更新的文本。

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 语义相关元素 </title>
</head>  
<body>  
<!-- 使用q表示一段短的引用文本。 -->  
<p>疯狂Java的精神是<q cite="http://www.fkjava.org">疯狂源自梦想，技术成就辉煌</q>  
这也是所有疯狂Java程序员的精神。</p>
<div>  
<!-- 使用blockquote表示一段长的引用文本。 -->  
<blockquote>  
锦瑟无端五十弦，一弦一柱思华年。<br>
庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br>
沧海月明珠有泪，蓝田日暖玉生烟。<br>
此情可待成追忆，只是当时已惘然。</blockquote>
是唐朝诗人李商隐的代表作，诗中隐藏中一种淡淡的忧伤，让人无法言说，但又无以谴怀。</div>
<!-- 使用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>
<!-- 使用var定义变量 -->  
<var>i</var>、<var>j</var>、<var>k</var>通常用于作为循环计数器变量。  
<!-- 使用del和ins表示修订 -->  
<p>Android是一个<del>开发</del><ins>开放</ins>式的手机、平板电脑操作系统</p>  
</body>  
</html>

列表相关元素

➢　<ul>：定义无序列表。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素只能包含<li.../>子元素。
➢　<ol>：定义有序列表。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素只能包含<li.../>子元素。除此之外，在HTML 5规范中，该元素还可以指定如下三个属性。
start：指定列表项的起始数字。默认是第一个，如1、A等。
type：指定使用哪种类型的编号，例如1代表使用数字，A和a代表使用字母，I和i代表使用罗马数字。该属性在HTML 5规范中已经不推荐使用了，推荐使用CSS来定义。
➢　<li>：定义列表项目。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素里可以包含与<div.../>完全类似的内容，因此可以包含较多类型的子元素。
➢　<dl>：也用于定义列表，该元素只能包含<dt.../>和<dd.../>两种子元素。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。
➢　<dt>：定义标题列表项。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等。
➢　<dd>：定义普通列表项。该元素可以指定id、style、class等属性，还可以指定onclick等事件属性。该元素里可以包含与<div.../>完全类似的内容，因此可以包含较多类型的子元素。

例子

<!DOCTYPE html>  
<html>  
<head>  
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 列表相关标签 </title>
</head>  
<body>  
    <!-- 定义无序列表 -->
    <ul>
        <li>疯狂Java讲义</li>
        <li>轻量级Java EE企业应用实战</li>
        <li>疯狂Android讲义</li>
    </ul>
    <!-- 定义有序列表 -->
    <ol start="2" type="I" reversed>
        <li>疯狂Java讲义</li>
        <li>轻量级Java EE企业应用实战</li>
        <li>疯狂Android讲义</li>
    </ol>
    <!-- 定义列表 -->
    <dl>
        <!-- 定义标题列表项-->
        <dt>疯狂Java体系</dt>
        <dd>疯狂Java讲义</dd>
        <dd>轻量级Java EE企业应用实战</dd>
        <dd>疯狂Android讲义</dd>
        <!-- 定义标题列表项-->
        <dt>作者其他图书</dt>
        <dd>Struts 2.1权威指南</dd>
        <dd>基于J2EE的Ajax宝典</dd>
    </dl>
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。