1.1 HTML网页的基础构成
我们常见的网页都是HTML网页，HTML既然是一种标准，网页就有基础的结构形式。本节的目的就是让读者了解一个HTML网页的基础构成。
1.1.1 从一个空白的HTML网页说起
一个标准的HTML网页必须包括一些固定的标签，譬如DOCTYPE标签、html标签、head标签和body标签等。这些固定元素构成一个HTML网页的基础骨架，倘若缺少其中任何一项，都有可能造成HTML网页运行时出现不可预知的错误。所以，读者首先要清楚HTML网页的基础构成，并理解每个标签的含义与作用。
【示例1-1】空白的HTML网页
市面上有很多款创建、编辑、运行HTML网页的工具（较轻量级的有EditPlus、UltraEdit、Sublime等，较重量级的有Eclispe、Visual Studio、Dreamweaver等，至于选择哪款，主要看个人喜好），本书选择EditPlus编辑工具自动生成一个基本的HTML网页框架（参见源代码chapter01/ch01-htmlcomp-init.html文件），主要代码如下：
01 <!doctype html> 02 <html> 03 <head> 04 <meta charset="UTF-8"> 05 <meta name="Generator" content="EditPlus®"> 06 <meta name="Author" content=""> 07 <meta name="Keywords" content=""> 08 <meta name="Description" content=""> 09 <title>Blank HTML Page</title> 10 </head> 11 <body> 12 <!-- 添加文档内容 --> 13 </body> 14 </html>
在这段空白的HTML网页代码中，我们看到上文中提到的几个标签均使用了，如第01行中的<!doctype>标签、第02行中的<html>标签、第03行中的<head>标签以及第11行中的<body>标签。
注意第10行、第13行与第14行中再次使用了</head>、</body>和</html>标签，不同之处是增加了一个“/”斜杠字符。HTML标准将第02行、第03行和第11行的标签定义为开始标记，而将第10行、第13行与第14行的标签定义为结束标记。其中，第02行的<html>标签与第14行的</html>标签相互对应，称为一组标记。同理，第03行与第10行为一组标记，第11行与第13行为一组标记。读者可以将一组标记之间的内容理解为一个整体，代表这个标签所定义的内容，完成一组统一的功能。
代码ch01-htmlcomp-init.html实际上没有定义任何实际内容，在浏览器中运行后显示的是一个空白的页面，如图1.1所示。
图1.1 空白的HTML网页
1.1.2 通过网页中的DOCTYPE标签识别文档类型
DOCTYPE标签是一种标准通用标记语言的文档类型声明，其存在的意义是通知标准通用标记语言解析器应该使用什么样的文档类型定义（Document Type Definition, DTD，由W3C标准化组织定义）来解析文档。
回顾1.1.1小节中的代码段，第01行使用的<!doctype html>标签就是对文档类型的声明，根据具体定义可以知道声明ch01-htmlcomp-init.html文件为一个HTML网页。
提示
DOCTYPE标签在使用时不区分大小写。
这里有几点是读者在使用DOCTYPE标签时必须注意的：
（1）<!doctype>标签必须声明在HTML网页的第一行，位于<html>标签之前。
（2）严格意义上讲，<!doctype>不是一个HTML标签，而是定义浏览器运行HTML网页时使用哪个HTML版本来进行解释的指令。
（3）在HTML 5标准下，必须使用<!doctype html>这样的方式来定义，可见ch01-htmlcomp-init.html文件是一个标准HTML 5网页。而HTML 4.01标准是基于SGML（Standard Generalized Markup Language，标准通用标记语言）的，所以必须引用DTD，这样浏览器才能正确地显示HTML网页内容。
提示
<!doctype>标签声明时是没有结束标记的。
这里比较复杂的是HTML 4.01标准，其规定了3种文档类型（DTD），分别为Strict、Transitional和Frameset，具体的声明方法如下：
（1）HTML Strict DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/ html4/strict.dtd">
如果想避免表现层的混乱，那么建议使用此类型，并与层叠样式表（CSS）配合使用。
（2）HTML Transitional DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3. org/TR/html4/loose.dtd">
如果使用了不支持层叠样式表（CSS）的浏览器而又不得不使用HTML网页来展现内容，那么可以使用此类型。
（3）Frameset DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3. org/TR/html4/frameset.dtd">
此类型用于带有框架的HTML网页，除了使用<frameset>标签替代<body>标签外，也可以用Frameset DTD替代Transitional DTD。
这里顺便提一句，DOCTYPE标签除了可以声明HTML网页外，还可以用于声明其他类型的文件。譬如，<!doctype math>用于声明数学标记语言，<!doctype tmx>用于声明翻译存储交换标记语言，<!doctype wml>用于声明无线标记语言，等等。可见DOCTYPE标签的内容是非常丰富的，感兴趣的读者可以参考相关文档进一步深入了解DOCTYPE标签的内容。
1.1.3 html标签声明这是一个网页
html标签用于通知浏览器这是一个HTML网页。一般来讲，<html>与</html>标签限定了HTML网页的开始标记和结束标记，标记之间的内容是HTML网页的头部和主体。至于头部和主体后面马上会介绍，也就是读者熟悉的head标签和body标签。
HTML网页中的内容通常需要放置在<html>标签中。在HTML网页的头部可以放置标题、兼容性、语言、字符格式、关键字和描述等重要信息，而HTML网页需要向用户展示的具体内容可以统统放置在主体中。
如下所示为一个关于html标签的代码段（参见源代码chapter01/ch01-htmlcomp-html.html文件）。
【示例1-2】 html标签
01 <!DOCTYPE html> 02 <html lang="en"> 03 <head> 04 <!-- 添加文档头部内容 --> 05 </head> 06 <body> 07 <!-- 添加文档主体内容 --> 08 </body> 09 </html>
在这段HTML代码中，第02行与第09行就是对<html>和</html>标签的使用。读者注意到在<html>标签中添加了一个字段lang="en"，一般称其为属性字段，lang关键字代表规定标签内容的语言，"en"关键字代表英文，如果读者想定义中文，那么可以使用"zh"关键字。
1.1.4 head标签定义网页的头部
head标签用于定义HTML网页的头部，可以说head是所有头部标签的容器。在head标签中可以实现描述元信息（meta）、添加层叠样式表（CSS）、引用外部脚本文件（JavaScript，简称JS）、定义HTML网页标题以及与其他文档的关系等功能。另外，绝大部分在HTML网页头部定义的数据都不会作为页面的具体内容显示给用户。
head标签位于HTML网页的头部，以<head>作为开始标记，并以</head>作为结束标记。一般来讲，head中包含meta、base、link、script、title等常用标签，这些标签详细说明如下：
● meta标签可以定义的内容十分广泛，譬如HTML网页介绍、HTML网页关键字、HTML网页编码、页面作者、自动跳转定义以及robots协议等内容均可以放置在其中。
● base标签是定义HTML网页默认打开方式的声明。
● link标签用于定义目标文件链接，包括对外部层叠样式表（CSS）文件的引用、对外部脚本（JS）文件的引用以及对favicon.ico图标的引用等。
● script标签既可以用于引入外部脚本（JS）文件，也可以定义嵌入HTML网页内部的脚本代码。
● style标签用于定义直接嵌入网页的层叠样式表（CSS）代码。
● title标签用于定义HTML网页的唯一标题。
下面向读者介绍使用head标签的方法（参见源代码chapter01/ch01-htmlcomp-head.html文件）。
【示例1-3】 head标签
01 <!DOCTYPE html>
02 <html lang="zh">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <meta http-equiv="Content-Language" content="zh-cn" />
06 <meta name="author" content="king">
07 <meta name="revised" content="king,10/5/2019">
08 <meta name="generator" content="EditPlus">
09 <meta name="description" content=" HTML网页head标签使用">
10 <meta name="keywords" content="HTML, CSS, JavaScript">
11 <meta http-equiv="Refresh" content="1;url=http://localhost:8080" />
12 <base href="http://localhost:8080" target="_blank" />
13 <link rel="stylesheet" type="text/css" href="css/style.css" >
14 <style type="text/css">
15 h1 {font: bold 24px/2.4em arial,verdana;}
16 h3 {font: bold 18px/1.8em arial,verdana;}
17 p {font: italic 13.5px/1.2em arial,verdana;}
18 </style>
19 <script type="text/javascript">
20 document.write("<h1>HTML之head标签</h1>");
21 </script>
22 <title>HTML网页标题</title>
23 </head>
24 <body>
25 <!-- 添加文档主体内容 -->
26 <h3>header</h3>
27 <p>Paragraph.</p>
28 <!-- 添加文档主体内容 -->
29 <p>
30 <a href="ch01-htmlcomp-init.html">尝试在本窗口打开链接</a><br>
31 说明：正常应该在当前窗口打开该链接，但实际是在新窗口中打开了；<br>
32 原因就是在本HTML网页头部中，base标签中设置了target="_blank"属性。<br>
33 </p>
34 </body>
35 </html>
在关于head标签的这段HTML代码中，第03～24行就是使用head标签的方法。为了让读者全面了解head标签的使用方法，该代码段尽可能将HTML网页头部可能用到的标签全部包含进去。下面我们逐一对这些标签进行介绍。
第04～11行是对meta标签的使用，meta是HTML网页头部的一个辅助性标签。meta标签共有两个属性，分别是http-equiv属性和name属性。其中，http-equiv属性相当于HTTP协议文件头的作用，通过该属性可以向浏览器回传数据信息，以帮助准确地显示网页内容，其属性值放置在与之对应的content属性中；而name属性主要用于描述网页，包括分类信息的内容以及便于搜索引擎robots协议查找的内容，其属性值同样放置在与之对应的content属性中。
第04行中的http-equiv属性定义为"Content-Type"，Content-Type表示设定的显示字符集。本代码段中对应的content属性定义为"text/html; charset=utf-8"，表明本HTML网页设定的显示字符集为"utf-8"，为通用的Unicode编码格式（utf-8编码支持中英文字符，比传统gb2312中文编码更通用）。
第05行中的http-equiv属性定义为"Content-Language"，Content-Language表示给HTML网页设定的页面语言。本代码段中对应的content属性定义为"zh-cn"，表明本HTML网页设定的页面语言为简体中文（如果是繁体中文就为"zh-tw"，而"en-us"表示英语（美国））。
第06行中的name属性定义为"author"，author表示网页作者。本代码段中对应的content属性定义为"king"。
第07行中的name属性定义为"revised"，revised表示网页最后一次更改的作者及时间。本代码段中对应的content属性定义为"king,10/5/2019"。
第08行中的name属性定义为"generator"，generator表示创建和编辑网页使用的工具软件。本代码段中对应的content属性定义为"EditPlus"。
第09行中的name属性定义为"description"，description表示对网页功能、内容的相关描述，属于比较重要的一个meta属性。本代码段中对应的content属性定义为" HTML网页head标签使用"。
第10行中的name属性定义为"keywords"，keywords表示网页的关键词。本代码段对应的content属性定义为"HTML, CSS, JavaScript"。
第11行中的http-equiv属性定义为"Refresh"，Refresh是一个非常有用的功能，可以对网页自动刷新并重定向指向新页面。本代码段中对应的content属性定义为"1;url=http://localhost:8080"，其代表两个内容，并使用分号进行分割，分号前面的数值1表示时间间隔为1秒，分号后面的url代表重定向链接地址，合在一起的含义就是在间隔1秒后刷新，重新跳转到新的链接地址。因为Refresh功能是在HTML网页头部定义的，所以在该页面初次打开后就会计算时间间隔并执行重定向操作。第11行测试后的结果如图1.2所示。
图1.2 HTML网页Refresh功能测试
从图1.2中可以看到，运行ch01-htmlcomp-head.html文件后，并没有看到HTML网页主体中定义的代码内容，而是很快跳转到图1.2显示的页面地址（http://localhost:8080），这个页面其实是本机安装的Web服务器——Tomcat 9.0.19的主页。
第12行为对base标签的使用，base的功能是为页面上的所有链接规定默认地址或默认目标。一般情况下，浏览器会从当前文档的URL地址中获取相应的数据来填写相对URL地址中的空白，而使用base标签则可以使用指定的URL地址来解析所有的相对URL地址。该base标签有两个属性，分别是href属性和target属性。其中，href属性用于规定页面中所有相对链接的基准URL地址；而target属性用于指定在何处打开页面中所有的链接，其共有4个属性值：
● _blank代表在新的窗口打开链接。
● _self代表自身窗口，一般可以不用定义。
● _parent代表在父窗口或超链接引用框架的框架集中打开链接。
● _top表示会清除所有被包含的框架并将文档载入整个浏览器窗口。
在本行中，href属性值定义为"http://localhost:8080"，target属性值定义为"_blank"。
HTML网页主体中的第29～33行是对第12行的测试，第30行定义了一个超链接，指向前面创建的一个HTML网页ch01-htmlcomp-init.html，并且尝试在本窗口中打开该页面。下面我们先行注销第11行的重定向功能，运行本页面的结果如图1.3所示。单击图1.3页面中定义的超链接，尝试在本窗口打开链接，测试后的结果如图1.4所示。
图1.3 HTML网页之base标签（1）
图1.4 HTML网页之base标签（2）
从图1.4可以看到，ch01-htmlcomp-init.html页面在新窗口中被打开了，而且该页面似乎没有被正确地显示出来。在新窗口中被打开是因为第12行中base标签的target属性值定义为"_blank"，而页面没有正确显示是因为ch01-htmlcomp-init.html页面并没有被正确找到。这是什么原因造成的呢？我们看第12行中base标签的href属性值定义为"http://localhost:8080"，这样全部相对URL链接地址都会以"http://localhost:8080"为基地址，就是指向本机的Tomcat服务器，而ch01-htmlcomp-init.html页面并不存在于该服务器下，自然就无法找到该页面并正确显示。
第13行是对link标签的使用，link用于定义文档与外部资源的关系，常见的用法就是定义外部链接层叠样式表（CSS）。本行中定义了保存在css目录下的外部样式表，文件名称为"style.css"。
第14～18行是对style标签的使用，script用于定义直接嵌入网页的层叠样式表（CSS）代码。我们先不管第15～17行具体实现了什么功能，只要知道这3行是对<h1>、<h3>和<p>这3个HTML标签进行样式定义就可以了。在页面主体的第26～27行中，使用<h3>和<p>定义了两行页面内容，页面运行后的效果如图1.5所示。
第19～21行是对script标签的使用，script用于引入外部脚本（JS）文件或定义内部脚本（JS）代码。其中，第20行定义了一行脚本代码，用于在页面主体输出一行文本信息，页面运行后的效果如图1.6所示。
图1.5 HTML网页之style标签
图1.6 HTML网页之script标签
另外，http-equiv还有几个属性读者可能了解不多，但也是非常重要的功能，在这里简单介绍一下。
● Expires（期限）
功能描述：用于设定网页的过期时间，如果网页过期就必须连接服务器进行重新传输。
使用方法：<meta http-equiv="expires" content="Tue,31 Dec 2019 23:59:59 GMT">。
注意事项：必须使用GMT格式时间。
● Pragma（Cache模式）
功能描述：禁止浏览器从本地计算机的缓存中访问HTML网页的内容。
使用方法：<meta http-equiv="Pragma" content="no-cache">。
注意事项：如果这样设置，用户就无法脱机浏览网页。
● Set-Cookie（Cookie过期设置）
功能描述：如果网页过期，那么保存在本机的全部Cookie将被自动删除。
使用方法：<meta http-equiv="Set-Cookie" content="cookie-value=xxx; expires= Tue,31 Dec 2019 23:59:59 GMT; path=/ ">。
注意事项：必须使用GMT格式时间。
● Window-target（显示窗口的设置）
功能描述：强制HTML网页在当前窗口以独立页面方式显示。
使用方法：<meta http-equiv="Window-target" content="_top">。
注意事项：用来防止外部页面在框架里调用本页面。
1.1.5 body标签定义网页的主体
body标签用于定义HTML网页的主体，我们在网页上看到的全部内容（譬如文本、超链接、表单、照片、动画、视频等）都是放置在<body></body>标签中的。
body标签自身可以包含几个属性，用于定义HTML网页主体的背景颜色、背景图片、文本颜色、链接颜色等。不过由于CSS样式表的存在，一般不建议直接在body标签自身中定义这些属性，比较标准的方法是全部定义在CSS样式表中。下面这几行就是直接在body标签自身中定义页面背景颜色（bgcolor="red"，设置为红色），读者可以参考：
<body bgcolor="red"> …… </body>
针对body标签比较常用的做法是定义事件属性，由于body标签地位的特殊性（其是HTML网页的主体标签，在页面初始化后body标签是最先加载的标签），我们可以在body标签定义onload事件属性。关于onload事件属性后面的章节会详细介绍，现在我们只需知道该事件属性可以完成页面加载后立即执行JS脚本的功能即可。
下面向读者介绍使用body标签的方法（参见源代码chapter01/ch01-htmlcomp-body.html文件）。
【示例1-4】 body标签
01 <!DOCTYPE html>
02 <html lang="zh-cn">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>HTML之body标签</title>
06 </head>
07 <script type="text/javascript">
08 /**
09 * 自定义函数: init()
10 */
11 function init() {
12 document.getElementById("id-content").innerHTML = "<p>初始化时动态添
加页面内容！
13 </p>";
14 }
15 </script>
16 <body onload="init();">
17 <!-- 添加文档主体内容 -->
18 <h3>HTML之body标签</h3>
19 <div id="id-content"></div>
20 <!-- 添加文档主体内容 -->
21 </body>
22 </html>
在关于body标签的这段HTML代码中，第16行是对body标签的使用。在body标签内，通过onload事件属性在页面初始化时触发了一个自定义JS函数（函数名称为init()），该函数定义在第11～14行中，主要完成了对第19行中定义的一个层（div）标签进行动态更新内容的操作。页面运行后的效果如图1.7所示。
图1.7 HTML网页之body标签
提示
在原始的ch01-htmlcomp-body.html文件中，body主体内并没有定义“初始化时动态添加页面内容！”这条文本信息，不过从图1.7中的显示效果来看，这条文本信息没有经过用户任何操作却显示出来了，这表明该文本信息是在页面加载时动态添加进去的。