1.2 HTML文件的基本结构和标签

一个HTML文件是由一系列的元素和标签组成的。元素是HTML文件的重要组成部分，而HTML用标签来规定元素的属性和它在文件中的位置。本节将对HTML文件的元素、标签及文件结构进行详细介绍。

1.2.1 HTML文件的基本结构

1.标签

HTML 的标签分为单独出现的标签（以下简称为单独标签）和成对出现的标签（以下简称为成对标签）两种。

1）单独标签

单独标签的格式为＜元素名称＞，其作用是在相应的位置插入元素。例如，＜br＞标签就是单独出现的标签，意思是在该标签所在位置插入一个换行符。

2）成对标签

大多数标签都是成对出现的，由首标签和尾标签组成。首标签的格式为＜元素名称＞，尾标签的格式为＜/元素名称＞。其语法格式如下：

成对标签仅对包含在其中的文件部分产生作用。例如，＜title＞和＜/title＞标签就是成对出现的标签，用于界定标题元素的范围。也就是说，＜title＞和＜/title＞标签之间的部分是此 HTML文件的标题。

说明：在HTML标签中不区分大小写。例如，＜HTML＞、＜Html＞和＜html＞，其结果都是一样的。

在每个HTML标签中，还可以设置一些属性，用来控制HTML标签所建立的元素。这些属性将位于首标签中，因此，首标签的基本语法如下：

而尾标签的建立方式则为：

因此，在HTML文件中，某个元素的完整定义语法如下：

说明：在HTML语法中，设置各属性所使用的“〝”可省略。

2.元素

当用一组HTML标签将一段文字包含在中间时，这段文字与包含文字的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.2.2 HTML文件的基本标签

1.文件开始标签＜htmI＞

在任何一个HTML文件里，最先出现的HTML标签就是＜html＞，它用于表示该文件是以超文本标识语言（HTML）编写的。＜html＞是成对出现的，首标签＜html＞和尾标签＜/html＞分别位于文件的最前面和最后面，文件中的所有内容和HTML标签都包含在其中。例如：

该标签不带任何属性。

事实上，现在常用的Web浏览器（如IE）都可以自动识别HTML文件，并不要求有＜html＞标签，也不对该标签进行任何操作。但是，为了提高文件的适用性，使编写的HTML文件能适应不断变化的Web浏览器，仍然应该养成使用这个标签的习惯。

2.文件头部标签＜head＞

习惯上，把HTML文件分为文件头和文件主体两部分。文件主体部分就是在Web浏览器窗口的用户区内看到的内容，而文件头部分用来规定该文件的标题（出现在Web浏览器窗口的标题栏中）和文件的一些属性。

＜head＞是一个表示网页头部的标签。在由＜head＞标签所定义的元素中，并不放置网页的任何内容，而仅仅放置关于HTML文件的信息，也就是说，它并不属于HTML文件的主体。它包含文件的标题、编码方式及URL等信息。这些信息大部分是用于提供索引、辨认或其他方面的应用的。

写在＜head＞与＜/head＞标签中间的文本，如果又写在＜title＞标签中，则表示该网页的名称，并作为窗口的名称显示在这个网页窗口的最上方。

说明：如果HTML文件并不需要提供相关信息，则可以省略＜head＞标签。

3.文件标题标签＜titIe＞

每个HTML文件都需要一个文件名称。在浏览器中，文件名称作为窗口名称显示在该窗口的最上方。这对浏览器的收藏功能很有用。如果浏览者认为某个网页对自己很有用，今后想经常阅读，则可以选择IE浏览器“收藏”菜单中的“添加到收藏夹”命令将它保存起来，供以后调用。网页的名称要写在＜title＞和＜/title＞标签之间，并且＜title＞标签应包含在＜head＞与＜/head＞标签之中。

HTML 文件的标签是可以嵌套的，即在一对标签中可以嵌入另一对子标签，用来规定母标签所含范围的属性或其中的某一部分内容。嵌套在＜head＞标签中使用的主要有＜title＞标签。

4.元信息标签＜meta＞

＜meta＞标签元素提供的信息是用户不可见的，它不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。在HTML中，＜meta＞标签不需要设置结束标签，在一对尖括号内就是一个meta内容，而在一个HTML头页面中可以有多个＜meta＞标签。＜meta＞标签的属性有两种：name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎机器人查找、分类。

5.页面的主体标签＜body＞

网页的主体部分以标签＜body＞标识它的开始，以标签＜/body＞标识它的结束。＜body＞标签是成对出现的。在网页的主体标签中常用的属性如表1.1所示。

6.页面的注释

在网页中，除以上这些基本标签外，还包含一种不显示在页面中的元素，那就是代码的注释文字。适当的注释可以帮助用户更好地了解网页中各个模块的划分，也有助于以后对代码的检查和修改。给代码加注释是一种很好的编程习惯。在HTML5文档中，注释分为3类：在文件开始标签＜html＞＜/html＞中的注释、在CSS层叠样式表中的注释和在JavaScript中的注释，其中在JavaScript中的注释又有两种形式。下面将对这3类注释的具体语法进行介绍。

（1）在文件开始标签＜html＞＜/html＞中的注释，具体语法如下：

注释文字的标记很简单，只需要在语法中“注释的文字”位置上添加需要的内容即可。

（2）在CSS层叠样式表中的注释，具体语法如下：

在CSS样式中注释时，只需要在语法中“注释的文字”位置上添加需要的内容即可。

（3）在JavaScript中的注释有两种形式：单行注释和多行注释。

单行注释的具体语法如下：

注释文字的标记很简单，只需要在语法中“注释的文字”位置上添加需要的内容即可。

多行注释的具体语法如下：

在JavaScript中添加多行注释时，只需要在语法中“注释的文字”位置上添加需要的内容即可。

注意：在JavaScript中添加多行注释或单行注释的形式不是一成不变的，在进行多行注释时，单行注释也是有效的。运用“//注释的文字”对每行文字进行注释达到的效果和运用“/*注释的文字*/”达到的效果一样。

常见错误

在HTML代码中，当注释语法使用错误时，浏览器将注释视为文本内容，注释内容会显示在页面中。例如，下面给出的一个网页代码中有4处注释使用错误的情况。

用谷歌浏览器打开这个HTML5文件，运行效果如图1.3所示。