艺兔的编程博客

Appearance

HTML文档结构 ​

这节课开始我们就要开始学习编码了，那么我们首先要学习的就是 HTML 文档的基础结构。 我们先看下当我们学习完本章课程后，我们会做出怎样的一张页面。我们将会制作一张简单的博客页面，在这个博客页面中，我们会学到网页的标题、文章的标题、链接、粗体文本、斜体文本、图片、有序列表、无序列表等。 同时我们也会使用html5新增的一些语义化标签，当然现在你并不需要知道语义化标签是什么意思，我们在本章课程中都会讲解。

创建项目文件夹 ​

现在，我们就一起动手来编写这张博客页面吧！

首先，我们先来创建我们的项目文件夹。我们先回到电脑桌面，新建一个文件夹，将其命名为 第一章：HTML基础，但是我们在前面的课程说过，项目文件夹的命名尽量不要使用中文和特殊字符。 所以我们把文件夹名用短横线命名法来改一下，改成 html-basics。

然后我们打开之前下载的课程资料文件夹，将01-HTML基础 中的全部文件复制到html-basics中。还记得我们之前学习的快捷键吗？ 在01-HTML基础中文件夹内，我们按住 Command + A 全选所有的文件， 然后按下 Command + C 复制文件， 然后进入 html-basics 文件夹中，按下Command + V 把文件黏贴在这里。（Windows系统，使用 Control键 代替 Command 键`）

然后使用编辑器 VS Code 打开我们的项目文件夹。 在vscode 中新建一个index.html的文件。现在我们的项目文件夹中有一些图片文件，一个index.html文件，还有一个文本内容.txt 文件，这个文件里面是我们这张博客页面的文本内容，我们也把它打开。 然后我们点击资源管理器的图标关闭左边栏，这样我们拥有更多的编码空间。

在前面的课程中我们使用一个vs code的一个技巧，输入英文的!然后按下tab键来创建我们基础的HTML结构。 不过现在我们要正式学习HTML语言了，我们需要知道自己如何一步步的编写这些结构，所以让我们清空这些生成的内容，正式开始学习吧！

声明文档类型 <!DOCTYPE html> ​

在一个空白的html页面中，我们要做的第一件事就是声明文档类型，我们的html文件最终需要浏览器来解析渲染的，所以我们要告诉浏览器，我们的这个文档它是一个html文档。

假设由我们来发明HTML语言，那我们会怎么做的，那我们可能会这么写文档类型 html, 但是这样的话，浏览器会以为我们写的是文本内容。嗯，那我们也用小于号和大于号<>把它包裹起来。<文档类型 html>，这样看上去还不错。

但是事实上我们已经知道<>这对符号是留给html标签使用的。凡事被<>包裹的标签都会被浏览器解析渲染。 但是我们现在要做的是声明文档类型，并不是想让浏览器去渲染它。 经过一番讨论，我们最终决定借鉴SGML/XML语法规则, 在小于号<后面加一个英文的!, 将它变成这样<!文档类型 html>。

其实这样应该是可以了，不过html语言已经被蒂姆·伯纳斯-李这个老外率先发明出来了，然后这个老外还不懂中文，所以他是这么写的<!docment type html>, 然后他又觉得这么写太长了，那就简写成<!doctype html>。 因为浏览器是不去区分标签或者声明是大写的英文字母还是小写的英文字母，最后在约定下，我们就最终将声明写成这样<!DCOTYPE html>

最基础的HTML文档结构 ​

每张html文档都必须拥有一个<html></html> 这样的根标签，所有其它的元素都是被包裹在这对标签中的。这很容易想的到，因为浏览器要通过标签来解析html文档，那么我们肯定需要用一个最外层的大标签把文档的所有内容都包裹进来，而我们要编写的是html 文档， 那么这个最外层的大标签自然就会取名为<html></html>.

然后还有两个最基础的标签<head></head>和<body></body>.

html
<!DOCTYPE html>

<html>
  <head></head>
  <body></body>
</html>

为什么需要<head>和body来个标签，我们翻译成中文来看，head是头部的意思，body是身体的意思。

那头部和身体是什么意思呢？我们暂时不去想这两个词翻译过来的意思。我们想一下，是不是html文档中所有的内容都需要被浏览器渲染出来给大家看呢？ 那肯定不是，html文档 中的内容有一些是给人类看的，有一些内容是给浏览器看的，比如说我们要告诉浏览器这张页面我写的是中文，你显示的时候要用中文的编码来显示。或者你希望用户无论是在手机上还是在大屏电脑上都能正常的阅读你的网页，那么你要告诉浏览器帮我这个页面设置成响应式的。或者希望浏览器在导航栏头部去显示一句这个网页的标题等。 那像这样东西我们需要单独放在一个地方。这样的东西我们会放在<head>标签中， 与人类来对比，你可以理解为带了脑子的头部, 一些脑子里想的东西，别人是看不见的。

而<body>中的内容就是网页的主体，基本上这里的内容被渲染出来，都会显示在网页上，能被我们所看见。

<head>标签中具体有哪些标签我们以后详细说，现在我们先学一个<title></title>标签，<title>标签主要有以下几个作用：

  • 显示在浏览器的标签页上，帮助用户识别不同的网页
  • 在搜索引擎（如 Google、百度）显示在搜索结果中的标题中显示，写一个好的title可以利于搜索引擎优化，也能增加网页的点击率
  • 用户收藏网页的时候，<title>中的内容会默认作为书签名
  • 在浏览历史记录中显示为网页的标题

我们先补全<title>中的内容， 如： <title>构建网页的基础语言：HTML</title>， 然后，我们在<body>中也写一个<h1>标签, 并补全内容<h1>构建网页的基础语言：HTML</h1> . <h1> 是大标题的意思，具体的我们下节课来讲。

html
<!DOCTYPE html>

<html>
  <head>
  	<title>构建网页的基础语言：HTML</title>
  </head>
  <body>
  	<h1>构建网页的基础语言：HTML</h1>
  </body>
</html>

现在我们用谷歌浏览器打开我们写的这张页面，你可以尝试修改下<title>和<h1>中的内容，看看它们分别是在浏览器的那个地方显示的。

好了，这节课就到这里， 我相信你应该学会了最基础的html文档结构了， 下一节课我们来讲解一些用于处理文本的标签有哪些。