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="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>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="post" enctype="multipart/form-data"> </form> </body> </html>

表单二：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10.表单2</title> </head> <body>  <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>  <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

为我心爱的女孩~~

正文