然后点击新建文件，后缀为html
常用快捷键：
1.ctrl + ？注释
2. shift+alt+A 注释
3.ctrl+enter 换行
4. 按 a会跳出 a的属性标签格式，按p会跳出p的属性标签格式
5.html:5 VSCode会自动补全代码
6. ：代表空格
7.ctrl+enter 换行
<!DOCTYPE html> <!-- 表示文档类型和定义 ！表示警示标志 -->
<html lang="en"> <!-- 表示英语是整个网页的主体语言 中文是：lang="zh-Ch" -->
<head>
<meta charset="UTF-8"> <!-- utf-8 表示所有语言都可以，但是速度较慢，面向全球用这个，每个汉字3个字节
gbk 表示主要语言为中文，每个汉字2个字节
gb123，gb是国标的意思，只有汉族的文字和其他少量字符，每个汉字2个字节 -->
<!-- 注意，修改类型的时候，除了要修改meta charset，还需要将 编译器下面的 UTF-8点进去进行修改 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 表示设置兼容性为让edge和ie渲染方式一样 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 有这个东西手机页面也能正常显示 -->
<!-- <meta name="keywords" content="纵横小说"> -->
<!-- <meta name="renderer" content="webkit"> 不太懂，意思是表示尽可能地用高级核打开页面 -->
<title>我是标题</title> <!-- 设置网页标题 -->
</head>
<body>
<h1>hello</h1> <!--必须成对出现，结束标签必须有关闭符号-->
<a href="https://www.bilibili.com/blackboard/activity-Jh420jeN1Y.html?spm_id_from=333.5.0.0" title = "chaojilianjie">我是超级链接</a> <!-- 这是超级链接 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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>
<!-- h标签的基本使用 生成方式：h$*6 -->
<!-- 按住鼠标转动，往下移就可以同时输入多行 -->
<h1>我是h1标签 </h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<!-- 权重就是文本的全红在那个，比如设置h标签的文字就赋予了标题的语义，如果从浏览器的角度去考虑，它的权重在搜索引擎的优化，搜索引擎的优化除了会抓取meta标签
配置的keywords之外，还会优先先抓取标题的内容，h1标签的权重是最高的，一个页面只是用一个h1，通常用来
制作网页的logo，如果你在页面中设置了多个h1标签，搜索引擎会认为你在作弊，从而降低搜索权重 -->
<!-- p标签的基本使用 每个p标签都是一个段 -->
<!-- 作用：定义一个完整的语段 -->
<!-- style 是缩进5个空格 -->
<p style="text-indent:5em">
周杰伦（英语：Jay Chou，1979年1月18日－），台湾华语流行歌曲男歌手、音乐家、编曲家、唱片制片人、魔术师。同时是演员、导演、电子竞技职业战队J Team的老板。
</p>
<p>
在2000年，周杰伦发行了他的首张专辑《Jay》，从属于唱片公司阿尔发音乐。从此以后，他的音乐获得了遍及亚洲的荣誉，尤其在台湾、中国大陆、马来西亚、香港、新加坡、印度尼西亚、韩国、日本和西方国家——例如美国和澳大利亚——的亚裔社群中。周杰伦是华语流行音乐历史上最具影响力的音乐人之一，其在本土台湾共有247万张专辑的销量并获得了许多针对他的音乐工作的奖项，包括15座台湾金曲奖，2座MTV亚洲大奖。周杰伦也为其他艺术家写歌。在2003年，他是《时代》杂志（亚洲版）的封面故事，被称为“亚洲流行音乐的新天王”。他其后开展了六个世界巡演，在世界各地的城市中对超过1000万人表演。
</p>
<p>
周杰伦在电影《头文字D》（2005）中开始了他的电影事业；他从此涉足许多其他的电影企划。周杰伦也管理他自己的唱片和经纪公司杰威尔音乐。2011年首度进入好莱坞，主演《青蜂侠》之助理Kato；而后在2016年，他再次进入了好莱坞，在电影《惊天魔盗团》中扮演小李。
</p>
</body>
</html>
<!-- 作用，插入一个图片 -->
<!DOCTYPE html>
<html lang="en">
<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>
<!-- src:引入图片路径 alt：图片加载不出来例如图片路径错误时的替换文本 -->
<!-- width 和 height 设置的宽度和高度，但是设置了也有可能会让图片等比例进行变形 -->
<!-- title :当你鼠标移到页面的图片上时，会显示描述 -->
<img src="./imags/01.jpg" alt="我是自律" width="220px" height="120px" title="自律的象征" >
<!-- border :会加上黑色边框 ！！了解即可，用处不大，实际上是用css设计边框的-->
<img src="http://ww1.sinaimg.cn/mw2000/70ace9b7ly1ggzusnypoej20yi0yiaop.jpg" border="5" width="220px" height="120px" >
</body>
</html>
使用方法一：记住要加 #，设置 <a name= >
使用方法二：设置 id属性，个人感觉使用更方便
结果：
这里插入
<!--
1.列表：不是单打独斗的，通常是一组标签组成
2.无序列表：作用：定义一个没有顺序的列表结构，由 ul，li组成
ul：ulordered list（无序列表）
li：list item（列表项）
-->
<!DOCTYPE html>
<html lang="en">
<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>
<!-- 基本使用方法： -->
<!-- 注意：ul内部嵌套li，他们是父子规律，
ul内部只能嵌套li ，
li内部可以嵌套任何标签，甚至是ul -->
<h2>古典名著</h2>
<ul>
<li>西游记</li>
<li>红楼梦</li>
<li>水浒传</li>
<li>三国演义</li>
</ul>
<h2>古典名著</h2>
<ul>
<li>
<h3>西游记</h3>
<ul>
<li>孙悟空</li>
<li>沙僧</li>
<li>猪八戒</li>
<li>唐僧</li>
</ul>
</li>
<li>
<h3>水浒传</h3>
<ul>
<li>松江</li>
<li>武松</li>
<li>林冲</li>
<li>鲁智深</li>
</ul>
</li>
<li>
<h3>红楼梦</h3>
<ul>
<li>薛宝钗</li>
<li>刘姥姥</li>
<li>大观园</li>
<li>林黛玉</li>
</ul>
</li>
<li>
<h3>三国演义</h3>
<ul>
<li>刘备</li>
<li>曹操</li>
<li>张飞</li>
</ul>
</li>
</ul>
</body>
</html>
注意列表项之间没有先后顺序之分，列表项的前缀样式是用css去控制的。
<!-- 有序列表：定义一个有序列表的列表结构
两个标签 ol，li
ol：ordered lsit （有序）
li：list item （列表项）
跟无序规则差不多
-->
<!DOCTYPE html>
<html lang="en">
<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>
<h2>三年级期末考试排名情况</h2>
<ol>
<li>
<h3>三年级2班</h3>
<ol>
<li>老王</li>
<li>张三</li>
<li>李四</li>
</ol>
</li>
<li>
<h3>三年级1班</h3>
<ol>
<li>隔壁</li>
<li>张王</li>
<li>李老</li>
</ol>
</li>
<li>
<h3>三年级3班</h3>
<ol>
<li>范同学</li>
<li>张同学</li>
<li>吴同学</li>
</ol>
</li>
</ol>
</body>
</html>
dd和dt都是容器及标签，内部可以存放任意内容
<!--
dl,dt,dd
dl:definition list :表示创建一个自定义列表结构
dt：definiton item ：定义主题或者术语，表示一个列表的主题
dd：definiton description：表示解释和说明前面的主题内容
dl内部只能存放dt和dd，dt和dd是同级关系
规则：每个dt后面可以跟0—~n个解释的dd，每个dd解释就是上一个最近的dt
-->
<!DOCTYPE html>
<html lang="en">
<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>
<h2>国内女明星</h2>
<dl>
<!-- dt：定义标题 -->
<dt>杨幂</dt>
<!-- dd：内部解释，dd内部可有多个嵌套 -->
<dd>
<p>家庭：小糯米</p>
<p>作品：《三生三世》、《宫》、《仙剑奇侠》</p>
<p>工作室：迪丽热巴</p>
</dd>
<dt>赵丽颖</dt>
<dd>作品：《花千骨》、《楚乔传》、《陆贞传奇》</dd>
<dd>家庭：冯绍峰</dd>
<dt>刘诗诗</dt>
<dd>作品：《步步惊心》</dd>
<dd>家庭：吴奇隆</dd>
</dl>
</body>
</html>
使用场景：一个场景由多个dl组成，并不是一个dl嵌套多个dt和dd，这样方便搭建布局
<!--
表格基础：
table ： 表格：定义一个表格结构
tr table rows，定义了表格的行
td table dock，定义了表格的单元格
关系：table->tr->td
-->
<!DOCTYPE html>
<html lang="en">
<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>
<!-- tr*3>td*4 就是生成三行四列的快捷键 -->
<!--
border="1":设置表格边框，越大，边框越大
style="border-collapse:collapse 表示将重合的边框合并，这是css样式"
-->
<table border="1" style="border-collapse:collapse">
<!-- tr里面嵌套th设置表格的头 -->
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>第1行，第1列</td>
<td>第1行，第2列</td>
<td>第1行，第3列</td>
<td>第1行，第4列</td>
</tr>
<tr>
<td>第2行，第1列</td>
<td>第2行，第2列</td>
<td>第2行，第3列</td>
<td>第2行，第4列</td>
</tr>
<tr>
<td>第3行，第1列</td>
<td>第3行，第2列</td>
<td>第3行，第3列</td>
<td>第3行，第4列</td>
</tr>
<tr>
<td>第4行，第1列</td>
<td>第4行，第2列</td>
<td>第4行，第3列</td>
<td>第4行，第4列</td>
</tr>
</table>
</body>
</html>
结果：
<!--
单元格合并
一部分单元格需要跨行跨列合并,可以给对应的td和th标签设置相关属性
rowspan:上下跨行合并
colspan:左右跨列合并
属性值是数字,数字是几就代表跨几行或者跨几列
步骤:
1.确定一行有多少个td
2.然后再看一共有几行
3.然后观察那个单元格合并,设置对应属性
-->
<!DOCTYPE html>
<html lang="en">
<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>
<style>
table{
}
td{
width:80px;
height:60px;
text-align:center; /* 文本居中 */
}
</style>
</head>
<body>
<table border="1" style="border-collapse: collapse">
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="3">3</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td rowspan="2">9</td>
<td>10</td>
</tr>
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td colspan="2">13</td>
<td rowspan="2">14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td colspan="2">18</td>
</tr>
</table>
</body>
</html>
<!--
表格：
表格标题
表格表头
表格主题
table：
caption：定义表格主题
thead：定义表格头部，内部 tr>th
tbody：定义表格主体，内部 tr>td
-->
<!DOCTYPE html>
<html lang="en">
<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>
<style>
table,td{
border-collapse: collapse; /* 可以在这里进行设置 */
}
</style>
</head>
<body>
<table border="1">
<!-- 主题分区 -->
<caption>各地区资产投资情况</caption>
<!-- 表头分区 -->
<thead>
<tr>
<th rowspan="2">地区</th>
<th colspan="2">按总量分</th>
<th colspan="2">按比重分</th>
</tr>
<tr>
<th>自年初累计(亿元)</th>
<th>去年同期增长(%)</th>
<th>去年初累计增长(%)</th>
<th>去年同期(%)</th>
</tr>
</thead>
<!-- 主体分区 -->
<tbody>
<tr>
<td>全国</td>
<td>123234</td>
<td>9.8%</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>123234</td>
<td>9.8%</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>123234</td>
<td>9.8%</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>123234</td>
<td>9.8%</td>
<td>100.0</td>
<td>100.0</td>
</tr>
<tr>
<td>全国</td>
<td>123234</td>
<td>9.8%</td>
<td>100.0</td>
<td>100.0</td>
</tr>
</tbody>
</table>
</body>
</html>
结果：
<!--
表单元素是网页中提供给用户进行点击的控件
1.form标签：表单的意思，容器级的标签，内部存放可输入的控件。如果输入的表单需要提交到数据，
所有的空间需要被form表单包裹。
method：方法的意思，指数据的提交方法，属性值是：post和get
action：是数据提交的位置
2.input标签是输入框的一种，但是不仅仅只有输入框，通过type属性，可以拓展多功能
input的type属性非常丰富
-->
<!DOCTYPE html>
<html lang="en">
<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>
<form action="">
<!--
输入框的使用
value：设置输入框的默认值，属性值为自定义内容，（与手动输入的内容一样）
placeholder：文本的占位符，如果没有value的时候，提示用户的文字占位符
-->
<p>
用户名： <input type="text" value="请输入用户名">
</p>
<p>
密码框： <input type="password" placeholder="请输入密码" >
</p>
<!-- 单选框：通过type值为radio设置的，
单选按钮都是成组出现的
要想实现一组单选按钮的互斥，需要设置相同的name属性 -->
<p>
性 别
<input type="radio" name="sex" checked="checked"> 男
<input type="radio" name="sex"> 女
<input type="radio" name="sex"> 保密
</p>
<!--
复选框：也叫多选框
通过type属性 值为checkbox设置
可以通过对自身的多次点击实现选择或者取消，但是单选框不行
多选框可以选择一个或者多个，建议同一组设置同样的name属性
-->
<!-- 单选框和多选框都有一个默认被选择的功能，需要给input标签添加一个checked='checked' -->
<!-- 但是现在点击文字不能触发单选框或者多选框的点击事件的，所以需要label标签扩大触发范围 -->
<p>
爱 好
<input type="checkbox" name="hobit" checked="checked">运动
<!-- 有了label标签，点击绘画这个文字也能触发动作 -->
<label >
<input type="checkbox" name="hobit"> 绘画
</label>
<label >
<input type="checkbox" name="hobit"> 音乐
</label>
</p>
</form>
</body>
</html>
结果：
<!--
下拉菜单：需要一组标签进行制作
select:选择，表示搭建下拉项
option:选项，表示搭建下拉项的
关系：select>option
默认的第一个是显示的，并不是被选中的，若是需要默认为被选中，
需要用selected属性，值也为selected
-->
<p>
籍贯：
<select >
<option >北京</option>
<option selected="selected">上海</option>
<option >深圳</option>
<option >广州</option>
</select>
</p>
结果：
例如下列情况：
<body>
<div>好开心啊，今天吃了饭！！<h1>标签的作用 </div>
</body>
会出现：h1被当作标签加载，而不是预想中的文本：
利用字符实体进行转换
<body>
<div>好开心啊，今天吃了饭！！<标签的作用 </div>
</body>
<!--
div和span都是常用的布局标签，俗称盒子
div:分割跨度大跨度
span：小区域小跨度，
作用是用来分割页面的布局，div是跨度布局分割，span是文字分割
div：容器级标签，双标签
div：HTML+CSS 又叫做div+CSS
主要作用是用来进行网页布局的拆分，没有明确的语义
span：作用是一个极限小，只适用于文字的跨度划分
-->
<!DOCTYPE html>
<html lang="en">
<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>
<!-- 顶部 -->
<div>
今天一共收入： <span style="color:red;">300</span>元
</div>
<!-- 中心部 -->
<div>
2
</div>
<!-- 底部 -->
<div>
3
</div>
</body>
</html>
演示：
