（1）HTML 基础

本知识学习用时：2小时，总第12/10000小时

前言：学习前端我们有个比喻：先打地基建房子——HTML；然后房子建好后进行硬装修——CSS；接着把门、窗户、自来水龙头、电灯开关、电灯等安装好——JavaScript；可是还没有电，没有水怎么办？——造发电机、兴修水力发电站（PHP 等）；可是依旧没水没电——修水库，引入水源，进行水力发电（MySQL 等）。

那接下来的系列文章，就开始我们的打地基建房子，然后做个硬装修。

一、认识HTML

在《老生常谈的从URL输入到页面展现背后发生的事》一文中，我们认识到了网络工作的整个流程，也知道了我们前端开发的主力点是在“MVC（model view controller）”中的“视图（view）”这一环。大致回顾下这篇文章：

从 URL 输入到页面展现经过以下过程：

1、在浏览器输入 URL；

2、浏览器查找域名对应的 IP 地址；

3、浏览器根据 IP 地址与服务器建立联系；

4、浏览器与服务器通信：浏览器请求，服务器处理请求并呈现页面。

然后我们进行倒推：

第一，服务器处理请求并呈现页面：web 服务器是一个全天24小时都在岗的先进劳模，他随时在准备处理来自 web 浏览器发来的请求。一旦有请求，web 服务器就会以适当的处理方式把装在他身体里的 HTML 文件（HyperText Markup Language 超文本标记语言）（每个服务器会存储 HTML 文件、图像、声音和其他类型的文件）反馈给 web 浏览器；

第二，web 浏览器得到反馈后怎么去显示这个页面：HTML 是浏览器显示页面的关键，它会告诉浏览器页面的结构和所有内容。web 浏览器在读取服务器反馈的 HTML 文件时，他会翻译文本中的所有标记（告诉浏览器：标题放哪里，段落放哪里，哪些文本需要强调等等）

二、动手写一个 HTML

任务：把本篇文章的以下页面，用 HTML 写出来，并完全熟悉每个元素。

第一步，打开记事本/文本编辑器（具体相关配置请私聊）——初学的前半个月强烈建议用最简单的文本编辑工具把代码一个个敲出来。

第二步，分析结构。

第三步，给这些文字加标记：

-- 注释1:每个页面都要从 doctype 开始，它为浏览器指定这个页面的文档类型，以便浏览器更正确的显示 HTML。只要按照这样的格式和位置写，那么浏览器就会认为你在使用标准HTML。

这样写的好处是：不用再像 HTML5 出来之前那样，既要写上 HTML 版本号、又要写上这个 HTML 文档所依据的标准是在什么位置。一劳永逸，之后不管 HTML 再怎么更新，我们的文档都可以被浏览器以最正确的方式显示出来；

-- 注释2:必须以 标记开始我们的页面，以 标记结束，注意看，结束标记多了一个“/”。这整个包含开始标记+内容+结束标记的一个整体就称作一个“元素”。

对于 元素，页面中的所有内容都嵌套在这个元素中。

所谓“嵌套”：是指一个元素可以放在另一个元素的里边（如同建房：整个房子是一个整体，入户门进去后，会有厨房、卫生间、客厅、卧室等个体，而主卧室里边可能还有一个衣帽间、一个厕所等）；

-- 注释3、注释7:只有 和 元素能直接放在 元素里。

里主要放一些与当前页面内容无关、但承载一些对页面描述的标记——可以设置它的 meta、title，可以放 CSS，这些部分不会被用户看到；

里边放的是和页面内容相关的元素——即你想被用户看到的内容。

-- 注释4:“meta" 指的是我们要告诉浏览器关于我们页面的一些信息；

“charset" 是 标记的属性，我们的开始标记都是可以有属性的。这里，我们要在charset 属性中指定字符编码；

“utf-8"是 unicode 系列中的其中一个编码，这个编码是互联网上使用最广泛的一种 unicode 的实现方式。它是为传输而设计的编码，并使编码无国界，这样就可以显示世界上所有文化的字符了——不管字母、数字还是中文、阿拉伯文等等。

