无序列表
标签组成:
标签名 | 说明 |
ul | 表示无序列表的整体 |
li | 表示无序列表的每一项,用于包含每一行的内容 |
显示特点:列表的每一项前默认显示圆点标识
注意点:ul标签中只允许包含li标签;li标签可以包含任意内容
有序列表
标签组成:
标签名 | 说明 |
ol | 表示有序列表的整体,用于包裹li标签 |
li | 表示有序列表的每一项,用于包含每一行的内容 |
显示特点:列表的每一项前默认显示序号标识
注意点:ol标签中只允许包含li标签 li标签可以包含任意内容
自定义列表
标签组成:
标签名 | 说明 |
dl | 表示自定义列表的整体,用于包裹dt/dd标签 |
dt | 表示自定义列表的主体 |
dd | 表示自定义列表的针对主题的每一项内容 |
显示特点:dd前会默认显示缩进效果
注意点:dl标签中只允许包含dt/dd标签 dt/dd标签可以包含任意内容
表格标签
基本标签:
标签名 | 说明 |
table | 表格整体,可用于包裹多个tr |
tr | 表格每行,可用于包裹td |
td | 表格单元格,可用于包裹内容 |
注意点:标签的嵌套关系:table>tr>td
表格相关属性
属性名 | 属性值 | 效果 |
border | 数字 | 边框宽度 |
width | 数字 | 表格宽度 |
height | 数字 | 表格高度 |
注意点:实际开发时针对于样式效果推荐用CSS设置
表格标题和表头单元格标签
标签名 | 名称 | 说明 |
caption | 表格大标题 | 表示表格整体大标题,默认在表格整体顶部居中位置显示 |
th | 表头单元格 | 表示一列小标题1,用常用于表格第一行默认内部文字加粗并居中显示 |
注意点:caption标签写在table内部 th标签书写在tr标签内部(用于替换td标签)
表格的结构标签:
标签名 | 名称 |
thead | 表格头部 |
tbody | 表格主体 |
tfoot | 表格底部 |
注意点:表格结构标签内部用于包裹tr标签 表格的结构标签可以省略
表格——合并单元格
合并单元格步骤:
- 明确合并哪几个单元格
- 通过左上原则,确定保留谁,删除谁
上下合并——只保留最上的,删除其他
左右合并——只保留最左的,删除其他
- 给保留的单元格设置:跨行合并(rowspan)、跨列合并(colspan)
属性名 | 属性值 | 说明 |
rowspan | 合并单元柜的个数 | 跨行合并,将多行的单元格垂直合并 |
colspan | 合并单元柜的个数 | 跨列合并,将多行的单元格水平合并 |
注意点:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨thead、tbody、tfoot)