小白初學—神奇的HTML

今天我們一起來了解下HTML，

首先HTmL包含三層結構，分別是結構層，表現層，行為層。

結構層：html => 網頁上有什么，比如說文字啊、按鈕啊、圖片啊等等。

表現層：css => 顯示成什么樣子，比如說文字的大小啊，位置啊，顏色啊等等。

行為層：JavaScript => 具體怎么操作，比如說點擊按鈕讓圖片放大縮小等等。

===============================

在了解了html的三層結構之后，我們來學習如何寫html。html不是編程語言，它是一套標簽。最簡單的html文本是下圖1這個樣子。我們可以在電腦桌面上新建一個記事本文件，然后把后綴名改一下（.txt=>.html），把這段標簽代碼粘貼到html文件里，這樣一個空白的網頁就做成了。如果需要在網頁上添加內容，我們只需要在第10行的位置添加各種各樣的標簽即可。比如我在圖二添加了一個按鈕標簽和一段文字標簽，雙擊html文件，頁面上就從左到右，從上到下顯示對應的內容。是不是很簡單。我們日常瀏覽的網頁都是這樣一個標簽一個標簽畫上去的。

我給大家總結了一張圖，基本上覆蓋了工作中常用的知識點。同時分享幾個小技巧。

1.最簡單的網頁寫成什么樣子，也就是html模板不需要記憶，下圖也說了，去百度下載一個VSCode軟件（類似于記事本，是現在主流的前端代碼編輯器），用它打開我們的html文件，輸入英文嘆號回車就自動生成了，學編程不要死記硬背。

2.控件的標簽不需要記憶，直接百度html XXX標簽，例如：百度搜“html按鈕標簽”，他就會告訴我們是<button>，用的時間長了自然就記住了。是不是省力。

3.標簽的屬性很重要，可以不去記他的寫法，因為寫可以百度，重要的是你需要記住標簽有什么屬性，下圖的屬性記住足矣。為什么要記呢，因為工作中，有的時候會遇到這樣一種情況，明明設置一個屬性可以完成的功能，我們不知道，花費了大力氣用css和js去實現，結果還存在著特定場合的bug，讓人很無奈。

4.對于html還有兩個標簽<canvas>和<svg>，他們是用來繪圖的，做特殊效果的。我們可以先跳過，等框架啥的都學完了，有興趣，學習一下。

5.給大家推薦一個小白學習html的網站，w3cschool，圖里不明白的可以去上邊學學練練。

6.如果覺得一個人學習前端有難度，我建了一個小白前端學習交流群，可以私聊我，大家在群里多多交流，我會經常給大家答疑，組織大家練習，一起做小項目。有方向，少走彎路。

言

每當看到幾十萬的閱讀量的文章后面區區幾個評論, 心中就在想, 難道大家現在都這么懶了嗎? 但是有些文章閱讀量不高, 評論為什么這么多呢?

我想這些應該都是刷的, 不光瀏覽量是刷的, 甚至那些無厘頭的評論都是刷的。有人要問了, 你憑什么說別人刷的評論呢? 難道評論還可以刷? 我想說是的。

比如：我們在瀏覽微博的時候，會經常發現一件事, 怎么每個微博下面都有這個人的小廣告呢? 難道這人都這么閑嗎? 一個人閑也就罷了, 怎么這么多人都閑？可以在大量的微博下面評論大量的小廣告, 并且點贊還非常多。具體是不是刷的，自己做判斷就好了。

今天教大家的是, 用爬蟲通過代理來增加網頁的瀏覽量。以下是干貨↓

思路

一、怎么獲取大量的代理IP？

給大家推薦一個網站https://www.xicidaili.com/ , 看到下面的圖片, 應該明白我們要做什么了吧。我們可以寫一個爬蟲去抓取這些IP。

但是, 在實際運行的時候, 發現了一個問題, 我怎么才能知道這些IP有用, 并且代理設置成功了呢? 當然, 也是有解決方案的,我們可以用代理訪問這個網站http://httpbin.org/ip ,如果不正常會拋出異常, 如果是正常的就會返回如下信息

{
 "origin": "106.38.91.34, 106.38.91.34"
}

廢話不多說，直接上代碼：

from bs4 import BeautifulSoup
import requests
import random
import time
def download_page(url):
 print(url)
 try:
 #User Agent中文名為用戶代理，簡稱 UA，它是一個特殊字符串頭，使得服務器能夠識別客戶使用的操作系統及版本、CPU 類型、瀏覽器及版本、
 #瀏覽器渲染引擎、瀏覽器語言、瀏覽器插件等。
 header = {
 "User-Agent":"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.104 Safari/537.36"
 }
 data = requests.get(url,headers=header).text
 except HTTPError as err:
 print(err.__traceback__)
 except ConnectionError as err:
 print(err.__traceback__)
 except TimeoutError as err:
 print(err.__traceback__)
 return data
