html5+css3新增功能

HTML 5新增标签

1.<header> 页面头部、页眉
2、<nav> 页面导航
3、<article> 一篇文章
4、<section> 文章中的章节
5、<aside> 侧边栏
6、<footer> 页面底部、页脚
音频视频
1、<audio>
2、<video>

HTML5新增表单控件

新增类型:网址邮箱日期时间星期数量范围电话颜色搜索

<label>网址: </label1><input type="url"
name="" required> <br><br>
<label>邮箱:</label><input type="email" name="" required><br><br>
<label>日期:</1abel><input type=" date" name=""><br><br>
<label>时间:</1abel><input type=" time" name-""><br><br>
<label>星期: </label><input type="week" name="" ><br><br>
<label>数量:</label><input type=" number" nam=-""> <br><br>
<label>范围: </labe1><input type=" range" name="" ><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>颜色:</1abel><input type=" color" name="" ><br><br>
<label>搜索:</labe1><input type=" search" name=""><br><br>

新增常用表单控件属性:

1、placeholder 设置文本框默认提示文字

<input type='text' name="" placeholder="搜索">

2、autofocus 自动获得焦点

<input type='text' name="" autofocus="">

3、autocomplete 联想关键词

<input type='text' name="" autofocus="off">#一般都是关掉的

圆角、rgba

CSS3圆角

设置某一个角的圆角,比如设置左上角的圆角:
border-top-left-radius:30px 60px;
同时分别设置四个角: border- radius:30px 60px 120px 150px;
设置四个圆角相同:
border-radius:50%;

rgba

rgba (新的颜色值表示法)
1、盒子透明度表示法:(背景文字都透明)
. box
{
opacity:0.1;
/*兼容IE */
filter :alpha(opacity=10);
}
2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度（只有背景透明）

CSS3 transition动画

1、transition-property 设置过渡的属性，比如: width height background-color
2、transition-duration 设置过渡的时间,比如: 1s 500ms
3、transition-timing-function 设置过渡的运动方式,常用有linear(匀速)lease(缓冲运动)|step()-跳越方式
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay同时设置四个属性

CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve -3d设置盒子是否按3d空间显示
7、translateX、 translateY、 translateZ 设置三维移动
8、rotateX、 rotateY、 rotateZ 设置三维旋转
9、scaleX、 scaleY、 scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

css权重计算

https://blog.csdn.net/qq_36130706/article/details/81415469?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase