列表标签
作用:
给一堆数据声明列表语义,告诉浏览器这一堆数据是一个整体。
分类:无序列表unordered list、有序列表ordered list、定义列表
无序列表
1、用的最多
2、数据没有先后之分
<ul>
<li>list Item</li>
</ul>
注意:
1、ul中一般只放li,但是li中可以包含其他的标签,li中可以有a,h,p,ul等
如何快速编写ul的格式:
e.g.:
1、ul>liN,按回车/tab
2、ul>li3>h2+p+ul>li2>a;按回车或者tab
有序列表
1、和ul一样
2、更改type可以改变123,还是abc等排序方式
定义列表
<dl>
<dt>definition title 定义的标题,比如:北京</dt>
<dd>definition descript 定义的描述,比如:中国的首都</dd>
</dl>
作用:
1、给一堆数据添加语义
2、通过dt添加标题,dd是添加说明
3、用途:可用于网站底部的说明栏、图文混排等
注意点:
1、和ol、ul一样是整体,不会单独出现
2、和ol,ul一样,dl中只放dd和dt
3、一个dt也可以有[0,N]dd;但是一般一对一,如果需要有很多dd时,可以在dd中添加其他标签,比如div
表格标签
<table></table>
作用:
1、给一堆数据添加表格语义
2、是一种数据展示,当数据量大的时候,表格这种展示形式更容易清晰展示
格式:
<table>
<tr>
//行
<td>某行中的一个格子</td>
</tr>
</table>
注意点:
1、边框属性 border
2、table和tr、td一起出现
属性
1、宽度、高度属性
1,1、默认是根据内容撑起的
1,2、可以给table和td使用,tr不适用,同时给table和td指定宽高,就近原则
2、水平、垂直属性
水平对齐-align:table和tr和td都适用;同时给table和和tr、td指定align,就近原则
垂直对齐--valign:只能给tr和td使用
3、外边距、内边距
只能给table使用。
外边距-cellspacing:单元格和单元格之间的间距
内边距:单元格和文字之间的间距
细线表格
1、table-backgroundColor=black
2、tr=backgroundColor=white
3、cellSpacing=1
表格的其他标签
1、<caption>表格的标题</caption>
注意:
(1)、caption写在table内才会相对表格居中
2、th-存放标题-放到第一行tr中,自带表头居中加粗
表格的结构
table-->caption+thead+tbody+tfoot
单元格的合并
1、水平方向上的合并:给td标签添加属性-- colspan=“2”
2、垂直方向上的合并:给td标签添加属性-- rowspan=“2”