网页设计与制作全能一本通（微课版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3.1 HTML5文档结构

HTML5文档是纯文本文件，常用的文件扩展名是.html或者.htm。HTML5文件的第一行是文档声明，对于HTML5文档来说，文档声明如下。

<!DOCTYPE html>

因为HTML5对字母大小写不敏感，所以以上文档声明也可写作“<!DOCTYPE HTML>”。HTML5之前的HTML4.01的文档声明如下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">

HTML5与之前的版本相比，文档声明更加简洁。

文档声明之后是HTML5文档的内容。标签是HTML5文档内容的最小单位，标签通常两个为一组，一起出现，用角括号（Angle Bracket）标识标签的位置。文档声明也是一个特殊的标签。下面的代码展示了一个标签名为html的标签。

<html> </html>

角括号内的“html”就是标签的名字。一般来说，如果某个标签的角括号内第一个字符是“/”，则这个标签为结束标签，否则是开始标签。一对标签组成一个元素。例如，<html>是开始标签，表示html元素的开始；</html>是结束标签，表示html元素的结束。

开始标签和结束标签之间是元素的内容。它可以是文本，也可以是其他标签。另外，开始标签中除了标签名字外，还可以添加一个或多个属性。HTML5文档的基本结构如下所示。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8" />
    <title>文档标题</title> <!-- 文档的标题会被显示在页面的标题栏 -->
  </head>
  <body>
    <!-- 通常来说<body></body>标签内的元素才是显示在浏览器窗口中的内容 -->
    <h1>一级标题</h1>
    <p>文本段落</p>
    <h2>二级标题</h2>
    <p>文本段落</p>
  </body>
</html>

HTML5文档的最开始是文档声明。之后的所有文档内容都应该包含在一个html元素之内。html元素内通常有两个子元素，即head和body。Head元素内通常包含页面的一些信息，而body元素中包含在页面中可以看到的内容。

上例中<head>标签内的第一个标签为“<meta charset="utf8" />”，其标签名为“meta”。charset="utf8"说明标签的charset属性的值是“utf8”。这意味着当前HTML5文档的编码格式是“utf8”，这一属性设置对于绝大多数包含中文的HTML5文档都是必要的。若不设置该属性，则浏览器可能无法正常显示中文。

“<meta charset="utf8" />”中的“/”表明当前元素为空，“<meta />”相当于“<meta></meta>”。

在HTML5文档中，“<!--”和“-->”是注释符号，它们之间的内容会被忽略掉，起到对代码进行解释说明的作用。

下面开始创建第一个HTML5文档。启动VS Code。单击“文件”菜单，选择“新建文件”选项创建空文件。输入上面的代码，保存新文件为“1.3.1.html”。它是一个简单但完整的HTML5文档。

注意

文件名中的“.html”表示当前文件是HTML5文档。文件名中最后一个点及其后面的部分被称为文件的扩展名。比如Word文档的扩展名是.doc或.docx，扩展名通常可以说明文件的类型，以及应该用什么程序打开文件。如果使用了其他的扩展名，则可能无法使用浏览器正常打开HTML5文档。

上一章目录下一章