1、安装插件
语言包、open in browser、view in browser
2、VSCode快捷键
Ctrl + Shift + z 前进
Ctrl + , 设置
Ctrl + D 选中相同内容
Alt 多光标
Atl + ↑↓ 快速移动一行
Shift+ Alt + ↑↓ 快速复制一行
Shift+ Tab 向前缩进
3、Chrome快捷键
Ctrl + 0 缩放至100%
4、代码自动折行
首选项->搜word->找到word wrap->开启
5、HTML基本结构和属性
HTML：超文本 标记 语言
超文本：文本内容 + 非文本内容
标记（标签）：<单词>
语言：编程语言
标记分为两种：单标记 双标记
标签可以上下排列，也可以嵌套排列
HTML5 标签含义之元素周期表:http://www.html5star.com/manual/html5label-meaning/
6、标签的属性
通过标签的属性修饰标签，设置当前标签的一些功能。
<标签 属性1=”值“ 属性2=”值“>
7、<meta charset="UTF-8">
元信息：是编写网页中的一些赋值信息。
UTF-8是国际编码，让网页不出现乱码的情况
8、注释
<!-- -->
快捷键：Shift + Alt + A
Ctrl + /
意义：
1.把暂时不用的代码注释掉，方便以后再次使用
2.对开发人员进行提示
9、HTML语义化
根据网页中内容的结构，选择适当的标签进行编写。
1、在没有CSS的情况下也能呈现良好的内容结构
2、有利于搜索引擎爬虫更好的理解网页
3、方便其它设备解析
4、便于开发和维护
10、标题和段落
<h1> - <h6> 双标签
一个.html中只能存在一次h1标签
h5和h6标签不经常使用
<p> 双标签
11、文本修饰标签
<strong></strong> <b></b> 文本加粗
<em></em> <i></i> 斜体
<sub></sub> 上标
<sup></sup> 下标
<del></del> 删除文本
<ins></ins> 插入文本 一般情况下插入文本和删除文本配合使用
12、图片
img 单标签
src 引入图片的地址
alt 在图片不存在的时候显示图片的说明提示
title 鼠标悬浮显示提示信息
width/height 控制图片的大小，单位为px 尽量添加图片宽高
添加与否的区别：添加会提前在网页预留空间，不添加不会预留空间，可能会造成图片加载前后网页预览不一致的情况。
13、使用Chrome调节网速，模拟用户加载速度，在F12的Network中找到Online进行调整。
14、相对路径和绝对路径
.表示当前路径
..表示上级路径
15、跳转链接
<a></a> 双标签
href 链接的地址 可以在a标签中嵌套img标签
target 可以改变链接打开的方式，默认为当前页面打开 _self/_blank
<base> 单标签
卸载head中
统一改变链接默认行为
<base target="_blank">
16、跳转锚点
1、使用id设置锚点:
在设为锚点的地方给对应标签添加id，在触发跳转的连接上使用 “#+id名称” 设置要跳转到的锚点
<a href="#abc">
跳转到abc
</a>
<h2 id="abc">
这里是abc
</h2>
2、使用name设置锚点
<a href="#abc">
跳转到abc
</a>
<a name="abc"></a>
17、特殊符号
空格
小于号 <
大于号 >
18、列表
1、无序列表
<ul> <li>
ul使用type控制列表前的标识符：circle/disc/square
(一般使用css控制列标前标识符)
2、有序列表
<ol> <li>
用的比较少，可以用无序列表代替
(一般使用css控制列标前标识符)
3、定义列表
<dl> <dt> <dd>
列表项需要添加标题和描述内容时使用
4、嵌套列表
列表之间可以互相嵌套，形成多层级列表
19、表格
<table> <tr> <th> <td> <caption>
1、语义化标签
<thead> <tbody> <tfoot>
2、表格的属性
border 边框
cellpadding 单元格内的空间
cellspacing 单元格之间的空间
rowspan 合并行
colspan 合并列
align 左右对齐方式
valign 上下对齐方式
20、表单
<form> <input>
<form>:表单的最外层容器
action:提交到的地址
<input>:用于搜集用户信息，根据不同的type值，展示不同的控件，如输入框、密码框、复选框等。
<input>->type:决定是什么控件
text:普通文本输入框
placeholder:提示语句
password:密码输入框
placeholder:提示语句
checkbox:复选框
checked 预选中
disabled 不可选
radio:单选框
通过给不同radio设置相同的name来控制分组(只能选中分组中的一个选项)
file:上传文件
multiple:可多选
submit:提交按钮
reset:重置按钮
<textarea>:多行文本框
cols:列数
rows:行数
<select>:选择项
size:可见项数
multiple:可多选
<option>
selected:默认选中
disabled 不可选
组合可以实现默认选中“可选择”，但不可重新选择“可选择“
<label> 辅助标签，用来关联选择框可后面的描述文字
/* PS.
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
*/通过设置name来控制只能单选，通过设置id和name形成映射关系，让用户点击文字也能选中选择框。让可选范围变大，提升用户体验。
表单中可以嵌套表格。
21、<div>与<span>
<div>：全称division，用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、图像等各种网页元素，即HTML中大多数标签都可以嵌套在<div>标签中，<div>也可以嵌套多层<div>，用来将网页分割成独立的不同的部分，来实现网页的规划和布局。
<span>：用来修饰文字的
div与span都是没有任何默认样式的，需要配合CSS才行。
div:分割块 (块)
span:修饰文字 (内联)
22、CSS基础语法
格式：选择器{属性1:值1; 属性2:值2}
注释：/* */
23、CSS样式的引入方式
1、内联样式:可复用
style属性
2、行内样式
style标签
区别：
1、内联样式可复用
2、内联样式使html和css分开处理，符合w3c标准
3、外部样式
通过引入一个单独的css文件
通过<link>标签引入外部资源，rel属性指定资源和页面的关系，href属性是资源的地址。
stylesheet:作为样式表引用
也可以通过@import引用，一般不使用。
24、CSS颜色表示法
1、单词表示法
2、十六进制表示法 #000000 #FFFFFF
3、RGB三原色表示法 rgb(255,255,255)
25、CSS背景样式
background-color:背景颜色
background-image:背景图片
默认水平铺满
url(背景地址)
background-repeat:背景图片的平铺方式
repeat-x
repeat-y
repeat （xy轴都平铺）
no-repeat
background-position:背景图片的位置
向x/y轴偏移：
数字:100px 100px
百分比:50% 50%
单词:x:left/center/right
y:top/center/bottom
background-attachment:背景图随滚动条的移动方式
scroll:默认值，背景图片是按照背景进行偏移的
fixed:背景图片是按照浏览器进行偏移的
fixed可以用来制作视觉差网站
26、CSS边框
border-style:边框样式
border-边框大小
border-color:边框颜色
边框可以针对莫一条边进行设置border-left-style
27、透明颜色
transparent
28、CSS文字样式
font-family 字体
英文字体:
中文字体:
衬线体和非衬线体:
设置多个字体的目的是为了适应更多的设备。
字体名称中有空格的需要给名称添加单引号‘’
font-size 字体大小
默认是16px
单词写法:small large 等
字体大小一般使用偶数:文字对齐时按照中间进行对齐，偶数更方便
font-weight 字体粗细
单词模式：正常（normal） 加粗（bold）
数值模式：100-900 100-500都是normal 600-900都是bold
font-style 字体样式
单词模式：normal italic
oblique也是斜体 区别是
italic：带有倾斜字体的才可设置倾斜
oblique：不带倾斜属性的字体也可设置倾斜
color 颜色