- 网页设计与制作教程:Web前端开发(第7版)
- 刘瑞新主编
- 1451字
- 2025-02-26 01:11:23
1.2.2 HTML5的基本语法
HTML文档由元素构成,元素由标签、元素和属性的内容3部分组成。
1.标签(tag)
HTML用标签规定网页元素在文档中的功能。标签是用一对尖括号“<>”括起来的单词或单词缩写。标签有两种形式:双标签和单标签。
(1)双标签
双标签包括开始标签和结束标签,其格式为:

开始标签标志一段内容的开始,结束标签是指与开始标签相对的标签。结束标签比开始标签多一个斜杠“/”。双标签也称闭合标签。例如,HTML文档从<html>开始,到</html>结束。
(2)单标签
单标签没有相对应的结束标签,其格式为:

常见的单标签有<area>、<base>、<basefont>、<br>、<col>、<hr>、<img>、<input>、<param>、<link>、<meta>等。
使用标签时需要注意以下3点。
1)每个标签都要用一对尖括号“<>”括起来,如<p>,<table>,以表示这是HTML代码而非普通文本。注意,“<”“>”与标签名之间不能留有空格或其他字符,否则出错。
2)对于双标签,其结束标签名前加上符号“/”,表示该标签内容的结束,如</h1>。对于单标签,不用</标签>结尾。例如,换行标签<br>。
3)一个标签可以放在另外一个标签所能影响的片段中,以实现对某一段文档的多重标签效果,称为嵌套,但是要注意必须正确嵌套。例如,下面嵌套是错误的:

改正如下:

2.元素(element)
HTML文档中的元素是指从开始标签到结束标签的所有代码。HTML元素分为有内容的元素和空元素两种。
(1)有内容的元素
有内容的元素是由开始标签、结束标签以及两者之间的元素内容组成的,其中元素内容既可以是需要显示在网页中的文字内容,也可以是其他元素。例如,<title>和</title>是标签,下面代码是一个title元素:

(2)空元素
只有开始标签而没有结束标签,也没有元素内容,因此也称空元素(void elements)。例如,br、hr元素就是空元素。
(3)元素的嵌套
除了HTML文档元素<html>外,其他的HTML元素都是被嵌套在另一个元素之内的。在HTML文档中,html是最外层元素,也称为根元素。head、body元素是嵌套在html元素内的。body元素内又嵌套许多元素。HTML中的元素可以多级嵌套,但是不能互相交叉。例如,下面代码对于<head>和</head>标签来说,是一个head元素:

同时,这个title元素又是嵌套在head元素中的另一个元素。
例如,下面是不正确的嵌套写法,p元素的开始标签在b元素的外层,但它的结束标签却放在了b元素结束标签内。

正确的HTML写法如下:

为了防止出现错误的HTML元素嵌套,在编写HTML文档时,建议先写外层的一对标签,然后逐渐往里写,这样既不容易忘记写HTML元素的结束标签,也可以减少HTML元素的嵌套错误。
3.属性
属性用来说明元素的特征,借助于元素属性,HTML网页才会展现丰富多彩且格式美观的内容。
元素的属性放置在元素的开始标签内,每个属性对应一个属性值,通常都是以“属性名="值"”的形式表示,出现在元素开始标签的“>”之前,用空格隔开后,可以指定多个属性,并且在指定多个属性时不用区分顺序。属性的使用格式为:

例如,下面代码中的“border="1" cellspacing="10" cellpadding="20"”就是table元素的属性:

定义属性值时注意以下几点。
1)不定义属性值。HTML规定属性也可以没有值,例如:

浏览器会使用compact属性的默认值。但对于没有默认值的属性,不能省略属性值。
2)属性中的属性值可以包含空格,但是这种情况下必须使用引号。例如,下面代码是正确的写法:

下面代码是错误的写法:

也就是说,属性值一定是连续字符序列,如果不是连续序列,则要加引号标注。
3)单引号和双引号都可以作为属性值。当属性值中含有单引号时,不能再用单引号包括属性值,要用双引号包括属性值。但是,当属性值中有双引号时,属性值中的双引号就要用数字字符引用(")或者字符实体引用(")来代替双引号。例如,下面代码是错误的:

正确的写法为:

或者

title属性定义当鼠标移到元素上时显示该提示文本。
4)HTML建议属性和属性值使用小写,虽然属性和属性值对大小写不敏感。