文档

一个 HTML 文档，就是一个页面，一个网页。如果是静态的页面，就是文档的内容并不是后端服务生成的，而是一个纯 HTML 文件，一般文件的扩展名会使用 .html。不过你会发现访问很多网站的页面，结尾并没有 .html 这个后缀，也就是这个后缀并不是必须的。只要告诉浏览器，这是一个 HTML 类型的文档，浏览器就知道怎么显示它了。

无论是静态的 HTML 文件，还是后端服务生成的 HTML 文档，都有一个特定的文档结构。我们先认识一下这个结构，把下面代码放到项目下面的一个空白的 HTML 文档里：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

文档

几乎所有的 HTML 页面都是类似上面的结构。文档的最开始是一个文档的声明，说明一下这是一个 html 类型的文档：

<!DOCTYPE html>

然后是一组 html 标签，它里面包装的是页面上的所有的内容。

<html lang="zh">

</html>

注意这个 html 标签上用了一个 lang 属性，它表示语言，它的值是 zh，这个符号表示的是中文，它包含了简体中文与繁体中文。

一个文档可以分成 head（头部） 部分与 body（主体） 部分。head 部分里的内容不会在页面上显示出来，它里面包含的是页面的一些元数据，就是描述这个页面的数据，还有一些链接使用的资源，比如页面用的样式表，使用的图标等等。

下面是两个在 head 部分常用的东西：

    <meta charset="UTF-8">
    <title>Document</title>

第一个 meta 标签设置了页面的字符集，UTF-8 是一种字符集格式，页面如果包含中文，一般会用到这种字符集。title 设置的是页面的大标题，一组 title 标签，里面包装的东西就是大标题的具体内容，这个大标题会在浏览器的标签上显示。在搜索引擎中出现的搜索结果上的标题，一般就是这个 title 标签设置的内容，所以对于搜索引擎优化来说，title 标签里的内容非常重要。

body

页面上显示的具体内容，都会放到 body 标签里面。

<body>
    <!-- 这里是页面的主体内容 -->
</body>

注释

注释内容不会在页面上显示，浏览器会认为在 <!-- 与--> 之间的东西是注释内容：

<!-- 注释内容 -->

练习

编辑 index.html 文档的 head 里面的 title 标签里的内容，把 Document 换成 ninghao：

<title>ninghao</title>

保存文档，然后在浏览器上预览结果，观察浏览器标签上显示的文字的变化。

results matching ""

    No results matching ""