一篇我们介绍了前端的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) 默认获取一组元素中的第二个。

　　......

　　这样就可以操作这一组元素中的任意一个元素了，只需要数一数需要操作的元素是这一组中的第几个。