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