wiki/开发/前端/HTML手册.md

# HTML手册

## 标题标签

```
h1~h6
文字加粗
字号逐渐减小
独占一行
```

## 段落标签

```
p
独占一行
段落之间存在间隙
```

## 换行标签

```
br
```

## 水平线标签

```
hr
```

## 文本格式化标签

```
strong 加粗
em 倾斜
ins 下划线
del 删除线
```

## 图像标签

```
img
属性：
	src 图片url
	alt 替换文本
	title 鼠标悬浮在图片上提示文本
	width 图片高度
	height 图片高度
```

## 超链接

```
a
属性：
	href 跳转地址
	target="_blank" 新窗口打开页面
```

## 音频标签

```
audio
属性：
	src 音频URL
	controls 显示视频控制面板
	loop 循环播放
	autoplay 自动播放
```

## 视频标签

```
video
属性：
	src 视频url
	controls 显示视频控制面板
	muted 静音播放
	loop 循环播放
	autoplay 自动播放
```

## 列表标签

```
ul 无序列表
ol 有序列表
	li 列表项 能放任何东西
dl 定义列表
	dt 列表标题
	dd 列表项
```

## 表格标签

```
table 表格
	tr 行
		th 头
		td 列
```

## 合并表格

```
rowspan 行跨几行
colspan 列跨几行
```

## 表单

```
form
```

## 输入标签

```
input
属性：
	type
		text 文本框
		password 密码框
		radio 单选框
			name 同组中只能选一个
			checked 默认选中
		checkbox 多选框
		file 上传文件
			multiple 多选文件
	placeholder 提示信息
```

## 下拉菜单

```
select 下拉菜单整体
	option 每一项
		selected 默认选中
```

## 文本域

```
textarea
```

## 标签标签

```
label
	for id 绑定id增大选中范围
```

## 按钮标签

```
button
	type
		submit 提交按钮提交数据到后台
		reset 重置按钮
		button 普通按钮没有功能
```

## 语义标签

```
div 块级标签
span 行内标签
```

# CSS手册

## 标签选择器

```
标签名 {

}
```

## 类选择器

```
.类名 {

}
```

## id选择器

```
#id名 {

}
```

## 通配符选择器

```
* {

}
```

## 后代选择器

```
div span {
	选择所有后代
}
```

## 子代选择器

```
div > span {
	只选择一个子代
}
```

## 交集选择器

```
p.box {
	选择带有类名为box的p标签
}
```

## 鼠标悬停选择器

```
a:hover {
	鼠标悬停
}
```

## 超链接访问前选择器

```
a:link {
	超链接访问前
}
```

## 超链接访问后选择器

```
a:visited {
	超链接访问后
}
```

## 超链接点击时选择器

```
a:active {
	超链接点击时
}
```

## 查找第一个元素选择器

```
标签:first-child
```

## 查找最后一个元素选择器

```
标签:last-child
```

## 查找第N个元素选择器

```
标签:nth-child(N) n从0开始
	2n 偶数
	2n+1 奇数
```

## 添加内容选择器

```
标签::before {
	content : "内容"
}
```

```
标签::after {
	content : "内容"
}
```

## 继承性

```
子级默认继承父级的文字控制属性
```

## 层叠性

```
相同的属性后面覆盖前面的
不同的属性会叠加
```

## 优先级

```
直接看vscode 前面的越大越优先（id、类、标签）
```

## 盒子宽度

```
width 宽度
```

## 盒子高度

```
height 高度
```

## 内边距

```
padding 内边距
```

## 外边距

```
margin
```

## 边框线

```
border 宽度 线类型 颜色
	solid 实线
	dashed 虚线
	dotted 点线
```

## 盒子尺寸

```
box-sizing
	border-box 内减，不会撑大盒子尺寸
```

## 盒子溢出

```
overflow
	hidden 溢出隐藏
	scroll 溢出滚动，无论溢出与否都显示滚动条
	auto 溢出才滚动
```

## 外边距合并

```
垂直排列的兄弟，上下margin会合并，取最大的值生效
```

## 外边距塌陷

