之前給大家寫過小白怎么去自學(xué)AdsPower瀏覽器的RPA：https://www.bilibili.com/read/cv25080195

但是，里面有些資料可能是針對(duì)前端編程，而不是針對(duì)RPA的。有些零基礎(chǔ)小白在看的時(shí)候，可能沒法快速地跟RPA聯(lián)系起來。于是我準(zhǔn)備自己寫一套教程，希望從更好的角度去解釋這些知識(shí)。同時(shí)，教程中帶有實(shí)操案例，可以幫助大家更好地去用好RPA。

今天，我們學(xué)習(xí)第一個(gè)知識(shí)點(diǎn)：HTML。

第1步：打開Chrome瀏覽器，訪問網(wǎng)站。在網(wǎng)頁(yè)任意位置鼠標(biāo)右鍵，選擇”檢查“。

第2步：此時(shí)，在瀏覽器里會(huì)出現(xiàn)開發(fā)者工具界面（如紅框所示）。別慌！我們只需要看其中一個(gè)部分的內(nèi)容。不是要大家學(xué)編程啊，別恐懼?。?/p>

第3步：點(diǎn)擊"Elements"（一般會(huì)默認(rèn)在這個(gè)位置），在藍(lán)框內(nèi)，可以看到當(dāng)前網(wǎng)頁(yè)的HTML代碼。

1.HTML：超文本標(biāo)記語(yǔ)言。它用一套標(biāo)簽去標(biāo)記文本內(nèi)容，給內(nèi)容賦予不同的格式。

大家可以在藍(lán)框里尋找一下，看看有哪些標(biāo)簽。常用的標(biāo)簽有

<p>段落標(biāo)簽

<h1>~<h5>標(biāo)題標(biāo)簽

<a>鏈接標(biāo)簽

<img>圖片標(biāo)簽

<div>塊標(biāo)簽

<span>行標(biāo)簽

還有一些其他常用的，我這里就不再列出了。大家可以在自己訪問的網(wǎng)頁(yè)里尋找，看看當(dāng)前網(wǎng)頁(yè)有多少種標(biāo)簽。大家不要記每種標(biāo)簽是什么意思，千萬(wàn)不要記！記不住的話，就對(duì)著這個(gè)資料看就行：https://www.runoob.com/tags/html-reference.html

我們對(duì)這些標(biāo)簽只需要了解即可，看到了有個(gè)印象。等后面見多了，就不再需要對(duì)著資料看了。

2.在?HTML?里，每個(gè)元素都可以包含其他元素，每個(gè)元素都有一個(gè)父元素或者0個(gè)、多個(gè)子元素。

你可以點(diǎn)擊三角箭頭，展開查看每個(gè)元素下的子元素。是不是類似某些文檔里面的功能：點(diǎn)擊一個(gè)標(biāo)題，會(huì)展開該標(biāo)題下的內(nèi)容。

第4步：繼續(xù)了解HTML的屬性，屬性是?HTML?元素提供的附加信息。

在開始標(biāo)簽里，有這種格式的代碼：class=”xxx“，href="xxx"，id="xxx"。這就是元素的屬性：屬性=”屬性值“。例如<a>標(biāo)簽里href屬性的值，就是該鏈接的地址。

其中class屬性也叫”類“，大家了解即可。

第5步：學(xué)習(xí)查看某個(gè)網(wǎng)頁(yè)元素的HTML代碼。點(diǎn)擊紅框出的按鈕，或者按”Ctrl+Shift+C“。此時(shí)，把鼠標(biāo)移動(dòng)到網(wǎng)頁(yè)里，你會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)的顏色變了。

鼠標(biāo)移動(dòng)到哪兒，該區(qū)域會(huì)變成藍(lán)色。此時(shí)，鼠標(biāo)右鍵，可以在”Elements“定位到這塊區(qū)域的HTML代碼。藍(lán)底就是顯示此處的HTML代碼。如下圖，該圖片是被一個(gè)<img>標(biāo)簽表示，這個(gè)<img>元素的父元素是一個(gè)<div>元素。

最后

練習(xí)查看代碼。重復(fù)上述5個(gè)步驟，查看網(wǎng)頁(yè)元素里面的代碼。

由于大家在短時(shí)間內(nèi)接觸很多陌生的概念，需要不斷地練習(xí)加深記憶。尤其是不同的標(biāo)簽的含義以及標(biāo)簽的各個(gè)屬性。

下一節(jié)我會(huì)給大家解釋CSS選擇器。由于選擇器的內(nèi)容比較多，我會(huì)分幾個(gè)部分寫。大家不要錯(cuò)過哈~