1.4 HTML5基本结构
HTML是一种标记语言，不是编程语言。标记内容需要用到元素，元素描述内容是什么，而非内容显示效果。CSS才负责控制内容的外观（如字体、颜色、阴影等）。因此，不管用户最后让段落显示为绿色，还是红色，它们都是p元素，这是HTML唯一关心的焦点。在学习和创建HTML网页时，应该始终牢记这一原则。
1.4.1 新建HTML5文档
使用记事本新建一个文本文件，保存为index.html。注意，扩展名为.html，而不是.txt。然后输入下面的代码。
提示：如果使用专业网页编辑器，如Dreamweaver等，新建网页文件时，它会自动帮助完成上面代码的输入。
通过上面的代码，可以看到每个网页都由固定的结构开始构建。这段HTML代码创建的网页相当于一张白纸，因为访问者看到的内容位于主体部分（即<body>和</body>之间的部分），而这一部分现在是空的，如图1.1所示。
图1.1 空白页面
每个网页都包含DOCTYPE、html、head和body元素，它们是网页的基础。在这个页面中，可以定制的内容包括两项：一是设置lang属性的语言代码，二是<title>和</title>之间的文字。HTML使用“<”和“>”字符包围HTML标签。开始标签（如<head>）用于标记元素的开始，结束标签（如</head>）用于标记元素的结束。有的元素没有结束标签，如meta。
【拓展】
完整的HTML文档应该包含两部分结构：头部信息（<head>）和主体内容（<body>）。为了使网页内容更加清晰、明确，容易被他人阅读，或者被浏览器以及各种设备所理解，新建HTML5文档之后，需要完善这两部分内容，构建基本的网页框架。
一个网页主要包括以下3个部分。
文本内容：在页面上让访问者了解页面内容的纯文字，如关于产品、资讯的内容，以及其他任何内容。- 外部引用：使用这些引用来加载图像、音频、视频文件，以及样式表（控制页面的显示效果）和JavaScript文件（为页面添加行为）。这些引用还可以指向其他的HTML页面和资源。
- 标记：对文本内容进行描述，并确保浏览器能够正确显示。提示，HTML一词中的字母M就代表标记。
每一个HTML页面的开头部分，还会包含一些信息，主要用于浏览器和搜索引擎（如百度、Google等）的解析。浏览器不会将这些信息呈现给访问者。
网页内容都由文本构成，因此网页可以保存为纯文本格式，可以在任何平台上使用任何浏览器查看，无论是台式机、手机、平板电脑，还是其他平台。这个特性也确保了用户很容易创建HTML页面。
提示：本书使用HTML泛指这门语言本身。如果需要突出HTML某一版本独有的特殊属性，则使用它们各自的名称。例如，HTML5引入了一些新的元素，并重新定义或删除了HTML4和XHTML 1.0中的某些元素。
1.4.2 网页顶部和头部
完整的HTML文档应该包含以下两部分结构。
- 头部信息（head）
- 主体内容（body）
为了使网页内容更加清晰、明确，容易被他人阅读，或者被浏览器，以及各种设备所理解，新建HTML5文档之后，需要完善这两部分内容，构建基本的网页框架。
页面内容位于主体部分，<body>开始标签以上的内容都是为浏览器和搜索引擎准备的。<!DOCTYPE html>部分（简称为DOCTYPE）告诉浏览器这是一个HTML5页面。DOCTYPE应该始终位于代码的第一行，写在HTML页面的顶部。
html元素包着页面的其余部分，即<html>开始标签和</html>结束标签（表示页面的结尾）之间的内容。
<head>和</head>标签之间的区域表示网页文档的头部。头部代码中，有一部分是浏览者可见的，即<title>和</title>之间的文本。这些文本会出现在浏览器标签页中。某些浏览器会在窗口的顶部显示这些文本，作为网页的标题显示。此外，这些文本通常还是浏览器书签的默认名称，它们对搜索引擎来说也是非常重要的信息。
1.4.3 网页主体
尝试为页面添加一些主体内容。
在桌面浏览器中呈现这段HTML代码效果，如图1.2所示。这是页面在IE中显示的效果，在其他浏览器中的效果也是相似的。使用浏览器查看网页时，不会显示包围文本内容的标记，但是这些标记是非常有用的，我们使用它们来描述内容，如<p>标记用于表示段落的开始。
图1.2 添加主体内容
整个页面包含了3部分：文本内容、外部文件的引用（图像的src值和链接的href值）和标记。HTML提供了很多元素，上面的示例演示了6种最为常见的元素：a、article、em、h1、img和p。每个元素都有各自的含义，例如，h1是标题，a是链接，img是图像。
注意：在代码中行与行之间通过回车符分开，不过它不会影响页面的呈现效果。对HTML进行代码缩进显示，与内容在浏览器中的显示效果没有任何关系，但是pre元素是一个例外。习惯上，我们会对嵌套结构的代码进行缩进排版，这样会更容易看出元素之间的层级关系。
1.4.4 认识标签
标签和元素是两个不同的概念，一个标签由3部分组成：元素名、属性和值。
1. 元素
元素就是用来描述网页不同部分的标签名称：这是一个标题，那是一个段落，而那一组链接是一个导航。有的元素可以包含一个或多个属性，属性用来进一步描述元素。
大多数标签由开始标签、包含内容和结束标签组成。开始标签是放在一对尖括号中的元素名，以及可能包含的属性，结束标签是放在一对尖括号中的斜杠加元素名。例如：
<em>小白</em>
- 开始标签：<em>
- 内容文本：小白
- 结束标签：</em>
这是一个典型的HTML元素。开始标签、结束标签，以及包含描述元素的文字。习惯上，标签采用小写字母。
还有一些元素是空元素，既不包含文本，也不包含其他元素。它们看起来像是开始标签和结束标签的结合，由左尖括号开头，然后是元素的名称和可能包含的属性，接着是一个可选的空格和一个可选的斜杠，最后是必有的右尖括号。例如：
<img src="images/xiaobai.jpg" width="50" alt="小白者，我也" />
img元素并不包含任何文本内容。alt属性中的文字是元素的一部分，并非显示在网页中的内容。空元素只有一个标签，同时作为元素的开始标签和结束标签使用。
提示：在HTML5中，结尾处的空格和斜杠是可选的。不过，最后面的“>”是必需的。元素的名称都用小写字母。不过，HTML5对此未做要求，也可以使用大写字母。除非特殊需要，否则不推荐使用大写字母。
2. 属性和值
属性包含了元素的额外信息。在HTML5中，属性值（参见1.3.2小节）两边的引号是可选的，但习惯上建议写上。与元素的名称一样，尽量使用小写字母编写属性的名称。例如：
<label for="email">电子邮箱</label>
这是一个label元素（关联文本标签与表单字段）。属性总是位于元素的开始标签内，属性的值通常放在一对引号中。
元素（如a和img）可以有多个属性，每个属性都有各自的值。属性的顺序并不重要。不同的“属性／值”对之间用空格隔开。例如：
<a href="https://www.w3.org/TR/html5/" rel="external" title="HTML5参考手册">HTML5</a>
有的属性可以接受任何值，有的属性则有限制。最常见的是那些仅接受预定义值（即枚举值）的属性。此时，用户必须从一个标准列表中选一个值，枚举值一般用小写字母编写。例如：
<link rel="stylesheet" media="screen" href="style.css" />
用户只能将link元素的media属性设为all、screen、print等值中的一个，不能像href属性和title属性那样可以输入任意值。
有很多属性的值需要设置为数值，特别是那些描述大小和长度的属性。数值不需要包含单位，只需输入数字本身。图像和视频的宽度和高度是有单位的，默认为像素。
有的属性（如href和src）用于引用其他文件，它们只能包含URL形式的字符串值。
还有一种特殊的属性称为布尔属性（参见1.3.2小节），这种属性的值是可选的，因为只要这种属性出现就表示其值为真。如果要包含一个值，可写上属性名本身。布尔属性也是预定义好的，无法自创。例如：
<input type="email" name="emailaddr" required />
上面代码提供了一个让用户输入电子邮件地址的输入框。布尔属性required表示用户必须填写该输入框。布尔属性不需要属性值，如果一定要加上属性值，则可以编写为required=“required”。
3. 父元素和子元素
如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。子元素中包含的任何元素都是外层的父元素的后代。这种类似家谱结构是HTML代码的结构特性，它有助于在元素上添加样式和应用JavaScript行为。
注意：当元素中包含其他元素时，每个元素都必须嵌套正确，也就是子元素必须完全被包含在父元素中，不能把子元素的结束标签放在外面。例如：
在这段HTML代码中，article元素是h1、img和p元素的父元素。反过来，h1、img和p元素是article元素的子元素（也是后代）。p元素是em和a元素的父元素。em和a元素是p元素的子元素，也是article元素的后代（但不是子元素）。反过来，article元素是它们的祖先元素。
1.4.5 网页文本内容
网页中显示的文本内容，就是元素中包含的文本，它是网页上最基本的构成成分。在HTML早期版本中，只能使用ASCII字符集。
ASCII字符集仅包括英语字母、数字和少数几个常用符号。开发人员必须用特殊的字符引用来创建很多日常符号。例如， 表示空格，©表示版权符号©，®表示注册商标符号®等。完整列表请参考http://www.elizabethcastro.com/html/extras/entities.html。
注意：浏览器在呈现HTML页面时，会把文本内容中的多个空格或制表符压缩成单个空格，把回车符和换行符转换成单个空格，或者忽略。字符引用也替换成对应的符号，如把©显示为©。Unicode字符集极大缓解了特殊字符的显示问题。使用UTF-8对页面进行编码，并用同样的编码保存HTML文件已成为一种标准做法。推荐在网页中将charset值指定为UTF-8。HTML5不区分大小写，UTF-8和utf-8的结果是一样的。
1.4.6 网页非文本内容
在网页中除了大量的文本内容外，还有很多非文本内容，如图像、链接、视频、音频等。从网页外引用图像和其他非文本内容时，浏览器会将这些内容与文本一起显示。在默认情况下，链接文本的颜色与其他文本的颜色是不一样的，而且还带有下画线。
外部文件（如图像）实际上并没有存储在HTML文件中，而是单独保存，页面只是简单地引用了这些文件。例如：
在基本HTML文档中，有一个对图像文件xiaobai.jpg的引用（img元素的src属性），浏览器在加载页面其他部分的同时，会请求、加载和显示这个图像。该页面还包括一个指向关于HTML5参考页面的链接（a元素的href属性）。
浏览器可以处理图像和链接，不过无法处理其他文件类型。例如，对于一般浏览器来说，要查看PDF格式的外部文件，就需要在系统中预先安装好Adobe Reader；要查看电子表格，就需要预先安装好Open Office等软件。早期HTML没有内置的方法播放视频和音频文件，各软件厂商都开发出相应的软件，用户可以下载并安装这些软件，从而弥补浏览器缺失的功能。这样的软件称为插件。
在浏览器插件中，使用最为广泛的是Flash。多年以来，Flash插件是播放网页视频必备的工具。不过，这个插件也有一些问题，如它会耗费较多的计算资源。HTML5新增加了audio和video元素，无需使用插件就可以播放视频和音频了。不过，现代浏览器也提供了内置的媒体播放器，用户仍然可以使用Flash播放器作为旧浏览器的备用工具。