HTML5新特性

HTML5新特性

1. 语义标签

• 语义化标签就是使用含有具体意义的词语作为标签，使得页面的内容结构化。
• header（ 网页头部）、nav（网页导航）、footer（网页底部）、aside（网页侧边栏）、section（网页区块）、article（网页文章）

2. 增强型表单（表单元素）
   新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。其中包括了 color、date、datetime、email、number、range

• 新增的表单元素：
  • ：元素规定输入域的选项列表，使用元素的list元素与元素的id绑定。
  • ：提供一种检验用户的可靠方法，标签规定用于表单的密钥对生成器字段。
  • ：用于不用类型的输出，比如计算或脚本输出。
• 新增的表单属性：
  • placehoder属性：简短的提示在用户输入值前会显示在输入域上，既默认框提示
  • required属性：是一个boolean属性，要求填写的输入域不为空
  • pattern属性：描述了一个正则表达式用于验证元素的值
  • max / min属性：最大最小值
  • step属性：为输入域规定合法的数字间隔
  • height / width属性：用于image类型的标签的图像高度和宽度
  • autofocus属性：是一个boolean属性，在页面加载时自动获得焦点
  • multiple属性：是一个boolean属性，规定元素中选择多个值

4. 视频和音频（媒体元素）
   播放音频文件的元素
   （1）control属性提供播放暂停和音量控件
   （2）和之间插入浏览器不支持的元素的提示文本
   （3）允许使用多个元素用来链接不同的音频文件，浏览器使用第一个支持的音频文件
   （4）支持三种音频格式文件：mp3、wax、ogg
   播放视屏文件的元素
   （1）control属性提供播放暂停和音量控件，也可以使用dom操作：play()和pause()。
   （2）video元素提供了width和height控制视频的尺寸。如果设置了就会在页面加载时保留，没设置就不保留，页面根据原始视频改变。
5. Canvas绘图
   canvas元素用于在网页上绘制图形，有多重绘制路径、矩形、圆形、字符以及添加图像的方法，svg元素用于描述二维是矢量图形的一种图形格式。

• Canvas - 图形、Canvas - 路径、Canvas - 文本、Canvas - 渐变、Canvas - 图像

6. SVG绘图

• SVG是指可伸缩的矢量图形
• SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 JavaScript 来绘制 2D 图形。
  svg元素是使用XML描述2d图形的语言，svg dom中的每一个元素都是可用的，可以为其添加js处理器。每一个被绘制的图形均被视为对象，如果发生变化，浏览器就会自动重新绘制图形。

7. 地理定位
   HTML5 Geolocation（地理定位）用于定位用户的位置
   • window.navigator.geolocatio
8. 拖放API

• 将要拖放的对象元素的draggable属性设置为true，任何元素均可实现拖放，但img与a元算（必须制定href）默认允许拖放。

9. Web Worker

   • 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
   • web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
     当HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。但是web workers是运行在后台的js，不会影响页面的性能，可以一直在后台运行

10. Web Storage

    • 使用Web Storage，HTML5可以在本地存储用户的浏览数据。
    • localStorage - 没有时间限制的数据存储，存在本地
    • sessionStorage - 有时间限制的数据存储，针对一个session，本次会话结束（当用户关闭浏览器窗口后）数据删除。

11. WebSocket

    • WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
    • 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。