2.2 HTML语言
2.2.1 什么是HTML
HTML是纯文本类型的语言,使用HTML编写的网页文件也是标准的纯文本文件。我们可以用任何文本编辑器,例如Windows的“记事本”程序打开它,查看其中的HTML源代码,也可以在用浏览器打开网页时,通过相应的“查看”→“源文件”命令查看网页中的HTML代码。HTML文件可以直接由浏览器解释执行,而无须编译。当用浏览器打开网页时,浏览器读取网页中的HTML代码,分析其语法结构,然后根据解释的结果显示网页内容。
2.2.2 标签、元素、结构概述
1.HTML标签
HTML的标签分单独出现的标签和成对出现的标签两种。
大多数标签成对出现,是由首标签和尾标签组成的。首标签的格式为<元素名称>,尾标签的格式为</元素名称>。其完整语法如下:
<元素名称>要控制的元素</元素名称>
成对标签仅对包含在其中的文件部分发生作用,例如<title>和</title>标签用于界定标题元素的范围,也就是说,<title>和</title>标签之间的部分是此HTML5文件的标题。
单独标签的格式为<元素名称>,其作用是在相应的位置插入元素,例如<br>标签便是在该标签所在位置插入一个换行符。
说明
在每个HTML5标签中,大、小写混写均可。例如<HTML5>、<Html5>和<html5>,其结果都是一样的。
在每个HTML5标签中,还可以设置一些属性,控制HTML5标签所建立的元素。这些属性将位于所建立元素的首标签,因此,首标签的基本语法如下:
<元素名称 属性1="值1" 属性2="值2"…>
而尾标签的建立方式则为
</元素名称>
因此,在HTML5文件中某个元素的完整定义语法如下:
<元素名称 属性1="值1" 属性2="值2"…>元素资料</元素名称>
说明
语法中,设置各属性所使用的引号“”可省略。
2.元素
当用一组HTML5标签将一段文字包含在中间时,这段文字与包含文字的HTML5标签被称为一个元素。
由于在HTML5语法中,每个由HTML5标签与文字所形成的元素内,还可以包含另一个元素。因此,整个HTML5文件就像是一个大元素,包含了许多小元素。
在所有的HTML5文件中,最外层的元素是由<HTML5>标签建立的。在<HTML5>标签所建立的元素中,包含了两个主要的子元素,这两个子元素是由<head>标签与<body>标签所建立的。<head>标签所建立的元素内容为文件标题,而<body>标签所建立的元素内容为文件主体。
3.HTML文件结构
在介绍HTML文件结构之前,先来看一个简单的HTML文件及其在浏览器上的显示结果。
下面开始编写一个HTML文件,使用文件编辑器,例如在Windows自带的记事本中编写如下代码,然后将其保存为.html文件。
运行效果如图2.4所示。
图2.4 HTML5示例
从上述代码中可以看出HTML文件的基本结构,如图2.5所示。
图2.5 HTML文件的基本结构
其中,<head>与</head>之间的部分是HTML文件的文件头部分,用以说明文件的标题和整个文件的一些公共属性。<body>与</body>之间的部分是HTML文件的主体部分,下面介绍的标签,如果不加特别说明,均是嵌套在这对标签中使用的。
2.2.3 HTML的基本标签
1.文件开始标签<html>
在任何一个HTML文件里,最先出现的HTML标签就是<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.文件标题标签<title>
每个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>标志它的结束。在网页的主体标签中有很多属性设置,如表2.3所示。
表2.3 <body>元素的属性