先回顾一下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 骨架
在SublimeWebStorm等一些工具中 叹号加回车自动生成H5骨架
1 <!-- H5的DOCTYPE声明做了最大简化 --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <!-- 在标准的H5骨架中charset是直接在meta中设置charset --> 7 <!-- 字符编码的设置一定是在head中的第一行 --> 8 <title>页面标题</title> 9 </head> 10 <body> 11 12 </body> 13 </html>
语义化标签
H5中制定了一系列语义化标签：
- section：独立的内容节块，一般包含标题和内容
- article：一种特殊的section，定义文档中的具体的文章内容
- nav：页面导航的链接组
- aside：标签用来装载非正文的内容，此标签中的文字权重低
- header：定义文档的页眉，不仅仅是文档的页头可以使用header，一个独立块的头部也应该使用header
- footer：定义section或document的页脚
我们应该根据内容的性质决定使用特定的标签，比如说
- h1一定只能出现一个，这并不是HTML的约定，页面中最重要的内容
- time标签专门用于时间，
- datetime应该是一个标准时间格式，
- pubdate指的是当前时间为article的发布时间
在H5中，主体结构标签默认和DIV都是相同的块级效果
但是DIV没有语义，而以上标签有特定语义
那么为啥要有语义化标签？
- 能够便于开发者阅读和写出更优雅的代码，代码如诗
- 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
- 使用语义化标签会具有更好地搜索引擎优化
最近群里经常讨论，关于什么时候使用H5的新特性，能不能使用新特性的问题
我个人认为，无伤大雅的地方直接用
比如一个文本框，加上placeholder就具备占位文本提示功能，浏览器不支持也不会报错，那就可以直接使用
再比如`<input type="email">`，如果浏览器不支持，默认会显示文本框，那也可以直接用。