## HTML基础-列表标签/表格标签
# 列表标签(无序列表/有序列表/定义列表)
# 表格标签
# 单元格合并
1.什么是列表标签
列表标签的作用:给一堆数据添加列表语义,也就是告诉搜索引擎高速浏览器这一堆数据是一个整体
2.HTML中列表标签的分类
-无序列表(最多)(unordered list)
-有序列表(最少)(ordered list)
-定义列表(其次)(definition list)
无序列表的作用:
给一堆数据添加列表语义,并且这一堆数据中所有的数据没有先后之分
无序列表格式:
需要显示的条目内容
li是list item的缩写
list是列表的意思
item是条目的意思
结合起来就是列表条目的意思
注意点:
-ul标签是用来给一堆数据添加列表语义的,而不是给列表添加小圆点的
-ul标签和li标签是一个整体,是一个组合.所以一般情况下不会单独出现
-由于ul标签和li标签是一个组合,所以ul标签中不推荐出现其他标签;但是li标签中可以放其他标签
无序标签应用场景:
-新闻列表
-商品列表
-导航条
注意点:
虽然通过标签属性也能修改样式,但是企业开发中不推荐这样做
在webstrom中如何快速编写一个ul的格式
ul>li*
或者
ul>li*数量
ul>li*2>h2+ul>li*3
定义列表的格式:
dt是英文definition title的缩写,所以dt的含义就是用来定义列表
dd是标题definition description的缩写,所以dd的含义就是来定义标题对应的描述的
先通过dt标签定义列表中的所有标题,然后
定义列表的应用
-网站底部的相关信息
-图文混排
定义列表的注意点:
-dl和ul/ol一样,dl和dt/dd是一个整体,所以他们一般情况下不会单独出现,都是一起出现
-和ul.ol一样,由于dt/dd是一个组合标签,所以dl中建议只放dt和dd标签
-一个dt可以没有对应的dd标签,也可以有多个对应的dd标签,但是一般推荐一个dt对应一个dd标签
-和li标签一样,为了丰富内容,可以在dd/dt中添加其他标签
定义列表练习(了解)
什么是表格标签?
表格标签作用:用来给一堆数据添加表格语义
表格标签格式:
需要显示的内容
需要显示的内容
-表格标签中的table表示整个表格,也就是一堆table标签就是一个表格
-表格标签中的tr标签代表整个表格中的一行数据,也就是说一对tr标签代表表格中的一行数据
-表格标签中的td标签代表表格中一行中的一个单元格,也就是说一对td标签就是一行中的一个单元格
注意点:
-表格标签有一个边框属性,这个属性决定了边框的宽度.
-默认情况下这个属性的值是0,所以看不到边框
-表格标签和列表标签一样,table/tr/td一般是同时出现
td:table datacell
tr:table dataroll
表格标签的属性:
1.高度和宽度的属性
-可以给table标签和td标签使用
1.1表格的宽度和高度是根据内容的尺寸来调整的,也可以通过设置width/height属性手动指定
1.2如果给td标签设置width/height属性,会修改当前单元格的宽度高度,不会影响整个表格的宽度和高度
2.水平对齐和垂直对齐
-水平对其可以给table标签和tr标签和td标签使用
-垂直对齐只能给tr标签和td标签使用
2.1给table标签设置align属性,可以控制表格在水平方向的对齐方式
2.2给tr标签设置align属性,可以控制当前行中所有单元格内容的水平方向的对齐方式
注意点:如果td中设置了align属性,tr中也设置了align属性,那么单元格中会按照td中的设置来对齐
2.3给tr标签设置valign属性,可以控制当前行中所有单元格在垂直方向的对齐方式
2.4给td标签设置valign属性,可以控制当前单元格在垂直方向的对齐方式
注意点:如果td中设置了valign属性,tr中也设置了valign属性,那么单元格中会按照td中的设置来对齐
3.外边距和内边距属性
-只能给table标签使用
默认情况下两个单元格之间的外边距cellspacing是2
默认情况下单元格内内边距cellpadding为1
如何制作一个细线表格?
-在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的,其实它是把两条线合并成一条线(正确做法 table bgcolor=“black” cellspacing=“1px” 然后tr bgcolor=“white”)
以上讲解内容都作为了解,以后这些都是使用css来设置
-在表格标题中提供了一个标签专门用来设置表格的标题,这个标签叫做caption标签
caption标签的注意点:
caption标签一定要写在table标签中,否则无效
caption标签一定要紧跟在table标签后面
-在表格标签中提供了一个标签专门用来存储每一列的标题
只要将内容设置为标题单元格,那么会自动将内容设置为居中+加粗
表格的结构
由于表格中存储的数据比较复杂,为了方便管理和阅读以及提升语义,我们可以对表格中存储的数据进行分类
1.表格的标题
2.表格的表头信息
3.表格的主体信息
4.表格的页尾信息
caption作用:指定表格的标题
thead:指定表格的表头信息
tbody:指定表格的主体信息
tfoot:指定表格的附加信息
注意点:
1.如果我们没有编写tbody,系统会给我们添加tbody
2.如果指定了表格的高度,不会改变tbody和tfoot的高度
单元格合并
colspan=“2”
水平方向上的单元格合并
-可以给td标签添加一个colspan属性,来指定某一个单元格当做多个单元格来看待
例如:
含义:把当前单元格当做两个单元格来看待
注意点:
1.由于把某个单元格当做两个单元格,所以会多出一个单元格,所以需要删掉一个单元格
2.向右或者向下合并
垂直方向上的单元格合并
-可以给td标签设置一个rowspan属性,来制定把某一个单元格当做多个单元格来看待(垂直方向)
例如:
含义:把当前单元格当做两个单元和看待
1.由于把某个单元格当做两个单元格,所以会多出一个单元格,所以需要删掉下一行的一个单元格
2.向右或者向下合并
快速移动选中的代码
command + control + 方向键
快速折叠
command + -/+
commannd + shift + -/+
快速新启一行
shift + enter
