HTML5+CSS3王者归来
上QQ阅读APP看书,第一时间看更新

2-2 HTML文件结构

HTML文件是纯文本组成的文件,它的基本文件结构如下:

其实我们也可以称HTML文件是由<html>、<head>和<body>3个元素所组成。注意,HTML文件是没有行号的,此处的行号只是为了教学和读者学习方便而加上去的。

2-2-1 大小写皆可

HTML对标记(tag)本身所用的英文字母大小写是不敏感的,用英文大写字母或小写字母编写皆可接受。例如,将<html>改成<HTML>或是将“doctype”改成“DOCtype”,所代表的意义相同。

2-2-2 文件声明doctype

在HTML4.01版时,需要在文件前面编写一长串的doctype声明,以注明是使用哪一个版本的DTD(Document Type Definition,文档类型定义)。HTML5由于没有使用DTD,所以简化了许多,其文件的第一行内容如下:

<!doctype html>

这相当于告诉浏览器,目前这份文件是符合HTML5规范的,请使用HTML5的标准来解析文件。

2-2-3 <html> … </html>

在HTML文件中只有doctype是写在<html>前面的。

起始标记<html>和结束标记</html>主要用来标示这区间内的数据是HTML文件。虽然所有HTML文件的扩展名都是.htm或.html,浏览器已经可从扩展名判断出这是HTML文件了,不过笔者仍建议加上这个标记。

上面的文件结构中,在这个标记内笔者加上了属性lang="zh-tw",这个属性标明此份HTML文件所用的语言是繁体中文。标注语言可以协助搜索引擎和浏览器判别目前浏览文件所使用的语言。下列是几种常见语言的标注属性值。

简体中文:zh-cn 日文:ja

英文:en 韩文:ko

如果省略了标注语言的语句,浏览器将依所在计算机的语言设定来解读这份HTML文件。虽然在开始标记<html>不加lang属性设定,程序也可以正确执行,但是HTML5建议在所设计的HTML文件中于开始标记<html>内加上lang属性。

在HTML文件中,依次需写上<head> …</head>元素和<body> … </body>元素,其实我们也可以说,<html> … </html>内部是由<head>和<body>组成的。下面两节会针对此做解说。

当然,文件没有加<html>起始和</html>结束标记仍可以被正确执行,不过笔者不建议如此操作,所以本书所有程序范例皆包含此标记。

2-2-4 <head> … </head>

位于<head>和</head>之间的内容基本上是HTML文件头,这里主要包含文件标题<title> … </title>、CSS样式定义、作者信息、文件关键词信息以及本文所在URL(Universal Resource Locator,可理解为Internet地址)等基准信息。

写在<head> … </head>间的信息,除了标题(title)外,都不会在浏览器中显示。

2-2-5 <body> … </body>

<body> … </body>之间的内容其实就是HTML文件的主体,这些内容会在浏览器中显示。