H5一二事

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

先回顾一下WEB技术的几个阶段

Web 1.0 内容为主，主要流行HTML和CSS
Web 2.0 动态网页，流行AJAX/JavaScript/DOM
H5 时代，WEB开发回归富客户端

那么H5肯定不是多了一些标签就完事了,H5也跟酷炫没什么关系，那是CSS3的事情，它更多的职责是功能，而不是外观，是JavaScript API和CSS的提升，构建 Web 应用程序整体解决方案

H5应用场景

极具表现力的网页
网页应用程序比如PC端的iCloud、百度脑图、Office 365···APP端的淘宝、京东、美团···WeChat端的淘宝、京东、美团···
混合式本地应用比如PC端的网易云音乐、有道词典··· APP端的淘宝、京东、美团···
简单的游戏

H5新特性

更语义化标签
智能表单新的表单类型，如：email,url,number
新增表单功能属性，如：autocomplete，autofocus 虚拟键盘适配，通过表单的类型决定移动端弹出的键盘类型
网页多媒体，音频、视频、字幕
属性，语义化属性链接关系描述、结构数据标记、ARIA、自定义属性
Canvas，提供网页绘图的可能 2D 绘图、3D (WebGL)
SVG

JavaScript API

核心平台提升，JS在DOM和BOM两个方向上都新增了很多api，便于开发应用程序新的选择器、Element.classList、访问历史API、全屏API
网页存储，提供网页中操作客户端本地存储的API Application Cache、localStorage、sessionStorage、WebSQL、IndexedDB
设备信息访问，JS可以访问硬件的一些信息网络状态、硬件访问、设备方向、地理围栏
拖放操作网页内拖放、桌面拖入
文件文件系统API、FileReader
网络访问 XMLHttpRequest、fetch、WebSocket
多线程、桌面通知等等

H5 骨架

在Sublime\WebStorm等一些工具中 叹号加回车自动生成H5骨架

1 
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 
7 
8 <title>页面标题</title>
9 </head>
10 <body>
11
12 </body>
13 </html>

语义化标签

H5中制定了一系列语义化标签：