#獲取當前首頁的內容
def parse_proxy_html(html):
 try:
 #解析器html.parser lxml xml html5lib
 soup = BeautifulSoup(html, 'lxml')
 find_all = soup.find_all('tr')
 f = open("proxy", "w")
 for find_tr in find_all:
 find_tds = find_tr.find_all('td')
 if len(find_tds) == 0:
 continue
 ip_temp = find_tds[1].contents[0]+":"+find_tds[2].contents[0]
 try:
 #隨機模擬一個用戶
 user_agent = {'User-Agent':random.choice(agent_list)}
 #隨機獲取一個代理ip
 proxies = {'http':ip_temp}
 #這樣寫沒有問題,但是抓取出來的ip大都沒有用
 #判斷代理ip是否有用,只保存有用的代理ip,兩秒不響應就算無效的ip
 targetUrl = 'http://httpbin.org/ip'
 resp = requests.get(targetUrl, headers=user_agent,proxies=proxies,timeout=2)
 print(resp.status_code)
 print(resp.text)
 print('~~有效的~~代理ip和端口號%s'%ip_temp)
 f.write(ip_temp+"\n")
 except Exception as e:
 print('~~異常:%s'%e) 
 print('~~無效的~~代理ip和端口號%s'%ip_temp)
 #獲取下個頁面地址
 next_a = soup.find('a',attrs={'rel': 'next'})
 if next_a is None:
 print("~~None~~~")
 return "";
 return next_a['href']
 except Exception as ex:
 print('抓取信息異常:'+ex)
#首頁數據抓取
HTTP = 'https://www.xicidaili.com'
def to_proxy_page():
 download_url = '/wt/1'
 num = 1
 while download_url != 'javascript：;' and download_url!='':
 if num == 3:
 print('~~~~夠用了~~不抓取了~~~')
 break
 print("第%d次請求地址:%s"%(num,download_url));
 #隨機停頓幾秒
 i = random.randint(1, 3)
 time.sleep(i)
 #獲取頁面信息
 html = download_page(HTTP + download_url)
 #解析和保存
 download_url = parse_proxy_html(html)
 num = num+1;
 
if __name__ == '__main__':
 to_proxy_page()

獲取到的代理地址格式如下(想要多少, 代碼自己設置下就好了):

163.204.243.4:9999

60.13.42.248:9999

二、通過代理地址去刷新網頁

可以先寫一個User-Agent列表, 模擬不同的瀏覽器信息。然后配置需要刷新的網頁就好了。

import random
import socket
import requests
#定義需要刷新的頁面集合
refreshPage_list = [
 #1062
 'https://blog.csdn.net/dujianxiong/article/details/80844652',
 #153
 'https://blog.csdn.net/super_DuoLa/article/details/90205512'
 ]
#定義User-Agent集合
agent_list = [
 #Win7:
 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.163 Safari/535.1',
 #Win7:
 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.0) Gecko/20100101 Firefox/6.0',
 #Win7:
 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.50 (KHTML, like Gecko) Version/5.1 Safari/534.50',
 #Win7:
 'Opera/9.80 (Windows NT 6.1; U; zh-cn) Presto/2.9.168 Version/11.50',
 #Win7+ie9：
 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Win64; x64; Trident/5.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; Tablet PC 2.0; .NET4.0E)',
 #Win7+ie8：
 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.3)',
 #WinXP+ie8：
 'Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.0)',
 #WinXP+ie7：
 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)',
 #WinXP+ie6：
 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)',
 #傲游3.1.7在Win7+ie9,高速模式:
 'Mozilla/5.0 (Windows; U; Windows NT 6.1; ) AppleWebKit/534.12 (KHTML, like Gecko) Maxthon/3.0 Safari/534.12',
 #傲游3.1.7在Win7+ie9,IE內核兼容模式:
 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)',
 #搜狗3.0在Win7+ie9,IE內核兼容模式:
 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E; SE 2.X MetaSr 1.0)',
 #搜狗3.0在Win7+ie9,高速模式:
 'Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.472.33 Safari/534.3 SE 2.X MetaSr 1.0',
 #360瀏覽器3.0在Win7+ie9:
 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)',
 #QQ瀏覽器6.9(11079)在Win7+ie9,極速模式:
 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.41 Safari/535.1 QQBrowser/6.9.11079.201',
 #QQ瀏覽器6.9(11079)在Win7+ie9,IE內核兼容模式:
 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E) QQBrowser/6.9.11079.201',
 #阿云瀏覽器1.3.0.1724 Beta(編譯日期2011-12-05)在Win7+ie9:
 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0)'
 ] 