· 详细原因：

- 当我们保存一个写好的 HTML 文件，编码方式会保存为 UTF-8；

- 一个文件就是一堆的数据，即我们写的内容变成了一堆的数据。那这个数据到底是变成了123，还是456呢？

- 这里我们就用到了“编码”，用的编码方式不一样，那么数据呈现的状态就不一样；

- 然后，当我们把这个以适当编码方式保存好的数据再次展示在浏览器页面上时（或用其他编辑器打开时），那这个数据还要再恢复出来；

- 那这时候，浏览器（或编辑器）需要使用相同的、与文件相对应的编码方式去解码（但浏览器不是万能的，你不告诉他，他就不知道用什么方式去解码,他会随意选择）；

- 这时，当编码是一种方式，而解码又是另一种方式时，页面就会出现“乱码”；

- 而解决乱码的方式就是：只需要知道我在编辑器保存这个 HTML 文件时，保存的什么编码格式，然后在头部 中告诉浏览器用什么方式来解码。

-- 注释5: 元素里必须在正确的位置包含一个 元素；

以上圈住的的都是我们“title"这个元素呈现出来的

-- 注释6：首部 元素结束标记；

-- 注释8:这里是一个 元素，img=image 图像。我们知道，HTML页面是一个纯文本，图像是绝对无法作为页面的一部分直接显示出来的，都是通过外部引入（链接）的方式来展现。

我们浏览器在看到这个元素时，会做的处理不是像看到 或

元素那样直接在页面上显示相关内容，而是需要先到 web 服务器去获取这个图像，然后再显示出来。

· web 常用的图像格式有 JPEG、PNG 和 GIF;

· JPEG：最适合保存照片和其他复杂图像；

· PNG 或 GIF：最适合保存 logo 和其他包含单色、线条或文本的简单图形；

-- 注释8中： 有两个必要的属性：“src" 和 “alt"。

· src: 它是 source 的缩写，意指这个图像来源自哪里（这后边可以放所在文件的路径也可以是一个所在的 URL);

· alt：这个属性主要是为了规避例如：因网速差、硬件设备限制等外部因素，我们的浏览器不能很好的显示出图像，那 alt 后边的文本将会取代图像告诉用户这里会是什么东西（参考后边的页面展现）。

-- 注释9:这个是用来写我们的注释的，便于我们阅读、修改等。这部分所有内容都不会被浏览器显示出来。

-- 注释10:这里用一个 开始标记，来说明这句话是一个一级标题。我们的标题可以往下分到 ，一般工作实际中，一般到 。

-- 注释11: "p" 是 "paragraph" 段落的意思。所以这里

开启一个段落。

-- 注释12：

元素，是我们 HTML 中，专门用来换行的元素。"br"="break" 间断，换行的意思。

注意，如果一个元素没有任何实际内容，只有开始标记和结束标记。那么这个元素可以直接简写成一个开始标记。这样的元素我们叫他 “void元素”——空元素。如：

元素、 元素等。

-- 注释13:时刻不要忘记一个完整的元素包含哪些标记：元素=开始标记+内容+结束标记。

-- 注释14:整个身体元素结束，以及下边的整个 元素的结束。这都是不可或缺的标记。

第四步，在你喜欢的位置新建一个文件夹来存储我们练习中所有相关文件、图像等。

第五步，把上边我们写的文档存储为 .html 格式文件，并记得编码方式为 utf-8 。把这个文件保存在第四步建立的文件夹里。

第六步，用浏览器打开这个 HTML 文稿。对照第三步的注释再次学习，看看每个标记都在页面中对应的那个东西。

页面展现

后记：这篇的学习，我们大致了解了 HTML 的基本结构，也写出了第一个可以在浏览器上展示的页面。那下一篇，我们就细讲 HTML 其他重要的元素（列表、超链接、表格、音视频等）以及对应的属性。

欢迎继续关注下文 ：

（2）HTML 元素、属性详解

（本文版权归 “公号 | Oli的前端一万小时” 所有，转载需说明来源）