目录
侧轴对齐方式（align-items、align-self）属性值
HTML
常用标签
标签名
效果
h1~h6
标题标签
align
改变文本位置（靠左、靠右、居中）
p
段落标签（独占一行）
br
换行
hr
水平线
strong、b
字体加粗
em、i
字体倾斜
ins、u
字体下划线
del、s
字体删除线
img
导入图片
a
超链接
audio
导入音频
video
导入视频
备注：
双标签：成对出行的标签
单标签：只有开始标签，没有结束标签
图片标签的必须属性与非必须属性
属性名
作用
说明
必须属性
src
导入图片的URL
src用于指定图像的位置和名称
非必须属性
alt
提示文本
鼠标悬停在图片上面的时候显示的文字
width
图片的宽度
值为数字，没有单位
height
图片的高度
值为数组，没有说明
备注：URL（统一资源定位器）是指图像的位置和名称
音频标签的必须属性与非必须属性
属性名
作用
说明
必须属性
src
导入音频的URL
支持格式：MP3、Ogg、Wav
非必须属性
controls
显示音频控制面板
loop
循环播放
autoplay
自动播放
为了提升用户体验，浏览器支持禁用此功能
视频标签的必须属性与非必须属性
属性名
作用
说明
必须属性
src
导入视频URL
支持MP4、WebM、Ogg格式
非必须属性
controls
显示视频控制面板
loop
循环播放
muted
静音播放
autoplay
自动播放
为了提升用户体验，浏览器支持在静音状态下自动播放
列表
标签
作用场景
注意事项
无序列表
ul嵌套li，ul是无序列表，li是列表条目
作用于布局排列整齐的不需要规定顺序的区域
ul标签里面只能包含li标签；li标签可以包含任何内容
有序列表
ol嵌套li，ol是有序列表，li是列表条目
作用于布局排列整齐的需要规定顺序的区域
ol标签里面只能包裹li标签；li标签可以包裹任何内容
定义列表
dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述/详情
一般作用于网页底部
dl里面只能包含dt和dd；dt和dd里面可以包含任何内容
备注：无序列表li内容前面有小圆点
表格
标签：table嵌套tr，tr嵌套td/th
标签
使用场景
书写方式
特点
table嵌套tr，tr嵌套td/th
网页中的表格与Excel表格类似，用来展示数据
先写行（先有行），再写单元格
会根据内容的大小来缩放表格
诠释标签作用
标签名
说明
table
整个表格
tr
行（有几行就写几个tr）
th
表头单元格（字体要比td粗一些）
td
内容单元格
备注：
在网页中表格默认没有边框线 ，再table中使用border属性可以为表格添加边框线（border="1"表示要1像素的边框线）
tr中嵌套tr不会写入表格中
表格的结构标签
作用：把内容划分区域，让表格结构、语义更清晰
标签
标签名
含义
说明
thead
表格头部
包含住表格头部内容区域的结构
tbody
表格主体
包含住主要内容区域的结构
tfoot
表格底部
包含住汇总信息区域的结构
备注：此三类标签是写给浏览器看的，浏览器不显示（人眼无法在浏览器上看到效果）
合并单元格
作用
将多个单元格合并成一个单元格，以合并相同信息
类型
跨行合并、跨列合并
合并单元格步骤
steps one
明确合并目标
steps two
保留最左、最上的表格，添加属性（取值是数字，表示需要合并的单元格数量）；跨行合并，保留最上单元格，添加属性rowspan；跨列合并，保留最左单元格，添加属性colspan
steps three
删除其他单元格
备注：所用的操作都必须在自己结构里面操作，不可以跨结构操作
表单
作用
收集用户信息
使用场景
登录页面、注册页面、搜索区域
标签名
有语义的布局标签
标签名
说明
input
根据type属性值不同，实现不同功能
label
作用于网页中，某个标签的说明文本；用label标签绑定文字和表单控件的关系，增大表单控件的点击范围
button（按钮）
实现按钮功能
备注：支持label标签的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等
无语义的布局标签
标签名
作用
效果
div（大盒子）
布局网页（划分网页区域，摆放内容）
独占一整行
span（小盒子）
布局网页（划分网页区域，摆放内容）
不换行
label标签的写法
ways one
label标签只包裹内容，不包裹表单控件；设置label标签的for属性值与表单控件的id属性值相同即可实现label功能
ways tow（推荐）
使用label标签包裹文字和表单控制（例：input）属性，不需要添加属性
input标签的type属性
type属性值
说明
text
文本框，用于输入单行文本
password
密码框
radio
单选框
checkbox
多选框
file
上传文件
备注：
text、password与placeholder的配合使用：
实现提示信息功能：占位文本属性"placeholder="提示信息""
radio与name、checked的配合使用：
属性名
作用
特殊说明
name
控制名称
控件分组，同组只能选中一个（即单选功能）
checked
刷新页面时默认选中
属性名与属性值相同，可以简写成一个单词
同理，checkbox也可以与checked配合使用，实现默认效果
file与multiple的配合使用：
实现上传多个文件的效果
button标签的type属性值
type属性值
说明
submit
提交按钮，点击后可以提交数据到后台（默认功能）
reset
重置按钮，点击后将表单控件恢复默认值
button
普通按钮，默认没有功能，一般配合JavaScript使用
备注：reset属性只能重置form属性管理的表单（可实现按钮重置表单控件）
字符实体
作用：在网页中显示预留字符
显示效果
实体名称
空格
 
