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 + ⽅向键
高等数学2快速折叠
command + -/+
commannd + shift + -/+
快速新启⼀⾏
shift + enter
