Python---网页元素

文章目录

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

其实基础爬虫有上面的就足够了，接下来我们就要介绍审查的部分了。