突出重要性的强调语境:
strong 加粗
ins 下划线
em 倾斜
del 删除线
不常用:
b 加粗
u 下划线
i 倾斜
s 删除线
音、视频标签使用:
音频
属性:src 路径
controls 显示播放的控件
autoplay 自动播放(部分浏览器不支持)
loop 循环播放
muted 视频静音(需要跟autoplay一起使用)
超链接day02 列表 无序列表
列表的每一项前默认显示圆点标识
ul表示无序列表的整体,用于包裹li标签
li表示无序列表的每一项,用于包含每一行的内容
使用:
列表的每一项前默认显示有序号标识
ol表示有序列表的整体,用于包裹li标签
Li表示有序列表的每一项,用于包含每一行的内容
使用:
自定义列表
dl标识自定义列表的整体,用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的正队主题的每一项内容。 dd前会默认显示缩进
使用:
- 列表主题
- 内容
table表格整体,可用于包裹多个tr
tr 表格每行,可用于包裹td
td表格单元格,可用于包裹内容
table > tr > td
使用:
快速创建多个单元格:table > tr*3 > td*3
表格相关属性border 边框宽度
width 表格宽度
height 表格高度
使用:
caption 表格大标题。 表示表格整体大标题,默认在表格整体顶部居中位置显示
th 表头单元格。 表示一列小标题,通常用于第一行,默认内部文字加粗并居中显示
注意点:
caption标签书写在table标签内部
th标签书写在tr标签内部(用于替换td标签)
使用:
| 姓名 | 成绩 | 评语 |
|---|---|---|
| 张三 | 100分 | 真棒 |
thead 表格头部
tbody 表格主体
tfoot 表格底部
使用:
| 表格头部 | 表格主体 | 表格 |
|---|
合并单元格步骤:
1.明确合并哪几个单元格
2.通过左上原则,确定保留谁删除谁
上下合并---只保留最上的,其他删除
左右合并---只保留最左的,其他删除
3.给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)
表单标签张三 100分 //rowspan 垂直合并 2表示合并的数量真棒 张四 真棒,第二名 总结 69分 //colspan 水平合并
表单:
input系列标签input标签可以通过type属性值的不同,展示不同效果。
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框,用于输入单行文本 |
| password | 密码框,用于输入密码 | |
| radio | 单选框,用于多选一 | |
| checkbok | 多选框,用于多选多 | |
| file | 文件选择,用于之后上传文件 | |
| submit | 提交按钮,用于提交 | |
| reset | 重置按钮。用于重置 | |
| button | 普通按钮,默认无功能,之后配合js添加功能 |
占位符:placeholder
单选框:checked
name 分组。有相同name属性值的单选框为一组,一组同时只能有一个被选中
checked 默认选中
男 女
多选框:checkbox
checked 默认选中
上传文件:file
multiple 上传多个文件选择
按钮input:
submit 提交按钮。点击之后提交数据给后端服务器
reset 重置按钮。点击之后恢复表单默认值
button 普通按钮。默认无功能,之后配合js添加功能
value 给按钮添加文字
//提交按钮
//重置按钮
//普通按钮
button按钮
button标签时双标签,更便于包裹其他内容:文字、图片等
下拉菜单select
select 下拉菜单:提供多个选项的下拉菜单表单控件
select标签:下拉菜单的整体
option标签:下拉菜单的每一项
属性:selected:下拉菜单的默认选中
textarea文本域标签cols:规定了文本域内可见宽度
rows:规定了文本域内可见行数
注意:
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐使用CSS设置
label标签常用于绑定内容于表单标签的关系。
使用方法一:
使用label标签把内容(如:文本)包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
使用方法二:
直接使用label标签把内容(如:文本)和表单标签一起包裹起来
需要把label标签的for属性删除即可
//方法一: 性别: //方法二: 兴趣:语义化标签 没有语义的布局标签-div和span
实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签
div标签:一行只显示一个(独占一行)
span标签:一行可以显示多个
这是div标签 这是span标签有语义的布局标签
在HTML5 推出了一些有语义的布局标签开发者使用
| 标签名 | 语义 |
| header | 网页头部 |
| nav | 网页导航栏 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
| 显示结果 | 描述 | 实体名称 |
| 空格 | ||
| < | 小于号 | < |
| > | 大于号 | > |
| ¥ | 元 | ¥ |
| © | 版权 | © |



