前言
在上一節中(https://mp.weixin.qq.com/s/lqYEjiqA4eLI59GkDEpKcg)已經部署了Selenium+chromedriver的開發環境，在真正的開發之前，還需要學會利用瀏覽器來查找網頁元素。
因為Selenium是通過程序來自動操控網頁的控件元素，比如單擊某個按鈕、輸入文本框內容等，若網頁中有多個同類型的元素，好比有多個按鈕，想要Selenium精准地單擊目標元素，需要將目標元素的具體信息告知Selenium，讓它根據這些信息在網頁上找到該元素並進行操控。
瀏覽器開發者工具部分講解
網頁的元素信息是通過瀏覽器的開發者工具來獲取。以Google Chrome為例，在瀏覽器上訪問
然后按快捷鍵F12打開Chrome的開發者工具（部分電腦要用 fn +12 ），如下圖
開發者工具以Web開發調試為主，如果只是獲取網頁元素信息，只需熟練掌握Elements標簽頁即可。Elements標簽頁允許從瀏覽器的角度查看頁面，也就是說，可以看到Chrome渲染頁面所需要的HTML、CSS和DOM（Document Object Model）對象，此外，還可以編輯內容更改頁面顯示效果，它一共分為兩部分，左邊是當前網頁的HTML內容，右邊是某個元素的CSS布局內容；查找元素信息以左邊的HTML內容為主。
#聲明為HTML5標准的文檔 <!DOTYPE html> #元素是html也沒的根元素 <html> #包含了文檔部分的元（meta）數據 <head> #提供主要頁面的元信息，主要是描述和關鍵詞 <meta charset="utf-8"> #元素描述了文檔的標題 <title>編程技術圈</title> </head> #元素包含了可見的頁面內容 <body> #定義一個一級（h1）標題 <h1>我的一級標題</h1> #定義一個段落（p標簽） <p>我的第一個段落</p> </body> </html>
整個HTML可分為兩部分：
（1）<head></head>是對網頁的描述、圖片和JavaScript的引用。<head>元素包含所有的頭部標簽元素。在<head>元素中可以插入腳本（scripts）、樣式文件（CSS）及各種meta信息。該區域可添加的元素標簽有<title>、<style>、<meta>、<link>、<script>、<noscript>和<base>。
（2）<body></body>是網頁信息的主要載體。該標簽下還可以包含很多類別的標簽，不同的標簽有不同的作用。每個標簽都是以<>開頭，以</>結尾，<>和</>之間的內容是標簽的值和屬性，每個標簽之間可以是相互獨立的，也可以是嵌套、層層遞進的關系。根據這兩個組成部分就能很容易地分析整個網頁的布局。其中，<body></body>是整個HTML的重點部分。
“主體”部分（Body）的使用方式，我們進行詳細分析，說明如下：
（1）<h1>、<div>和<h2>是互不相關的標簽，三個標簽之間是相互獨立的。
（2）<div>標簽和<div>里面的<p>標簽是嵌套關系，<p>的上一級標簽是<div>。
（3）<h1>和<p>是兩個毫無關系的標簽。
（4）<h2>標簽包含一個<p>標簽，<p>標簽再包含一個<a>標簽，一個標簽可以嵌套多個標簽。
除上述示例的標簽之外，大部分標簽都可以在<body></body>中使用，常用的標簽如下表：
大致了解了HTML的結構組成，接下來使用開發者工具來查找網頁元素。比如查找騰訊網的搜索框在HTML里所在的位置，我們可以單擊開發者工具的“小箭頭按鈕”按鈕，然后將鼠標移到網頁上的搜索框並單擊，最后在Elements標簽頁里自動顯示搜索框在HTML里的元素信息，具體操作如圖：
