工具：vscode
基本插件：
- Chinese：中文本
- Auto Rename Tag：自动补全标签
- Bracket Pair Colorizer 2：同一个括号同一个颜色
- Image preview：引入图片时显示缩略图
- open in browser：在浏览器中打开
- Live Server：让vscode开启一个服务器，并且可以实时更新代码
创建项目：
- 创建一个myProgram的项目，用vscode打开
- 新建一个index.html的文件
- 在文件里打一个英文的叹号，回车，生成初始模板
超文本标记语言
<!-- ctrl+/：注释的内容不生效 -->
<!-- 样式：color字体颜色，font-size字体大小，px大小的单位 -->
<!-- title属性，标记的标题 -->
<!-- style属性，书写css样式表的地方 -->
<!-- 标记的属性 -->
<!-- div：区块标记 -->
<!-- ctrl+/：注释的内容不生效 -->
<!-- 标签或者标记 -->
<!-- 告诉浏览器，我这里有什么 -->
<!-- 双标记：有头标记和尾标记以及标记内容组成 -->
<!-- head头信息标记，记录信息 -->
<!-- body页面主体，展示内容 -->
<!-- 在外面的标记被称为父标记，里面的标记称为子标记 -->
第一个简单程序：
<!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 style="color: red; font-size: 30px; background-color: aquamarine; "title="鼠标放上来就看到我了">这是我第一个前端项目</div> <div style="color:blue;">！！</div> <!-- Ctrl+/ 注释 --> <!-- head头信息标记,记录信息 --> <!-- body页面主体，展示内容 --> <!-- 在外面的标记成为父标记，里面的标记为子标记 --> </body> </html>
