HTML学习笔记五 列表标签+表格标签

写在前面

特此声明，本系列学习笔记内容来源于网络，为加深记忆所做的笔记，内容相当于转载自他处，转载来源为 极客江南的博客

列表标签

给一系列数据定义列表语义，HTML中有三种标签，分别是

• 无序列表（unordered list）
• 有序列表（ordered list）
• 定义列表（definfition list）

无序列表

• 顾名思义，给一堆数据添加列表语义，且数据无先后顺序之分
• 格式：

<ul>
    <li>
        "内容"
    </li>
</ul>

• 注：ul标签和li都是一起出现的，不会单独出现其中一个，都是结合起来出现的。另外，ul标签中一般只出现li标签而不出现其他标签，而在企业级开发中，可以在li标签内添加其它标签来丰富语义

• 应用场景：

• • 新闻界面
• • 商品列表
• • 导航条

有序列表

• 与无序列表相对应，给一堆数据添加列表语义，且数据有先后顺序之分

• 格式：

<ol>
    <li>
        "内容"
    </li>
</ol>

• 用法/应用场景和ul差不多，但是有序列表用的在三种列表标签最少，因为用有序列表能做的，无序列表都能做

定义标签

• 格式：

<dl>
    <dt>title</dt>
    <dd>This is my description</dd>

    <dt></dt>
    <dd></dd>
</dl>

• 解释：dt 意思是 definition title，用来定义标签标题；dedinition description，用来定义标题对应的描述。
• 应用：图文混排

表格标签

• 用来给一堆数据添加表格语义，表格方式在数据量很大时，是一种很有效、很清晰的表达方式
• 过去表格标签用得非常多，绝大多数网站都是用表格标签来制作的（如今被div+css所取代）
• 格式：

<table>
    <caption>
        <!--用于设置表格标题的标签-->
        <h2>这是表格标题</h2>
    </caption>
    <tr>
        <td></td>
    </tr>
</table>

• 格式解析：tr表示一行，td表示一行中的一个单元格

• 表格标签有一个边框（border）属性，其决定边框宽度，这个属性值默认为0，故默认看不到边框

• th标签，专门存储每一列的标题的标签，其内文字自动加粗、居中

• 相关属性

• • width和height属性，设置宽高，可同时给table和td标签使用
• • align属性，水平对齐方式，可同时给table和tr和td标签使用
• • valign属性，垂直对齐方式，只能给tr和td标签使用
• • 还有其他修改样式的属性，但由于企业级开发修改主要用css来实现，故此不再赘述
• 细线表格的实现（了解）

<!--cellspacing表示内边距，默认值为2px-->
<table bgcolor="black" cellspacing="1px">
    <tr bgcolor="white">
        <td>一一</td>
        <td>一二</td>
    </tr>
    <tr bgcolor="white">
        <td>二一</td>
        <td>二二</td>
    </tr>
</table>

单元格合并

• 水平方向合并：给一个单元格td标签添加colspan属性，另属性值为n，则可把该单元格当做n个单元格合并成的一表格使用
• 格式：

<td colspan="2"></td>

• 注1：因为将 一个当做了n个，格式会发生变化，故需删除当行的n-1个单元格，可实测。

• 垂直方向合并：与水平方式类似

• 格式

<td rowspan="2"></td>