HTML5新特性

1. 语义化标签

就是看到标签就知道这是什么意思，比如头部就是 header，导航栏就是 nav

1. 有利于SEO, 搜索引擎优化
2. 方便其他设备的解析（屏幕阅读器，移动设备），以有意义的方式来渲染网页
3. 方便团队开发和维护，增加代码可读性

2. 增强型表单

• 新增表单类型
  (1). 邮箱验证

      <input type="email"></input>
  

  (2). 数值输入

      <input type="number" min="5" max="15"></input>
  

  (3). 文件导入

       <input type="file"></input>
  

  (4). 图片按钮

      <input type="image"></input>
  

  (5). 颜色选择

      <input type="color"></input>
  

  (6). 日期表示

      <input type="date"></input>
  

  (7). 搜索框

      <input type="search"></input>
  

  (8). 手机号码输入框

      <input type="tel"></input>
  

  (9). 网址输入框

      <input type="url"></input>
  

• 新增表单的新属性
  (1). placeholder

  这个属性是文本的占位符，相当于一种提示信息，显示在输入域，描述期待user输入的值。

  (2). required

  这个属性的值为Bool，默认为true，意思是在输入域不能为空

  (3). autofocus

  auto是自动的意思，focus是聚焦的意思，这个属性描述的就是自动聚焦到需要填写的textarea。

  (4). autocomplete

  这个属性有两个值，一个是on，另一个是off。默认是on，与email相反，email默认是off。功能是提示写过的信息。

  (5). minlength和maxlength
  这个属性限定输入的最少字数和最多字数，以字符个数计数。

3. 媒体元素

• 新增audio（音频）和video（视频）媒体相关的标签

4. Canvas绘图

• canvas绘图指的是在页面中设定一个区域，然后通过JS动态的在这个区域绘制图形。

5. SVG绘图

• 矢量图，放大不失真

6. 地理定位

• 使用getCurrentPosition()方法来获取用户的位置，从而实现对地理位置的定位。

7. 拖放API

• 通过给标签元素设置属性draggable值为true，能够实现对目标元素的拖动。

8. Web Worker

• Web Worker通过加载一个脚本文件，创建一个独立工作的线程，在主线程之外运行，worker线程运行结束之后会把结果返回给主线程，worker线程可以处理一些计算密集型的任务，这样主线程就会变得相对轻松，这并不是说JS具备了多线程的能力，而实浏览器作为宿主环境提供了一个JS多线程运行的环境。

9. WebStorage

• 新增 localStorage 和 sessionStorage

10. WebSocket

• https://juejin.cn/post/6844903544978407431