HTML+CSS快速入门
在本文章开篇之前，需要先提前准备好代码运行环境，首先需要准备好Visual Studio Code用来编写代码，然后找一个适合的浏览器，用来看代码的运行效果。建议使用谷歌浏览器，当然电脑自带的浏览器也是可以的。
快捷键
生成浏览器文件：！+回车
代码格式化：shift+Alt+F
向上或向下移动一行：Alt+上方向键，Alt+下方向键
快速复制一行代码：shift+Alt+上/下方向键
保存：Ctrl+S
快速查找：Ctrl+F
快速替换：Ctrl+H
代码向后：Tab
代码向前：shift+Tab
注释：Ctrl+/
标题标签
meta为单标签
标题通过
~标签定义。定义最大标题定义最小标题
定义最大标题定义最小标题
标签在一个网页中只能用一次，用来放新闻标题或网页Logo
标签位置属性：align="left"/"center"/"right"
生成h1~h6快捷键：h$*6
段落标签
独占一行，段落之间有间隙换行标签：
浏览器不识别代码中回车键换行
水平线标签：
属性：color width size align
文本格式化标签：
自带强调含义
| 加粗 | |
| 倾斜 | |
| 下划线 | |
| 删除线 |
| 加粗 | |
| 倾斜 | |
| 下划线 | |
| 删除线 |
图像标签
src用于指定图片的位置和名称，是必须属性
图像属性：alt替换文本：图片无法显示时显示的文字
width：图片宽度 height：图片高度
title提示文本：鼠标悬停在图片上面显示的文字
ps：属性写在尖括号里面，标签名里面，标签名和属性之间用空格隔开
路径
①相对路径：从当前文件位置出发查找目标文件 “.”当前文件所在文件夹
父级（进入上一级）../ 子级/ 同级./ “/”进入某个文件夹里面
②绝对路径：从盘符出发查找目标文件（Windows从盘符出发，Mac从根目录）
Windows默认是\，其他系统是/ 应用场景：友情链接
超链接标签
属性：target="_blank" 原网页不被覆盖，新打开一个网页（新窗口跳转页面）
如果没有超链接的跳转地址，helf属性值写“#”,表示空链接，不会跳转
音频标签
属性：scr 音频URL 支持格式：MP3\Ogg\Wav
controls 显示音频控制面板
loop 循环播放
autoplay 自动播放（为提升用户体验，浏览器一般会禁用自动播放）
视频标签
属性：scr 视频URL 支持格式：MP4\Ogg\WebM
controls 显示视频控制面板
loop 循环播放
muted 静音播放
autoplay 自动播放（浏览器支持在静音状态自动播放）
列表
布局内容排列整齐的区域（无序列表、有序列表、定义列表）
①无序列表：布局排列整齐的不需要规定顺序的区域
ul嵌套li,ul是无序列表，li是列表条目（ul标签里面只能包裹li标签）
②有序列表：布局排列整齐的需要规定顺序的区域
ol嵌套li，ol是有序列表，li是列表条目（ol标签里面只能包裹li标签）
③定义列表：dl嵌套dt和dd（dl标签里面只能包裹
dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情
表格
用于展示数据 table嵌套tr,tr嵌套td/th
| table |
表格 |
| tr | 行 |
| th | 表头单元格 |
| td | 内容单元格 |
在网页中，表格默认没有边框线，使用border加边框线
表格结构标签
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
合并单元格：将多个单元格合并成一个单元格，以合并同类信息
步骤1、明确合并目标
2、保留最左最上的单元格，添加属性（取值是数字，表示需合并的单元格数量）
跨行合并，保留最上单元格，添加属性“rowspan”
跨列合并，保留最左单元格，添加属性“colspan”
3、删除其他单元格
表单：收集用户信息 场景：登录页面、注册页面、搜索区域
input 标签 input标签type属性值不同，则功能不同
type属性值
| text | 文本框，用于输入单行文本 |
| radio |
单选框 |
| file | 上传文件 |
| password | 密码框 |
| checkbox | 多选框 |
placeholder属性：提示信息 默认浅色
下拉菜单：“select”嵌套“option” selected属性，默认选中
按钮
属性值
submit 提交按钮，点击后可提交数据到后台（默认）
reset 重置按钮，点击后将表单控件恢复默认值
button 普通按钮，默认没有功能
form标签，管理所有表单控件的标签（表单区域标签）
action属性：发送数据的地址
CSS引入方式
①内部样式表：CSS代码写在“style”标签里面
②外部样式表：CSS代码单独写在CSS文件中
在HTML使用“link”标签引入
③行内样式：CSS写在标签style属性值里
选择器
查找标签，设置样式
①标签选择器：使用标签名作为选择器——选中同名标签设置相同的样式
无法差异化同名标签样式
②类选择器：差异化设置标签的显示效果
（1）定义类选择器——.类名
（2）使用类选择器——标签添加class=“类名”
一个类选择器可以给多个标签使用
一个标签可以用多个类名class属性值写多个类名，用空格隔开
③id选择器：配合js使用
（1）定义id选择器——#id
（2）使用id选择器——标签添加id=“id名”
ps:同一个id选择器在一个页面中只能使用一次
④通配符选择器：查找页面所有标签，设置相同样式
*不需要调用浏览器自动找所有标签