关于h5和css3有哪些新特性的讲解

h5新特性:拖拽释放API、语义化标签、音频和视频API、画布API、地理API、表单控件等。css3新特性:1、RGBA和HSLA;2、text-shadow;3、border-radius和box-shadow、box-sizing等。

2021072717144257855

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

html5是构建Web内容的一种语言描述方式。html5是互联网的下一代标准。css3是css(层叠样式表)技术的升级版本。下面我们来看一下HTML5余css3的新特性。

CSS3新特性:

1.颜色:新增RGBA,HSLA模式

2. 文字阴影(text-shadow)

3.边框: 圆角(border-radius)边框阴影: box-shadow

4. 盒子模型:box-sizing

5.背景:background-size 设置背景图片的尺寸background-origin 设置背景图片的原点

background-clip 设置背景图片的裁切区域,以”,”分隔可以设置多背景,用于自适应布局

6.渐变:linear-gradient、radial-gradient

7. 过渡:transition,可实现动画

8. 自定义动画

9. 在CSS3中唯一引入的伪元素是 ::selection.

10. 媒体查询,多栏布局

11. border-image

12.2D转换:transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

13. 3D转换

CSS3新增伪类:

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked,单选框或复选框被选中。

html5新特性:

1. 拖拽释放(Drag and drop) API

2. 语义化更好的内容标签(header,nav,footer,aside,article,section)

3. 音频、视频API(audio,video)

4. 画布(Canvas) API

5. 地理(Geolocation) API

6. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;

7. sessionStorage 的数据在浏览器关闭后自动删除

8. 表单控件,calendar、date、time、email、url、search

9. 新的技术webworker, websocket, Geolocation

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容