无序列表

注意点: 虽然通过标签属性也能修改样式,但是在企业开发中千万不要这么干

前面我们说过ul中最好只放li标签,但是在企业开发中,li标签中的内容可能会很复杂,所以我们可以继续在li标签中添加其他的标签来丰富我的界面

总结:

一定要记住ul标签中最好只放li标签
但是li标签中还可以继续放其他的标签

无序列表中li标签中除了可以添加其他标签来丰富我们的界面以外,还可以说ul中有li,li中又可以有ul

在webstorm中如何快速编写一个ul的格式:

ul>li

含义:生成一对ul标签,然后在这对ul标签中再生成一对li标签

ul>li*3

含义:生成一对ul标签,然后在这对ul标签中再生成3对li标签

有序列表

什么是有序列表?

有序列表的作用:给一堆数据添加列表语义,并且这一堆数据中所有的数据都有先后之分

有序列表格式: < ol > < li >< /li > < /ol >

其他用法和ul都差不多,也就是应用场景/注意点都和ul差不多

定义列表

1. 定义列表的作用:

给一堆数据添加列表语义
先通过dt标签定义列表中的所有标题,然后再通过dd标签给每个标签添加描述信息

2. 定义列表的格式: dl>dt+dd*2

< dl >
```
  < dt >< /dt >
```
```
  < dd >< /dd >
```
```
  < dt >< /dt >
```
```
  < dd >< /dd >
```
< /dl >

其实dt和dd都是英文的缩写 dt是英文definition title的缩写,所以dt的含义就是用来定义列表中的标题definition description的缩写,所以dd的含义就是用来定义标题对应的描述的.dd是英文

3. 定义列表的应用场景

做网站尾部的相关信息
做图文混排

4. 定义列表的注意点:

和ul/ol一样,dl和dt/dd是一个整体,所以他们一般情况下不会单独出现,都是一起出现
和ul/ol一样,dl和dt/dd是一个组合标签,所以dl中建议只放dt和dd标签
一个dt可以没有对应的dd,也可以有多个对应的dd,但是无论有或者没有dd都不推荐使用
推荐使用一个dt对应一个dd
和li标签一样,当需要丰富界面时,我们可以在dt和dd标签中继续添加其他标签

表格标签的基本使用

1. 什么是表格标签?

表格标签的作用: 用来给一堆数据添加表格语义
其实表格是一种数据的展现形式,当数据量非常大的时候,表格这种展现形式被认为是最清晰的一种展现形式

2. 表格标签格式:

< table >
```
 < tr >
```

      < td >需要显示的内容< /td >

```
 < /tr >
```
< /table >
其实表格标签中的table代表整个表格,也就是一堆table标签就是一个表格
其实表格标签中的tr标签代表整个表格中的一行数据.也就是说一对tr标签就是表格中的一行
其实表格标签中的td标签代表表格中的一行中的一个单元格.也就是说一对td标签就是一行中的一个单元格

3. 注意点:

表格标签有一个边框属性,这个属性决定了边框的宽度.默认情况下这个属性的值是0,所以看不到边框
表格标签和列表标签一样,它是一个组合标签,所以table/tr/td要么一起出现,要么一起不出现,不会单个出现

表格标签的属性

1. 宽度和高度的属性 可以给table标签和td标签使用

表格的宽度和高度默认是按照内容的尺寸来调整的,也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
如果给td标签设置width/height属性,会修改当前单元格的宽度和高度,不会影响整个表格的宽度和高度

2. 水平对齐和垂直对齐的属性 其中水平对齐可以给table标签和tr标签和td标签使用,垂直对齐只能给tr标签和td标签使用

给table标签设置align属性,可以控制表格在水平方向的对齐方式
给tr标签设置align属性,可以控制当前行中所有单元格内容的水平方向的对齐方式
给td标签设置align属性,可以控制当前单元格中内容水平方向的对齐方式
给tr标签设置valign属性,可以控制当前行中所有单元格中内容的垂直方向的对齐方式
给td标签设置valign属性,可以控制当前单元格中内容在垂直方向的对齐方式

注意点: 如果td中设置了valign属性,tr中也设置了valign属性,那么单元格中的内容会按照td中设置的来对齐

3. 外边距和内边距的属性 只能给table标签使用

外边距就是单元格和单元格之间的距离,我们称之为外边距.默认情况下单元格和单元格之间的外边距的距离是2px
内边距就是单元格的边框和文字之间的间隙,我们称之为内边距,默认情况下内边距是1

注意: 以上内容仅仅作为了解,以后企业开发中所以控制样式的都是通过CSS

细线表格

在表格标签中想通过指定外边距为0来实现细线表格是不靠谱的,其实它是将2条线合并为了一条线,所以看上去很不舒服

细线表格的制作方式:

给table标签设置bgcolor
给tr标签设置bgcolor
给table标签设置cellspacing="1px"

注意点: table标签和tr标签以及td标签都支持bgcolor属性,但是以上内容仅仅作为了解,因为样式以后都是通过css来控制的

表格中的其他标签

1. 表格标签: 在表格标签中提供了一个标签专门用来设置表格的标题,这个标签叫做caption,只要将标签写在caption标签中,那么标题就会自动相对于表格的宽度居中

2. caption标签的注意点:

caption一定要写在table标签中,否则无效
caption一定要紧跟在table标签后面

3. 标题单元格标签 在表格标签中提供了一个标签专门用来存储每一列的标题,这个标签叫做th标签,只要将当前列的标题存储在这个标签中就会自动居中+加粗文字

到此为止我们就发现,其实表格中有两种单元格,一种是td,一种是th.td是专门用来存储数据的,th是专门用来存储当前列的标题的

第五天学习