HTML+CSS3

桃扇骨 2022-02-22 03:19 145阅读 0赞

## HTML新增元素 ##

header  头部标签
    nav  导航栏
    section 块
    article  文章，内容
    aside 侧边栏
    footer  底部标签

(IE9 中需要将这些元素转换为块元素display:block;)

## 音频 和 视频 ##

sourse资源  
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）。  
loop 设置或返回音频/视频是否应在结束时重新播放。  
muted 设置或返回音频/视频是否静音  
autoplay 是否在加载完成后随即播放音频/视频(自动播放)

## 表单新增属性： ##

required=“required” 不能为空  
placeholder="" 占位符、提示文本  
autofocus=“autofocus” 自动获取光标  
autocomplete=“off/on” 提示输入过得内容（条件：name属性，成功提交）  
multiple 上传多个文件  
新增表单

## 属性选择器 ##

E\[att\]  
E\[att=“val”\]  
E\[att^=“val”\] 属性att的值以"val"开头的元素 div\[id^=“nav”\] \{ background:\#ff0; \}  
E\[att$=“val”\] 属性att的值以"val"结尾的元素  
E\[att\*=“val”\] 属性att的值包含"val"字符串的元素

## 结构伪类选择器 ##

（1） ul li:first-child() 第一个  
ul li:last-child() 最后一个  
ul li:nth-child(8) 第八个  
ul li:nth-child(even) 偶数个  
ul li:nth-child(odd) 奇数个

（2） ul li:first-of-type()  
ul li:last-of-type()  
ul li:nth-of-type()  
（同一类型，指定类型的元素）  
伪类选择器  
::after  
::before

## 2D转换transform ##

（1）translate()  
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。  
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。  
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。  
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。  
（2）rotate()  
在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。  
rotate(angle) 定义 2D 旋转，在参数中规定角度。  
（3）scale()  
该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：  
scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。  
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。  
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。  
scaleY(n) 定义 2D 缩放转换，改变元素的高度。  
实际应用：定位+transform：translate(50%,50%); 实现居中  
transform对于行内元素无效  
旋转中心：transform-orgin：left bottom；  
缩略写法：transform：translate() rotate() scale();  
移动同其他属性值一起写的时候，translate()最好写在最前面

## 3D转换transform ##

translate3d(x,y,z) 定义 3D 转化。  
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。  
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。  
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。  
scale3d(x,y,z) 定义 3D 缩放转换。  
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。  
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。  
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。  
rotate3d(x,y,z,angle) 定义 3D 旋转。  
rotateX(angle) 定义沿 X 轴的 3D 旋转。  
rotateY(angle) 定义沿 Y 轴的 3D 旋转。  
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

注：perspective:400px;   透视
    	transform-style：preserve-3d; 开启3D立体空间

## 动画：animation ##

animation: name duration timing-function delay iteration-count direction fill-mode;

name：@keyframes 动画的名称。
    	duration：动画完成一个周期所花费的秒或毫秒
    	timing-function：动画的速度曲线
    		--linear	动画从头到尾的速度是相同的。	
    		--ease	默认。动画以低速开始，然后加快，在结束前变慢。
    		--ease-in	动画以低速开始。
    		--ease-out	动画以低速结束。
    		--ease-in-out	动画以低速开始和结束。
    	delay ：动画何时开始
    	iteration-count：动画被播放的次数（infinite  无限次）
    	direction：动画是否在下一周期逆向地播放
    		--reverse	动画反向播放。
    		--alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
    		--alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
    	fill-mode：动画是否正在运行或暂停
    		--paused	指定暂停动画
    		--running	指定正在运行的动画