html
- ：声明文档类型为 HTML5
- ：根标签
- ：存放元信息（标题、编码、样式、脚本等）
- ：网页可见内容
- 常用文本标签
~
：标题（1 最大，6 最小）
：段落
：换行
：水平线- / ：加粗
- / ：斜体
- ：行内小容器，无默认样式
- 列表标签
- 无序列表：
html
- 列表项
- 有序列表：
html
- 列表项
- 链接与图片
- 超链接：
html
文字
_blank ：新标签页打开
- 图片：
html
- 表格（table）
html
| 表头 |
|---|
| 单元格 |
- ：行
- ：表头单元格
- ：普通单元格
- 表单（form）——用户交互
html
常用 type ：
- text ：文本
- password ：密码
- radio ：单选
- checkbox ：多选
- button ：按钮
- submit ：提交
- 块级元素 & 行内元素
- 块级：独占一行，可设宽高
例： div、p、h1~h6、ul、ol、li、table、form - 行内：不换行，并排显示
例： span、a、img、strong、em
CSS 三种引入方式
1. 行内样式
html
文字
2. 内部样式表
html
3. 外部样式表（推荐）
html
- 常用选择器
- 标签选择器
css
p { ... }
- 类选择器（最常用）
css
.box { ... }
- ID 选择器
css
header
- 通配符
css
- 后代选择器
css
div p { ... }
- 并集选择器
css
div, p, .box { ... }
5. 文字样式
- color ：文字颜色
- font-size ：文字大小
- font-weight ：加粗（bold）
- font-family ：字体
- text-align ：对齐（left/center/right）
- line-height ：行高
- text-decoration ：下划线（none/underline）
- 盒子模型（重点）
所有元素都像盒子：
- content ：内容
- padding ：内边距（盒子内部撑开）
- border ：边框
- margin ：外边距（盒子与盒子距离）
简写：
css
padding: 上 右 下 左;
margin: 0 auto; /* 水平居中 */
7. 显示模式
- 块级元素：独占一行，可设宽高
div、p、h1~h6、ul、li - 行内元素：并排，不能设宽高
span、a、img - 行内块：并排+可设宽高
css
display: inline-block;
- 隐藏元素
css
display: none;
8. 背景样式
- background-color ：背景色
- background-image ：背景图
- background-repeat ：是否重复
- background-size ：背景大小
- background-position ：背景位置
- 浮动（float）
- 让块级元素并排
css
float: left;
float: right;
- 浮动会脱标，父级要清除浮动：
css
.clearfix::after {
content: "";
display: block;
clear: both;
}
10. 定位（position）
- static ：默认
- relative ：相对定位（不脱标）
- absolute ：绝对定位（脱标，父级relative）
- fixed ：固定定位（固定在屏幕）
配合： top / left / right / bottom