下载掌阅APP，畅读海量书库
立即打开
在这个信息爆炸的时代，人们经常需要浏览网页来获取信息。网页是构成网站的基础，它主要由图像和文字等元素组成。本节将按照HTML文档基本格式，运用页面格式化标签来制作一个简单的网页，其效果如图2-1所示。
图2-1 简单的网页
学习任何一门语言，首先要掌握它的基本格式，就像写信需要符合书信的格式要求一样。想要学习HTML，同样需要掌握HTML的基本格式。在HTML5出现之前，作为过渡的XHTML一直被应用于网页中，在Dreamweaver中新建的HTML文档默认格式为XHTML。图2-2为XHTML文档的基本格式。
图2-2 XHTML文档的基本格式
在图2-2所示的XHTML代码中<!DOCTYPE>文档类型声明、<html>、<head>和<body>共同组成了XHTML文档的结构，对它们的具体介绍如下。
（1）<!DOCTYPE>
<!DOCTYPE>位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。因此只有在开头处使用<!DOCTYPE>声明，浏览器才能将该文档作为有效的HTML文档，并按指定的文档类型进行解析。
（2）<html>
<html>位于<!DOCTYPE>之后，也被称为根标签。根标签主要用于告知浏览器其自身是一个HTML文档，其中<html>标志着HTML文档的开始，</html>则标志着HTML文档的结束，在它们之间是文档的头部和主体内容。
（3）<head>
<head>用于定义HTML文档的头部信息，也被称为头部标签，紧跟在<html>之后。头部标签主要用来封装其他位于文档头部的标签，例如<title>、<meta>、<link>和<style>等，用来描述文档的标题、作者，以及与其他文档的关系。
（4）<body>
<body>用于定义HTML文档所要显示的内容，也被称为主体标签。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>内，才能最终展示给用户。
需要注意的是，一个HTML文档只能含有一对<body>，且<body>必须在<html>内，位于<head>之后，与<head>是并列关系。
图2-3 简化后的文档格式
在HTML5中，文档格式有了一些新的变化，简化了文档类型声明和根标签，简化后的文档格式如图2-3所示。
需要说明的是，除了上述的文档结构标签外，HTML5还简化了<meta>标签，让定义字符编码的格式变得更简单。
在HTML文档格式中，<!doctype>既可以用大写字母，也可以用小写字母，这对整个文档格式并没有影响。
在HTML页面中，带有“<>”符号的元素被称为HTML标签，例如上面提到的<html>、<head>、<body>都是HTML标签。所谓标签就是放在“<>”符号中表示某个功能的编码命令，也称为HTML标记或HTML元素，本书统一称作HTML标签。根据标签的组成特点，通常将HTML标签分为两大类，分别是“双标签”和“单标签”，对它们的具体介绍如下。
（1）双标签
双标签也被称为“体标签”，是指由开始和结束两个标签符号组成的标签。双标签的基本语法格式如下。
<标签名>内容</标签名>
例如，前面文档结构中的<html>和</html>、<body>和</body>等都属于双标签。
（2）单标签
单标签也被称为“空标签”，是指用一个标签符号即可完整地描述某个功能的标签，其基本语法格式如下。
<标签名 />
例如，HTML中的特殊标签——注释标签，该标签就是一种特殊功能的单标签。如果需要在HTML文档中添加一些便于阅读和理解，但又不需要显示在页面中的注释文字，就需要使用注释标签。注释标签的基本写法如下。
<!--注释语句 -->
需要注意的是，注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，注释标签可以被下载到用户的计算机上，或者用户查看源代码时也可以看到注释标签。
HTML标签的作用原理就是选择网页内容，从而进行描述，即需要描述哪个元素，就选择哪个元素，所以才会有双标签的出现，用于定义标签作用的开始与结束。而单标签本身就可以描述一个功能，不需要选择。例如，按照双标签的语法，水平线标签<hr />应该写成“<hr></hr>”，但是水平线标签不需要选择，本身就代表一条水平线，此时写成双标签就显得有些多余，但是又不能没有结束符号，所以在标签名称后面加一个关闭符，即<标签名 />。
在网页中会存在多种标签，各标签之间都具有一定的关系。标签的关系主要有嵌套关系和并列关系两种，具体介绍如下。
（1）嵌套关系
嵌套关系也称为包含关系，可以简单理解为一个双标签里面包含了其他的标签。例如，在HTML5的结构代码中，<html>标签和<head>标签（或body标签）就是嵌套关系，具体代码如下所示。
<html> <head> </head> <body> </body> </html>
需要注意的是，在标签的嵌套过程中，必须先结束最靠近内容的标签，再按照由内到外的顺序依次关闭标签。图2-4为嵌套标签正确和错误写法的对比。
图2-4 嵌套标签正确和错误写法的对比
在嵌套关系的标签中，通常把最外层的标签称之为“父级标签”，内层的标签称为“子级标签”。只有双标签才能作为“父级标签”。
（2）并列关系
并列关系也称为兄弟关系，就是两个标签处于同一级别，并且没有包含关系。例如，在HTML5的结构代码中，<head>标签和<body>标签就是并列关系。在HTML标签中，无论是单标签还是双标签，都可以拥有并列关系。
一篇结构清晰的文章通常都会通过标题、段落、分割线等进行结构排列，HTML网页也不例外，为了使网页中的文字有条理地显示出来，HTML提供了相应的页面格式化标签，如标题标签、段落标签、水平线标签和换行标签，具体介绍如下。
（1）标题标签
为了使网页更具有语义化（语义化是指赋予普通网页文本特殊的含义），经常会在页面中用到标题标签，HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>标题的重要性依次递减。标题标签的基本语法格式如下。
<hn align="对齐方式">标题文本</hn>
在上面的语法中n的取值为1~6，代表1~6级标题。align属性为可选属性，用于指定标题的对齐方式。下面通过一个简单的案例说明标题标签的具体用法，如例2-1所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>我们正在学习标题标记</title> 6 </head> 7 <body> 8 <h1>1级标题</h1> 9 <h2>2级标题</h2> 10 <h3>3级标题</h3> 11 <h4>4级标题</h4> 12 <h5>5级标题</h5> 13 <h6>6级标题</h6> 14 </body> 15 </html>
在例2-1中，使用<h1>～<h6>标签设置了6种级别不同的标题。
运行例2-1，效果如图2-5所示。
从图2-5可以看出，默认情况下标题文字是加粗左对齐显示的，并且从<h1>到<h6>，标题字号依次递减。如果想让标题文字右对齐或居中对齐，就需要使用align属性设置对齐方式，其取值如下。
· left：设置标题文字左对齐（默认值）。
· center：设置标题文字居中对齐。
· right：设置标题文字右对齐。
了解了标题标签的对齐属性后，下面通过一个案例来演示标题标签的默认对齐、左对齐、居中对齐和右对齐，并且按照1~4级标题来显示，如例2-2所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>使用align设置标题的对齐方式</title> 6 </head> 7 <body> 8 <h1>1级标题，默认对齐方式。</h1> 9 <h2 align="left">2级标题，左对齐。</h2> 10 <h3 align="center">3级标题，居中对齐。</h3> 11 <h4 align="right">4级标题，右对齐。</h4> 12 </body> 13 </html>
运行例2-2，效果如图2-6所示。
图2-5 例2-1运行效果
图2-6 标题的对齐效果
① 一个页面中只能使用一个<h1>标签，常常被用在网站的Logo部分。
② 由于h标签具有特殊的语义，请慎重选择恰当的标签来构建文档结构。初学者切勿为了设置文字加粗或更改文字的大小而使用标题标签。
③ HTML中一般不建议使用h标签的align对齐属性，可使用CSS样式设置。
（2）段落标签
要想在网页中把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落。在网页中使用<p>标签来定义段落。<p>标签是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。<p>标签的基本语法格式如下。
<p align="对齐方式">段落文本</p>
在上面的语法中align属性为<p>标签的可选属性，与标题标签<h1>～<h6>一样，同样可以使用align属性设置段落文本的对齐方式。
了解了段落标签的基本语法格式后，下面通过一个案例来演示段落标签<p>的用法，如例2-3所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>段落标签</title> 6 </head> 7 <body> 8 <h2 align="center">陈登吃海鲜吃死</h2> 9 <p align="center">类型：三国冷知识</p> 10 <p>在《三国志华佗传》中记载了陈登的死因，这位得到刘备和曹操高度评价的天纵之才英年早逝，都是因为吃了太多 海鲜，而当时人们对于海鲜的处理并不像今天这样卫生，所以这些携带细菌的海鲜就在陈登的肚腹之中长成小虫。华佗为他 开了药，陈登吐出的小虫高达三升之多，真是令人惊讶。后来陈登不长记性，还是热爱吃海鲜，再次病发的时候，华佗外出， 无人可以医治，陈登就这样病死了。</p> 11 </body> 12 </html>
在例2-3中，第8、9行代码分别为<h2>标签和<p>标签添加“align="center"”，从而设置居中对齐。第10行代码中的<p>标签为段落标签的默认对齐方式。
运行例2-3，效果如图2-7所示。
图2-7 设置段落效果
从图2-7可以看出，每段文本都会单独显示，并各段之间有一定的间隔。
（3）水平线标签
在网页中常常看到一些水平线，用来将段落与段落之间隔开，使文档结构清晰，层次分明。网页中，水平线可以通过<hr />标签来定义，基本语法格式如下。
<hr属性="属性值" />
<hr />是单标签，在网页中输入一个<hr />，就添加了一条默认样式的水平线。此外通过为<hr />标签设置属性和属性值，可以更改水平线的样式，其常用属性如表2-1所示。
表2-1 <hr />标签的常用属性
下面通过使用水平线分割段落文本来演示<hr />标签的用法，如例2-4所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>水平线标签</title> 6 </head> 7 <body> 8 <h2 align="left">莫生气</h2> 9 <hr color="#00CC99" align="left" size="5" width="600" /> 10 <p>人生就像一场戏，因为有缘才相聚。相扶到老不容易，是否更该去珍惜。为了小事发脾气，回头想想又何必。别人 生气我不气，气出病来无人替。我若气死谁如意，况且伤神又费力。邻居亲朋不要比，儿孙琐事由他去。吃苦享乐在一起， 神仙羡慕好伴侣。</p> 11 <hr color="#00CC99"/> 12 </body> 13 </html>
在例2-4中，第9行代码为<hr />标签设置了不同的颜色、对齐方式、粗细和宽度值。第11行代码修改了<hr />标签的颜色。
运行例2-4，效果如图2-8所示。
图2-8 水平线分割段落文本的样式效果
在实际工作中，并不赞成使用<hr />的所有外观属性，最好通过CSS样式进行设置。
（4）换行标签
在Word中，按“Enter”键（回车键）可以将一段文字换行显示，但在网页中，如果想要将某段文本强制换行显示，就需要使用换行标签<br />。下面通过一个案例，演示换行标签的具体用法，如例2-5所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>换行标签</title> 6 </head> 7 <body> 8 <p>使用HTML制作网页时通过br标签<br />可以实现换行效果</p> 9 <p>如果像在Word文档中一样 10 敲回车键换行就不起作用了</p> 11 </body> 12 </html>
在例2-5中，第8行代码在文本中显示是在同一行，但是使用了<br />标签。而第9~10行代码在文本中是换行显示的，采用了按“Enter”键的方式换行。
运行例2-5，效果如图2-9所示。
图2-9 换行标签的使用效果
从图2-9可以看出，使用换行标签<br />的段落实现了强制换行的效果，而使用“Enter”键换行的段落在浏览器实际显示效果中并没有换行，只是多出了一个空白字符。
<br/>标签虽然可以实现换行的效果，但并不能取代结构标签<h>、<p>等。
图2-1所示的“简单的网页”由3个部分构成，分别为标题、水平线和段落文本。其中，标题可通过<h2>标签定义，水平线通过<hr />标签定义，段落文本通过<p>标签定义。由于标题居中显示，可以给<h2>标签应用align属性。
根据上面的分析，使用相应的HTML标签来搭建网页结构，如例2-6所示。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>【案例1】简单的网页</title> 6 </head> 7 <body> 8 <h2>HTML是什么</h2> 9 <hr /> 10 <p>HTML 是一种超文本标签（标记）语言，也是目前网络上应用最为广泛的语言。它主要通过 HTML 标签对网页中的 文本、图片、声音等内容进行描述，是构成网页文档的基础。 11 </p> 12 </body> 13 </html>
运行例2-6，效果如图2-10所示。
为了使标题居中，给<h2>标签应用align="center"，即将例2-6的第8行代码更改为：
<h2 align="center">HTML是什么</h2>
这时，保存文件，刷新页面，得到如图2-11所示的标题居中效果。
图2-10 搭建页面结构
图2-11 标题居中效果