R爬蟲必備基礎(chǔ)——HTML和CSS初識

網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，網(wǎng)頁又是由一些更基本的元素構(gòu)成家破。想要網(wǎng)絡(luò)爬蟲或多或少還是需要一點簡單的html網(wǎng)頁基礎(chǔ)，尤其是網(wǎng)頁布局哲嘲，因為我們一般需要逐步定位我們需要內(nèi)容所屬標(biāo)簽，最終獲得所需要的內(nèi)容引几。點擊打開目標(biāo)網(wǎng)頁（建議用Google Chrome瀏覽器）->右鍵->查看網(wǎng)頁源代碼丹允，如下圖右側(cè)航瞭，我們可以看到HTML文件就是各種標(biāo)簽彤恶、屬性等構(gòu)成而成的文件钞钙。

image

HTML的定義
功能——搭建出網(wǎng)頁的基本框架，如房子的基本框架
HTML本身不是編程語言声离，而是一種描述內(nèi)容并定義其表征（顯示效果）的標(biāo)記語言芒炼，全稱為超文本標(biāo)記語言 (Hyper Text Markup Language)，且該語言不區(qū)分大小寫术徊。它存在明顯的樹形結(jié)構(gòu)本刽，所有元素之間嚴格嵌套，即一對元素必須完全包含于另一對元素中。如下圖子寓，可以發(fā)現(xiàn)明顯的樹形結(jié)構(gòu)暗挑，且具體很嚴謹?shù)呐鋵ΨQ性。

image

不難發(fā)現(xiàn)斜友，網(wǎng)頁其實就是由各種標(biāo)簽窿祥、屬性、內(nèi)容等構(gòu)成蝙寨。HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞，比如 <html>嗤瞎。HTML 標(biāo)簽通常是成對出現(xiàn)的墙歪，比如 <body> 和 </body>。成對標(biāo)簽中的第一個標(biāo)簽是開始標(biāo)簽（其中有時包含屬性）贝奇，第二個標(biāo)簽是結(jié)束標(biāo)簽虹菲，如<div id="header">...</div>，開始標(biāo)簽<div>掉瞳，屬性id="header"毕源，結(jié)束標(biāo)簽</div>。

image

HTML各種標(biāo)簽匯總圖

image

舉例說明：

<title>first HTML</title> ：其中<title>為起始標(biāo)簽陕习，</title>為終止標(biāo)簽霎褐，first HTML為內(nèi)容，三者結(jié)合起來叫元素该镣。
<a href="http://www.r-datacollection.com/">Link to Homepage</a>：其中<a href="http://www.r-datacollection.com/">為起始標(biāo)簽冻璃，****</a>為終止標(biāo)簽，由于標(biāo)簽<a>主要是存放鏈接地址的损合，因此又叫鏈接標(biāo)簽省艳。href為一種屬性參數(shù)，這里屬性取值為一個鏈接嫁审。
<img src="w3school.jpg" width="104" height="142"><img />** ：**屬性總是位于標(biāo)簽的內(nèi)部跋炕，標(biāo)簽名的右側(cè)；一個標(biāo)簽可以有多個屬性律适，屬性間用空格分開辐烂。src, width, height均為標(biāo)簽img的屬性，使用空格隔開即可擦耀。
備注：****了解HTML棉圈，有助于R爬蟲過程中信息的抓取。當(dāng)然不了解眷蜓，其實也可以借助瀏覽器的查看功能分瘾，可直接幫助我們定位到想抓取的信息位置，如想要定位感興趣的電影信息位置，在感興趣信息的位置德召，右擊--檢查白魂，然后彈出的源碼會直接定位到相應(yīng)信息。

image

CSS的定義
功能——搭建出網(wǎng)頁的顯示樣式上岗，如房子的裝修
CSS 指的是層疊樣式表 (Cascading Style Sheets)福荸，定義如何顯示 HTML 元素，如下圖肴掷，右側(cè)幾位網(wǎng)頁中某個字體的CSS樣式敬锐，定義了字體的顯示形式。

image

在爬蟲過程中比較關(guān)注class這個屬性呆瞻，也叫做類屬性台夺。通過這個屬性，我們能夠根據(jù)一個標(biāo)簽的CSS樣式很快的訪問到這個標(biāo)簽痴脾。這屬于CSS選擇器的一部分颤介，有興趣的可以進一步了解，網(wǎng)址：https://www.w3school.com.cn/css/css_selector_type.asp

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

這個時候赞赖，p.important (.代表class)指的是匹配 class 屬性包含 important 的所有 p 元素滚朵。這個用法在R爬蟲中抓取信息時特別好用。在實際R爬蟲中常用的就是這個類選擇器前域。

最后辕近，以上內(nèi)容主要針對R爬蟲所需要基礎(chǔ)，想深入理解還是需要自行學(xué)習(xí)教程：https://www.w3school.com.cn/h.asp匿垄，寫的非常詳細亏推。對于簡單爬蟲來說，初步了解HTML和CSS即可年堆，HTML為主吞杭，CSS為輔。

image

往期回顧
R爬蟲在工作中的一點妙用

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者