Still Moving

H5C3新特性

HTML5

1、简化的文档类型和字符集

（1）文档类型
1
<!DOCTYPE HTML>
（2）字符集
1
<meta charset="UTF-8">

2、富有语义化的新结构元素

1
2
3
4
5
<header>
　　<h1>HTML5新结构<h1/>
　　<nav>导航部分</nav>
　　<p></p>
</header>
1
2
3
4
5
6
<section>
    <h1></h1>
    <p>不再全是div</p>
</section>
<footer>
</footer>

　　section元素 可以认为div是section元素,一个普通的分块元素，可用来定义网站中的特定的可区别的区域。

　　header元素包括标题，logo，导航和其他页眉的内容，可以在网站上加多个header，就像给内容加多个标题。

　　hgroup元素 即将标题进行分组的元素。

　　footer元素版权声明和作者信息,包涵一些链接。

　　nav元素主要用于主导航菜单。

　　article元素独立成文且以其他格式重用的内容应该置于一个article元素中。

　　aside元素用途包涵内容周围的相关内容。

3、新增的内联元素

1
2
3
4
<figure>
    <p>图片</p>
    <img src="img1.jpg" width="100" height="100">
</figure>

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元素

　　用于描述文档或文档某个部分的细节

1
2
3
4
<details>
    <summary>details</summary>
    <p>用于描述文档细节<p>
</details>

​ 效果：

　　 技术分享

​ 展开后：

　　 技术分享

5、全新的表单设计

　　HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

6、强大的绘图功能和多媒体功能

　　1）canvas 可以动态地绘制各种效果精美的图形，结合js就能让网页图形动起来

　　2）SVG 绘制可伸缩的矢量图形

　　3）audio和 video 可以不依赖任何插件播放音频和视频

7、获取地理位置信息

　　新增Geolocation API，可以通过浏览器获取用户的地理位置，不再需要借助第三方地址数据库或专业的开发包，提供很大的方便。

8、本地存储

h5提供了sessionStorage、localStorage和indexedDB加强本地存储。使用之前应该先判断支持情况

1
2
3
4
5
6
if(window.sessionStorage){
    //浏览器支持sessionStorage
}
if(window.localStorage){
    //浏览器支持localStorage
}

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;