```
父子级标签，子级添加外边距会被父亲抢走
解决方式：
	1、取消子级margin，设置父亲padding
	2、父级设置overflow: hidden
	3、父级设置border-top
```

## 行内元素内外边距

```
行内元素添加margin、padding 无法改变元素垂直
解决方式：
	1、给行内元素添加line-height 改变垂直位置
```

## 圆角盒子

```
border-radius
	数字+px
```

## 阴影盒子

```
box-shadow
```

## 文字大小

```
font-size 文字大小px，默认16px
```

## 文字粗细

```
font-weight
	400 正常
	700 加粗
```

## 字体倾斜

```
font-style
	normal 正常
	italic 倾斜
```

## 文本行高

```
line-height
	等于盒子高度的时候单行文字会在盒子里垂直居中
```

## 字体族

```
font-family
	字体名 设置字体样式
```

## 文本缩进

```
text-indent
	?em 缩进几个字符
```

## 文本水平对齐

```
text-align
	left 左对齐
	center 居中对齐
	right 右对齐
```

## 文本修饰线

```
text-decoration
	none 无效果
	underline 下划线
	line-through 删除线
	overline 上划线
```

## 文字颜色

```
color
	rgba（r,g,b,a）
```

## 背景色

```
background-color
```

## 背景图

```
background-image url()
```

## 背景图平铺方式

```
background-repeat
	no-repeat 不平铺
	repeat 平铺
	repeat-x 水平方向平铺
	repeat-y 垂直方向平铺
```

## 背景图位置

```
background-position
	left 左侧
	right 右侧
	center 居中
	top 顶部
	bottom 底部
```

## 背景图缩放

```
background-size
	cover 等比例缩放背景图完全覆盖背景区、可能背景图片部分看不见
	contain 等比例缩放背景图片以完全装入背景区，可能部分区域空白
```

## 背景图固定

```
background-attachment
	fixed 固定
```

## 显示模式

```
display
	block
		独占一行
		宽度默认是父级的100%
		添加宽高属性生效
	lnline-block
		一行可显示多个
		设置宽高属性不生效
		宽高尺寸由内容撑开
	inline
		一行可以显示多个
		设置宽高属性生效
		宽高尺寸也可以由内容撑开
```

## 浮动

```
float 让块元素水平排列
	left 左对齐
	right 右对齐
	浮动后的盒子顶对齐
	浮动后的盒子具备行内块特点
	浮动后的盒子脱标，不占标准流位置
	如果父级没有高度，子级无法撑开父亲高度
```

## 清除浮动

```
.clearfix::before,
.clearfix::after {
	content: "";
	display: table;
}

.clearfix::after {
	clear: both;
}
```

## Flex组成

```
设置方式：给父元素设置display:flex，子元素可以自动挤压或拉伸
组成部分：
	弹性容器
	弹性盒子
	主轴：默认在水平方向
	侧州：默认在垂直方向
```

## 创建flex容器

```
display: flex；
```

## flex主轴对齐方式

```
justify-content
属性：
	flex-start 弹性盒子从起点开始依次排列
	flex-end 弹性盒子从终点开始依次排列
	center 弹性盒子沿主轴居中排列
	space-between 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子之间 
	space-around 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子两侧
	space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
```

## flex侧轴对齐方式

```
align-items 当前弹性容器内所有弹性盒子的侧轴对齐方式
align-self 单独控制某个弹性盒子的侧轴对齐方式
属性：
	stretch 弹性盒子沿测轴线被拉伸至铺满容器
	center 弹性盒子沿测轴居中排列
	flex-start 弹性盒子从起点开始依次排列
	flex-end 弹性盒子从终点开始依次排列
```

## flex主轴方向

```
flex-direction 主轴默认在水平方向，侧轴默认在垂直方向
属性：
	row 水平方向，从左向右
	column 垂直方向，从上到下
	row-reverse 水平方向，从右向左
	column-reverse 垂直方向，从下向上
```

## flex弹性伸缩比

```
flex 控制弹性盒子的主轴方向的尺寸 整数数字，占用父级剩余尺寸份数
```

