html5、css3、es6新特性

HTML5 新特性

1. 语义化标签：

   • <header>、<footer>、<nav>、<section>、<article>、<aside> 等，增强了文档的结构性和可读性。

2. 表单增强：

   • 新增输入类型：email、url、number、range、date、color 等。
   • 表单验证：required、pattern、min、max 等属性。

3. 多媒体支持：

   • <audio> 和 <video> 标签，支持音频和视频的嵌入。
   • <canvas> 标签，用于绘制图形和动画。

4. 本地存储：

   • localStorage 和 sessionStorage，用于客户端存储数据。

5. WebSocket：

   • 支持全双工通信，实现实时数据传输。

6. 地理定位：

   • Geolocation API，获取用户的地理位置。

7. 拖放 API：

   • 支持元素的拖放操作。

8. Web Workers：

   • 允许在后台运行 JavaScript，不阻塞主线程。

CSS3 新特性

1. 选择器：

   • 新增伪类选择器：:nth-child()、:nth-of-type()、:not() 等。
   • 属性选择器：[attr^=value]、[attr$=value]、[attr*=value] 等。

2. 盒模型：

   • box-sizing 属性，控制盒模型的计算方式。

3. 背景与边框：

   • 多背景图片：background-image 支持多个背景。
   • 圆角边框：border-radius。
   • 阴影效果：box-shadow 和 text-shadow。
   • 边框图片：border-image。

4. 渐变：

   • 线性渐变：linear-gradient()。
   • 径向渐变：radial-gradient()。

5. 过渡与动画：

   • 过渡效果：transition。
   • 关键帧动画：@keyframes 和 animation。

6. Flexbox 布局：

   • 弹性盒子布局模型，简化复杂布局的实现。

7. Grid 布局：

   • 网格布局模型，支持二维布局。

8. 媒体查询：

   • @media 规则，实现响应式设计。

ES6 (ECMAScript 2015) 新特性

1. 块级作用域：

   • let 和 const 关键字，替代 var，支持块级作用域。

2. 箭头函数：

   • () => {} 语法，简化函数定义，自动绑定 this。

3. 模板字符串：

   • 使用反引号 `，支持多行字符串和嵌入表达式。

4. 解构赋值：

   • 从数组或对象中提取值，赋值给变量。

5. 默认参数：

   • 函数参数支持默认值。

6. 扩展运算符：

   • ... 运算符，用于展开数组或对象。

7. 类与继承：

   • class 关键字，支持面向对象编程。
   • extends 和 super，实现继承。

8. 模块化：

   • import 和 export，支持模块化开发。

9. Promise：

   • 异步编程的解决方案，避免回调地狱。

10. Symbol：

    • 新的原始数据类型，表示唯一值。

11. 迭代器与生成器：

    • for...of 循环，遍历可迭代对象。
    • function* 和 yield，定义生成器函数。

12. Map 和 Set：

    • Map 和 Set 数据结构，提供更高效的键值对存储。

13. Proxy 和 Reflect：

    • Proxy 用于拦截对象操作，Reflect 提供操作对象的方法。