1.工具的使用和安装
下载vscode编码工具
1.打开浏览器
2.搜索vscode打开官网下载
下载很慢的话在下载链接前面一段网址替换为
vscode.cdn.azure.cn
https://az764295.vo.msecnd.net/stable/e7e037083ff4455cf320e344325dacb480062c3c/VSCodeUserSetup-x64-1.83.0.exe
https://vscode.cdn.azure.cn/stable/e7e037083ff4455cf320e344325dacb480062c3c/VSCodeUserSetup-x64-1.83.0.exe
2.下载谷歌浏览器
3.下载截屏工具snipaste
4.vscode的插件
1.汉化
2.live server
Live Server插件用来自动加载热部署前端页面相关的文件（.html/.js/.ts/.css），简单来说就是：快速启动本地服务，自动监听，不需要刷新就能更新内容。有了它之后调试前端页面再也不需要不停地手工去点击浏览器上的刷新按钮。
3.open in browser
Open in Browser的意思是在浏览器中打开，Open in Browser是VScode的常用插件，它的作用是可以把编辑的HTML文件等用浏览器打开，查看效果。
2.入门html
1.基本骨架
2.快捷键
3.概念
标签：形如，由一对尖括号和表示标签含义的“关键字”构成。
元素：形如一些内容，由开始标签、结束标签以及标签中包含的内容构成。
4.标签
- HTML 元素以开始标签
- HTML 元素以结束标签
- 元素的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭
- 大多数 HTML 元素可拥有属性
标题标签
h$*6 快捷生成好到h6
标签 段落，换行，水平线
文本放在标签外部是不利与样式修改和结构调整
或者 意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et metus id ligula malesuada placerat sit amet quis enim. Aliquam erat volutpat. In pellentesque scelerisque auctor. Ut porta lacus eget nisi fermentum lobortis. Vestibulum facilisis tempor
ipsum, ut rhoncus magna ultricies laoreet. Proin vehicula erat eget libero accumsan iaculis.
5.属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"
6.css盒模型
7.布局(浮动和定位)
照片之间的间隙通常是由于图片标签之间的空格或换行符造成的
folat问题
子元素全部浮动父元素高度塌陷
后续元素会受到影响
