html5——列表、表格
目录
列表
无序列表
有序列表
自定义列表
表格
基本结构
示例
表格的跨列
表格的跨行
列表
无序列表
<ul>【声明无序列表】
<li>河间驴肉火烧</li>【声明列表项】
<li>唐山棋子烧饼</li>
<li>邯郸豆沫</li>
<li>石家庄金毛狮子鱼</li>
</ul>
无序列表的特性：
- 没有顺序，每个<li>标签独占一行（块元素）
- 默认<li>标签项前面有个实心小圆点
- 一般用于无序类型的列表，如导航、侧边栏新闻、有规律 的图文组合模块等
有序列表
<ol>【声明有序列表】
<li>驴肉火烧</li>【声明列表项】
<li>京东煨肘子</li>
<li>牛肉罩饼</li>
<li>缸炉烧饼</li>
</ol>
有序列表的特性：
- 有顺序，每个<li>标签独占一行（块元素）
- 默认<li>标签项前面有顺序标记
- 一般用于排序类型的列表，如试卷、问卷选项等
自定义列表
<dl>【声明定义列表】
<dt>水果</dt>【声明列表项】
<dd>苹果</dd>【定义列表项内容】
<dd>桃子</dd>
<dd>李子</dd>
</dl>
定义列表的特性：
- 没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
- 默认没有标记
- 一般用于一个标题下有一个或多个列表项的情况
表格
基本结构
- 单元格
- 行
- 列
示例
<table>【表格标签】
<tr>【行标签】
<th>1行1列的标题</th>【单元格标题标签】
<th>1行2列的标题</th>
</tr>
<tr>
<td>1行1列的单元格</td>【单元格标签】
<td>1行2列的单元格</td>
</tr>
</table>
表格的跨列
<table>
<tr>
<td colspan="2">学生成绩</td>【所跨的列数】
</tr>
<tr>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
</table>
表格的跨行
<table >
<tr>
<td rowspan="n"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
