Python爬虫基础——HTML、CSS、JavaScript、JQuery网页前端技术
一、HTML
HTML是Hyper Text Markup Language（超文本标记语言）的缩写。HTML不是一种编程语言，而是标记语言。
HTML的语法
- 双标签：<标签名></标签名>
- 单标签：<标签名/>
HTML的元素和属性
- <标签名 属性名=属性值>元素</标签名>
- <标签名 属性名=属性值/>
HTML的结构
<!DOCTYPE html>————文件为html文件<html lang="en">————语言类型：英语<head></head>————头<body></body>————主体</html>
HTML的常用标签
1.浏览器标题
<head>
<title>浏览器标题</title>
</head>2.标题与段落
<head>
<title>标题与段落</title>
</head>
<body>
<h1>一级标题h1</h1>
<h2>二级标题h2</h2>
<h3>三级标题h3</h3>
<h4>四级标题h4</h4>
<h5>五级标题h5</h5>
<h6>六级标题h6</h6>
<p>段落标签p</p>
</body>3.水平线与换行符
<hr/> <br/>
4.常见的转义符
空格： 大于号：> 小于号:<
5.链接
<a href="//www.baidu.com">点击我，本窗口访问百度</a> <a href="//www.baidu.com" target="_blank">点击我，新窗口访问百度</a>
6.图片标签
<img src="1.png" alt="如果图片加载失败，显示的文字">
7.表格
<!--
table标签:
border 边框
width 宽度
tr 行
th 表头
th 普通列
-->
<table border="1px" width="300px">
<tr>
<th>表头th</th>
<th>表头th</th>
</tr>
<tr>
<td>普通列td</td>
<td>普通列td</td>
</tr>
</table>8.列表
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>9.常见的无意义标签
<!--
div 占用整行
span 不占用整行，长度取决于内部元素的长度
-->
<div>div标签</div>
<span>span标签</span>10.表单
表单一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.表单1</title>
</head>
<body>
<!--
form标签
action 提交地址
method 请求方式(get或post,默认get)
get 提交的数据参数在url中，不安全
post 提交的数据被加密，url中无法看到，在action中
enctype="multipart/form-data" 如果提交文件，需要添加这个参数
-->
<form action="#" method="post" enctype="multipart/form-data">
</form>
</body>
</html>表单二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.表单2</title>
</head>
<body>
<!--
input标签
1.文本框 type="text"
2.密码框 type="password"
3.单选框 type="radio"
4.复选框 type="checkbox"
5.文件框 type="file"
6.按钮 type="button"
7.提交 type="submit"
8.重置 type="reset"
-->
<form action="#" method="post" enctype="multipart/form-data">
1.用户名（文本框text）:
<input type="text" name="username">
<hr/>
2.密码（密码框password）：<input type="password" name="password" value="">
<hr/>
3.性别（单选框radio）：
男<input type="radio" name="gender" value="0">
女<input type="radio" name="gender" value="1">
<hr/>
4.爱好（复选框checkbox）：
学Web<input type="checkbox" name="hobby" value="web">
学爬虫<input type="checkbox" name="hobby" value="spider">
<hr/>
5.上传头像（文件框file）：
<input type="file" name="img">
<hr/>
6.按钮（button）:
<input type="button" value="空按钮">
<hr/>
7.提交（submit）:
<input type="submit" value="提交按钮">
<hr/>
8.重置（reset）:
<input type="reset" value="重置按钮">
<hr/>
</form>
</body>
</html>表单三：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.表单3</title>
</head>
<body>
<!--
下拉框：select和option
大文本：textarea
cols 列数
rows 行数
-->
<form action="#" method="post" enctype="multipart/form-data">
<select name="year">
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
<textarea name="comment" cols="30" rows="10"></textarea>
</form>
</body>
</html>二、CSS
CSS是Cascading Style Sheets（层叠样式表）的缩写。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS的语法
格式：属性：属性值；例如：设置背景颜色为蓝色：background-color:blue；
CSS的引入方式
- 内嵌式：
<div style="background-color: blue"></div>
- 内部式：
<style type="text/css"> /* css代码 */ </style>
- 外部式：
<link rel="stylesheet" type="text/css" href="css文件地址">
CSS的选择器
<style type="text/css">
/*
标签选择器：【标签名】 {};
ID选择器：#【ID值】{}；
类选择器：.【类名】{}；
*/
body{
/*background-color: grey;*/
background-image: url("1.png");
background-repeat: no-repeat;
}
#div_id1{
background-color: red;
font-size: 72px;
font-weight: lighter;
}
.div_class1{
background-color: green;
border:solid 1px yellow;
}
</style>CSS的常用样式
- 背景颜色：backgroud-color:颜色；
- 背景图片：background-image:url（图片地址）；
- 图片平铺：background-repeat：
- repeat 水平垂直都平铺（默认）
- repeat-x 水平平铺
- repeat-y 垂直平铺
- no-repeat 不平铺
- 边框：border:边框类型，尺寸，颜色;
三、JavaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
JavaScript的引入方式
- 内嵌式：
<script type="text/javascript"> /* js代码 */ // alert(【对话框内容】); alert(‘你好，JavaScript‘); </script>
- 外部式：
<script type="text/javascript" src="myjs.js"></script>
四、JQuery
JQuery的引入
从官方网站下载JQuery，然后引入：
<head> <script type="text/javascript" src="【本地JQuery地址】"></script> </head>
JQuery的选择器
JQuery的对象
- JQuery对象习惯性采用$开口，例如：
$div = $("div");- JQuery对象的格式是[Object]
jsObject = $jqueryObject[0]; jsObject = $jqueryObject.get(0);
- JQuery对象转JS对象
$jqueryObject = $(jsObject);
JQuery事件
<body>
<input type="button" value="按钮" id="button_id">
<script type="text/javascript">
//1.得到按钮对象
$buttonElement = $(‘#button_id‘);
//2.绑定点击事件
// $buttonElement.click(function(){
// alert(‘按钮被点击了‘)
// });
$buttonElement.click(function(){
alert(‘按钮被点击了‘);
});
</script>
</body>
JQuery动画
<body>
<input type="button" value="隐藏" id="button_hide">
<input type="button" value="显示" id="button_show">
<ul id="ul_id">
<li>Python</li>
<li>Java</li>
</ul>
<script type="text/javascript">
// 1.得到两个按钮对象
$button_hide = $(‘#button_hide‘);
$button_show = $(‘#button_show‘);
// 2.得到ul对象
$ul = $(‘#ul_id‘);
// 隐藏
$button_hide.click(function(){
$ul.hide("slow");
});
// 显示
$button_show.click(function(){
$ul.show("slow");
});
</script>
</body>
注意：speed:slow、normal、fast
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18