SS实现文字竖向排版的简单方法,bootstrap4文字竖向排版代码:
主要用到的CSS属性:writing-mode: vertical-lr;及writing-mode: tb-lr;/*IE浏览器*/,英文字符加上这句:word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/
效果图:
代码如下:
T之家 3 月 25 日消息,在浏览器互通项目 Interop 2023 的倡议下,目前业界主流浏览器都开始统一垂直表单控件支持。近日苹果公司便在 iOS / iPad OS 17.4 及 macOS 14.4 中为 Safari 浏览器添加了完整的垂直表单控件支持。
IT之家注:垂直表单控件主要用于呈现竖排文字,虽然此前 CSS 已经在书写模式属性中添加了竖排文字的支持,不过许多浏览器对表单控件 vertical-lr 和 vertical-rl 值都采用不同的标准,因此在先前的 Interop 2023 会议中,各厂商一致决定实现统一的垂直表单控件支持。
▲ 竖排文字示例在布局方面,目前 WebKit 中的表单控件大量使用自定义布局代码,以在不同的环境和条件下保持一致和功能性,但此类布局代码主要基于横排模式设计,在竖排模式下会出现问题。
开发团队在 Safari 17.4 版本中改进了相关代码,在代码计算逻辑宽度时会同时考虑竖排模式,同时也改进了自定义基线调整逻辑功能,使复选框和单选按钮等控件能与竖排文字相搭配。
开发人员重点谈到了 macOS 平台 Safari 浏览器的改进,由于 macOS 本身不支持竖排模式,例如 <progress> 等控制元件便无法直接在竖排模式下渲染,因此在 Safari 17.4 版本中,WebKit 会直接旋转这些控件来支持竖排渲染。
不过有些拥有阴影的控件(例如 <select> )无法单纯通过旋转来契合竖排模式,在遇到此类特定控件时,WebKit 便会为相关控件使用“特别的渲染逻辑”,从而兼容竖排渲染模式。
信菜鸟获取源码!.007
如果我们在页面上【右击-显示网页源代码】可以看到竖向有两千多行的html标签代码,你可以在这里找到页面上看到的各个职位的对应文字,比如按【ctrl+F】搜索“华夏高科”就可以找到它。
2. 请求页面数据
使用阿里云天池的Notebook或者Anaconda的Jupyter Notebook都可以,编写以下代码,获取整个页面的html文件数据。
url='https://www.zhipin.com/c101190400/h_101190400/?query=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD&page=1' import requests from bs4 import BeautifulSoup html=requests.get(url) print(html.text)
url是复制粘贴的浏览器地址,在这里中文部分自动变成了乱码,不用担心,一样可以使用。
运行这个代码,会output输出页面的标记代码,但你仔细看会发觉有什么不对,好像少了很多,而且会看到这个信息。
<h3 class="gray">您暂时无法继续访问~</h3> <p>由于您当前网络访问页面过于频繁,可能存在安全风险,我们暂时阻止了您的本次访问,24小时将自动解除限制。</p>
这表示服务器识别我们的请求是爬虫了!
但是如果我们把网址复制到浏览器里,仍然可以正常打开的。这是为什么?
Python默认发送的请求和浏览器发送的请求是有不同的。最主要的不同就是浏览器发送的请求除了http地址之外还包含了看不到的header头信息。
3. 认识请求头 Request header
还是在刚才的Boss直聘工作列表页面,右击检查之后,注意Elements元素面板边上还有【Network网络】面板,点开看上去如下图:
Network网络面板包含了所有向服务器发出的请求的信息,如图所示,这一行 ?query=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD&page=1就是我们代码里面发送的那个请求,点击它,可以看到它的更多信息:
所以,浏览器向服务器发送的信息很多,除了基本的 RequestURL地址,还发送了 RequestHeaders请求头和 QueryStringParameters查询字符串参数。
QueryStringParameters很简单,其实就是我们地址栏最后 ?问号后面的部分 ?query=人工智能&page=1。
RequestHeaders请求头包含了很多信息,非常复杂,我们这里不逐个解释了,你可以稍后自己在Google里面搜索到相关教程,这里只重点解释其中下面的三个:
4. 添加请求头
我们改进一下代码:
url='https://www.zhipin.com/c101190400/h_101190400/?query=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD&page=1' headers={ 'user-agent':'Mozilla/5.0' } import requests from bs4 import BeautifulSoup html=requests.get(url,headers=headers) print(html.text)
再次运行,就可以得到完整的页面数据了。
这里主要是添加了 headers={...}对象(一对大括号包裹), headers对象只有一个 user-agent字段属性,用冒号隔开它的值 Mozilla/5.0(这里我们偷懒只留了开头Mozila火狐浏览器的信息)
5. 循环获取更多内容
改进后获取10页共300条招聘信息:
url='https://www.zhipin.com/c101020100/h_101020100/?query=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD&page=' headers={ 'user-agent':'Mozilla/5.0' } page=1 hud=['职位名','薪资1','薪资2','职位名','地点','经验','学历','公司行业','融资阶段','公司人数','发布日期','发布人'] print('\t'.join(hud)) import requests from bs4 import BeautifulSoup import time for n in range(1,11): html=requests.get(url+str(page),headers=headers) page+=1 soup = BeautifulSoup(html.text, 'html.parser') for item in soup.find_all('div','job-primary'): shuchu=[] shuchu.append(item.find('div','job-title').string) #职位名 xinzi=item.find('span','red').string xinzi=xinzi.replace('k','') xinzi=xinzi.split('-') shuchu.append(xinzi[0]) #薪资起始数 shuchu.append(xinzi[1]) #薪资起始数 yaoqiu=item.find('p').contents shuchu.append(yaoqiu[0].string if len(yaoqiu)>0 else 'None') #地点 shuchu.append(yaoqiu[2].string if len(yaoqiu)>2 else 'None') #经验 shuchu.append(yaoqiu[4].string if len(yaoqiu)>4 else 'None') #学历 gongsi=item.find('div','info-company').find('p').contents shuchu.append(gongsi[0].string if len(gongsi)>0 else 'None') #公司行业 shuchu.append(gongsi[2].string if len(gongsi)>2 else 'None') #融资阶段 shuchu.append(gongsi[4].string if len(gongsi)>4 else 'None') #公司人数 shuchu.append(item.find('div','info-publis').find('p').string.replace('发布于','')) #发布日期 shuchu.append(item.find('div','info-publis').find('h3').contents[3].string) #发布人 print('\t'.join(shuchu)) time.sleep(1)
这里是有了几个新的知识点:
最终得到的Excel结果如下:
下面是利用上一篇文章介绍的Excel数据透视表方法绘制的统计图:
注,300个职位数据规模还很小,而且由于Boss直聘的搜索问题,其中掺杂了大量的实际与人工智能无关的职位,我们的分析方法还是很原始很粗糙的,仅供参考。随着后续学习我们会逐步加深这方面的研究。
6. 后续学习资源
作为一个互联网或科技企业的你,一定很关注你当前的职位的分布情况吧,现在可以自己动手从Boss直聘网站的大数据上进行科学分析了!
换一个城市,换一个行业,尝试更多的可能,从分析图表中总结规律,推测趋势。
如果要做更多的练习,还是推荐你花一点时间翻翻Html和Python的知识,不要有太大压力,用心阅读就可以,适当的时候可以跟着教程做做代码实验。
以上就是本文的全部内容,希望对大家的学习有所帮助。如果觉得文章不错,动手转发支持一下哦!
*请认真填写需求信息,我们会在24小时内与您取得联系。