HTML URL編碼

RL也被稱為網(wǎng)址。

URL 可以由單詞組成,比如 "w3school.com.cn"，或者是因特網(wǎng)協(xié)議(IP)地址：192.168.1.253。

大多數(shù)人在網(wǎng)上沖浪時(shí),會(huì)鍵入網(wǎng)址的域名,因?yàn)槊Q比數(shù)字容易記憶。

URL(Uniform Resource Locator)

當(dāng)您點(diǎn)擊 HTML 頁(yè)面中的某個(gè)鏈接時(shí),對(duì)應(yīng)的<a>標(biāo)簽指向萬(wàn)維網(wǎng)上的一個(gè)地址。

統(tǒng)一資源定位器(URL)用于定位萬(wàn)維網(wǎng)上的文檔(或其他數(shù)據(jù))。

網(wǎng)址,比如 http://www.w3school.com.cn/html/index.asp,遵守以下的語(yǔ)法規(guī)則：

scheme://host.domain:port/path/filename

解釋：

scheme 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http

host 定義域主機(jī)(http 的默認(rèn)主機(jī)是 www)

domain 定義因特網(wǎng)域名，比如 w3school.com.cn

:port 定義主機(jī)上的端口號(hào)(http 的默認(rèn)端口號(hào)是 80)

path 定義服務(wù)器上的路徑(如果省略，則文檔必須位于網(wǎng)站的根目錄中)。

filename 定義文檔/資源的名稱

編者注：URL 的英文全稱是 Uniform Resource Locator，中文也譯為"統(tǒng)一資源定位符"。

URL Schemes

以下是其中一些最流行的 scheme：

Scheme 訪問(wèn) 用于...

http 超文本傳輸協(xié)議以 http:// 開頭的普通網(wǎng)頁(yè)。不加密。

https 安全超文本傳輸協(xié)議安全網(wǎng)頁(yè)。加密所有信息交換。

ftp 文件傳輸協(xié)議用于將文件下載或上傳至網(wǎng)站。

file 您計(jì)算機(jī)上的文件。

URL編碼

URL只能使用ASCII字符集來(lái)通過(guò)因特網(wǎng)進(jìn)行發(fā)送。

由于URL常常會(huì)包含ASCII集合之外的字符,URL 必須轉(zhuǎn)換為有效的ASCII格式。

URL編碼使用"%"其后跟隨兩位的十六進(jìn)制數(shù)來(lái)替換非ASCII字符。

URL不能包含空格。URL編碼通常使用+來(lái)替換空格。

URL編碼表參考

http://www.w3school.com.cn/tags/html_ref_urlencode.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁(yè)面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內(nèi)邊框
        }
        /*給'注冊(cè)'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?
        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動(dòng)
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對(duì)定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請(qǐng)注冊(cè)</h1>
<p style="color: darkgray">已有帳號(hào)?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請(qǐng)輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機(jī)號(hào)</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請(qǐng)輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗(yàn)證碼</label>
    <input type="password" placeholder="請(qǐng)輸入驗(yàn)證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊(cè)" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

上一篇推文Gooseeker抓取豆瓣電影排行榜-劇情片中，我向大家分享了如何爬取“豆瓣排行榜-劇情片”這個(gè)類別中評(píng)分在前10%的電影。

這篇推文將是對(duì)上篇文章的進(jìn)一步深入，主要介紹如何將其他分類中排在前10%的電影一起抓取下來(lái)。

其實(shí)，這個(gè)操作非常簡(jiǎn)單，只需要在上篇推文創(chuàng)建的規(guī)則上添加一個(gè)條件就可以了。即在“DS打數(shù)機(jī)”中，右鍵點(diǎn)擊“主題—管理線索—添加”，按提示，將URL網(wǎng)址依次添加進(jìn)來(lái)即可。

但，最大的問(wèn)題在于，如何獲取URL？在這里，如果分類網(wǎng)址只有29個(gè)，暫且還可以用手動(dòng)復(fù)制粘貼的方法獲取；但如果今天我們希望獲取的網(wǎng)址信息有成百上千個(gè)，手動(dòng)獲取得花費(fèi)多少時(shí)間啊~

接下來(lái)我就教大家一個(gè)簡(jiǎn)單的方法，用這個(gè)辦法，我們可以更快更準(zhǔn)確的獲取到網(wǎng)址信息。

我在之前的文章中已經(jīng)說(shuō)到，URL網(wǎng)址的組成都有它的規(guī)律，所有的網(wǎng)頁(yè)信息都有它們的HTML源代碼。

只要稍作觀察，就不難發(fā)現(xiàn)，豆瓣分類排行榜的網(wǎng)址的變動(dòng)主要集中在下圖標(biāo)注的name和type上面：

現(xiàn)在，在豆瓣電影排行榜這個(gè)網(wǎng)頁(yè)中，點(diǎn)擊F12，調(diào)出網(wǎng)頁(yè)源代碼，點(diǎn)擊下圖紅色橢圓框選的按鈕，快速的定位到分類網(wǎng)址所在的位置。

如圖可知，每個(gè)span屬性下存放著一個(gè)href屬性，里面包含了我們先要的分類名稱name和類型代碼type：

現(xiàn)在選中所有分類屬性所在的上一級(jí)屬性<div class=“types”>，右鍵選擇“copy—copyelement”：

接下來(lái)，打開Excel，將內(nèi)容Ctrl+V粘貼進(jìn)來(lái)。

在這里，我主要通過(guò)Ctrl+H“替換”的方式，將重復(fù)且多余的內(nèi)容一一替除，然后手動(dòng)刪除了小部分信息冗雜部分；最后用“數(shù)據(jù)—分列”的方法將依然不能刪除的多余信息分列出去，并刪除。經(jīng)過(guò)刪減，最后得到了如下圖所示的B列；

最后，用公式“=$A&B1&$C”將URL網(wǎng)址的前后重復(fù)部分與B列合并，得到了所有分類的URL網(wǎng)址：

選擇D列，按Ctrl+C，再按“選擇性粘貼”Ctrl+Alt+V，選擇“數(shù)值”Alt+V，確定。

最后，將D列網(wǎng)址復(fù)制，粘貼到推文最初提到的添加線索欄中：

添加完成后，按確定，右鍵點(diǎn)擊主題“電影爬”，查看“統(tǒng)計(jì)線索”，如下圖所示，線索有29條，也就是有29個(gè)URL網(wǎng)址處于待抓取狀態(tài)。

最后，點(diǎn)擊“單搜”，將線索改為“29”，確認(rèn)，抓取完成即可。

該案例中需要處理的URL網(wǎng)址只有29條，可能你并不能感受到這種方法有多么便利，其他類型的URL網(wǎng)址也不可能都像豆瓣網(wǎng)址這樣組合。

所以，這篇推文主要提供的是這種發(fā)現(xiàn)和處理URL的思路，通過(guò)這種思路，大家可以更加得心應(yīng)手的解決URL網(wǎng)址的抓取問(wèn)題。

如果大家想要了解更多，可以點(diǎn)擊閱讀原文，學(xué)習(xí)松鼠的爬蟲視頻課程哦。~

注：如直接點(diǎn)擊閱讀原文購(gòu)買后，購(gòu)買賬號(hào)即為你的微信號(hào)。

在線咨詢

上一篇：html固定定位position值fixed
下一篇：CSS設(shè)置寬高的小技巧

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML URL編碼

您的項(xiàng)目需求