基础 -- H5、C3、ES6的新特性

目录

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