H5 和 CSS3 的新特性

时间:2021-6-12 作者:qvyue

H5新特性

1.语义化标签:header、footer、section、nav、aside、article

2.增强型表单:input 的多个 type

3.新增表单元素:datalist、keygen、output

4.新增交互表单属性:placehoder、required、min 和 max

5.音频视频:audio、video

6.canvas

7.地理定位

8.拖拽

9.web存储

10.新事件:onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

11.WebSocket:单个 TCP 连接上进行全双工通讯的协议

语义化标签

H5 和 CSS3 的新特性

增强型表单

H5 和 CSS3 的新特性

新增表单元素

H5 和 CSS3 的新特性

新增表单属性

H5 和 CSS3 的新特性

音频视频

 HTML5 规定了在网页上嵌入音频元素的标准,即使用 元素。

H5 和 CSS3 的新特性

 HTML5 规定了一种通过 video 元素来包含视频的标准方法

H5 和 CSS3 的新特性

canvas
HTML5  元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.

 标签只是图形容器,必须使用脚本来绘制图形。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

H5 和 CSS3 的新特性

地理定位

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

拖拽

拖拽是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

设置元素为可拖放

为了使元素可拖动,把 draggable 属性设置为 true 

web存储

sessionStorage—客户端数据存储,只能维持在当前会话范围内。

             sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

localStorage—客户端数据存储,能维持在多个会话范围内。

             localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

对于大量复杂数据结构,一般使用IndexDB

新事件

H5 和 CSS3 的新特性

css3

1.选择器

2.背景和边框

3.文本效果

4.2D/3D 转换

5.动画、过渡

6.用户界面

选择器

:last-child /* 选择元素最后一个孩子 */

:first-child /* 选择元素第一个孩子 */

:nth-child(1) /* 按照第几个孩子给它设置样式 */

:nth-child(even) /* 按照偶数 */

:nth-child(odd) /* 按照奇数 */

:disabled /* 选择每个禁用的E元素 */

:checked /* 选择每个被选中的E元素 */

:not(selector) /* 选择非 selector 元素的每个元素 */

::selection /* 选择被用户选取的元素部分 */

伪类选择器:

:last-child /* 选择元素最后一个孩子 */

:first-child /* 选择元素第一个孩子 */

:nth-child(1) /* 按照第几个孩子给它设置样式 */

a:link {color: #FF0000}/* 未访问的链接 */

a:visited {color: #00FF00}/* 已访问的链接 */

a:hover {color: #FF00FF}/* 鼠标移动到链接上 */

a:active {color: #0000FF}/* 选定的链接 */

伪元素:创建了 html 中不存在的元素,用于将特殊的效果添加到某些选择器

::before {}/* 选择器在被选元素的前面插入内容和定义css,使用 content 属性来指定要插入的内容。 */

::after {}/* 选择器在被选元素的后面插入内容和定义css,使用 content 属性来指定要插入的内容。 */

:first-letter /* 选择该元素内容的首字母 *

/:first-line /* 选择该元素内容的首行 */

::selection /* 选择被用户选取的元素部分 */

背景和边框

背景:

background-size:规定背景图片的尺寸(cover:填充;100% 100%:拉伸)

background-origin:规定背景图片的定位区域

对于 background-origin 属性,有如下属性

背景图片可以放置于 content-box、padding-box 或 border-box 区域

边框:

border-radius:圆角

box-shadow / text-shadow:阴影

border-image:边框图片

文本效果

H5 和 CSS3 的新特性

2D/3D 转换

2D 转换(transform)

1.translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数。 transform: translate(50px, 100px);

2.rotate():元素顺时针旋转给定的角度。若为负值,元素将逆时针旋转。transform: rotate(30deg);

3.scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数,也可以一个值(宽高)。transform: scale(2,4);

4.skew():元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数。transform: skew(30deg, 20deg);

5.matrix(): 把所有 2D 转换方法组合在一起,需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。6.transform:matrix(0.866,0.5,-0.5,0.866,0,0);

3D 转换

1.rotateX():元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);

2.rotateY():元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);

3.perspective:规定 3D 元素的透视效果

动画、过渡

过渡效果(transition),使页面变化更平滑,以下参数可直接写在 transition 后面

1.transition-property :执行动画对应的属性,例如 color,background 等,可以使用 all 来指定所有的属性。

2.transition-duration:过渡动画的一个持续时间。

3.transition-timing-function:在延续时间段,动画变化的速率,常见的有:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

4.transition-delay:延迟多久后开始动画

动画(animation)

先定义 @keyframes 规则(0%,100% | from,to)

然后定义 animation,以下参数可直接写在 animation 后面

1.animation-name: 定义动画名称

2.animation-duration: 指定元素播放动画所持续的时间长

3.animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ): 指元素根据时间的推进来改变属性值的变换速率,即动画的播放方式

4.animation-delay: 指定元素动画开始时间

5.animation-iteration-count: infinite | number:指定元素播放动画的循环次数

6.animation-direction: normal | alternate: 指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为 normal 时,动画的每次循环都是向前播放;另一个值是 alternate,规定动画在下一周期逆向地播放(来去播放)

7.animation-play-state: running | paused :控制元素动画的播放状态

用户界面

CSS3中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等

resize

box-sizing

outline-offset

resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效,需要设置元素的 overflow 属性,值可以是 auto、hidden 或 scroll

H5 和 CSS3 的新特性

box-sizing 属性可设置的值有 content-box、border-box 和 inherit

content-box 是W3C的标准盒模型,元素宽度 = 内容宽度 + padding + border:意思是 padding 和 border 会增加元素的宽度,以至于实际上的 width 大于原始设定的 width

border-box 是ie的怪异盒模型,元素宽度 = 设定的宽度,已经将 padding 和 border 包括进去了,比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破,但是使用 border-box 就可以轻松完成

inherit:规定应从父元素继承 box-sizing 属性的值

outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓

CSS 兼容内核

-moz-:代表FireFox浏览器私有属性

-ms-:代表IE浏览器私有属性

-webkit-:代表safari、chrome浏览器私有属性

-o-:代表opera浏览器私有属性

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。