在浏览器上访问网址显示的页面是用 HTML 这种语言组织构建出来的，页面的布局还有样式需要使用 CSS 这种语言来设计，页面的交互还有一些行为可以使用 JavaScript 这种语言来描述。我们先理解一下 HTML 这种语言。

在项目目录的下面，新建一个文件，名字是 index.html，index 是文件的名字，.html 是文件的扩展名，HTML 文档的扩展名就是 .html。

一个标准的网页文档，需要在文档的一开始，先声明一下文档的类型，一组尖括号，里面输入 !DOCTYPE 空格，再加上 html，意思就是说明一下这是一个 HTML 类型的文档。

HTML 是一种标记语言，提供了很多不同的标记，或者叫标签，有时候也叫元素。当你看到 markup，tag 或者 element 这些词语的时候，一般指的就是 HTML 里的标签。

标签

标签经常成对出现，有开始标签，还有结束标签，也有单独出现的标签。比如一个网页文档，需要使用一组 html 标签，标签的写法首先是一组尖括号，里面是标签的名字还有属性等等。这里我们需要用的是 html 这个标签，结束标签也是一组尖括号，里面是标签的名字，另外在标签名字的前面要再加上一个斜线。这就是结束标签的写法。

属性

不同的标签支持使用不同的属性，你可以通过 mdn 网站的文档，查看某个 HTML 标签支持的属性。在这个 html 标签上，我们添加一个 lang 属性，它表示的是标记里面包装的内容所使用的语言，lang 就是 language。这个 lang 是属性的名字，在名字的后面加上一个等号，然后是给这个属性设置的值，一般需要把这个值放在一组双引号里面，把这个 lang 属性的值设置成 zh，表示标签里包装的内容用的是中文。

设置标签的属性，先要使用属性的名字，在等号后面是用双引号包装的给这个属性设置的值。

嵌套

标签可以嵌套使用，就是一组标签里面嵌套使用了另外一些标签。比如在这组 html 标签里面，可以使用一组 head 标签，它里面的东西是页面头部的一些东西，比如网页的标题，链接的样式表还有脚本等等。

跟这个 head 标签同一个级别，我们再用一组 body 标签，它里面的内容就是页面的主体内容，也就是我们通过浏览器能直接看到的东西。

关系

现在你看到的就是一个最基本的网页文档的结构。我们可以这样描述一下这个文档，一组 html 标签里面包装了一组 head 元素，还有 body 元素。这样这几个标签之间就形成了一些关系，我们可以说 html 标签是 head 还有 body 标签的父辈，也就是 parent。head 元素还有 body 元素是 html 元素的孩子，也就是 child。

head 元素与 body 元素之间是兄弟关系，英文是 sibling，因为他们相对于 html 这个元素来说，是同一级别的元素，一个挨一个，谁也不包装谁，是同等的关系。

html

在 HTML 文档里，这个 html 元素是文档的根，也就是它是最顶级的元素，网页上的其它的东西都是它的后代。在它里面的标准写法就是一组 head 元素，里面是文档的头部，一组 body 元素，里面包装的是页面的主体内容。

标题

在这组 body 元素里，添加一组 h1 元素，里面的内容是宁皓网。h 指的是 heading，也就是标题，h1 指的是第一级别的标题，在 HTML 里面，可以使用六个级别的标题，从 h1 到 h6 。

div

在 body 元素里，我们再用一组 div 元素，它里面的内容是一行文字，欢迎来宁皓网学习 Web 开发。

这个 div 元素是一种通用的容器，在网页里布局内容的时候经常会用到，默认它不会给它包装的内容添加额外的样式，后期我们可以通过 css 控制它的显示。

容器的英文是 container，容器就是装东西用的东西，在现实生活里，杯子，碗儿，盆儿这些都是容器。在 HTML 语境下，容器指的就是包装了其它元素的元素。

预览

现在我们就写好了一个最基本的 HTML 文档，这个网页文档可以通过浏览器查看，找到这个文档，双击打开它，一般会使用系统默认的浏览器打开这个文档，如果没有使用浏览器打开它，你可以直接把这个文档拖放到浏览器上。

现在页面上会显示一个大标题，还有一行文字。标题内容是用 h1 元素包装的，这行文字是在一组 div 元素里。