整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
SS實現(xiàn)文字豎向排版的簡單方法，bootstrap4文字豎向排版代碼：
主要用到的CSS屬性：writing-mode: vertical-lr;及writing-mode: tb-lr;/*IE瀏覽器*/，英文字符加上這句：word-wrap: break-word;/*英文的時候需要加上這句，自動換行*/
效果圖：
代碼如下：
T之家 3 月 25 日消息，在瀏覽器互通項目 Interop 2023 的倡議下，目前業(yè)界主流瀏覽器都開始統(tǒng)一垂直表單控件支持。近日蘋果公司便在 iOS / iPad OS 17.4 及 macOS 14.4 中為 Safari 瀏覽器添加了完整的垂直表單控件支持。
IT之家注：垂直表單控件主要用于呈現(xiàn)豎排文字，雖然此前 CSS 已經(jīng)在書寫模式屬性中添加了豎排文字的支持，不過許多瀏覽器對表單控件 vertical-lr 和 vertical-rl 值都采用不同的標(biāo)準(zhǔn)，因此在先前的 Interop 2023 會議中，各廠商一致決定實現(xiàn)統(tǒng)一的垂直表單控件支持。
▲ 豎排文字示例在布局方面，目前 WebKit 中的表單控件大量使用自定義布局代碼，以在不同的環(huán)境和條件下保持一致和功能性，但此類布局代碼主要基于橫排模式設(shè)計，在豎排模式下會出現(xiàn)問題。
開發(fā)團隊在 Safari 17.4 版本中改進了相關(guān)代碼，在代碼計算邏輯寬度時會同時考慮豎排模式，同時也改進了自定義基線調(diào)整邏輯功能，使復(fù)選框和單選按鈕等控件能與豎排文字相搭配。
開發(fā)人員重點談到了 macOS 平臺 Safari 瀏覽器的改進，由于 macOS 本身不支持豎排模式，例如 <progress> 等控制元件便無法直接在豎排模式下渲染，因此在 Safari 17.4 版本中，WebKit 會直接旋轉(zhuǎn)這些控件來支持豎排渲染。
不過有些擁有陰影的控件（例如 <select> ）無法單純通過旋轉(zhuǎn)來契合豎排模式，在遇到此類特定控件時，WebKit 便會為相關(guān)控件使用“特別的渲染邏輯”，從而兼容豎排渲染模式。
信菜鳥獲取源碼！.007
如果我們在頁面上【右擊-顯示網(wǎng)頁源代碼】可以看到豎向有兩千多行的html標(biāo)簽代碼，你可以在這里找到頁面上看到的各個職位的對應(yīng)文字，比如按【ctrl+F】搜索“華夏高科”就可以找到它。
2. 請求頁面數(shù)據(jù)
使用阿里云天池的Notebook或者Anaconda的Jupyter Notebook都可以，編寫以下代碼，獲取整個頁面的html文件數(shù)據(jù)。
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是復(fù)制粘貼的瀏覽器地址，在這里中文部分自動變成了亂碼，不用擔(dān)心，一樣可以使用。
運行這個代碼，會output輸出頁面的標(biāo)記代碼，但你仔細看會發(fā)覺有什么不對，好像少了很多，而且會看到這個信息。
<h3 class="gray">您暫時無法繼續(xù)訪問～</h3> <p>由于您當(dāng)前網(wǎng)絡(luò)訪問頁面過于頻繁，可能存在安全風(fēng)險，我們暫時阻止了您的本次訪問，24小時將自動解除限制。</p>
這表示服務(wù)器識別我們的請求是爬蟲了！
但是如果我們把網(wǎng)址復(fù)制到瀏覽器里，仍然可以正常打開的。這是為什么？
Python默認發(fā)送的請求和瀏覽器發(fā)送的請求是有不同的。最主要的不同就是瀏覽器發(fā)送的請求除了http地址之外還包含了看不到的header頭信息。
3. 認識請求頭 Request header
還是在剛才的Boss直聘工作列表頁面，右擊檢查之后，注意Elements元素面板邊上還有【Network網(wǎng)絡(luò)】面板，點開看上去如下圖：
Network網(wǎng)絡(luò)面板包含了所有向服務(wù)器發(fā)出的請求的信息，如圖所示，這一行 ?query=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD&page=1就是我們代碼里面發(fā)送的那個請求，點擊它，可以看到它的更多信息：
所以，瀏覽器向服務(wù)器發(fā)送的信息很多，除了基本的 RequestURL地址，還發(fā)送了 RequestHeaders請求頭和 QueryStringParameters查詢字符串參數(shù)。
QueryStringParameters很簡單，其實就是我們地址欄最后 ?問號后面的部分 ?query=人工智能&page=1。
RequestHeaders請求頭包含了很多信息，非常復(fù)雜，我們這里不逐個解釋了，你可以稍后自己在Google里面搜索到相關(guān)教程，這里只重點解釋其中下面的三個：
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)
再次運行，就可以得到完整的頁面數(shù)據(jù)了。
這里主要是添加了 headers={...}對象（一對大括號包裹）， headers對象只有一個 user-agent字段屬性，用冒號隔開它的值 Mozilla/5.0（這里我們偷懶只留了開頭Mozila火狐瀏覽器的信息）
5. 循環(huán)獲取更多內(nèi)容
改進后獲取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','職位名','地點','經(jīng)驗','學(xué)歷','公司行業(yè)','融資階段','公司人數(shù)','發(fā)布日期','發(fā)布人']
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]) #薪資起始數(shù)
shuchu.append(xinzi[1]) #薪資起始數(shù)
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') #經(jīng)驗
shuchu.append(yaoqiu[4].string if len(yaoqiu)>4 else 'None') #學(xué)歷
gongsi=item.find('div','info-company').find('p').contents
shuchu.append(gongsi[0].string if len(gongsi)>0 else 'None') #公司行業(yè)
shuchu.append(gongsi[2].string if len(gongsi)>2 else 'None') #融資階段
shuchu.append(gongsi[4].string if len(gongsi)>4 else 'None') #公司人數(shù)
shuchu.append(item.find('div','info-publis').find('p').string.replace('發(fā)布于','')) #發(fā)布日期
shuchu.append(item.find('div','info-publis').find('h3').contents[3].string) #發(fā)布人
print('\t'.join(shuchu))
time.sleep(1)
這里是有了幾個新的知識點：
最終得到的Excel結(jié)果如下：
下面是利用上一篇文章介紹的Excel數(shù)據(jù)透視表方法繪制的統(tǒng)計圖：
注，300個職位數(shù)據(jù)規(guī)模還很小，而且由于Boss直聘的搜索問題，其中摻雜了大量的實際與人工智能無關(guān)的職位，我們的分析方法還是很原始很粗糙的，僅供參考。隨著后續(xù)學(xué)習(xí)我們會逐步加深這方面的研究。
6. 后續(xù)學(xué)習(xí)資源
作為一個互聯(lián)網(wǎng)或科技企業(yè)的你，一定很關(guān)注你當(dāng)前的職位的分布情況吧，現(xiàn)在可以自己動手從Boss直聘網(wǎng)站的大數(shù)據(jù)上進行科學(xué)分析了！
換一個城市，換一個行業(yè)，嘗試更多的可能，從分析圖表中總結(jié)規(guī)律，推測趨勢。
如果要做更多的練習(xí)，還是推薦你花一點時間翻翻Html和Python的知識，不要有太大壓力，用心閱讀就可以，適當(dāng)?shù)臅r候可以跟著教程做做代碼實驗。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。如果覺得文章不錯，動手轉(zhuǎn)發(fā)支持一下哦！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
