5、HTML 学习记录——图像、表格、列表

在补HTML相关知识的时候,忘记说明了,这一系列的前端知识,只是为了让自己对前端认识更深刻,以方便UI 自动化测试,所以在学习时也只是涉及自动化相关的知识点,不适合前端开发人员来看。


本节学习图像、表格和列表元素

一、图像

<img src="storm.jpg" alt="Storm"/>
1、图像元素使用<img>标签

2、src 属性,用来指定要显示的图片的位置,如果找不到则会显示一个破碎的图片(假如不设置alt属性)

3、假如设置了alt属性,src指定的图片能找到则显示图片,不能找到则显示alt属性值


二、表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table id="table" border="1">
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>three</td>
        <td>four</td>
    </tr>
</table>
1、border属性定义了表格的边框

2、表格的结构很有特色,适合循环读取和使用,我们用selenium来打印下表格内容。

eles  = driver.find_elements_by_tag_name('td')
for ele in eles:
    print(ele.text)
3、带表头的表格

<table border="1">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>one</td>
        <td>two</td>
    </tr>
    <tr>
        <td>three</td>
        <td>four</td>
    </tr>
</table>



四、列表

1、无序列表 unordered list  —— <ul>

<ul>
    <li>apple</li>
    <li>pear</li>
    <li>banana</li>
</ul>


2、有序列表  ordered list ——<ol>

<ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ol>


3、自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>



4、selenium 操作列表

打印有序和无序列表的文本,如下:

eles  = driver.find_elements_by_tag_name('li')
for ele in eles:
    print(ele.text)

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页