HTML5从入门到精通 (第2版)
上QQ阅读APP看书,第一时间看更新

1.6 HTML的基本结构

教学录像:光盘\TM\lx\1\HTML的基本结构.exe

1.6.1 HTML文件的编写方法

HTML标签

一个HTML文件是由一系列的元素和标签组成的。元素是HTML文件的重要组成部分,例如title(文件标题)、img(图像)及table(表格)等。元素名不区分大小写。HTML用标签来规定元素的属性和它在文件中的位置。

HTML的标签分单独出现的标签和成对出现的标签两种。

大多数标签成对出现,是由首标签和尾标签组成的。首标签的格式为<元素名称>,尾标签的格式为</元素名称>。其完整语法如下:

        <元素名称>要控制的元素</元素名称>

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

单独标签的格式为<元素名称>,其作用是在相应的位置插入元素,例如<br>标签便是在该标签所在位置插入一个换行符。

说明

在每个HTML标签中,大写、小写、混写均可。例如<HTML>、<html>和<Html>,其结果都是一样的。

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

        <元素名称  属性1="值1" 属性2="值2"…>

而尾标签的建立方式则为

        </元素名称>

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

        <元素名称  属性1="值1" 属性2="值2"…>元素资料</元素名称>

说明

语法中,设置各属性所使用的“"”可省略。

元素的概念

当用一组HTML标签将一段文字包含在中间时,这段文字与包含文字的HTML标签被称为一个元素。

由于在HTML语法中,每个由HTML标签与文字所形成的元素内,还可以包含另一个元素。因此,整个HTML文件就像是一个大元素,包含了许多小元素。

在所有的HTML文件中,最外层的元素是由<html>标签建立的。在<html>标签所建立的元素中,包含两个主要的子元素,这两个子元素是由<head>标签与<body>标签所建立的。<head>标签所建立的元素内容为文件标题,而<body>标签所建立的元素内容为文件主体。

HTML文件结构

在介绍HTML文件结构之前,先来看一个简单的HTML文件及其在浏览器上的显示结果。

下面开始编写一个HTML文件,使用文件编辑器,例如Windows自带的记事本。

        <html>
        <head>
        <title>文件标题</title>
        </head>
        <body>
        文件正文
        </body>
        </html>

运行效果如图1.1所示。

图1.1 HTML示例

从上述代码中可以看出HTML文件的基本结构,如图1.2所示。

图1.2 HTML文件的基本结构

其中,<head>与</head>之间的部分是HTML文件的文件头部分,用以说明文件的标题和整个文件的一些公共属性。<body>与</body>之间的部分是HTML文件的主体部分,下面介绍的标签,如果不加特别说明,均是嵌套在这一对标签中使用的。

1.6.2 文件开始标签<html>

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

        <html>
        文件的全部内容
        </html>

该标签不带任何属性。

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

1.6.3 文件头部标签<head>

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

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

写在<head>与</head>中间的文本,如果又写在<title>标签中,表示该网页的名称同时作为窗口的名称显示在这个网页窗口的最上方。

如果HTML文件并不需要提供相关信息时,可以省略<head>标签。

1.6.4 文件标题标签<title>

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

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

1.6.5 文件主体标签<body>

<body>标签是成对出现的。网页中的主体内容应该写在<body>和</body>之间,而<body>标签包含在<html>标签里面。

1.6.6 编写文件的注意事项

在编写文件时,要注意以下事项。

(1)“<”和“>”是任何标签的开始和结束。元素的标记要用这对尖括号括起来,并且结束的标签总是在开始的标签前加一个斜杠。

(2)标签与标签之间可以嵌套,如:

        <H2><CENTER>初识HTML文件</CENTER></H2>

(3)在源代码中不区分大小写,如以下几种写法都是正确的并且是相同的标签:

        <HEAD>
        <head>
        <Head>

(4)任何回车和空格在源代码中不起作用。为了使代码清晰,建议在不同的标签之间回车后编写。

(5)HTML标签中可以放置各种属性,如:

        <h2 align="center">HTML初露端倪</h2>

其中,align为属性,center为属性值,元素属性出现在元素的“< >”内,并且和元素名之间有一个空格分割,属性值可以直接书写,也可以使用“""”括起来,如下面的两种写法都是正确的:

        <h2 align="center">HTML初露端倪</h2>
        <h2 align=center>HTML初露端倪</h2>

(6)如果希望在源代码中添加注释,便于阅读,可以以“<!--”开始,以“--! >”结束。如以下代码:

        <!--------------------------------------------! >
        <!--    文件范例:1-2.htm     --! >
        <!-- 文件说明:第一个HTML文件--! >
        <!--------------------------------------------! >

注释语句只出现在源代码中,而不会在浏览器中显示。