1.2 HTML文件的基本结构
一个HTML文件是由一系列的元素和标签组成的。元素是HTML文件的重要组成部分，HTML5是用标签来规定元素的属性及其在文件中的位置的。本节对HTML文件的元素、标签及文件结构进行详细的介绍。
1.2.1 HTML相关概念
1. 标签
HTML的标签分为单独出现的标签（以下简称单独标签）和成对出现的标签（以下简称成对标签）两种。
1）单独标签
单独标签的格式为“<元素名称>”，其作用是在相应的位置插入元素。例如，<br>标签就是单独标签，表示在该标签所在位置插入一个换行符。
2）成对标签
大多数标签都是成对出现的，成对标签由起始标签和结束标签组成。起始标签的格式为“<元素名称>”，结束标签的格式为“</元素名称>”。成对标签的语法格式如下：
成对标签仅对包含在其中的文件部分发生作用。例如，<title>和</title>标签就是成对标签，用于界定标题元素的范围，即<title>和</title>标签之间的部分是此HTML5文件的标题。
学习笔记
HTML标签不区分大小写。例如，<HTML>、<Html>和<html>，其结果都是一样的。
在每个HTML标签中，还可以设置一些属性，用来控制HTML标签建立的元素。这些属性位于起始标签中，因此，起始标签的基本语法如下：
而结束标签的建立方式则为：
因此，在HTML文件中，某个元素的完整定义语法如下：
学习笔记
在HTML语法中，设置各属性使用的“"”可省略。
2. 元素
当用一组HTML标签将一段文字包含在中间时，这段文字与包含文字的HTML标签被称为一个元素。
在每个由HTML标签与文字形成的元素内，还可以包含另一个元素。因此，整个HTML文件就是一个大元素包含了许多小元素。
在所有HTML文件中，最外层的元素都是由<html>标签建立的。在<html>标签建立的元素中，包含两个主要的子元素，这两个子元素是由<head>标签与<body>标签建立的。<head>标签建立的元素内容为文件标题，<body>标签建立的元素内容为文件主体。
3. HTML文件结构
在介绍HTML文件结构前，先来看一个简单的HTML文件及其在浏览器上的显示结果。
下面使用文件编辑器（如Windows自带的记事本）编写一个HTML文件，代码如下：
用浏览器打开该文件，运行效果如图1.1所示。
从上述代码和其运行效果图中可以看出HTML文件的基本结构，如图1.2所示。
<head>与</head>之间的部分是HTML文件的文件头部分，用以说明文件的标题和整个文件的一些公共属性。<body>与</body>之间的部分是HTML文件的主体部分，下面介绍的标签，如果不加特别说明，则均是嵌套在这一对标签中使用的。
图1.1 HTML实例运行效果图
图1.2 HTML文件的基本结构
1.2.2 HTML的基本标签
1. 文件起始标签<html>
在任何一个HTML文件里，最先出现的HTML标签就是<html>，它用于表示该文件是以HTML编写的。<html>是成对出现的，起始标签<html>和结束标签</html>分别位于文件的最前面和最后面，文件中的所有文件和HTML标签都包含在其中。例如：
表示该标签不带任何属性。
事实上，现在常用的Web浏览器（如IE）都可以自动识别HTML文件，并不要求有<html>标签，也不对该标签进行任何操作。但是，为了提高文件的适用性，使编写的HTML文件可以适应不断变化的Web浏览器，还是应该养成使用<html>标签的习惯。
2. 文件头部标签<head>
习惯上，把HTML文件分为文件头和文件主体两部分。文件主体部分就是在Web浏览器窗口的用户区内显示的内容，而文件头部分用来规定该文件的标题（出现在Web浏览器窗口的标题栏中）和一些公共属性。
<head>是一个表示网页头部的标签。在<head>标签定义的元素中，并不放置网页的任何内容，而是放置关于HTML文件的信息，即<head>并不属于HTML文件的主体。<head>包含文件的标题、编码方式及URL（Uniform Resource Locator）等信息，这些信息大部分是用于提供索引、辨认或其他方面的应用的。
写在<head>与</head>之间的文本，如果又写在了<title>标签中，则表示该网页的名称作为窗口的名称显示在这个网页窗口的最上方。
学习笔记
如果当HTML文件并不需要提供相关信息时，则可以省略<head>标签。
3. 文件标题标签<title>
每个HTML文件都需要有一个文件名称。在浏览器中，文件名称作为窗口名称显示在该窗口的最上方，这对浏览器的收藏功能很有用。如果浏览者认为某个网页对自己很有用，今后想经常阅读，则可以选择IE浏览器“收藏”菜单中的“添加到收藏夹”命令将它保存起来，供以后调用。文件名称要写在<title>和</title>之间，并且<title>标签应包含在<head>标签中。
HTML文件的标签是可以嵌套的，即在一对标签中可以嵌入另一对子标签，用来规定母标签所含范围的属性或其中某一部分内容，嵌套在<head>标签中使用的主要有<title>标签。
4. 元信息标签<meta>
meta元素提供的信息是用户不可见的，不显示在网页中，一般用来定义网页信息的名称、关键字、作者等。在HTML中，<meta>标签不需要设置结束标签，一个尖括号内就是一个meta内容，而在一个HTML文件的<head>标签中，可以有多个meta元素。meta元素的属性有两种：name和http-equiv，其中name属性主要用于描述网页，以便搜索引擎查找、分类。
5. 网页的主体标签<body>
网页的主体部分以标签<body>为开始标志，以标签</body>为结束标志。<body>标签是成对出现的。在网页的主体标签中，body元素的常用属性如表1.1所示。
表1.1 body元素的常用属性
6. 网页的注释
在网页中，除了以上这些基本标签，还包含一种不显示在网页中的元素，那就是代码的注释文字。适当的注释可以帮助用户更好地了解网页中各个模块的划分，也有助于以后对代码进行检查和修改。给代码加注释是一种很好的编程习惯。在HTML5文档中，注释分为3类：在文件开始标签<html></html>中的注释、在CSS（层叠样式表）中的注释和在JavaScript中的注释。下面对这3类注释的具体语法进行介绍。
（1）在文件开始标签<html></html>中的注释。具体语法如下：
注释文字的标签很简单，只需在语法中的“注释的文字”的位置上添加需要的内容即可。
（2）在CSS（层叠样式表）中的注释。具体语法如下：
在CSS样式中注释时，只需在语法中的“注释的文字”的位置上添加需要的内容即可。
（3）在JavaScript中，注释有两种形式：单行注释和多行注释。
单行注释的具体语法如下：
注释文字的标签很简单，只需在语法中的“注释的文字”的位置上添加需要的内容即可。
学习笔记
当在JavaScript中添加单行注释时，只需在语法中“注释的文字”的位置上添加需要的内容即可。
多行注释的具体语法如下：
当在JavaScript中添加多行注释时，只需在语法中的“注释的文字”的位置上添加需要的内容即可。
学习笔记
在JavaScript中添加多行注释或单行注释的形式不是一成不变的，在进行多行注释时，单行注释也是有效的。运用单行注释对每一行文字进行注释达到的效果和运用多行注释达到的效果一样。
在HTML代码中，当注释语法使用错误时，浏览器会将注释视为文本内容，注释内容会显示在网页中。例如，下面给出的一个网页代码中有4处注释使用错误的情况。
用谷歌浏览器打开这个HTML5文件，运行效果如图1.3所示。
图1.3 错误使用代码注释的运行效果