#開始搞
def to_refresh_page():
 try:
 #獲取代理信息
 f = open("proxy",'r')
 lines = f.readlines()
 proxys = []
 for line in lines:
 ip = line.strip()
 proxys.append(ip)
 #每個頁面刷新10次
 for i in range(10):
 for url in refreshPage_list:
 #隨機模擬一個用戶
 user_agent = {'User-Agent':random.choice(agent_list)}
 #隨機獲取一個代理ip
 proxies = {'http':random.choice(proxys)}
 r = requests.get(url,headers=user_agent,proxies=proxies)
 print(r)
 print('刷新成功，請求地址url:%s返回狀態status:%s'%(url,r.status_code))
 except Exception as e:
 print('刷新頁面異常:%s'%e)
 
if __name__ == '__main__':
 to_refresh_page()

代碼中我加了很多注解，就不長篇大論了，如果有不明白的可以評論。

三、思考問題

在實際測試中，發現剛才還有效的代理IP，當去刷新網頁的時候就鏈接超時了呢？為什么請求了很多次，網頁的瀏覽量并沒有漲太多呢?

注: 文章所寫代碼僅用于技術交流

近做一個項目，要通過掃一掃查詢對應的信息，由于現在已經有一部分二維碼已被生成，為了兼顧已生成的二維碼，所以需要使用網頁的掃一掃功能去完成項目。

項目使用技術棧：vue2

方案一、js 原生

熱心的同事幫我已經找好了網頁掃一掃 DEMO，給我說已經測試過了，Andriod 和 IOS 都可以正常使用。

使用 QRScanner 插件

其原理是通過 navigator.mediaDevices.getUserMedia 來獲取用戶的攝像頭使用權限：

navigator.mediaDevices.getUserMedia(constraints)
.then(res => {  })
.catch(err => {  })

使用自己的蘋果11 測試完全正常，放置服務器上，讓同事掃碼的時候，真的是異常百態！存在的問題：

1、網頁必須使用瀏覽打開，不可以使用微信內置瀏覽器。如果是微信打開，會提示 “對不起，未識別到掃描設備”。

2、有些手機，攝像頭一直是前置攝像頭，通過 facingMode 設置無效：

{ facingMode: { exact: "environment" } }

3、非手機內置瀏覽器，如：QQ、UC、百度等瀏覽器APP內，會存在找不到掃瞄設備。

4、最重要的是用戶體驗差。用戶需要在瀏覽器打開，授權之后，才能進行掃碼。

5、開發需要調試的設備較多。navigator.mediaDevices.getUserMedia 兼容性差。

方案二、vue-qr 插件

官方文檔：https://www.npmjs.com/package/vue-qr

該插件不僅支持 vue2 ，還支持 vue3 。功能強大，能夠生成二維碼，還能夠掃描、識別二維碼，解析二維碼。

git 地址：https://github.com/MuGuiLin/QRCode

有一個 HTML 版本。
有一個 vue.js 版本。

測試地址：Demo：https://muguilin.github.io/QRCode

存在問題：

1、網頁必須使用瀏覽打開，不可以使用微信內置瀏覽器。如果是微信打開，會提示 “對不起，未識別到掃描設備”。

2、非手機內置瀏覽器，如：QQ、UC、百度等瀏覽器APP內，會存在找不到掃瞄設備。

3、最重要的是用戶體驗差。用戶需要在瀏覽器打開，授權之后，才能進行掃碼。

方案三、微信掃一掃

我把測試地址發到公司群，讓同事幫我測試的時候，我發現程序員測試都說沒問題，非程序員基本都是直接使用微信，點擊掃一掃的時候，統一都是：“ 對不起，未識別到掃描設備 ”。轉念一想，掃一掃好像是給開發同事做的。

轉換思路，讓用戶在微信內直接點進去之后就可以進行掃碼！所以選擇 微信網頁開發 -> 調用微信掃一掃。

優點：

1、用戶使用方便，直接可以使用微信掃碼。

2、開發方便，不用再考慮兼容安卓和ios的各種瀏覽器。

實現步驟：

1、引入

引入方式1：

index.html 入口文件處引入 js 插件

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

在 wx 使用頁面處，可以直接通過 window.wx 引用。

引入方式2：

npm install weixin-js-sdk

在需要使用的頁面處，引入 wx 模塊：import wx from 'weixin-js-sdk'

2、配置

wx.config({
 debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
 appId: '', // 必填，公眾號的唯一標識
 timestamp: , // 必填，生成簽名的時間戳
 nonceStr: '', // 必填，生成簽名的隨機串
 signature: '',// 必填，簽名
 jsApiList: [] // 必填，需要使用的JS接口列表
});

3、調用方法

wx.scanQRCode({
 needResult: 0, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
 scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
 success: function (res) {
  var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果
 }
});

具體的實現步驟以及可能遇到的問題都總結到《手把手教你調用微信掃一掃！三分鐘包會》，需要的自行查閱。

在線咨詢

上一篇：Python使用pandas使數據可視化筆記
下一篇：2023年青浦區職業技能競賽活動報名通道開啟啦~

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

小白初學—神奇的HTML

方案一、js 原生

方案二、vue-qr 插件

方案三、微信掃一掃

您的項目需求