网页设计与制作全能一本通：HTML5+CSS3+JavaScript：微课版最新章节_欧阳荣华著

1.3 第一个HTML5页面

本节将通过示例介绍HTML5文档的基本结构、如何打开HTML5页面、查看HTML5页面源代码，涉及VS Code和浏览器在HTML5开发中的使用方法。

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文档。

1.3.2 打开HTML5页面

如果系统正确设置了HTML5文件的打开方式，双击1.3.1小节保存的“1.3.1.html”文件就可以在浏览器中打开这个HTML5文档。在Edge浏览器中打开这个HTML5页面的效果如图1.12所示。

图1.12 在Edge浏览器中打开HTML5页面的效果

1.3.3 查看HTML5页面源代码

在浏览器中打开页面后，单击鼠标右键，在弹出的快捷菜单中选择“查看页面源代码”可以直接打开源代码页面。图1.13展示了Edge浏览器中页面快捷菜单中的内容。

图1.13 Edge浏览器中页面的快捷菜单

浏览器通常会打开新的页面展示源代码，通常源代码页面的地址是在原网页的地址前加上“view-source:”。有的网站禁止使用快捷菜单（单击鼠标右键无法打开快捷菜单），这时就可以使用修改地址的方法打开源代码页面。

也可以选择快捷菜单中的“检查”选项打开开发者工具。开发者工具中实时显示当前页面的源代码。

注意

选择“查看页面源代码”选项看到的源代码是浏览器打开的原始文档的代码。选择“检查”选项看到的源代码是浏览器正在显示的内容对应的源代码。