Python爬虫基础——HTMLCSSJavaScriptJQuery网页前端技术

Posted WoLykos

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Python爬虫基础——HTMLCSSJavaScriptJQuery网页前端技术相关的知识,希望对你有一定的参考价值。

一、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.常见的转义符
空格:&nbsp;
大于号:&gt;
小于号:&lt;
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 技术图片 技术图片

以上是关于Python爬虫基础——HTMLCSSJavaScriptJQuery网页前端技术的主要内容,如果未能解决你的问题,请参考以下文章

从python基础到爬虫的书有啥值得推荐

小白学 Python 爬虫(30):代理基础

小白学 Python 爬虫(12):urllib 基础使用

小白学 Python 爬虫(15):urllib 基础使用

如何入门爬虫(基础篇)

如何入门爬虫(基础篇)