## flex弹性盒子换行

```
flex-wrap 弹性盒子可以自动挤压或拉伸，默认情况在，所有弹性盒子都在一行显示
属性：
	wrap 换行
	nowrap 不换行
```

## flex行对齐方式

```
align-content
属性：
	flex-start 弹性盒子从起点开始依次排列
	flex-end 弹性盒子从终点开始依次排列
	center 弹性盒子沿主轴居中排列
	space-between 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子之间 
	space-around 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子两侧
	space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等
```

## 相对定位

```
position: relative 设置盒子的位置
不脱标，占用自己原来的位置
left
right
top
bottom
值可以写50%
需要加transform:translate(-50%,-50%)
```

## 绝对定位

```
position: absolute
脱标，不占位
显示模式具备行内块特点
设置偏移则相对最近的已经定位的祖先元素改变位置，所以子绝父相
```

## 挪动自己大小的一半

```
transform:translate(-50%,-50%)
```

## 固定定位

```
position：fixed 元素的位置在网页滚动时不会改变
脱标，不占位
显示模式具备行内块特点
```

## 堆叠层级

```
z-index 按照标签书写位置，后来者居上，属性值为数字，取值越大，层级越高
```

## 行内块垂直对齐方式

```
vertical-align
	bottom
	top
	middle
```

## 过渡

```
transition给一个元素在不同状态之间切换的时候增加过渡效果
加到原属性
属性值：
	过渡的属性（可以是all）  花费的时间
```

## 透明度

```
opacity 设置整个元素的透明度
```

## 光标类型

```
cursor 鼠标悬停在元素上时显示样式
	pointer 小手效果
	text 工字型
    move 十字光标
```

## 平面转换（2D转换）

```
transform为元素添加动态效果，改变盒子在平面的形态（位移、旋转、缩放、倾斜），通常卸载hover里
属性值：
	translate(x轴，y轴) 左/上都为负，值为像素和百分比
	rotate(旋转角度) 单位deg 取正顺时针旋转，取负逆时针旋转
	transform-origin 水平原点位置 垂直原点位置  。转换原点位置  取值left、top、right、bottom
	scale(缩放倍数/x轴/y轴缩放倍数)
	skew(倾斜度数)
多重转换：先平移再旋转
```

## 渐变色

```
linear-gradient(
	渐变方向（默认从上到下,可以to right/left/top/角度度数)
	颜色1 终点位置(百分比),
	颜色2 终点位置
)
```

## 径向渐变

```
radial-gradient(
	半径（可以是2条） at 圆心位置（像素单位数值/百分比/方位名词），
	颜色 终点位置，
	颜色 终点位置，
)
```

## 空间平移（3D）

```
transform: translate3d(x,y,z)
	translateX()
	translateY()
	translateZ()
	
perspective：视距（人眼和屏幕之间的距离，建议800-1200px），给父级元素添加，子级的translateZ就生效了
```

## 空间旋转（3D）

```
transform:  沿着哪个轴旋转
	rotateX()
	rotateY()
	rotateZ()
```

## 动画

```
animation 动画名字 动画花费时间 速度曲线 延迟时间 重复次数  动画方向 执行完毕时状态
	定义动画
		@keyframes 动画名 {
		 	from {}
		 	to {}
		}
		@keyframes 动画名 {
			0% {}
			20% {}
			100% {}
		}
	速度曲线：
		linear：匀速
		steps(步骤) 分步动画
	重复次数：infinite 无限循环
	反向：alternate
	结束状态：forwards 结束状态  backwards 开始状态
animation-play-state 暂停动画 paused 为暂停
```

## rem适配

```
rem 相对于HTML标签的字号计算结果
```

## 媒体查询

```
@media (媒体特性[width:375px]) {
	#差异化CSS样式
	选择器 {
	
	}
}
```

## flexible.js

```
flexible.js是淘宝开发的一个用来适配移动端的js库，根据不同的视口宽度设置不同的fontsize
```

## less

```
less是一个CSS预处理器，Less后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力
```

## 页面丝滑滚动

```
html {
	scroll-behavior: smooth;
}
```