相信很多小伙伴学完CSS3和HML5后，对其中的许多新增css样式属性及html标签有了新的认识，这其中包含的知识点很多很多，并不是一时半会能全部掌握的，需要我们慢慢的积累并应用。今天就为大家总结以下在C3和H5中常用到的一些新增属性和标签等，都是单词和语法，大家慢慢学习慢慢背哦！
CSS3新增属性
HTML5新增标签及属性
新增音视频
CSS3新增属性
过渡效果transition
transition-property: width; /* 指定要执行过渡效果的属性 all(表示全部) */
transition-duration: 3s; /* 指定过渡效果的持续时间 */
transition-timing-function：ease; /* 过渡的时序函数，指定过渡的执行方式 */
/*
ease --- 先加速，再减速，默认值
linear --- 匀速运动
ease-in --- 逐渐加速
ease-out --- 逐渐减速
ease-in-out --- 先加速再减速
steps(n,end/start) --- 分步执行过渡效果
n - 表示几步完成
end - 表示在时间的结尾执行动作，默认值
tart - 表示在时间的开始执行动作、
*/
transition-delay:3s; /* 过渡效果的延迟，等一段时间再执行 */
transition:all 3s ease 2s; /* 阔以连写......不分先后顺序，第一个数字表示执行时间，第二个表
示延迟时间 */ 动画效果animation
@keyframes test{ /* 设置关键帧 */
from{
background-color: red /* 开始状态 */
}to{
background-color: white /* 结束状态 */
}
};
animation-name: test; /* 设置对该元素生效的关键帧的名字 */
animation-duration: 3s; /* 设置动画的执行时间 */
animation-timing-function: ease; /* 设置动画的执行方式： */
/* ease --- 先加速，再减速，默认值
linear --- 匀速运动
ease-in --- 逐渐加速
ease-out --- 逐渐减速
ease-in-out --- 先加速再减速
steps(n,end/start) --- 分步执行过渡效果
n - 表示几步完成
end - 表示在时间的结尾执行动作，默认值
start - 表示在时间的开始执行动作 */
animation-delay: 2s; /* 设置动画延迟时间 */
animation-iteration-count: 2; /* 设置动画执行的次数 infinite表示无限执行 */
animation-direction: normal; /* 设置动画的方向
normal - 从from-to执行
reverse - 反着执行
alternate - 来回执行 */
animation-play-state: running; /* 设置动画的执行状态
running - 运行
paused - 暂停 */
animation-fill-mode: none; /* 设置动画的填充模式
none - 动画执行完成之后回到起始位置
forwards - 动画完成之后停止在结束位置上 */变形效果transform
transform: translateX(px); /* 沿着x轴平移 */
transform: translateY(px); /* 沿着y轴平移 */
transform: translateZ(px); /* 沿着z轴平移 */
transform: rotateX(deg); /* 元素沿着x轴进行旋转 */
transform: rotateY(deg); /* 元素沿着Y轴进行旋转 */
transform: rotateZ(deg); /* 元素沿着Z轴进行旋转 */
transform: skewX(deg); /* 水平方向扭曲 */
transform: skewY(deg); /* 竖直方向扭曲 */
transform: scaleX(1); /* 水平方向缩放 */
transform: scaleY(1); /* 竖直方向缩放 */
transform: scale(1); /* 四面八方都缩放 */
transform-origin: 0px 0px; /* 设置缩放的基准点 */
transform-style: preserve-3d; /* 让子类以3d效果显示 */CSS3背景属性相关
background-origin /*设置开始显示背景的区域
可选属性值 padding-box 从内边距的区域开始显示背景图，默认值
border-box 从边框的区域开始显示背景图
content-box 从内容的区域开始显示背景图
*/
background-clip /*设置限制背景显示的区域
可选属性值 padding-box 限制背景图片在内边距区域内显示
border-box 限制背景图片在边框区域内显示
content-box 限制背景图片在内容区域内显示
*/
background-size /*设置填充背景
可选属性值 Cover 尽可能覆盖，可能会超出元素
Contain 始终在元素内部显示
一个100% 水平位置等比缩放与元素一样大
两个100% 先设置水平位置然后竖直位置 */
background:linear-gradient(to right, red 0, blue 50%, green 100%);
/* 设置线性渐变 方向 颜色 位置 */
background:radial-gradient(at 50px 100px, red 0, green 100%);
/* 设置径向渐变 起始点 颜色 位置 */
background-clip:text; /* 将背景渐变剪切到文字中，须先将文字颜色去除 */
color:transparent; /* 设置文字颜色为透明色 */
text-shadow: 10px 10px 5px blue;
/* 设置文字阴影 水平偏移 垂直偏移 羽化程度 颜色*/
/* 各个浏览器识别内核 */
-webkit- Safari和Chrome
-moz Firefox
-ms IE
HTML5新增标签及属性
新增Input标签类型
<!-- email 以电子邮件的形式进行提交 [email protected] -->
<input type="email"/>
<!-- url 以URL地址的形式进行提交 http:// -->
<input type="url"/>
<!-- date 日期的形式，年-月-日 -->
<input type="date"/>
<!-- time 时间的形式，时-分 -->
<input type="time"/>
<!-- datetime-local 本地时间，年月日时分 -->
<input type="datetime-local"/>
<!-- month 月份 -->
<input type="month"/>
<!-- week 星期 -->
<input type="week"/>
<!-- number 数字，min最小值，max最大值，step步幅 -->
<input type="number"min="100"max="150"step="10"/>
<!-- range 范围，value默认值 -->
<input type="range"value="0"/>
<!-- search 后面带小叉号，可以直接清空前面输入的内容 -->
<input type="search"/>
<!-- color 颜色，取色器 -->
<input type="color"/>
<!-- 提交 配合from表单action使用可以直接跳转指定地址 -->
<input type="submit" value="提交" />
<!-- Progress 进度条value="当前数值" max="要完成的数值" */ 如果属性是valuenumber和maxnumber进度条为动态的 -->
<Progress value=14 max=100 ></Progress>
<Progress valuenumber=14 maxnumber=100 ></Progress>Input文本框标签新增属性
placeholder <!-- 占位符，输入框的提示信息 -->
required <!-- 设置该input为必填项 -->
autofocus <!-- 自动获取焦点 -->
list <!-- 指定一个datalist作为提示的下拉菜单
要求list的值必须等于datalist的id即可 -->新增语义化标签
<header>头部</header>
<nav>导航</nav>
<main>主要内容一般banner</main>
<section>大区域的内容一般内容特别多的时候</section>
<aside>侧边栏</aside>
<article>新闻文章</article>
<footer>底部</footer>新增音视频属性
标签
/* 音频标签 */
<auido src="音频地址"></audio>
/* 视频标签 */
<video src="视频地址"></video>标签中属性
controls <!-- 控制器,可以显示音频控制器 -->
autoplay <!-- 进去自动播放音乐,谷歌并不好用 -->
loop <!-- 自动循环播放 -->
muted <!-- 静音(默认属性静音) -->
source <!-- 当上一条不能播放时,自动进入下一条 -->JS属性方法
const aud = document.querySelector("audio");
// 属性
aud.duration /* 获取音频的长度 */
aud.currentTime /* 获取或设置播放时间 */
aud.paused /* 如果当前播放被错误暂停,则返回false */
// 方法
aud.load() /* 重新加载音频(暂停状态) */
aud.play() /* 播放音频 */
aud.pause() /* 暂停音频 */
// 事件，通常在监听时触发使用
play /* 播放事件 */
pause /* 暂停事件 */
timeupdate /* 逐秒播放中的事件 */
ended /* 播放结束事件 */
volumechange /* 调整声音事件 */
/* 例子 */
aud.addEventListener("play", functino(){
console.log("音乐已暂停");
})都是单词，慢慢背吧！
希望能够有所帮助！