列表
列表分为无序列表、有序列表、自定义列表。
无序列表
- 三星
- 华为
- 苹果
样式
作用
给文本添加无序列表语义。
- ul: unordered list 无序列表,是容器标签。
- li: list item 列表项 列表的每一项,你可以想像成cell,是容器标签。
- ul 里面只能放li,这是规范,他俩是成对出现的。
快捷键
有嵌套关系的快捷键,例如
你除了手动一个一个写,你还可以这么写
ul>li*4输入完立马按Tab键,会出来4个li
* count,count是几,就出来几个li
你输入4就出来4个li,你要是输入8,就出来8个li
注意
li是容器级标签,里面可以书写任何内容,也可以放ul-->li标签。
ul也是容器级标签,但是只能放li标签。
有序列表
作用
给文本添加有序列表语义,每一项之间有顺序之分。
- ol:ordered list,有序列表。
- li: list item 列表项 列表的每一项,你可以想像成cell。
-
ol和li同时出现,也是一组标签。
代码
- 张三
- 李四
- 王武
- 陈六
样式
快捷键
ol>li*4输入完立马按Tab键,会出来4个li
- 张三
- 李四
- 王武
- 陈六
注意
ol里面也只能写li,也是容器级标签
li是容器级标签,里面可以书写任何内容,也可以放ol-->li标签。
自定义列表
有序、无序列表设置2个标签,而自定义列表设计三个标签,分别是dt、dl、dd。
作用
给文本添加自定义语义。
- dl:definition list 自定义列表
- dt:definition title 自定义列表的标题
- dd:definition description 标题的描述
3个标签使用
- 三星
- 三星是一个韩国超级巨无霸
- 苹果
- 苹果是一个美国超级科技公司
- 华为
- 华为是中国一个品牌
效果图
dl里面只能写dt和dd,dt和dd是同一级.
快捷书写
count = 4
dl>(dt+dd*count) + tab键
dl>(dt+dd*4) + tab键
出来的效果
会出来一个dt和4个dd
dd可以写，也可以不写,不写意味着没有说明。
可以书写一组或者是多组的dt和dd,dl和dt或者是dd是嵌套关系,dt和dd是同级关系,dd是对dt的描述。
dd可以写，也可以不写,不写意味着没有说明。
表格
table:表格
tr:行 table row
td:单元格 table dock；
table嵌套tr,tr嵌套td
标签里面书写书写格式是 key="value"
三行三列 一个表格
第一行第一个单元格
第一行第二个单元格
第一行第三个单元格
第二行第一个单元格
第二行第二个单元格
第二行第三个单元格
第三行第一个单元格
第三行第二个单元格
第三行第三个单元格
border是边框宽度
样式
如果表格中有表头概念，只需要讲td换成th。
th:表头 thead
表头自带文字加粗和居中的效果
代码
Document
名字
年龄
性别
张三
40
男
李四
30
男
上面的type是给表头和单元格设置宽度。
样式
单元格的合并
使用一个属性：td或者th标签有一个属性，可以用于单元格的一个合并，合并分跨行和跨列合并。
先看下什么是跨行和跨列合并？
属性:rowspan 是跨行合并。
属性:colspan 是跨列合并 。
属性值直接书写数字就可以，合并几个单元格就写几，合并的时候以最多的最全的哪一行为准。
要绘制的图形
代码
Document
1
2
3
4
5
6
7
8
9
10
11
12
13
首先样式分析
第一列为5个，最全的。
第二列6 占了2行，7占了2列，8和9没占
第三列只有一个10 占了4列 跟第一列相比
第四列11正常，12占了2列，13占了2列。
再练习一个
代码
1
2
3
4
5
6
7
8
9
首先样式分析
第一列为3个，1占2行。
第二列4正常，5占了2列，6占了2行
第三列7、8、9正常，因为中间的被5占了，所以不用写空的td。
三个划分区域的标签在table里面
caption：表格标题，大表格有一个标题
thead：表格表头 th (tr>th)
tbody：表格主题 你不写也会自己加上。
学院信息表
姓名
年龄
性别
小明
20
男
小红
30
女
小崔
18
女
样式
红色的是表格标题
黄色的是表格表头
绿色的是表格主题