一、初步了解
1.HTML的解释
它不是⼀种编程语⾔（我们所学的编程语言有java语言、JavaScript、C语言、swift），⽽是⼀种标记语⾔，⽤于告诉浏览器如何构造你的⻚⾯（通过标记符号来标记要 显示的⽹⻚中的各个部分）可以使⽤.html与.htm作为HTML⽂件的后缀名。
2.CSS 层叠样式表的解释
是⼀个⽤于修饰⽂档（可以是标记语⾔HTML，也可以是XML或者SVN）的语⾔，可以将⽂档以更优雅的形式呈现给⽤户。
3.HTML和CSS之间的关系
HTML (HTML⽤于描述⻚⾯的结构)就像是⼀个⼈，⽽CSS(CSS⽤于控制⻚⾯中元素的样式)就像是⾐服和化妆品，⽤来装饰HTML。（补充JavaScript就像是逻辑，⽤于响应⽤户操作）。
二、HTML
1.环境
VSCode（推荐）：特点：丰富的插件⽀持、可进⾏git管理；
2.浏览器
Html是在浏览器上解析执⾏的，每种浏览器对相同的Html代码解析可能产⽣不同的结果，所以我们需要安装多种主流的浏览器进⾏兼容性测试；
主流浏览器：Google Chrome（⾕歌）、Firefox（⽕狐）、Opera、Safari（不推荐）、Microsoft Edge。
3. VSCode插件推荐
Chinese - 汉化插件
HTML CSS Support - html，css快捷操作
open in browser - 允许您在默认浏览器或应用程序中打开当前文件
Vetur - VS Code的Vue工具
Vue 3 Snippets - 一个Vue.js 3和Vue.js 2的代码段扩展
Vue VSCode Snippets - 代码片段，它将增强您的Vue工作流
4.hello world
输⼊"!"或"html:5"⽣成基本的html5结构
5.标签的含义
- <!DOCTYPE html>
H5⽂档类型（ HTML document）说明该⽂档为Html5⽂档。
<html>
HTML的根元素，⽤来包含HTML⽂档的所有元素，所有的html标签应该位于html标签内部。
编码：
utf-8 万国码
GBK 国标码
Big5 繁体字 （环球新闻导报社）
解码：浏览器
<head>
表示html的头部，head内部标签主要⽤于设置或者导⼊外部⽂件，⼀般不直接显示在浏览器视⼝中，常⽤的⼦标签为 meta 、title、link、script，分别表示元信息设定、⽂档标题、css、js。
<meta charset="utf-8">
⽤来声明当前⽂档的编码⽅式为utf-8。
<title>
⽤来声明当前⽂档的标题，标题将会出现在浏览器的选项卡中。
<body>
表示html的体部，其内部主要放⽹⻚内容，其内容会显示到浏览器视⼝
中，所有想要显示在浏览器中的元素都被包含在该元素中。
6.语法
6.1注释
html中只有⼀种注释，即记录编程思路，解释说明业务功能(在实际开发中注释是一个非常重要的环节，否则不久将会没人与你共事)
6.2元素
单标签元素，仅有⼀个标签
双标签元素，由开始标签和结束标签组成
标签可以进⾏嵌套使⽤，即可以将⼀个标签写⼊到另外⼀个标签内。建议镜⾯嵌套。
推荐：镜⾯嵌套
以下是⾮法的：交叉嵌套
6.3属性
HTML标签都拥有⾃⼰的属性，属性应该出现在元素的开始标签内部，属性名和属性值通过"="分割，属性与属性之间通过空格分割，属性名不区分⼤⼩写，属性值区分⼤⼩写并且属性值可以使⽤双引号引起来。
核⼼属性：绝⼤多数标签都具有的属性。title、id、class、style。
title：描述信息
id：唯⼀标识
能重复，但是不建议重复（DOM里面会说） #设置成独一无二的值 ，如果要选择多个则用class。
举个例子 内部样式表 如何才能找到div2 并给他设置样式#{} 一般不用于设置样式。
class：标识⼀类元素
类选择器 div.div2 多用于设置样式
style 样式
6.4.其他
6.5块级元素
作⽤：搭建⽹⻚结构
特点：
独占⼀⾏空间（会自动换行）
默认宽度为100%
⾼度由⼦元素或内容决定
可以通过css指定其宽度
元素：html、body、div(没有css样式 开发时既不是，又不是 ，所以自定义其他标签都是div加上css样式)、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...
6.6 ⾏内元素
作⽤：在结构中填充⽹⻚内容
特点：
与其他⾏内元素共享⼀⾏空间
宽⾼由⾃身决定
由于不⽤来搭建⽹⻚结构，所以也⽆需通过css指定其宽度
⾏内元素中不可以嵌套块元素
元素：span、a、img、strong、b、i、em、sub、sup