文章目录
- 1. 前言
- 万维网
- 万维网的关键技术
- 2. 网页基本框架
- HTML
- CSS：
- JavaScript
在介绍审查元素之前我们先简单介绍一下网页的基本框架
1. 前言
万维网
万维网（英语：World Wide Web），亦作“WWW”、“Web”，是一个由许多互相链接的超文本组成的系统，通过互联网访问。英国科学家蒂姆·伯纳斯-李于1989年发明了万维网。1990年他在瑞士CERN的工作期间编写了第一个网页浏览器。网页浏览器于1991年在CERN向外界发表，1991年1月开始发展到其他研究机构，1991年8月在互联网上向公众开放。
万维网是信息时代发展的核心，也是数十亿人在互联网上进行交互的主要工具。网页主要是文本文件格式化和超文本标记语言（HTML）。除了格式化文字之外，网页还可能包含图片、视频、声音和软件组件，这些组件会在用户的网页浏览器中呈现为多媒体内容的连贯页面。
万维网的关键技术
- 一个全球网络资源唯一认证的系统，统一资源标志符（URI）；
- 超文本标记语言（HTML）；
- 超文本传输协议（HTTP）。
现在大多数的网页都是有HTML + CSS + JavaScript 组成的，打个比方：html就像一个人的身体，css就像一个人身上的衣服，JavaScript就像一个人的表情，神态动作等等，他们的组合经常被用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。
2. 网页基本框架
HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
HTML元素是构建网站的基石。HTML允许嵌入图像与对象，并且可以用于创建交互式表单，它被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素（如），浏览器使用HTML标签和脚本来诠释网页内容，但不会将它们显示在页面上。
上面的是官方的说法，不过html就是一种标签语言。
HTML标记包含标签（及其属性）、基于字符的数据类型、字符引用和实体引用等几个关键部分。HTML标签是最常见的，通常成对出现，比如
<h1>与</h1>。这些成对出现的标签中，第一个标签是开始标签，第二个标签是结束标签。两个标签之间为元素的内容，有些标签没有内容，为空元素，如<img>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is a demo</title>
</head>
<body>
<h1>这是一个模版</h1>
</body>
</html>上面的代码就可以构成一个简单的网页，观察一下，那个由尖括号构成的就是我们所说的标签。在学习爬虫的时候我们只需要知道什么是标签就行了。
CSS：
层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。本文主要介绍用于装饰HTML网页的CSS技术。其中HTML负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页。
基本规则：
CSS由多组“规则”组成。每个规则由“选择器”（selector）、“属性”（property）和“值”（value）组成：
- 选择器（Selector）：多个选择器可以半角逗号（,）隔开。
- 属性（property）：CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。
- 值（value）：指属性接受的设置值，多个关键字时大都以空格隔开。
属性和值之间用半角冒号（:）隔开，属性和值合称为“特性”。多个特性间用“;”隔开，最后用“{ }”括起来。
我们再接着上面的例子给大家在简单介绍一下CSS：
.color {
color: red;
}我们把上面的css代码加入到我们已经写好的html代码中，就变成了下面这样
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is a demo</title>
</head>
<style>
.color {
color: red;
}
</style>
<body>
<h1 class="color">这是一个模版</h1>
</body>
</html>如果你把上面的代码保存到一个后缀为.html文档中，在用浏览器打开，发现页面显示了一个红色的 这是一个模版，而在第一个显示的是黑色的。
其实基础的爬虫所用的介绍到这就差不多，为了让大家在脑海中有一个网页基本的框架，在介绍一下JavaScript
JavaScript
JavaScript，通常缩写为JS，是一种高级的，解释执行的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。
JavaScript的基本特点如下：
- 是一种解释性脚本语言（代码不进行预编译）。
- 主要用来向HTML页面添加交互行为。
- 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
JavaScript常用来完成以下任务：
- 嵌入动态文本于HTML页面
- 对浏览器事件作出响应
- 读写HTML元素
- 在数据被提交到服务器之前验证数据
- 检测访客的浏览器信息
- 控制cookies，包括创建和修改等
下面再在上面的例子作出改动：
function From() {
var x = document.forms["myname"]["Var"].value;
if(x == null || x == '') {
alert("此项为必填项");
return;
}
}把上面的代码加入html中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is a demo</title>
</head>
<style>
.color {
color: red;
}
</style>
<script type="text/javascript">
function From() {
var x = document.forms["myname"]["Var"].value;
if(x == null || x == '') {
alert("此项为必填项");
return;
}
}
</script>
<body>
<h1 class="color">这是一个表单</h1>
<form name="myname" onsubmit="return From()>
输入：<input type="text" name="Var">
<input type="submit" value="submit">
</form>
</body>
</html>上面的代码实现了一个检验表单的输入是否为空，如果为空，则浏览器弹出一个警告框并且函数返回一个false，否则代码输入的数据没有问题。
网页的基本框架就差不多，如果有喜欢HTML，CSS 或 JavaScript的，想要往更深的学习，给你们推荐两个学习网站 菜鸟教程 或者 W3Cschool
其实基础爬虫有上面的就足够了，接下来我们就要介绍审查的部分了。
