准备工作
编译工具：vscode
浏览器：谷歌浏览器
下载四个插件：
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
- open in browser
- Open In Default Browser
- vscode-icons
快速创建项目文件：桌面新建一个文件夹，打开vscode点击左侧第一个的资源管理器，把桌面刚刚创建的空文件夹拖入vscode。
快速搭建html页面：输入英文！即可快速搭建html框架
注意：换行和多个空格在浏览器中显示时只有一个空格。
div标签
特点：
- 双标签
- 独占一行（默认宽度100%），从上往下依次排列
- 可以设置宽高
span标签
特点：
- 双标签
- 不独占一行（从左往右依次排列）
- 宽高不生效
img标签
属性：写在开始标签里面 格式：属性="属性值"
1、src属性，引入照片地址，
绝对路径：网络地址https:// 磁盘地址c:\Users
相对路径：
- ./ 当前文件所在文件夹，可以找到同级的文件
- ../ 当前文件所在文件夹的上一级文件夹，可以找到父级文件夹的同级文件
- / 表示进入当前文件夹
2、alt属性，图片加载失败时显示的提示信息
特点：
- 单标签
- 不独占一行
- 可以设置宽高
链接标签a
属性
1、href 链接的引用地址
网络地址： https://
本地文件： 相对路径
2、target 控制跳转方式
_self 当前页面发生跳转（默认）
_blank 新开页面发生跳转
特点
- 双标签
- 不独占一行
- 设置宽高不生效
锚点定位
a标签的属性href="#+标签的id值"
点击该链接就会跳转到该id值处
input标签
1.特点
- 单标签
- 不独占一行
- 可以设置宽高
2.属性：
- type 输入框类型
text 文本输入框
password 密码输入框
radio 单选框(实现单选效果需要用相同的name属性进行绑定)
checkbox 复选框
submit 提交
- value 默认值(用户输入的值)--键值
- name 单选绑定属性--键名
- checked 默认选中
- disabled 禁止选择
css引入的三种方式：
1、行内引入：在开始标签里面写style属性
2、内部引入：在head标签里面写style标签，在style标签里面写选择器
3、外部引入：在head标签里面写link标签，link标签里面的href属性写css文件地址，css文件里面写选择器
优先级：行内引入>内部引入=外部引入
基本选择器
- 标签选择器
- 类选择器
- id选择器
复合选择器
- 子代选择器：：选择所有相同的子代
格式：
选择器>选择器 {
属性:属性值
}
- 后代选择器
格式：
选择器 选择器 {
属性:属性值
}
- 兄弟选择器：：选择下一个相邻的兄弟
格式：
选择器+选择器 {
属性:属性值；
}
字体属性
1.color 颜色
- 英文单词 red green blue
- rgb(0-255,0-255,0-255)
rgba(0-255,0-255,0-255,0-1) 1完全不透明 0完全透明
- 16进制 color: #5597BF;
2.font-size 字体大小
浏览器默认大小16px，最小12px
font-size: 20px;3.font-weight 字体加粗
100-900 bold(700) bolder(900) lighter normal
font-weight: bold;
4.font-family 设置字体
font-family: "宋体";
文本属性
1.text-align 文本对齐方式
left 左对齐(默认)
center 居中
right 右对齐2.text-decoration 文本修饰
overline 上划线
line-through 删除线
underline 删除线3.line-height 行高
文字垂直方向居中：line-height=height
display显示模式
1.display:block 块级元素 div
特点：
- 可以设置宽高
- 独占一行
2.display:inline 行内元素 span a
特点：
- 设置宽高不生效
- 不独占一行
3.display:inline-block 行内块级元素 img input
特点：
- 设置宽高生效
- 不独占一行
4.display:none 让元素消失
伪类选择器
:hover 鼠标滑上去的样式
格式：
选择器:hover {
属性:属性值
}
正常文档流：
块级元素从上往下依次排列，行内元素行内块级元素从左往右依次排列
浮动
向左浮动或者向右浮动,直到碰到另一个元素的边框就停下来(脱离文档流)
float:left
float:right