html5之列表

Posted 2021-04-04 UnKnown team

列表

什么是列表？列表是信息的一种展现形式，它可以使信息结构化和条例化，方便游览者快捷的获得相应信息

 

无序列表及其作用

<ul>

<li>第1项</li>

<li>第2项</li>

<li>第3项</li>

</ul>

遵循w3c标准，<ul>标签里面只能嵌套<li>标签，不能嵌套其他标签

<li>标签里面可以嵌套任意标签

无序列表的特点

a) 没有顺序，每个<li>标签独占一行(快元素)

b) 默认<li>标签项前面有个实心小圆点

c) 一般用于无序类型的列表，如：导航，侧边新闻

 

有序列表及其作用

<ol>

<li>第1项</li>

<li>第2项</li>

<li>第3项</li>

</ol>

有序列表的特点

1. 有顺序，每个<li>标签独占一行(快元素)

2. 默认<li>标签项前面有顺序标记

3. 一般用于排序类型的列表，如试卷，百度热搜

 

定义列表及其作用

<dl>

<dt>被解释项</dt>

<dd>对dt内容进行解释说明</dd>

<dd>对dt内容进行解释说明</dd>

</dl>

定义列表的特点

1. 没有顺序，每个<dt><dd>标签独占一行（块元素）

2. 默认没有标记

3. 一般用于（一个标题下有多个列表项）的情况

 

表格

为什么使用表格？

1. 简单通用

2. 结构稳定

<table>

<tr>

<td>第一行第1列</td>

<td>第一行第2列</td>

<td>第一行第3列</td>

</tr>

<tr>

<td>第二行第1列</td>

<td>第二行第2列</td>

<td>第二行第3列</td>

</tr>

</table>

<tr></tr>代表行

<td></td>代表单元格

colspan跨列

rowspan跨行

大家可以尝试自己编写代码，看看不同的效果