H5一二事

时间 2019-12-11

标签 h5 一二繁體版

原文原文链接

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

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

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

H5应用场景浏览器

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

H5新特性网络

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

JavaScript APIsession

核心平台提高，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骨架ide

 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中制定了一系列语义化标签：fetch

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">`，若是浏览器不支持，默认会显示文本框，那也能够直接用。