html列表表单实现商品分类,## HTML基础-列表标签/表格标签

## 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