5 表格 + 别表 + 表单
知识梳理
li 和 td 都是容器 放什么元素都是可以的
一 表格
知识梳理
1 作用:让数据整齐规范的显示
2 表格由行中的单元格组成
3 表格中没有列元素,列的个数取决于单元格的个数
4 表格不要纠结外观 那是css的事情
1)表格属性
<table border="1" //表格边框 width="500" height="200" align="center" //表格在网页中的水平对齐方式 left center right cellspacing="0" //单元格与单元格之间的空白距离 cellpadding="20"> //单元格内容与边框之间的空白距离
2)表格标题
<caption>个人信息表</caption> caption必须紧随table标签之后,这个标签只有在表格中才有效
3)表头单元格 th
th会让里面的文字居中加粗显示
<tr>
<th>姓名</th>
</tr>
4)合并单元格
//1 合并的两种方式 跨行合并 [垂直合并] rowspan = "合并单元格的个数"; 跨列合并 [水平合并] colspan = "合并单元格的个数"; //2 合并的顺序 先上后下 先左后右 通过顺序找到目标单元格 //3 合并三部曲 . 先确定是跨行还是跨列合并 . 根据合并顺序的原则找到目标单元格 写上合并方式和要合并的数量 . 删除多余的单元格
5)表格划分结构
表头 <thead><tr></tr></thead> //必须要有行标签 主体 <tbody></tbody> 教主 tfoot
二 列表
概念:容器里装载着结构、样式一致的文字或图表,就是列表
作用:用来布局 非常的整齐和自由,整齐 整洁 有序
1)无序列表 ul [ 重点 ]
1 各个列表项之间没有顺序级别之分 是并列的
2 <li></li>之间相当于一个容器,可以容纳所有元素
3 无须列表会带有自己的样式,可以用css修改掉
4 <ul></ul>中间只能写<li></li> 不能有其他标签和文字
有两个属性 都不推荐使用 推荐用css重写
type属性: 实心小圆点disc 空心小圆点circle 小方块 square
compact 任何主流浏览器都不支持 compact 属性。
2)有序列表 ol
<ol type = "a">
<li>北京</li>
<li>朝阳区</li>
<li>顺义区</li>
</ol>
type的可选值: 1 A a I i
3)自定义列表 dl
<dl>
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
<dl>
<dt>定义列表中的项目</dt>
<dd>描述列表中的项目1</dd>
<dd>描述列表中的项目2</dd>
</dl>
使用场景
![](https://img2020.cnblogs.com/blog/1727725/202101/1727725-20210118120257847-175979412.png)