<
<(<)
>
>
实现下拉菜单功能
标签：select嵌套option
诠释：
标签名
功能
select
下拉菜单整体
option
下拉菜单的内容每一项
selected（属性名）
刷新页面时实现默认选中的功能
备注：想要实现哪个下拉菜单选项为默认值就在哪个option标签中加selected属性
文本域
标签名
作用
作用场景
textarea
多行输入文本的表单控件
类似于发朋友圈、评论框之类
CSS
盒子
div大盒子、span小盒子
属性名
作用
width
宽度
height
高度
background-color
背景色
选择器：
基础选择器
名称
说明
格式
标签选择器
选中同名标签设置相同样式
标签名：p{样式}、img{样式}......
类选择器
查找标签，差异化设置标签显示效果
定义：.类名{样式}；使用：class="类名（注：没有点）"
id选择器
查找标签，差异化设置标签显示效果，多有javaScript使用
#名字（id名）；注：同一个id选择器在一个页面只能使用一次
通配符选择器
查找页面所以标签，设置相同样式
*{设置的样式}
复合选择器
名称
用法描述
语法
注意事项
后代选择器
选择元素的后代元素
父选 子选{CSS属性}（父子间空格隔开）
后代选择器选中所以后代
子代选择器
选中某元素的最近子代元素（最近子级）
父>子{CSS属性}（父子间用>隔开）
并集选择器
选中多组标签设置相同属性
选择器1，选择器2......选择器n{CSS属性}（用逗号隔开）
交集选择器
选中同时满足多个条件的元素
选择器1选择器2{CSS属性}（选择器之间连写，没有任何符号）
如果交集选择器中有标签选择器，标签选择器必须写在最前面
伪类选择器
"伪类"表示元素的状态，选中元素的某个状态设置样式
选择器：hover{CSS属性}（鼠标悬停状态）
任何标签都可以设置鼠标悬停状态
结构伪类选择器：
作用：根据元素的结构关系查找元素
经验：查找到的元素后可以加上{属性}和其他选择器一样可以往{}中添加属性
选择器
说明
X：first-child
查找第一个X元素
X：last-child
查找最后一个X元素
X：nth-child（n）
查找第n个X元素（第一个元素n为1）
nth-child(公式)
注：
用于ul标签较多
必须是n才可以，其他变量没作用
对于公式n+5/n-5而言：n是从0开始计算（不会覆盖first-child/last-child）
公式
功能
2n
偶数标签
2n+1；2n-1
奇数标签
5n
找到5的倍数的标签
n+5
找到第五个以后的标签
-n+5
找到第5个以前的标签
超链接标签a的四个状态
选择器
作用
：link
访问前
：visited
访问后
：hover
鼠标悬停时
：active
点击时（激活）
备注：要使用这四个顺序要按照link、visited、hover、active的顺序书写。
伪元素选择器：
作用：创建虚拟元素（伪元素），用来摆放装饰性的内容
注意：
必须设置content：" "属性用来设置伪元素的内容（内容可留空）
伪元素默认是行内显示模式
权重和标签选择器相同
选择器
说明
X::before
在X元素里面最前面添加一个伪元素
X::after
在X元素里面最后面添加一个伪元素
文字控制属性名
其写在选择器中
描述
属性名
效果
字体大小
font-size
文字尺寸（用px单位；且必须有单位，否则不生效）
文字粗细
font-weight
400px不加粗，700px加粗
行高
line-height
一般用于控制盒子内的文字
字体族
font-family
控制文字的字体形式
字体复合属性
font
复合属性
文本缩进
text-indent
显示自然段的开头两个空格效果
文本对齐
text-align
left（左）right（右）center（居中）
修饰线
text-decoration
+属性下滑线、删除线、顶格线等修饰线
颜色
color
字体倾斜
font-style
有些字体默认为倾斜 效果
字体粗细（font-weight）的属性值：
正常
加粗
关键字
normal
bold
数字（开发使用）
400px
700px
行高的组成：
行高=上间距+文本高度+下间距
修饰线（text-decoration）的属性值：
属性值
效果
none
无
underline
下划线
line-through
删除线
overline
上划线（顶格线）
颜色（color）的属性值：
颜色的表达方式
属性值
说明
使用场景
颜色关键字
颜色对于的单词
red、green、blue......
学习测试
rgb
rgb（r，g，b）
表示红绿蓝三原色，取值：0~255
rgba
rgb（r，g，b，a）
a表示透明度，取值：0~1
开发使用，实现透明色
十六进制
#RRGGBB
可以简写：相同两个字母可以写一个
开发使用（可以用Pxcook测量）
字体倾斜（font-style）的属性值：
属性值
效果
normal
正常
italic
倾斜
CSS的三大属性
特性
特点
诠释特点
继承性
子级默认继承父级的文字控制属性，当标签有自己的样式时不会继承父类，会执行自己的样式
层叠性
覆盖（不同选择器中，哪个选择器优先级高就生效哪个选择器）、叠加
相同的属性会覆盖：后来者居上（程序至上而下运行）即后面的属性会覆盖前面的属性
优先级
选择器优先级高的样式生效
权重的高低：通配符选择器<标签选择器=伪类选择器<类选择器<id选择器<行内样式选择器<!important
备注：!important是提高优先级的作用，想要哪个选择器生效，就加到哪个选择器的属性后
优先级的叠加计算规则
叠加计算
公式
规则
如果是复合选择器，则需要权重叠加计算
（行内样式，id选择器个数，类选择器个数，标签选择器个数）
公式中从左向右 依次比较选择器个数，同一级个数多的优先级高，如果个数相同，则向后比较
备注：
!important权重最高，继承权重最低
要是是继承父类，即使父类属性有!important，其权重也是最低的
背景属性名
描述
属性名
背景色
background-color
背景图
background-image
背景图平铺方式
background-repeat
背景图位置
background-position
背景图缩放
background-size
背景图固定
background-attachment
背景图复合属性
background
背景图（bgi）属性值
url（图片路劲）；背景图一般都是在盒子里面写的，所以要先写好盒子的宽高
背景图平铺方式（bgr）属性值
属性值
效果
no-repeat
不平铺（图片出现在左上角）
repeat
平铺（默认效果）
repeat-x
水平方向平铺
repeat-y
垂直方向平铺
背景图位置（bgp）属性值
坐标
水平方向位置 垂直方向位置（像素单位px，正负代表方向）
关键字
关键字
位置
left
左侧
right
右侧
center
居中
top
顶部
bottom
底部
注
关键字取值方式可以颠倒取值顺序
只取一个关键字时，另一个方向默认居中；只取一个数字值时表示水平方向，垂直方向默认居中
数字与关键字可以混用
背景图缩放（bgz、bgs）的属性值
方式
属性值
效果
关键字
cover
等比例缩放图片以覆盖背景区（可能会导致图片溢出）；即覆盖整个盒子
contain
等比例缩放图片当图片的宽或高与盒子的宽或高相等时停止缩放，可能会导致盒子有露白
百分比
根据盒子尺寸计算图片大小
比较好用
数字+单位
背景图固定（bga）的属性值
作用：背景图不会随着元素的内容（盒子）滚动。（盒子可以动，图片（被钉住了）不动）
属性值：fixed
背景的复合属性（bg）
属性值：背景色 背景图 背景图平铺方式 背景图位置 /背景图缩放 背景图固定（空格隔开，不分顺序）
背景图的缩放要在前面加"/"符号
转换显示模式
属性名：display
属性值：
属性值
效果
block
块级
inline-block
行内块
inline
行内
显示模式备注：
显示模式类型
特点
块级元素
独占一行 ；宽度默认是父级的100%；添加宽高属性生效
行内元素
一行可以显示多个；设置宽高属性不生效；宽高尺寸由内容撑开
行内块元素
一行可以显示多个；设置宽高属性生效；宽高尺寸由内容撑开
了解
默认情况下是块级的标签
标签名
作用
div
用于组织内容
h
标题
p
段落
hr
水平线
ol
有序列表
ul
无序列表
li
列表项
dl
定义列表
dt
定义列表中的术语
dd
定义列表中的描述
pre
用于预格式化的文本
blockquote
引用
article
独立的内容块
figure
用于自包含的内容，通常与<figcaption>一起使用
figcaption
用于<figure>元素的标题
section
用于文档中的一个区段
nav
导航连接
aside
用于页面的侧边栏内容
footer
用于文档或区段的脚注
header
文档或区段的头部
form
用于表单
table
用于表格
thead
表格头部
tbody
表格主体
tfoot
表格脚注
tr
表格的行
th
表格的表头单元格
td
表格的单元格
默认情况下是行内的标签
标签名
作用
a
超链接
span
文本的分组，没有语义意义
br
换行
i
斜体文本
b
加粗文本
u
下划线文本
sub
下标文本
sup
上标文本
em
强调文本（效果与i相同）
strong
强烈强调文本（效果与b相同）
mark
标记文本
small
小号文本
del
删除线
ins
插入文本（它本身并不直接提供下划线的效果，但浏览器通常会给 <ins> 标签添加一个文本下划线）
q
短的引用
time
时间和日期
var
变量
cite
引用作品标签
code
代码文本
samp
计算机输出
kbd
键盘输入
dfn
定义一个术语
abbr
用于缩写
data
表示数据值
progress
显示任务进度
meter
表示度量或已知范围值
wbr
用于文本中可能用于需要换行的地方提供断字
默认情况下是行内块的标签
标签名
作用
input
输入数据
img
嵌入图片
buttom
可点击的按钮
select
下拉选择框
textarea
多行文本输入
label
为表单元素定义标签
video
嵌入视频
audio
嵌入音频
canvas
绘制图形
iframe
嵌入另一个文档
盒子模型：
盒子模型的重要组成部分：
组成
标签名
内容区域
width&&height
内边距
padding（出现在内容与盒子边缘之间）（会撑大盒子）
边框线
border（会撑大盒子）
外边距
margin（出现在盒子的外面）（可用于拉开两盒子距离）
内边距属性写法
属性值：px
padding/padding-方位名词（top、left、bottom、right）
padding多值写法：
上方初值，顺时针取值，对位取值
取值个数
示例
含义
一个值
padding:1px；
四个方向内边距都为1px
四个值
padding:1px 2px 3px 4px
上：1px；右：2px；下：3px；左：4px
三个值
padding:1px 2px 3px
上：1px；左右:2px；下3px
两个值
padding:1px 2px
上下：1px；左右:2px
边框线（bd）的属性值
属性值
线条样式
solid
实线
dashed
虚线
dotted
点线
设置单方向边框线
属性名：border-方位名词（top、right、left、bottom）
属性值：边框线粗细（像素值） 线条样式 颜色（不区分顺序）
外边框（margin）的属性值
与内边框border一样
注意：
margin实现版心居中效果：
把margin的左右执行写成auto（条件：盒子必须要有宽度）
解决盒子被撑大问题
内减模式：box-sizing:border-box（一般在清楚默认样式时就使用内减模式了）
清楚默认样式
清除标签：
way_one:通配符选择器选择全部标签，margin、padding取值为0
* {
margin:0；
padding:0；
}
way_tow:并集选择器选择所有标签，margin、padding取值为0
标签1,标签2,标签3......标签n {
margin:0；
padding:0;
}
清除有序、无序列表方式list-style取值为none即可：
list-style:none;
盒子问题
元素溢出：
属性名：overflow（控制溢出元素的内容显示方式）
属性值
属性值
效果
hidden
溢出隐藏
scroll
溢出滚动（无论是否溢出都显示滚动条位置）
auto
溢出滚动（溢出才显示滚动条位置）
外边距问题--合并与塌陷
合并现象：
垂直排列的兄弟元素，上下margin会合并，取两个margin中的较大值生效
塌陷问题：
原因：父子级的标签，子级添加上外边距会产生塌陷问题，导致父级一起向下移动
解决方法：
取消子级margin，父级设置padding
父级设置overflow:hidden
父级设置border-top
行内元素--垂直内外边距
行内元素添加margin与padding，无法改变元素垂直位置时，给行内元素添加line-height可以改变垂直位置
盒子模型常用属性
属性名
功能
border-radius
实现圆角
box-shadow
实现阴影
opacity
实现透明度（不局限与颜色，范围0~1，0表示透明，1不透明）
圆角属性值
属性值：像素值/百分比（属性值是圆角半径）
格式：从左上角顺时针赋值，没有取角的值与对角的值取值相同
**正圆形状：**给正方形盒子设置圆角属性值为盒子宽高的一半（50%）
正圆最大值为50%，超过50%就没有效果了
**胶囊形状：**给长方形盒子设置圆角属性值为盒子高度一半
阴影属性值：
属性值：x轴偏移量（必写） y轴偏移量（必写） 模糊半径 颜色 内外阴影
格式：box-shadow: 像素值 像素值 像素值 像素值 颜色 （inset）；
注：默认是外阴影，内阴影要加inset
浮动（float）：
属性名：float
通过margin来调li盒子的间距
属性值
作用
left
左对齐
right
右对齐
如果父级的宽度不够，浮动的盒子会"掉"下来，这时就要用到清除浮动了
清除浮动
ways
name
steps
one
额外标签法
在浮动父级内容最后添加一个块级元素来设置CSS属性clear：both
tow
单伪元素法
在浮动父级类名后添加伪元素名，伪元素内容为clear：both
three（推荐）
双伪元素法
before：解决外边距塌陷问题；after：清除浮动（仍然是clear：both）
four overflow 浮动父级添加CSS属性overflow：hidden
备注：
清除浮动的类名习惯上起名为clearfix
单伪元素格式：
.clearfix::after{
content:"";
display:block;
clear:both;
}
双伪元素格式：
/*before：解决外边距塌陷问题*/
/*after：清除浮动（仍然是clear：both）*/
.clearfix::before,
.clearfix::after{
content:"";
display:table;
}
.clearfix::after{
clear:both;
}
flex布局（主流）
flex布局属性名
属性名
描述
display：flex
创建flex容器
justify-content
主轴对齐方式
align-items
侧轴对齐方式（对所有弹性盒子）
align-self
某个弹性盒子侧轴对齐方式（对单个弹性盒子）
flex-direction
修改主轴方向
flex
弹性伸缩比
flex-wrap
弹性盒子换行
align-content
行对齐方式
主轴对齐方式（justify-content）属性值
行对齐方式（align-content）属性值
属性值
效果
flex-start
弹性盒子从起点开始依次排列（默认值）
flex-end
弹性盒子从终点开始依次排列
center
t弹性盒子沿主轴居中排列
space-between
弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间（父级剩余的空间拿去分配成间距，使得弹性盒子之间的间距相等）
space-around
弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧（间距出现在弹性盒子两侧，弹性盒子之间的距离是两端距离的2倍）
space-evenly
弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等（间距与两侧距离相等）
备注：属性align-content对单行弹性盒子不生效
侧轴对齐方式（align-items、align-self）属性值
属性值
效果
stretch
弹性盒子沿着侧轴被拉伸直至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center
弹性盒子沿侧轴居中
flex-start
弹性盒子从起点开始依次排列
flex-end
弹性盒子从终点开始排列
修改主轴方向（flex-direction）属性值
属性值
效果
row
水平方向，从左向右（默认）
column
垂直方向，从上向下
row-reverse
水平方向，从右向左
column-reverse
垂直方向，从下向上
弹性伸缩比（flex）属性值
属性值：整数数字，表示占用父级剩余尺寸的份数
备注：默认情况下，主轴方向尺寸是由内容撑开（使用伪类选择器选中弹性盒子后添加属性（flex、width、height）与属性值），侧轴默认拉伸
弹性盒子换行（flex-wrap）属性值
属性值
效果
wrap
换行
nowrap
不换行
定位
实现方式：定位模式+边偏移（用left、right、top、bottom来设置盒子的位置）
定位模式
属性值
是否脱标
显示模式
参照物
相对定位
relative
否
保持标签原有显示模式
自己原来位置
绝对定位
absolute
是
行内块特点
找最近的已经定位的祖先元素（父级，爷爷级......），如果所有祖先都没有定位则参照浏览器可视（窗口）区改位置
固定定位
fixed
是
行内块特点
浏览器窗口
备注：
定位居中的实现
steps one：使用绝对定位
steps tow：水平（left）、垂直（top）边偏移为50%
steps three：子级向左、上移动自身尺寸的一半，即左上的外边距为尺寸的一半。
实现steps three：
ways one："transform：translate（50%，50%）"；
ways tow："用margin来加边距实现：margin-left：取宽度一半的负数；margin-top：取高度一半的负数"
调整定位盒子的层级显示顺序
属性名：z-index
属性值：整数（默认值为0，取值越大显示顺序越靠上）
修饰属性
属性名
说明
vertical-align
实现文字垂直对齐方式（针对图片与文字在一个盒子中的文字）
transition（复合属性）
图片与文字 可以实现慢慢改变实现过度效果（用于鼠标悬停状态）
opacity
通常用于设置背景和内容实现整个元素的透明度
cursor
鼠标悬停于元素上时实现不同光标类型
备注：
复合属性：有多个值，且是空格隔开
垂直对齐方式（vertical-align）的属性值
属性值
效果
baseline
基线对齐（默认）
top
顶部对齐
middle（常用）
居中对齐
bottom
底部对齐
诠释过渡效果（transition）
属性值：过度的属性 花费的时间（要加单位s）
作用
可以将一个元素在不同状态之间切换的时候添加过渡效果
过度属性值的注意实现
过渡的属性可以是具体的CSS属性，也可以是all（两个状态属性值不同的所有属性，都产生过渡效果）
备注：
transition设置给元素本身，而不是设置给元素鼠标悬停状态
建议使用all，具体的CSS属性写法：改变宽度则在过度属性上写width，改变高度则在过度属性上写height，
一般translate属性都是于hover状态配合使用
光标类型（cursor）的属性值
属性值
效果
default
默认值，通常是箭头
pointer
小手效果，提示用户可以点击
text
工字型，提示用户可以选择文字
move
十字光标，提示用户可以移动