2021-10-12

第一章、HTML5 特性

一、表单新元素和类型

· 1 email 类型

用于邮件地址的输入，它只适用于邮箱输入。

· 2 tel 类型

是 input 标签专门用来输入电话号码的文本框，它并不仅局限输入数字，还可以输入一些其他的字符，例如：- +（）等。

· 3 datalist 元素

用于为输入框提供一个可选择的数据列表。在具有自动提示功能的文本框中可以使用这些选择项来自动补全文本框。该标签由 datalist 和 option 标签组合应用。

·4 multiple 属性

规定用户可以一次可以输入多个值。适用于文件上传功能，也可以在 email 类型中使用该属性。

· 5 语义化标签

正则表达式regular expresion ,即一种表达式，通常由数字、字母、特殊符号构成，用于定义一种格式“规则"，看着它就知道是什么意思。
应用场景:查找、替换、过滤、筛选、验证等

第二章、CSS3

一、css3选择器

· 1、新增属性选择器

通过正则的方式去匹配指定属性的元素，为其设置样式。

![在这里插入图片描述](https://img-blog.csdnimg.cn/55461edda8ba4a74aea612755452968d.png

2、子元素伪类选择器

是选择某元素的子元素的一种选择器。

3、UI 伪类选择器

是通过元素的状态来选择的一种选择器。

eg :

4、rgb颜色

rgba： a 是透明度
hsl：h 色相、 s 饱和度 、 l 亮度**

二、css3 新增特效

1、阴影的使用

①文本阴影：text-shadow:x x x x(左右；上下；阴影的模糊程度；阴影的颜色)
②图片阴影：box-shadow

2、@font-face 的使用

是下载文档中需要用到的字体

3、word-wrap、 word-break属性

用来强制换行文字。

4、文本溢出 ：text-overflow

5、圆角边框的使用

border-radius ：上 右 下 左

6、边框图片的使用 border-image

可以让变化的边框长度或者宽度使用一个图像来绘制。

7、线性渐变颜色background-image（四周渐变颜色）

8、径向渐变（从中间渐变颜色）

三、css3 3D-2D的转化

1、旋转，移动，缩放，倾斜(transform)函数

①transform: rotate(角度);
②transform: translate 移动图片位置
③transform:scale() 函数能够缩放元素大小

④transform:skew() 函数能够让元素倾斜显示

⑤matrix() 是矩阵函数，

⑥transform-origin 属性允许更改转换元素在 X 轴、Y 轴、Z 轴上的位置

⑦transform-style 属性指定嵌套元素是怎样在三维空间中呈现。

⑧perspective 属性允许你改变 3D 元素查看透视图的方式。在定义时它是一个元素的子元素透视图，而不是元素本身。


⑨perspective-origin 属性定义基于的 X 轴和 Y 轴的 3D 元素。该属性允许改变 3D 元素的底部位置。

⑩display：scale（1） 伸缩，保持原大小
>1 放大若干倍
0< <1 缩小若干倍
<0 翻转
scale（-1） 水平，垂直，翻转180°
scaleX/Y（-1） 水平/垂直翻转

2、弹性盒子布局

①flex-direction：决定主轴的方向（即元素在一行上显示的排列方向，如从右向左）

②flex-wrap：设置元素多行显示

③align-items：一行上所有元素垂直对齐方式，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

④align-content：各个多行对齐方式，如所有行向中间聚集

⑤justify-content：一行上所有的元素水平对齐，如居中