小白初学—神奇的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 插件

方案三、微信扫一扫

您的项目需求