前言

首先，要弄懂爬虫，就一定要了解一些基础的前端知识，本文主要讲解HTML超文本标记语言的常用标签。为后面学习爬虫打基础。

一、HTML网页布局

超文本标记语言的结构包括“头” <head> 和“主体” <body> 这两个部分提供网页内容。

以下面代买为例子：

这样会形成一个有标题有段落的网页。

<!DOCTYPE html> <!--声明为 HTML5文档，（现在的网站大部分不用声明）-->
<html> <!--元素是 HTML 页面的根元素 -->
    <head> <!--头部分-->
        <meta charset="utf-8"> <!--字符集：utf-8，防止出现乱码-->
    </head>
    <body> <!--主体部分-->
        <h1>标题</h1> <!--标题-->
        <p>段落</p> <!--段落-->
    </body>
</html>

二、web前端基础

1.HTML常用标签

HTML常用标签
HTML标签	中文解释
img	图片
a	锚，定义超链接
strong	加重（文本加粗）
em	强调（文本加粗）
i	斜体字
b	粗体（文本加粗）
br	换行
div	分隔
span	范围
h1~h6	标题
p	段落
title	标题（网页的标题栏中）
tr	表格中的一行
th	表格中的表头
td	表格中的一个单元格
script	js代码

2.JavaScript

JavaScript能根据用户触发某些事件对用户的操作进行加工。以用户登录为例：

原理是先对用户提交的信息做加密处理，然后发送请求到服务器。要在爬虫中实现该功能，就要分析JavaScript的执行过程。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--JavaScript代码部分，通常出现在头部分-->
<script>
function validateForm(){
    var x = document.forms["myForm"] ["fname"].value;
    if (x == null||x == ""){
        alert("需要输入名字！");
        return false;
    }
    else{alert("输入成功!")}
}
</script>
<!--如果输入的内容为“null”，或者为空，则提示需要输入名字！否则显示输入成功！-->
</head>
<body>
<!--在表单按回车后触发onsubmit 这个事件，执行这个代码-->
<form name="myForm" action="" onsubmit="return validateForm()" method="post">
名字：<input type="text" name="fname">
</form>
</body>
</html>

备注：然而JavaScript代码通常隐藏在服务器中，所以爬虫不能爬到这部分代码。

3.JSON

JSON格式说明：

（1）对象表示为键值对。

（2）数据由逗号分隔。

（3）花括号保存对象。

（4）方括号保存数组。

JSON的书写格式：键/值对（字段）+冒号+值

例如："name" : "LiHua" 等价于JavaScript语句：name = "LiHua"

4.Ajax

Ajax在浏览器与web服务器之间使用异步传输数据，这样就可以使网页从服务器请求少量的信息，而不是整个页面。通常表现在局部刷新页面。

例如：百度翻译在线翻译页面百度翻译-200种语言互译、沟通全世界！

判断网页数据是否使用Ajax的方法：触发事件后，判断网页是否发视刷新状态。如果网页没有刷新，数据就自动生成，说明数据的加载是通过Ajax生成并渲染到网页上的。

总结

本文主要介绍了web的前端开发知识。

参考文献：Python网络爬虫技术与实战赵国生机械工业出版社 ISBN 978-7-111-67411-5

pyhton爬虫开发基础#1——前端基础

文章目录

前言