2.1 页面布局元素
HTML文档最基本的结构主要包括文档类型说明、HTML文档开始标记、元信息、主体标记和页面注释标记。
根据HTML5设计准则中的第3条——化繁为简，Web页面的文档类型说明（Doctype）被极大地简化了。
在第1章中，细心的读者会发现，使用Dreamweaver CS5创建HTML文档时，文档头部的类型说明代码如下：
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
读者可以看到这段代码既麻烦，又难记，HTML5对文档类型进行了简化，简单到15个字符就可以了，代码如下：
<! DOCTYPE HTML>
这里，DOCTYPE申明需要出现在HTML文件的第一行。
而HTML文档开始标记<html>、元信息<meta>、主体标记<body>和页面注释标记<! -- -->均在第1章中做了详细讲解，本章不再做阐述，本章仅对<body>标记中显示的网页主体内容的布局元素进行详细讲解。
2.1.1 换行标签<br>
在学习标签怎么用之前，我们先看一个实例。
例题2-1：在文档中插入换行符。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在文档中插入换行符</title>
</head>
<body>
To break<br />lines<br />in a<br />paragraph, <br />use the br tag.
</body>
</html>
从代码中能看到，这是一个HTML5类型的网页，在<body>…</body>中间要显示网页上的一句英文，而英文句子中间插入了<br/>标签，这代表什么意思呢？
先来看运行结果，如图2-1所示。
图2-1 在文档中插入换行符的运行结果
从运行结果来分析，<br>标签代表一个简单的换行符。那么，<br/>这种格式又代表了什么意思呢？原来<br>标签是空标签，意味着它没有结束标签，因此这么写就是错误的：
<br></br>
因此，在XHTML中，把结束标签放在开始标签中，也就是<br/>。
请注意，<br>标签只是简单地开始新的一行，而当浏览器遇到<p>标签时，通常会在相邻的段落之间插入一些垂直的间距。
2.1.2 强制不换行标签<nobr>
在网页排版布局中，比如文章列表标题排版，无论多少文字均不希望换行显示，需要强制在一行显示完内容。这就可以用<nobr>标签来实现。<nobr>标签的具体语法格式如下：
<nobr>内容</nobr>
不换行内容放入<nobr>与</nobr>之间即可。nobr标签有如下特点：如没有遇到br换行标签，内容在一行显示完；如遇到br换行标签，内容将在加br的换行位置自动换行。下面通过一个实例来更好地理解nobr标签的应用效果。
例题2-2：nobr禁止内容换行。这里假如有4行文章标题列表，设置宽度为200px; css行高为22px；对4列的内容采用ul、li列表布局，其中2个对内容加<nobr>标签，一个li内容不加，另外一个li内容长度小于宽度，能显示完。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>nobr禁止内容换行案例</title>
<style>
/**此处是以后章节中所要学习到的CSS样式设置**/
ul{ border:1px solid #000; width:200px; }
/*以上设置ul上下左右边框粗细1px，实边，颜色黑色；宽度200px; */
li{ width:200px; line-height:22px}
/*以上设置li宽度200px；行高22px; */
</style>
</head>
<body>
<ul>
<li><nobr>第一排内容文字多加nobr标签测试内容</nobr></li>
<li><nobr>第二排内容文字多加nobr标签不能排下</nobr></li>
<li>第三排内容文字多没有加nobr标签</li>
<li>第四排文字少能排下</li>
</ul>
</body>
</html>
在浏览器中运行该网页，能看到如图2-2所示的运行结果。
图2-2 <nobr>禁止内容换行运行结果
2.1.3 自动换行标签<wbr>
<wbr>标签是HTML5中的新标签。<wbr>标签规定在文本中的何处适合添加换行符。如果单词太长，或者担心浏览器会在错误的位置换行，那么可以使用<wbr>元素来添加Word Break Opportunity（单词换行时机）。
例题2-3：一段带有Word Break Opportunity的文本。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>一段带有Word Break Opportunity的文本</title>
</head>
<body>
如果想学习AJAX，那么您必须熟悉XML<wbr>Http<wbr>Request对象。
</body>
</html>
在浏览器中运行该网页，结果如图2-3所示。
图2-3 一段带有Word Break Opportunity的文本网页运行结果
注意：所有主流浏览器均支持<wbr>标签，除了Internet Explorer。
2.1.4 分段控制标签<p>
<p>标签代表段落强制换行标签元素。在需要分段换行时，在内容前加<p>，在内容后加</p>，即可实现文章段落换行。其具体格式如下：
2-1 段落标记
<p>内容</p>
下面通过实例来进一步体会<p>标签的使用方法。
例题2-4：分段控制标签的使用。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>p段落标签使用案例</title>
</head>
<body>
<p>我是第一段落；</p>
<p>我是第二段落；</p>
<p>我是第三段落，<br />我被br换行。</p>
</body>
</html>
在浏览器中运行该网页，结果如图2-4所示。
图2-4 p段落标签使用案例运行结果
通过以上的案例能够看出：
① 段落标签<p>与换行<br>标签在使用上有一点区别：<p>是一对标签“<p></p>”，而br是单独的标签；
② 段落标签，每个段落之间有一定距离，使用一个<p>换段标签相当于使用两个<br>标签换行；
③ 常常使用段落标签，让文章有条理，段落上下分割清晰，同时也对搜索引擎进行了优化，让搜索引擎感到你的网页内容段落清晰，更加友好。
2.1.5 原样显示文字标签<pre>
pre元素可定义预格式化的文本。被包围在<pre>元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
<pre>标签的一个常见应用就是表示计算机的源代码。
可以导致段落断开的标签（例如标题、<p>和<address>标签）绝不能包含在<pre>所定义的块里。尽管有些浏览器会把使用段落结束标签解释为简单的换行，但是这种行为在所有浏览器上并不都是一样的。
<pre>元素中允许的文本可以包括物理样式（包括粗体bold、斜体italic、等宽monospaced、下划线underlined、删除线strikethrough、放大larger、缩小smaller、上标superscripted和下标subscripted）和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如<a>标签）放到<pre>块中时，就像在HTML/XHTML文档中放入其他部分一样。
下面通过实例来进一步理解<pre>标签的使用方法。
例题2-5：<pre>标签的使用。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>pre标签的使用案例</title>
</head>
<body>
<pre>
< html>
< head>
< script type=" text/javascript" src=" loadxmldoc.js" >
< /script>
< /head>
< body>
< script type=" text/javascript" >
xmlDoc=<a
href="dom_loadxmldoc.asp">loadXMLDoc</a>(" books.xml" );
document.write(" xmlDoc is loaded, ready for use" );
< /script>
< /body>
< /html>
</pre>
</body>
</html>
在上面的代码中，<pre>标签中的特殊符号被转换为符号实体，比如“< ”代表“<”，“> ”代表“>”。另外，在<pre>标签中使用了链接，也就是<a>标签。上面这段代码的显示效果如图2-5所示。
图2-5 <pre>标签的应用案例的运行结果
2.1.6 居中对齐标签<center>
<center>标签对其包围的文本进行水平居中处理。其具体语法形式如下：
<center>内容</center>
因为HTML5采取内容与表现分离的语义化标签，显示效果更多地交给CSS样式去完成，所以，在HTML5中已经不再支持该标签。读者在学习后面的CSS章节中可以找到替代<center>标签的办法。
2.1.7 引文标签<blockquote>
<blockquote>标签定义摘自另一个源的块引用。其具体语法形式如下：
<blockquote>内容</blockquote>
下面通过实例来进一步理解<blockquote>标签的使用方法。
例题2-6：<blockquote>标签的使用。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>blockquote标签的使用案例</title>
</head>
<body>
毛主席说过：
<blockquote>帝国主义都是纸老虎 ．..</blockquote>
</body>
</html>
上面这段代码的显示效果如图2-6所示。
图2-6 <blockquote>标签的使用效果
2.1.8 水平分隔线标签<hr>
<hr>标签在HTML页面中创建一条水平分隔线（horizontal rule）。水平分隔线可以在视觉上将文档分隔成各个部分。
例题2-7：使用<hr>标签分隔文章标题和段落。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用hr标签分隔文章标题和段落</title>
</head>
<body>
<h1>This is header 1</h1>
<hr />
<p>This is some text</p>
</body>
</html>
上面这段代码的显示效果如图2-7所示。
图2-7 使用<hr>标签分隔文章标题和段落
从上面的实例能够看出<hr>标签也是一个空标签，所以在代码中会看到<hr/>表示结构。
2.1.9 署名标签<address>
<address>标签定义文档或文章的作者/拥有者的联系信息。其具体语法形式如下：
<address>内容</address>
需要说明的是：
① 如果<address>元素位于<body>元素内，则它表示文档的联系信息；
② 如果<address>元素位于<article>元素内，则它表示文章的联系信息。
<address>元素中的文本通常呈现为斜体。大多数浏览器会在<address>元素前后添加换行。
例题2-8：用<address>标签显示联系人信息。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用hr标签分隔文章标题和段落</title>
</head>
<body>
<address>
Written by <a href="mailto:test@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Test.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
上面这段代码的显示效果如图2-8所示。
图2-8 用<address>标签显示联系人信息
提示：
① <address>标签不应该用于描述通信地址，除非它是联系信息的一部分；
② <address>元素通常连同其他信息被包含在<footer>元素中。
2.1.10 特殊字符
网页中经常会用到一些特殊符号，例如箭头、心形和某些特定字符等，这些符号就不用CSS样式或者图片来写了，直接用HTML的特殊符号就可以实现。表2-1列出了常用的网页特殊符号。
表2-1 常用的网页特殊字符
表中列出的是部分常用的特殊字符，还有很多特殊字符没有在此列出，下面通过实例来进一步掌握特殊字符的使用方法。
例题2-9：特殊字符的使用。代码如下：
<! DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>博客之特殊符号</title>
</head>
<body>
⇠
☀
</body>
</html>
上面这段代码的显示效果如图2-9所示。
图2-9 特殊代码的使用效果
提示：
① 这些字符属于unicode字符集，所以，文档需要声明为UTF-8；
② 有的字符在不同的浏览器下表现不太一样；
③ 有的字符在某个浏览器下不会显示。