HTML就是網(wǎng)頁(yè)的基礎(chǔ)結(jié)構(gòu)，簡(jiǎn)單理解，可以把它當(dāng)作是一個(gè)房子。<p>表示段落(paragraph)
<img>表示圖片(image)
<a>表示鏈接(anchor)
<div>表示板塊(division)
<select>表示下拉選框
<input>表示輸入框
CSS是網(wǎng)頁(yè)的樣式，簡(jiǎn)單理解，可以把它當(dāng)作房子的裝修風(fēng)格。h2 {color：red} 標(biāo)題文字顏色是紅色
p {font-size：16px} 段落的字體大小為16個(gè)像素
兩個(gè)結(jié)合起來(lái)，就形成了網(wǎng)頁(yè)基礎(chǔ)。HTML用來(lái)定義網(wǎng)頁(yè)里有哪些東西，CSS用來(lái)描述這些東西是什么樣子的。HTML就比如一個(gè)房子，是三室一廳的結(jié)構(gòu)，其中客廳有沙發(fā)、臥室有床；CSS描述了，客廳的沙發(fā)是白色、臥室的床是2米寬。/*** 一個(gè)叫house的房子，里面有三個(gè)房間div。* 這三個(gè)div房間的class類型都是box，背景色都是green。* 其中客廳里面有沙發(fā)，顏色color是白色，臥室的床寬度是15px*/<style>#house {height: 30px; width:100px}div .box {background-color:green}.couch {color：white; width:50px}.bed {width:15px}</style>
<div id="house"> <div class="box">客廳 <p id="couch">沙發(fā)</p> </div> <div class="box">餐廳</div> <div class="box">臥室 <p class="bed">床</p> </div></div>
PS：還有個(gè)東西叫js，javascript。js是在網(wǎng)頁(yè)上用來(lái)執(zhí)行的代碼，控制網(wǎng)頁(yè)上的內(nèi)容如何變化。用房子的概念去理解，當(dāng)你走進(jìn)了廁所、站在馬桶前，馬桶蓋自動(dòng)打開，就是js來(lái)控制的。HTML+CSS+JS，就是前端基礎(chǔ)了。怎么使用css定位元素？假設(shè)有這樣一個(gè)“房子”，里面放了p、a、img這些“家具”，如何找到對(duì)應(yīng)的元素呢？這是最簡(jiǎn)單的選擇器，直接觀察html的標(biāo)簽即可作出選擇，如用來(lái)選擇有相同類的元素，一般情況下，一個(gè)元素會(huì)有一個(gè)class，可以通過(guò)這個(gè)屬性進(jìn)行定位，它的關(guān)鍵符號(hào)是.號(hào)跟類選擇器相似，一個(gè)元素如果帶有id，則可以用ID選擇器定位，它的關(guān)鍵符號(hào)是#號(hào)，一個(gè)元素只有一個(gè)id
4、屬性選擇器
一個(gè)html元素會(huì)帶有很多屬性，比如<input placeholder="請(qǐng)輸入名稱" class="input-name" target-id="nameId" title="名稱">
里面的placeholder、class、target-id、title都是這個(gè)input的屬性，它的關(guān)鍵符號(hào)是[ ]號(hào)
input[target-id="nameId"][title="名稱"] 選擇target-id="nameId"并且title="名稱"的input
即把不同的選擇方式組合起來(lái)使用，用于更加精準(zhǔn)的定位，先看看以下代碼<div id="house"> <div class="box">客廳 <p class="furniture" id="couch">沙發(fā)</p> <p class="furniture" id="chair">凳子</p> </div> <div class="box">餐廳</div> <div class="box">臥室 <p id="bed">床 <a class="furniture" id="pillow">枕頭</a> </p> </div></div>
以下為選擇器及相關(guān)解釋說(shuō)明解釋：選擇div標(biāo)簽并帶有box這種class的所有元素，并在其中查找id=chair的元素，即查找到<p id="chair">凳子</p>注意空格的位置，空格表示向下查找，找下面的所有后代元素，如：解釋：查找id=couch的p元素，返回值是空，因?yàn)闆](méi)有id=couch的div元素解釋：查找div元素下面的id=bed的元素，返回值是<p id="bed">床</p>解釋：查找div元素下面的class=box的所有元素，返回值是“客廳”、“餐廳”、“臥室”這個(gè)三個(gè)元素另外，還有一種情況也是經(jīng)常遇到，就是>符號(hào)，也表示向下查找，不過(guò)查找的范圍，僅查找當(dāng)前節(jié)點(diǎn)下的子元素，不包括子元素的子元素。解釋：查找class=box的div元素下面的子元素里包含class=furniture的元素，返回值是“沙發(fā)”、“凳子”這兩個(gè)元素解釋：查找class=box的div元素下面的所有后代元素里包含class=furniture的元素，返回“沙發(fā)”、“凳子”、“枕頭”這三個(gè)元素也可以理解成元素的狀態(tài)選擇器，關(guān)鍵符號(hào)是:號(hào)a:hover 選取鼠標(biāo)停留位置的a標(biāo)簽元素div:nth-child(2) 在所有的div中取第二個(gè)最常用的，標(biāo)注了綠色，學(xué)會(huì)這幾個(gè)，后續(xù)組合起來(lái)也夠用了：在百度頁(yè)面的輸入框，右鍵，選擇屬性，會(huì)彈出html結(jié)構(gòu)。2、根據(jù)HTML結(jié)構(gòu)編寫selector可以發(fā)現(xiàn)，這個(gè)輸入框的html結(jié)構(gòu)為<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off" placeholder="特朗普再次揚(yáng)言要接管加沙">
input[type="text"][name="wd"].s_ipt在瀏覽器的Console標(biāo)簽頁(yè)，輸入document.querySelectorAll('input[type="text"][name="wd"].s_ipt')查詢到的元素列表，只有一個(gè)，說(shuō)明使用這個(gè)方法確實(shí)能夠找到這個(gè)唯一的元素。當(dāng)然，你也可以使用document.querySelector('input[type="text"][name="wd"].s_ipt')直接獲取到這個(gè)元素。input[type="submit"][value="百度一下"].btn在Console標(biāo)簽頁(yè)里，輸入以下代碼并回車，會(huì)自動(dòng)跳轉(zhuǎn)到搜索結(jié)果頁(yè)面。document.querySelector('input[type="text"][name="wd"].s_ipt').value="打工助手-數(shù)據(jù)錄入輔助工具";
如果覺(jué)得上面的教程還是太復(fù)雜了，也有一種更簡(jiǎn)單的方法。可以在瀏覽器的html元素上，直接右鍵，在彈出的選項(xiàng)中選擇“copy->copy selector”，再粘貼到文本框，這樣也能得到瀏覽器幫你計(jì)算出來(lái)的selector。比如獲取“5 蘋果緊急從印度調(diào)飛機(jī)載iPhone回美”這個(gè)頁(yè)面元素，通過(guò)簡(jiǎn)單法獲取到的selector為：#hotsearch-content-wrapper > li:nth-child(2) > a > span.title-content-title使用document.querySelector('#hotsearch-content-wrapper > li:nth-child(2) > a > span.title-content-title')，同樣可以驗(yàn)證獲得的這個(gè)元素1、這種方法適用于沒(méi)有復(fù)雜動(dòng)態(tài)效果的簡(jiǎn)單頁(yè)面，因?yàn)榻M裝出來(lái)的selector是相對(duì)于整個(gè)html絕對(duì)定位的路徑。2、對(duì)于現(xiàn)代常用vue、react或一些動(dòng)態(tài)元素很多的頁(yè)面，取到的selector不一定全部適用。因?yàn)檫@些網(wǎng)頁(yè)的元素是動(dòng)態(tài)生成的，有些元素可能在頁(yè)面的第2個(gè)位置，點(diǎn)擊某個(gè)按鈕后，會(huì)變成第3個(gè)位置。
學(xué)完這個(gè)，接下來(lái)，就可以使用【打工助手-數(shù)據(jù)錄入輔助工具】編寫流程腳本了。可以參考以下文章：
閱讀原文：原文鏈接
該文章在 2025/4/23 10:40:42 編輯過(guò)
400 186 1886
