H5C3新特性
HTML5
1、简化的文档类型和字符集
(1)文档类型
|
(2)字符集
|
|
2、富有语义化的新结构元素
|
|
|
|
section元素 可以认为div是section元素,一个普通的分块元素,可用来定义网站中的特定的可区别的区域。
header元素包括标题,logo,导航和其他页眉的内容,可以在网站上加多个header,就像给内容加多个标题。
hgroup元素 即将标题进行分组的元素。
footer元素版权声明和作者信息,包涵一些链接。
nav元素主要用于主导航菜单。
article元素独立成文且以其他格式重用的内容应该置于一个article元素中。
aside元素用途包涵内容周围的相关内容。
3、新增的内联元素
|
|
figure元素一个典型用途是包含图像,代码和其他内容对主要内容进行说明,删除不会影响主内容
figcaption元素主要用于figure的标题
mark元素突出显示以表示引用的内容,或者突出显示与用户当前活动相关的内容,他不同于en或strong元素
time元素,当需要在内容中显示时间或者日期时,则建议使用time元素
time元素可以包涵两个属性,一个datetime表示在元素中指定的确切日期和世家,pubdate表示文章或者整个文档发布时time元素所指定的日期和时间
meter元素用于定义度量衡,规定最大最小宽高,通常要结合css一起作用
progress元素用于定义一个进度条,有max(完成值)和value(进度条当前值)两个属性。
4、支持动态页面
1)菜单
用于表单中组织控件列表,常用属性如下:
2)右键菜单
3)在script标签中使用async属性
用于指定异步执行的脚本
4)detail元素
用于描述文档或文档某个部分的细节
|
|
效果:
展开后:
5、全新的表单设计
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
6、强大的绘图功能和多媒体功能
1)canvas 可以动态地绘制各种效果精美的图形,结合js就能让网页图形动起来
2)SVG 绘制可伸缩的矢量图形
3)audio和 video 可以不依赖任何插件播放音频和视频
7、获取地理位置信息
新增Geolocation API,可以通过浏览器获取用户的地理位置,不再需要借助第三方地址数据库或专业的开发包,提供很大的方便。
8、本地存储
h5提供了sessionStorage、localStorage和indexedDB加强本地存储。使用之前应该先判断支持情况
|
|
localStorage和sessionStorage的区别在于sessionStorage基于会话,关闭浏览器之后存储消失。localStorage和cookie另一个区别是没有过期时间.
CSS3
1.文本阴影text-shadow
text-shadow:偏移量x 偏移量y 模糊度 颜色;
2.边框圆角 border-radius
border-radius:10px 10px 10px 10px/5px 5px 5px 5px;
前面四个是横轴半径,后面四个值是纵轴半径,如果后面四个值不写,纵轴半径默认等于横轴半径
3.盒子阴影 box-shadow
水平偏移量 +向右 -向左
垂直偏移量 +向下 -向上
模糊度不能为负数
inset可设置内阴影,box-shadow:inset 1px 1px 1px red;
设置box-shadow不会改变盒子大小,不会影响兄弟元素布局
可设置多重边框阴影,增强立体感
4.边框图片boeder-image
路径:border-image-source:url();
5.背景大小 background-size
作用:设置背景图片大小
设置方式:background-size:200px 200px;
6.设置背景原点background-origin
作用:设置背景图片原点位置,这个原点,指的是图片左上角
也就是重新定义了background-position的显示位置
应用background-origin:content-box;
7.background-clip背景区域裁切(也就是让图片在什么区域内显示)
作用:裁切背景,移动端应用的多
应用:background-clip:padding-box;
8.多背景background: url() ,url(),url();
注意:不同的背景,用逗号分隔
设置多背景的时候,不能再设置背景颜色(不能连写),如有需要,聚单独写background来设置颜色
9.渐变
线性渐变:background-image:linear-gradient(渐变方向开始和结束状态,渐变范围(距离))
渐变方向:可以是具体方向:to top
10.径向渐变background-image:radial-gradient(圆点,开始、结束)
注意:径向渐变的百分比是以设置的半径为参照的
圆心位置设置:关键词:center/left…….
具体值:第一个值代表水平方向,第二个垂直,第二个如果不设置,默认Center
11.过渡trasition,2D/3D转换
12.动画
语法:
@keyframes scale{
from{}
to{}
}
通过animation:;调用动画,哪个元素调用,就写在哪里。
调用动画名称:animation-name:;
设置动画完成时间:animation-duration:;
设置动画执行次数:animation-interation-count:infinite;