文章目录
- 前言
- 一、HTML页面布局
- 二、web前端基础
- 1.HTML常用标签
- 2.JavaScript
- 3.JSON
- 4.Ajax
- 总结
前言
首先,要弄懂爬虫,就一定要了解一些基础的前端知识,本文主要讲解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标签 | 中文解释 |
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