DAY01
web标准分为：
结构（html）页面元素
表现（css）页面样式
行为（javascript）页面交互
HTML ：超文本标记语言
通过html标签对网页进行描述
HTML骨架结构
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题
VSCode的基本快捷键：
快速生成标签：英文 + tab
保存文件：ctrl + s
快速查看网页效果：快捷键：alt + b
注意：必须安装了open in browser 插件
快速生成结构标签：! + tab
注意1： !必须是英文的，中文!无效
注意2：必须保证当前文件后缀名是.html，否则无效
注释的快捷键： 在VS Code中：ctrl + /
选择同一行相同快捷键：crtl+d
撤回：ctrl + Z
撤销撤回的操作：ctrl + Y
相应标签：
标题标签：h 又大又粗又霸道（独占一行）
段落标签：p 段落存在间隙独占一行
换行标签：br（单标签）强制换行br后就加/再tab
或者前后都有空格也可
水平线标签：hr（单标签）
文本格式化标签：
加粗 b strong
下划线 u ins
倾斜 i em
删除线 s del
图片标签：img（单标签）
当前文件：html网页
目标文件：要找的图片
敲./会提示同级目录 下级目录的文件和文件夹 层层筛选即可
敲../会提示上级目录的文件 筛选即可
图片标签：img（单标签）
音频标签：audio
视频标签：video
属性：
src：路径
src：音频路径
controls：控件
autoplay：自动播放
loop：循环播放
链接标签：a
href属性：点击之后跳转去哪一个网页
target属性：目标网页的打开形式
属性值：_self（默认值） 覆盖原网页
_blank 保留原网页
DAY02
无序列表：在网页中表示一组无顺序之分的列表
标签：（浏览器默认在每一项前生成小圆点）
ul：表示无序列表的整体，只允许包裹li标签
li：表示无序列表的每一项，可以包裹任何内容
有序列表：在网页中表示一组有顺序之分的列表
标签：（浏览器默认在每一项前生成序号标识）
ol：表示有序列表的整体，只允许包裹li标签
li：表示有序列表的每一项，可以包裹任何内容
父子关系快捷键：（标签数量>子标签数量）*数量
自定义列表：在网页的底部导航中通常会使用自定义列表实现
标签：
dl：表示自定义列表的整体，只允许包裹dt/dl
dt：表示自定义列表的主题
dd：表示针对主题的每一项内容（dd前会默认显示缩进效果）
表格标签：
table：表格整体，包裹多个tr
tr：表格每行，包裹td
td：表格单元格，包裹内容
嵌套关系：table>tr>td
相关属性：属性值均为数字
border：边框宽度
width：表格宽度
height：表格高度
表格标题和表头单元格标签：
caption：表示表格整体大标题，默认在表格顶部居中（但是不加粗）
th：表示表头单元格，通常第一行，加粗居中
注意点：
caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
表格结构标签：突出头部主题底部，更加清晰
thead：头部
tbody：主体
tfoot：底部
表格结构标签内部用于包裹tr标签
表格的结构标签可以省略
合并单元格：步骤
1、明确合并哪几个单元格
2、通过左上原则，确定保留谁删除谁
上下合并→只保留最上的，删除其他
左右合并→只保留最左的，删除其他
3、给保留的单元格设置属性：
跨行合并（rowspan）或者跨列合并（colspan）
属性值是合并单元格个数
注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
input表单标签：
input标签可以通过type属性值的不同，展示不同效果（默认属性值是text）
text password常用属性：
placeholder 占位符 提示输入内容
date：日期
单选radio常用属性：
name：有相同name属性值为一组，一组只能选一个
checked：默认选中（省略属性值）
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中
多选checkbox常用属性：
checked：默认选中（省略属性值）
文件选择file常用属性：
multiple：多文件选择（省略属性值）
按钮常用属性值：
submit：提交
reset：重置（恢复默认值）
button：普通按钮 （配合value属性给其取名）
如果需要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可
button按钮标签：button标签是双标签，更便于包裹其他内容：文字、图片等
type属性 属性值同input按钮系列
select下拉菜单标签：
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
其他属性：
selected：下拉菜单的默认选中（省略属性值）/区别于checked
textarea文本域标签：
常见属性：
rows：规定了文本域内可见行数
cols：规定了文本域内可见宽度
右下角可以拖拽改变大小
label标签：绑定内容和表单标签
使用方法①：
- 使用label标签把内容（如：文本）包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法②：
- 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
没有语义的布局标签div和span：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
以上标签显示特点和div一致，但是比div多了不同的语义
常见的字符实体 结构：&英文;
