如果把整个绚丽的网页看成一个人的话, 那么 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>.
<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
超文本标记语言, 标准通用标记语言 https://baike.baidu.com/item/标准通用标记语言 下的一个应用.
"超文本 https://baike.baidu.com/item/超文本" 就是指页面内可以包含图片, 链接 https://baike.baidu.com/item/链接 , 甚至音乐, 程序 https://baike.baidu.com/item/程序/71525 等非文字元素.
超文本标记语言的结构包括 "头" 部分(英语: Head), 和 "主体" 部分(英语: Body), 其中 "头" 部提供关于网页的信息,"主体" 部分提供网页的具体 https://baike.baidu.com/item/具体/4577821 内容.
我们看到的整个源代码就是一个 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) 是一种用来表现 https://baike.baidu.com/item/HTML (标准通用标记语言 https://baike.baidu.com/item/标准通用标记语言 的一个应用)或 https://baike.baidu.com/item/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 引擎, 为浏览器的一部分, 广泛用于客户端的脚本语言, 最早是在 https://baike.baidu.com/item/HTML (标准通用标记语言下的一个应用)网页上使用, 用来给 HTML 网页增加动态功能.
首先要声明的一点: javascript 和 java 除了都是编程语言之外, 没有任何关系, 没有任何关系, 没有任何关系~!
JS 是可以在浏览器里面运行的编程语言. 它的特点:
JS 可以在浏览器端进行运算
比如在你输入密码的时候, 当你密码不合格, 比如少于 6 位的时候, 网页会出现密码过短的提示. 这就是 JS 获取到了你输入的密码, 然后计算出位数过少, 然后控制提示出现.
题外话: 最近出现的 JS 挖矿程序也是属于这个范围. 当你打开某个网页之后, 发现突然电脑变卡了, 那就打开资源管理器, 看看是不是浏览器占用了你大量的 CPU 资源, 如果是, 那就可能遇到了让你为别人挖矿的网页了.
JS 可以发起请求并更新网页 (敲黑板! 划重点!)
JS 可以在不刷新网页的前提下, 向后台发起请求, 然后单独更新 (增删改) 某一段网页. 我们称之为 AJAX. 我们常见的点击加载更多, 页面划到页面底端自动加载更多, 点击删除某个节点, 点击刷新, 都属于 AJAX 操作. 这是爬虫常见的障碍之一.
前面的章节:
爬虫知识入门 - 爬虫简介
爬虫知识入门 - 必备知识基础 (一) 反爬虫简介
爬虫知识入门 - 必备知识基础(二)HTTP 请求简介
下一章:
待更新
来源: http://www.jianshu.com/p/8cdd2eec2e5f