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)