目录

H5的新特性

C3的新特性

ES6新特性


H5的新特性

1.语义化标签

  1. 有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。
  2. 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构
  3. 方便其他设备的解析
  4. 便于团队开发和维护
  1. 1. 语义化标签
  • header:定义文档的页眉 头部
  • nav:定义导航链接的部分
  • footer:定义文档或节的页脚 底部
  • article:定义文章。
  • section:定义文档中的节(section、区段)
  • aside:定义其所处内容之外的内容 侧边

2.表单新特性

3.多媒体视频(video)和音频(audio)

4.web存储

  1. sessionstorage:关闭浏览器清空数据,储存大小约5M。
  2. localstorage:永久生效,存储大小20M,多窗口下都可以使用
  3. 都只能储存字符串

 

C3的新特性

1.选择器:属性选择器E[attr],伪类选择器E:nth-child(n),空伪类E:empty ,排除伪类E:not(selector)

关于选择符:

(1)id选择器(#myid)(2)类选择器(.myclassname)(3)标签选择器(div,h1,p)(4)后代选择器(h1 p)(5)相邻后代选择器(子)选择器(ul>li)(6)兄弟选择器(li~a)(7)相邻兄弟选择器(li+a)(8)属性选择器(a[rel="external"])(9)伪类选择器(a:hover,li:nth-child)(10)伪元素选择器(::before、::after)(11)通配符选择器(*)

新增的伪类:

(1)elem:nth-child(n)选中父元素下的第n个子元素,并且这个子元素的标签名为elem,n可以接受具体的数值,也可以接受函数。(2)elem:nth-last-child(n)作用同上,不过是从后开始查找。(3)elem:last-child选中最后一个子元素。(4)elem:only-child如果elem是父元素下唯一的子元素,则选中之。(5)elem:nth-of-type(n)选中父元素下第n个elem类型元素,n可以接受具体的数值,也可以接受函数。(6)elem:first-of-type选中父元素下第一个elem类型元素。(7)elem:last-of-type选中父元素下最后一个elem类型元素。(8)elem:only-of-type如果父元素下的子元素只有一个elem类型元素,则选中该元素。(9)elem:empty选中不包含子元素和内容的elem类型元素。(10)elem:target选择当前活动的elem元素。(11):not(elem)选择非elem元素的每个元素。(12):enabled 控制表单控件的禁用状态。(13):disabled 控制表单控件的禁用状态。(14):checked单选框或复选框被选中。

2.颜色:新增了RGBA、HSLA模式

3.文本:为文本设置阴影增强文本的表现能力,通过 text-shadow,可分别设置偏移量、模糊度、颜色(可设透明度)。

4.盒模型:box-sizing: border-box;

5.边框:圆角border-radius,阴影box-shadow

6.背景:

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

7.渐变:线性渐变 linear-gradient,径向渐变radial-gradient

8.字体图标

9.伸缩盒子:调整主轴对齐justify-content,调整侧轴对齐align-items,伸缩分配flex,正序方式排序order

10.2D转换:

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

11.3D转换:

  1. 透视(perspective)值为1000px~1200px
  2. 将2D元素转换为3D立体(给父元素设置)transform-style: perserve-3d;
  3. 设置元素背面是否可见 backface-visibility: hidden;

12.动画:

  1. 定义关键帧 @keyframes
  2. 通过百分编写帧
  3. 在各帧中分别定义各属性
  4. 通过animation将动画应用于相应元素

 

ES6新特性

  1. 变量和常量,变量声明:let作用:声明变量,块级作用域,必须先声明后使用,在同一个块内不允许重复命名,没有变量提升。const作用:声明常量,声明的同时必须赋值,不能被重新赋值
  2. 剪头函数
  3. Promise (异步)
  4. 函数参数支持默认值
  5. 模板字符串
  6. class类
  7. 解构赋值 { a } = { a=1, b=2}
  8. 扩展运算符 [...]
  9. 对象键值对 相同时的缩写形式
  10. 剩余参数
  11. filter, map 等api