如果把整个绚丽的网页看成一个人的话，那么html就是这个人的骨肉，css则是好看的外表，JS则能让这个人成长，移动。
所以这节让我们一起探索这个“人”组成的奇妙之处。
我在网上找了个html网页作为示范(这是个保留彩蛋)
网页示例
看起来短短4行字符，但是它的源代码却远超过显示出来的字符：
<html>
<head>
<title>The Dormouse's story</title></head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://www.xxx.com/xx.css">
<script src="http://www.xxx.com/xxx.js"></script>
</head>
<body>
<p class="title"><b>The Dormouse's story</b></p>
<p class="story">Once upon a time there were three little sisters; and their names were
<a href="http://example.com/elsie" class="sister" id="link1">Elsie</a>,
<a href="http://example.com/lacie" class="sister" id="link2">Lacie</a> and
<a href="http://example.com/tillie" class="sister" id="link3">Tillie</a>
;and they lived at the bottom of a well.
</p>
<p class="story">...</p>
</body>
</html>
源代码由最外层的<html>标签包裹，<html>内部是<head>、<body>。
head标签：里面一般会存放这个网页的一些设置、CSS 和 JS 文件，设置比如字符集<meta charset="UTF-8">是告诉浏览器，网页的编码按照UTF-8来解析，以免出现乱码。
body就是我们看到的内容了，一般在body的结尾或者</body>后面有一些js文件的引入或者代码。
CSS文件引入代码:
<link rel="stylesheet" href="http://www.xxx.com/xx.css">
JS文件引入代码:
<script src="http://www.xxx.com/xxx.js"></script>
简介完成，下面详细介绍：
1. HTML
超文本标记语言，标准通用标记语言下的一个应用。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
我们看到的整个源代码就是一个HTML文件，这个文件是我们发起请求，然后服务器返回给我们的响应的一部分。
浏览器收到响应后，开始解析html文件，采用从上到下的流程，逐步渲染页面。把内容显示出来。所以加载网页是有一个过程的，并不是迅速就能出现的。
html标签由很多个节点(Tag、Node)组成。比如 head 、 body 、 p 、 a 。这些节点之间的关系有父子关系、兄弟关系。
父子关系：子节点被包括在父节点中。比如body内的所有标签，都是body的子节点。
兄弟关系：两个节点位于同一层级，比如我们的所有的p标签。他们的直接父节点都是body。
其中每个节点都可以有自己的一些属性，比如：class、href，src，id。这些属性决定了他们的特点：
class：通常情况下，我们用class为节点加上样式。
href：这是一个锚点，如果href的值是一个互联网地址，那么它就会呈现一个链接的样式。
src：一般我们在 img 和 script 标签中使用，用来引用图片或者js文件，它的值就是文件的地址。
id：id 通常在一个网页是唯一的，为了便于给它加上一个特别的样式或者便于js找到它。
2. CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
css长这样：
.pull-right {
float: right;
}
.pull-left {
float: left;
}
.pull-right就是设置 class 为 pull-right 的节点的样式。float: right则是设置样式为向右浮动。CSS的作用是巨大的，我们看到的颜色、点击效果、背景颜色等等，都是由CSS设置的。
但是呢，在写爬虫的时候，我们基本上不必管css。因为css里面只有外观样式，并没有对我们有利的信息。
3. JS
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
首先要声明的一点：javascript 和 java 除了都是编程语言之外，没有任何关系，没有任何关系，没有任何关系~！
JS是可以在浏览器里面运行的编程语言。它的特点：
① JS可以在浏览器端进行运算
比如在你输入密码的时候，当你密码不合格，比如少于6位的时候，网页会出现密码过短的提示。这就是JS获取到了你输入的密码，然后计算出位数过少，然后控制提示出现。
题外话：最近出现的JS挖矿程序也是属于这个范围。当你打开某个网页之后，发现突然电脑变卡了，那就打开资源管理器，看看是不是浏览器占用了你大量的CPU资源，如果是，那就可能遇到了让你为别人挖矿的网页了。
② JS可以发起请求并更新网页 (敲黑板！划重点！)
JS可以在不刷新网页的前提下，向后台发起请求，然后单独更新(增删改)某一段网页。我们称之为 AJAX。我们常见的点击加载更多、页面划到页面底端自动加载更多、点击删除某个节点、点击刷新，都属于AJAX操作。这是爬虫常见的障碍之一。
传送门：
下一章:
爬虫入门教程⑤— 安装Python
所有的章节:
网友评论