H5C3
序号 属性 下级属性 详解 备注
7个布局标签 IE8及以下不支持:导入模板
1 header 表示头部区域
2 nav 表示导航区域
3 main 表示主体区域
4 section 主体里的某个小区域
5 aside 主体里小区域的边栏
6 article 主体里小区域的文章
7 footer 表示尾部区域
h5里面推荐自定义属性写法
9 data-属性名 自定义行内标签
10 属性.dataset.属性名 原生取属性值方法
11 $(元素).data('属性名') JQ取属性值方法
form 表单input新增的一些元素
14 <input type="xxx">
15 email 输入邮箱,.现在看不出差别，但是提交的时候会自动验证是不是邮箱格式
16 number 输入数字.移动端会弹出数字键盘
17 color 出现一个颜色选择的输入框
18 url 用来输入网址的输入类型,提交的时候自动检测输入的内容是不是网址
19 tel 用来输入电话买电脑端看不出差别,移动端游差别,弹出键盘类似的数字键盘
20 date 时间框
21 range 滑块
22 required 必填项 不用带值
23 pattern 输入正则表达式的属性
24 autofocus 谁加了这个属性页面打开焦点显示在哪里 不用带值
25 multiple 可以多文件上传,配合file 不用带值
一些属性
27 multiple mutiple属性，让上传文件可以选择多文件
28 选择符 某元素+xx 找到某元素下面的兄弟元素
29 某元素~xx 找到某元素后面的所以兄弟元素（不包括自己）
31 属性选择器 ele[attr] 代表找到attr这个属性的元素
32 ele[attr=值] 代表attr属性等于这个值的元素
33 ele[attr^=值] 代表attr属性以这个值开头的元素
34 ele[attr$=值] 代表attr属性以这个值结尾的元素
35 ele[attr*=值] 代表attr属性包含这个值得元素
37 伪类选择器 :first-child 找到第一元素的标签
38 :last-child 找到最后一个元素的标签
39 :nth-child() 找到n个元素的标签
40 :first-of-type 找到第一个元素
41 :last-of-type 找到最后一个元素的标签
42 :nth-of-type() 找到第n个元素的标签
43 伪元素选择器
44 ::first-letter 找到首字母
45 ::first-line 第一行
46 ::selection 鼠标选中的哪行
47 ::placeholder 选择到的占位符
48 ::before 在不改变改变结构代码的基础上,在元素前面新添加一个元素显示,默认是行内元素,必须带有content属性
49 ::after 同上,在元素后面添加一个元素显示
盒子模型
51 box-sizing: border-box 内聚
52 content-box 外扩
53 盒子阴影 box-shadow 参数1：水平方向的偏移
54 参数2：垂直方向的偏移
55 参数3：模糊度
56 参数5：阴影宽度
57 参数5：阴影颜色
58 参数6：inset 加上就是内阴影，可以写在最前面
59 文字阴影 text-shadow 参数1：阴影水平偏移
60 参数2：阴影垂直偏移
61 参数3：模糊度
62 参数4：颜色
63 背景 background 参数1：图片路径
64 参数2：是否平铺
65 参数3:图片位置/图片大小
66 参数4：背景颜色
67 多张背景图片，用逗号隔开
90 线性渐变 linear-gradient() 参数1：渐变的方向 也可以传角度，0deg是从下到上，值越大就是角度顺时针旋转
91 参数2：开始颜色
92 参数3：第二个颜色
93 后面可以加N个颜色
94 颜色后面可以加百分比，第一个颜色百分比代表结束为止，后面颜色百分比代表开始位置
radial-gradient() 参数1：圆心半径和位置 100px at center(在盒子中心,半径100)
参数2：开始颜色
参数3：第二个颜色
其他跟线性一样的特点
70 过渡 transition 参数1：参与过渡的属性
71 参数2：动画持续时间
72 参数3：延迟时间
73 参数4：动画效果 steps分步骤完成
74 linear匀速
75 加在平时和加在hover的区别： 加在平时，代表hover和移出时都有效果
76 只加在hover里，只有移入有动画，还原没有动画
78 transform
2D变换
79 rotate(deg) 旋转：传入角度,deg
80 translate() 平移：传入平移的x轴，和y轴距离，只传一个代表只走x方向
81 scale() 缩放：传入倍数，不要加单位，小于1缩放，大于1放大，等于1不变，如果只传1个参数，代表宽高都缩放，如果传两个，一个代表宽，一个代表高
82 skew() 扭曲：传入角度，其实就是倾斜成平行四边形，这个一般不用
83 3D变换
84 rotateX(值deg) X轴旋转
85 rotateY() Y轴旋转
86 rotateZ() Z轴旋转
87 perspective: 视距
88 transform-style:3d（快捷敲出来） 开启3D
95 伸缩布局 display:flex 让这个盒子内的元素应用伸缩布局
96 justify-content: 主轴方向的排列
97 flex-start 在主轴起点对齐
98 flex-end 在主轴重点对齐
99 center 在主轴居中
100 space-around 左右有间距,并子元素和子元素之间也有间距
101 space-between 左右没有间距,子元素和子元素之间有间距
102 align-items: 统一设置副轴上的排列
103 flex-start 在主轴起点对齐
104 flex-end 在主轴重点对齐
105 center 在主轴居中
106 align-self: 单独设置这个元素在副轴上的位置
107 flex-direction: 修改主轴方向
108 row 默认值，代表x轴方向为主轴，起点就是左边
109 column 代表修改主轴为y轴，起点为上边
110 row-reverse 代表x轴为主轴，起点是右边
111 column-reverse 代表修改主轴为y轴，起点为下边
112 flex-wrap:wrap 允许换行
113 flex: 设置这个元素在主轴上占的份数
115 动画 animation
116 @keyframes 动画名{}
