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小時內與您取得聯系。