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>

使用场景