Python爬蟲基礎——HTML、CSS、JavaScript、JQuery網頁前端技術

時間  2020-04-29
標籤 python 爬蟲 基礎 html css javascript jquery 網頁 前端 技術 欄目 Python 简体版
原文   原文鏈接

1、HTML

HTML是Hyper Text Markup Language（超文本標記語言）的縮寫。 HTML不是一種編程語言，而是標記語言。javascript

HTML的語法

  • 雙標籤： <標籤名></標籤名>
  • 單標籤： <標籤名/>

HTML的元素和屬性

  • <標籤名 屬性名=屬性值>元素</標籤名>
  • <標籤名 屬性名=屬性值/>

HTML的結構

<!DOCTYPE html>————文件爲html文件 <html lang="en">————語言類型：英語 <head></head>————頭 <body></body>————主體 </html>css

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.表單

表單一：html

<!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>

表單二：java

<!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>

表單三：jquery

<!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>

2、CSS

CSS是Cascading Style Sheets（層疊樣式表）的縮寫。 CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。web

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:邊框類型，尺寸，顏色;

3、JavaScript

JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML網頁上使用，用來給HTML網頁增長動態功能。瀏覽器

JavaScript的引入方式

  • 內嵌式：
<script type="text/javascript">
	/*
		js代碼
	*/
	// alert(【對話框內容】);
	alert('你好，JavaScript');
</script>
  • 外部式：
<script type="text/javascript" src="myjs.js"></script>

4、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 在這裏插入圖片描述 在這裏插入圖片描述編程語言

<br>

爲我心愛的女孩~~

<br>

原文出處：https://www.cnblogs.com/WoLykos/p/12069947.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程