（⼀）前期准备
◦ 新建⼀个⽂件夹并命名，将其拖动到vscode中
◦ 在该⽂件夹下新建⽂件（⽂件命名规则：1、⽆空格或特殊符号 2、后缀名为⼩写的 .html）
◦ 在vscode中安装 open in browser 插件，安装完毕之后，可使⽤ Alt +B快捷键打开
◦ 在设置中将⽂字⼤⼩（
font size）调为24（保护眼睛）、空格数（
Tab size）调为2（代码美
观）
◦ 代码⾃动保存设置：点击菜单栏⸺⽂件⸺⾃动保存（让代码⾃动保存，防⽌丢失）
（⼆）HTML的结构1、语法
（
1）HTML只有单标签和双标签
▪ 双标签：<标签名>……</标签名>
▪ 单标签：<标签名>
（
2）有些标签会有属性，此时的语法为：<标签名 属性1="属性值1" 属性2="属性值2">
▪ 如：
▪ 注意：属性的符号必须为英⽂，同⼀个标签内的属性没有先后之分，标签名与属性之间有空
格，属性1与属性2之间也有空格
（
3）标签名不能⾃定义，要使⽤系统有的标签
（
4）标签之间要成对出现
▪ 如：
▪ 不可
（
5）标签只有三种关系：并列、嵌套、没有关系
▪ ⸺双标签可以嵌套单标签，也可以嵌套双标签
▪ ⸺单标签不可以嵌套单标签，也不能嵌套双标签
2、⽂本标签
（
1）⽂本内容的标题标签⸻—h1 - h6
RR
▪ ⽂本标题标签为双标签，独占⼀⾏，默认加粗，上下有间距
（
2）段落标签⸻—p
RR
▪ 段落标签为双标签，独占⼀⾏，上下有间距
（
3）换⾏与⽔平线
▪ 换⾏为
⸻—单标签
▪ ⽔平线为
⸻—单标签
（
4）加粗与倾斜
▪ 加粗为 RR 、RR ⸺双标签，不独占⼀⾏，若要加粗，选
择strong更好，因为是bold的缩写，爬⾍需要费时识别⼀下，⽽是全拼，爬⾍
能够直接识别
▪ 倾斜为RR、RR⸺双标签，不独占⼀⾏
（
5）下划线和删除线
▪ 下划线为 RR⸺双标签，不独占⼀⾏
▪ 删除线为 RR、RR⸺双标签，不独占⼀⾏（
6）上标和下标
▪ 上标为 RR⸺双标签，不独占⼀⾏
▪ 下标为 RR⸺双标签，不独占⼀⾏
（
7）转义字符
▪ 空格 ⸺为什么需要这个转义字符，因为浏览器只会将多个空格和回⻋执⾏为⼀个
空格，即⽹⻚上只会显⽰处⼀个空格
▪ © © ⸻—版权符号
▪ < < （
less than）⸺左尖括号
▪ > > (greater than)⸺右尖括号
3、列表标签
（
1）有序列表
- RR
◦ ol⸺order list
（
2）⽆序列表
- RR
◦ ul⸺unordered list
◦ ul的属性可进⾏修改
- RR
disc⸻—实⼼圆（默认）
circle⸻—空⼼圆
square⸻实⼼⽅块
none⸻—什么都没有（常⽤）
（
3）⾃定义列表
dl⸺definition list
dt⸺definition title （列表标题，只能有⼀个）
dd⸺definition description （列表描述，可有⽆数个）
4、图⽚标签
scr⸺图⽚的路径（必写）
alt⸺图⽚加载不出时显⽰的⽂字（必写）
title⸺图⽚的描述信息，⿏标悬停时显⽰的⽂字（⾮必写）
5、路径
（
1）绝对路径（不常⽤）
▪ ⸺⽹络地址▪ ⸺本地地址：找到⽂件所在的具体位置，单击地址栏，复制地址，再加上 \⽂件名
（
2）相对路径（常⽤）
▪ ⸺同级路径：直接输⼊⽂件名 如：img1.png
▪ ⸺下级路径：输⼊⽬标⽂件夹的名字，再输⼊⽬标⽂件 如：image/img1.png
▪ ⸺上级路径：输⼊ ../上级⽂件夹名字/⽬标⽂件名 如：前端学习../image/img1.png（若
是有多个上级，就 ../../../……来叠加，不过上级路径也不常⽤）
6、超链接 RR
⸺单标签，⾃带颜⾊与下划线
其中 href 中输⼊需要跳转到的⽹⻚地址
7、分块标签 ⽤来给⻚⾯布局的
RR⸺双标签，不独占⼀⾏
8、⼀些⼩技巧
◦ 代码格式化设置：右击⿏标⸺格式化⽂档
◦ 注释 ctrl + / （是斜杠，不是除法符号）
注释可以：1、给开发⼈员看，⽅便其接⼿项⽬和读懂代码
2、可以做笔记
3、⼀个标记作⽤
◦ ⾃动换⾏： Alt + Z（但是我的电脑快捷键冲突了，所以改为了Alt + H）
◦ 固定截图：登录QQ，然后 Ctrl + Alt + A，框选出所需要的区域，点击下⽅的⼩钉⼦，即可将截
图固定到桌⾯；若是点击⼩剪⼑，则可滚动⿏标进⾏⻓截图
