HTML5的简单介绍

Posted 2020-06-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5的简单介绍相关的知识，希望对你有一定的参考价值。

接触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 <!-- 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>