一篇我們介紹了前端的HTML認識。

今天我們來聊聊，html的一些常用元素:

前端開發中，有很多個元素，我們挑一些使用頻率最高，使用次數最多的元素，跟大家分享一下。

div元素：通常用來對頁面布局搭建及元素分組的一個塊元素

<div class="layout-wrap">
        <div class="top">
            頂部
        </div>
        <div class="left">
            左側
        </div>
        <div class="right">
            <div class="right-top">右側頂部</div>
            <div class="right-bottom">右側底部</div>
        </div>
    </div>

上述代碼，再加上css樣式即可搭建出自己想要的布局：

p元素：段落標簽，用來展示一段文本

    <p>人生就像一場單程的旅行，即使有些遺憾，我們也沒有從頭再來的機會，與其糾結無法改變的過去不如微笑著珍惜未來。因為生活，沒有如果</p>

span元素：組合文本的行內元素，用來組合的行內元素

<p><span>人生</span>就像一場單程的旅行，即使有些遺憾，我們也<span>沒有從頭再來的機會</span>，與其糾結無法改變的過去不如微笑著<span>珍惜未來</span>。因為生活，沒有如果</p>

img元素：圖片元素，用于在頁面中展示圖片

<img src="https:///www.superwbs.com/superwbs-server/upload/6O95pvqNqC20XhGz9WfqFrC2.png" alt="" srcset="">

input元素：簡單的表單元素，標簽用于搜集用戶信息

<input type="text" placeholder="用戶名">
    <input type="password" placeholder="密碼">
    <input type="button" value="提交">

table元素：簡單的表格元素，用來展示表格

<table border="1" width="100%">
        <tr>
            <th>姓名</th>
            <th>性別</th>
        </tr>
        <tr>
            <td>小成</td>
            <td>男</td>
        </tr>
    </table>

（本期完）

小成講前端---本系列將隔天不定時更新

歡迎點贊，關注我！！

位一組元素

　　前面文章中介紹過8中定位方法，這8中定位方法針對單個元素定位的，WebDriver還提供了與之對應的8中用于定位一組元素的方法。

代碼如下：

定位一組元素的方法與定位單個元素的方法類似，唯一的區別是在單詞element后面多了一個s表示復數。定位一組元素一般用于以下場景：

　　* 批量操作元素，例如勾選頁面上所有的復選框。

　　* 先獲取一組元素，再從這組對象中過濾出需要操作的元素。例如定位出頁面上所有的CheckBox，然后選擇其中的一個進行操作。

代碼如下：

這里我自己使用HTML寫了一個CheckBox復選框，關于HTML這里就不多介紹了。

結果如下：

前面提到，通過tag name的定位方式很難定位到單個元素，因為元素標簽名重名的概率很高，因而在定位一組元素時，這種方式就派上用場了。在上面的例子中先通過find_elements_by_tag_name()找到一組標簽名為input的元素。然后通過for循環進行遍歷，在遍歷過程中，通過get_attribute()方法獲取元素的type屬性是否為CheckBox，如果為CheckBox，就認為這個元素是一個復選框，對其進行勾選操作。

　　需要注意的是，在上面的例子中，通過瀏覽器打開的是一個本地的html文件，所以需要get本地文件的絕對路徑。

　　除此之外，我們還可以使用XPath或CSS來直接判斷屬性值，從而進行單擊操作

代碼如下：

結果如下：

通過XPath或CSS來查找一組元素時，省去了判斷的步驟。因為定位方法已經做了判斷，只需要循環對這一組元素進行勾選即可。

　　除此之外，例子中還用到了python所提供的兩個有趣的方法。Len()方法可以用來計算元素的個數，pop()方法用于獲取列表中的一個元素(默認最后一個元素)，并且返回該元素的值。因為前面的循環已經將所有的復選框都勾選上了，再對這一組元素執行pop().click()，其實是對最后一個元素取消勾選。

如果只想勾選一組元素中的某一個該如何操作呢？

　　pop()或pop(-1) 默認獲取一組元素中的最后一個。

　　pop(0) 默認獲取一組元素中的第一個。

　　pop(1) 默認獲取一組元素中的第二個。

　　......

　　這樣就可以操作這一組元素中的任意一個元素了，只需要數一數需要操作的元素是這一組中的第幾個。