H5 C3 ES6 新特性

会有一股神秘感。 提交于 2020-08-07 21:13:50

H5的新特性

1.语义化标签

  • 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。
  • 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
  • 方便其他设备的解析
  • 便于团队开发和维护

2.表单新特性 search、emile 3.多媒体视频(video)和音频(audio)
4.web存储

  • sessionstorage:关闭浏览器清空数据,储存大小约5M。
  • localstorage:永久生效,存储大小20M,多窗口下都可以使用

C3的新特性

1.选择器:属性选择器E[attr],伪类选择器E:nth-child(n),空伪类E:empty ,排除伪类E:not(selector)
2.颜色:新增了RGBA、HSLA模式
3.文本:为文本设置阴影增强文本的表现能力,通过 text-shadow,可分别设置偏移量、模糊度、颜色(可设透明度)
4.盒模型:box-sizing: border-box;
5.边框:圆角border-radius,阴影box-shadow
6.背景:

  • 通过 background-size 设置背景图片的尺寸。
  • 通过 background-origin 可以设置背景图片定位(background-position)的参照原点。
  • 通过background-clip,可以设置对背景区域进行裁切,即改变背景区域的大小。

7.渐变:线性渐变 linear-gradient,径向渐变radial-gradient
8.字体图标
9.伸缩盒子:调整主轴对齐justify-content,调整侧轴对齐align-items,伸缩分配flex,正序方式排序order
10.2D转换:

  • translate 设置元素的位置(x/y坐标)
  • scale 设置元素的缩放比例(x/y两个方向)
  • rotate 设置元素旋转(正值为顺时针,负值为逆时针)
  • transform-origin 设置转换元素的原点

11.3D转换:

  • 透视(perspective)值为1000px~1200px
  • 将2D元素转换为3D立体(给父元素设置)transform-style: perserve-3d;
  • 设置元素背面是否可见 backface-visibility: hidden; 12.动画:
  • 定义关键帧 @keyframes
  • 通过百分编写帧
  • 在各帧中分别定义各属性
  • 通过animation将动画应用于相应元素

ES6新特性

  • 新增模板字符串(为JavaScript提供了简单的字符串插值功能)
  • 箭头函数
  • for-of(用来遍历数据—例如数组中的值。)
  • arguments对象可被不定参数和默认参数完美代替。
  • ES6将promise对象纳入规范,提供了原生的Promise对象。
  • 增加了letconst命令,用来声明变量。
  • 增加了块级作用域。
  • let命令实际上就增加了块级作用域。
  • 还有就是引入module模块的概念
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!