快捷键
1、英文状态下，!+回车，vscode自动填充html文件的框架
2、注释：ctrl+/
3、. + / ：出现文件选择路径
./ :上一级路径
…/ ：上上一级路径
4、alt +shift + 向下箭头 ：快速复制
5、alt + 鼠标左键：快速选中
6、快速打出相同：eg：li*10
7、alt +shift +鼠标左击拉动：多行输入相同内容
HTML基础知识
W3C标准
HTML文件编写遵循W3C原则。
标准构成：1、HTML（页面元素和内容）。2、CSS（页面样式）。3、JS（页面交互）。
HTML文件的基本构成
<!-- 文件类型声明，告诉浏览器是html文件 -->
<!DOCTYPE html>
<!--
HTML文件结构 大框体
lang="en" 页面默认以英文模式
-->
<html lang="en">
<!--
head 文件头部
meta 响应布局
charset="UTF-8" 字符中文
注：head头部中一般存放响应布局设置、css样式和文档标题
-->
<head>
<meta charset="UTF-8">
<!-- 响应布局的相应设置 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 文件标题 -->
<title>Document</title>
</head>
<!-- body 文档在浏览器中呈现的内容
注：body中一般存放标签（文字标签、图片标签、样式标签、超链接标签等）和js代码
-->
<body>
我是HTML文件。
</body>
</html>
HTML中的标签
1、div标签：容器，包裹所有的标签。
a、可直接在div标签中写内容
b、在div标签中包裹其他标签
注：写内部尽量使用div标签包裹
2、p标签：段落标签
3、span标签：文字标签 显示重要内容标签
4、strong标签：加粗文字（内容）
5、em标签：文字倾斜
6、br标签：换行标签
7、hr标签：添加水平线
8、a标签：超链接，用于网页跳转（默认在自身页面中跳转）
a、herf属性：用于存放跳转链接（本地链接和外网链接）
b、target属性：页面跳转类型
属性值：_self（默认自身页面跳转）、_blank（新的页面中打开）
9、img标签：图片标签。
a、src属性：存放图片地址
b、alt属性：存放图片加载不出来时的文字提示
c、title属性：图片正常加载时的提示文字
d、width属性：设置图片宽度，以px为单位
e、height属性：设置图片高度，以px为单位
10、 ：设置文本内容空格
11、h1~h6标签：标题标签（h1字体最大，h6字体最小）
标签分类
单标签：br hr img
双标签：div p span strong em a h1~h6 ul li ol
行内标签：内容不能设置宽高，高度靠内容撑开，在一行中显示
a span strong em img
块元素标签：可以设置宽高，不在一行中显示，无论内容多少，都在一行中显示
div p h1~h6 img ul li ol dl dt dd
锚链接
1、A甲跳A乙（自身页面之间进行跳转）
设置跳转链接：
<a href="#名字"></a>
设置标识：需要跳转到哪个位置就将标识放在哪个位置
<a name="名字"></a>
注：跳转链接和标识的名字要一致
2、A甲跳B乙（跳转到另外一个页面中查找内容）
设置跳转链接：
<a href="网址（地址） #名字"></a>
设置标识：需要跳转到哪个位置就将标识放在哪个位置
<a name="名字"></a>
列表（可以相互嵌套，也可以存放其他标签）
列表中可以嵌套其他标签，但是只能在li中嵌套，要遵循W3C标准
无序列表
<!--ul无序列表的壳 -->
<ul>
<!-- li 中存放列表内容 -->
<li>
</li>
</ul>
type属性可设置序号类型：disk（实心圆）、square（实心正方形）、 circle（空心圆）
有序列表
<!--ol有序列表的壳 -->
<ol>
<!-- li 中存放列表内容 -->
<li>
</li>
</ol>
type属性可设置序号类型：A、a、I、i、1
自定义列表
<!-- dl自定义列表的盒子 -->
<dl>
<!-- dt标题 -->
<dt>班级</dt>
<!-- dd 内容 -->
<dd>3班</dd>
</dl>
dl与dt、dd是父子关系，dt和dd是兄弟关系
表格
标准表格
<!-- table 基础表格 盒子 -->
<table>
<!-- tr 行 -->
<tr>
<!-- td 列 单元格 -->
<td>
<p>(1,1)</p>
</td>
<td>
<p>(1,2)</p>
</td>
</tr>
<tr>
<td>
<p>(2,1)</p>
</td>
<td>
<p>(2,2)</p>
</td>
</tr>
</table>
属性：
border = “1”：边框。（数值表示的是边框的粗细）
width = “500px”：设置表格宽度
height = “500px”：设置表格宽度
长表格（语义化表格）
<!-- table 盒子 -->
<table border="1">
<!-- 表格头部 -->
<thead>
<!-- 头部标题 -->
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</thead>
<!-- 表格主体内容 -->
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>信研2203班</td>
</tr>
</tbody>
<!-- 表格尾部 -->
<tfoot>
<tr>
<td colspan="3">班级总人数</td>
<td>23</td>
</tr>
</tfoot>
</table>
rowspan：纵向合并单元格
colspan：横向合并单元格
表单：将数据提交给服务器
表单的基本内容和属性：
type：指定元素类型
name：指定表单元素名称
value：元素的初始值（type为radio时必须指定一个值）
size：指定表单元素的初始宽度，文本框长度
maxlength：输入最大字符数，推荐最大字符长度是120
checked：指定按钮是否被选中
<!--
form表单
action属性：要提交的服务器地址
method属性：设置表单的提交方式 get、post（post比get更安全）
get方法早先会将用户基本信息显示在url中
注：只要写表单，form必须要有
-->
<form action="" method="post">
<!-- input表单
type属性：
text（文本框）
password（密码框）
radio（单选框【在input标签中添加name属性，多个单选框的name属性要一致】） checked属性：默认选中
checkbox（复选框） checked属性：默认选中
select（下拉框） option：内容 selected：默认选中
file（文件框，默认一次只能上传一个文件） multiple：一次上传多个文件
textare（文本域，默认识别空格） rows属性设置行值，cols属性设置列值
hidden（隐藏域，value="需要被隐藏的内容"） 用于在网页中隐藏一些不需要显示的内容，在实际开发中，隐藏域中的内容需要加密后再隐藏
readonly（只读）
disable（禁用）
注：当属性和属性值一样的时候，只写一个就行 eg: readonly="readonly"
-->
姓名：<input type="text" name="" id=""><br>
密码：<input type="password" name="" id=""><br>
性别：<input type="radio" name="sex" id=""> 男
<input type="radio" name="sex" id="" checked> 女<br>
爱好：
<input type="checkbox" name="" id="" checked> 唱
<input type="checkbox" name="" id=""> 跳
<input type="checkbox" name="" id=""> rap
<input type="checkbox" name="" id=""> 篮球<br>
班级：
<!-- select下拉框 盒子 -->
<select name="" id="">
<!-- option 内容 -->
<option value="">请选择班级</option>
<option value="" selected>1班</option>
<option value="">2班</option>
<option value="">3班</option>
</select><br>
上传文件：
<input type="file" name="" id=""><br>
<input type="file" name="" id="" multiple><br>
文本域：
<textarea name="" id="" cols="30" rows="10">请认真阅读以下内容！</textarea><br>
隐藏域：
<input type="hidden" name="" id="" value="需要被隐藏的内容">
</form>
表单按钮和日期：
<!-- 按钮
1、提交按钮 submit 如果想要修改按钮上的字，需要用value="内容"
2、重置按钮 reset value="内容"
3、普通按钮 button
4、图片按钮 image 需要src引入图片地址，可以设置图片宽高
-->
姓名：<input type="text" name="" id=""><br>
密码：<input type="password" name="" id=""><br>
<input type="submit" name="" id="" value="确定">
<input type="reset" name="" id="" value="重置">
<input type="button" name="" id="" value="普通按钮">
<input type="image" name="" id="" src="./1.jpg" width="300px" height="300px"><br>
日期=>年月日：
<input type="date" name="" id=""> <br>
日期=>周数：
<input type="week" name="" id=""> <br>
日期=>月数：
<input type="month" name="" id=""> <br>
日期=>时间：
<input type="time" name="" id=""> <br>
日期=>日期+时间：
<input type="datetime" name="" id=""> <br>
日期=>本地日期时间：
<input type="datetime-local" name="" id=""> <br>