网页如何呈现到用户面前？
在我们浏览各种网站的时候，浏览器呈现的都是图文并茂的页面，其中不少还有动态的动画效果。
那么一个网页是如何从服务器端传输到客户端并展现在你的电脑上的呢？大致有如下几步：
1. 用户输入一个 URL ，浏览器使用 DNS 协议查询这个 URL 地址对应的 IP
2. 浏览器向这个 IP 对应的服务器发送 HTTP 请求，
3. 服务器返回 URL 对应的资源，通常是一个 HTML 文档
4. 浏览器对这个文档进行解析，文档里面有数据也有其他的链接（ URL ），其中 CSS，Javascript 和图片的链接比较特殊，对于每一个这样的链接，浏览器都会发起一个单独的 HTTP 请求，获得对应的资源。
5. 所以现在浏览器有了一个 HTML 文档，很多的 CSS 和 Javascript 文档，浏览器通过使用资源对页面进行渲染，
最终一个网页就呈现到了用户面前
打开你的浏览器，进入控制台，点开网络一栏，随便进入一个网站，就可以很清楚的看到浏览器获取资源的情况。
从图中可以看到浏览器最开始获取了一个 HTML 文档，然后获取了很多 CSS 和图片资源等。
HTML，CSS， JS 是如何构成一个网页的？
这部分内容多而繁杂，这里不展开说明，仅对每一个部分的功能进行简单说明
HTML
它的全称是超文本标记语言，实际上它不是一门编程语言，而是一门标记语言，它使用标签来描述网页，准确的来说是描述一个网页的结构和内容。<html></html> 就是一对标签。以下面的 HTML 段为例，说明一下它的基本用法。
<html>
<h1 class='title-1' id='title'>Hello World</h1>
<p>Welcome</p>
<img src='http://img.hb.aicdn.com/62ddd968d3a4ca320fb0012ec906eb5d0d8b632c1cfb5-Od2H5K_fw658' alt='Watermelon'>
</html>- 标签总是由一对开闭标签组成，但是也有例外。
- 一对标签之间的就是标签的内容，它可以是单纯的字符串，也可以是其他的标签，例如上面的 html 标签里有 h1 标签和 p 标签。
- 标签可以有属性，例如上面的 h1 标签就有 class 属性和 id 属性，它们可以用来对标签元素进行更细粒度的控制。
- 每个标签有各自独有的意义，这是一种约定，比如 h1 代表最大的标题，p 代表单独的段落，而img 代表这里有一张图片。
上面的 HTML 在我的浏览器里显示就是这个样子的，很丑，但是却展示了 HTML 最基本的功能。当然这个文档很不规范，不过也足够简单。
回到最开始， 前面说 HTML 文档是描述一个网页的结构和内容的，内容很好理解，那么什么是结构呢？实际上，每一个标签就代表了在页面上显示的一个元素，比如你可以用 HTML 指明，这里有一张图片，然后有一段文字，然后还需要有一个表格。也就是描述一个网页有什么。而这些东西是如何布局的是后面要说的内容。
以上就是对 HTML 的最简单的介绍，除此之外进一步需要学习就是每一个标签的含义，每一个标签属性的含义，以及熟练的运用，这些就是熟能生巧了。
CSS
说完了 HTML， 那么 CSS 又是什么呢？
CSS 全称是层叠样式表，如果说 HTML 用来表示网页的结构，那么 CSS 就是用来描述网页的样式。什么叫样式？样式就是网页里有那么多元素，但是每一个元素需要如何呈现，比如这张图片是放在最开始还是最后面；放在左边，还是放在中间；这个表格是竖着放还是横着放等等。
实际上对于简单的样式，HTML 自身就在每个元素的属性中提供了一定的支持，比如 align 属性能够设置元素的对齐方式，href 属性能够给元素一个超链接。但是由于现在的网页加入了各种炫酷的特效，带来了大量的样式设置，而在 HTML 中为每一个元素添加属性既繁杂又难以维护，所以才需要将这两部分内容分离开，将元素样式的描述单独放到 CSS 里面，既易于维护又可以更好的复用，这其实和我们将程序抽象为函数和类是一个道理。
.title-1 {
color: red;
}
#title {
text-align: center;
}CSS 的主要知识点有两个：
1. 选择器，这个用来定位 HTML 文档中的元素，比如有类选择器，基于元素的 class 属性，用. 标明；id 选择器，基于元素的 id 属性，用# 标明。上面的例子里两个选择器用不同的方式选择了 h1 这个标签。可以看到两个样式都应用在了元素上，这就是所谓的层叠。当然还有很多更复杂选择器，可以保证对元素精确的选择。
2. 对元素属性的设置，这一部分就是实际的每一个元素的属性设置。
3*. 盒子模型，这个实际上不能算做单独的一点，但是这在 CSS 当中是十分重要的内容，就是描述每一个元素的大小和边框的界定。
CSS 简单说起来就这么多，但是和 HTML 一样，也有大量学习和熟练的成本。
Javascript
Javascript，实际上这是一门编程语言，有了它理论上我们可以在浏览器里做一切编程语言能做到的事。它通常为网页添加一些动态的效果，增强网页的交互性。js 的部分可以从三个方面来说，
1. 语法，js 是一门类 C 语言，语法和 C语言很像，所以学习成本会低一些。
2. DOM，这是 js 所独有的，每一个 js 解释器都会有这个对象，也就是网页对象，通过它我们可以对网页的内容进行任何我们所希望的改造。
3. Ajax，严格来说这不算是 js 的内容，但是对爬虫来说这很重要。Ajax 全称是异步JavaScript和XML。简单的来说就是通过不刷新网页的方式在后台像服务器请求数据，实际的数据格式是 XML。
说回到爬虫
那么这样的一些东西在爬虫里有什么用呢？
在爬虫里最重要的就是 HTML，大部分我们所需要捕获的信息就是 HTML 里，所以需要对 HTML 文档进行分析，提取感兴趣的信息。而 CSS 实际上用得比较少，如果你喜欢，在爬虫里可以用 CSS 的选择器对 HTML 的元素进行定位。而在现在有很多网页有很多动态效果，简单的例如下拉菜单啊，弹窗啊，或者使用 Ajax 加载网页，实在是数不胜数；这一部分比较难，我也不是特别熟悉，但是据我所知，一个常用场景就是对 Ajax 的请求进行分析；有些大型网站的登录会对密码进行加密，这时就需要对 js 进行分析才能正确获取登录数据；当然这一部分有一个简单省事的办法，只是速度上慢了很多，这个留到以后再说。