HTML5 入门介绍

HTML5 介绍篇

经历了8年的历程，终于在2014年10月29日这天，HTML5标准规范正式制定下来了，那么HTML5到底是什么，与之前的版本有什么不同，我们今天会在这里探讨一下。HTML5并不仅仅扩充了一些新的标记，它也不仅仅是HTML，它是一系列技术的集合HTML,CSS,JAVASCRIPT。应该这样说，HTML5是一个构建WEB应用程序的解决方案。HTML5可以用于开发桌面应用程序，移动端应用程序，以及游戏应用。我们用于构建WEB的一些框架如Bootstrap,Angular,React,Webgl等都是HTML5的应用场景。

HTML5 的概要内容

• 新增语义化的标签
  
  • html5 更具语义性，新增了很多语义化的标签，这里简要说几个：section、article、nav、aside、header、footer等语义化的目的就是为了写出便于阅读和维护的代码，也更利于搜索引擎的优化。
• 新增DOM选择器
  
  • 让选取DOM更简化，如 querySelector,querySelectorAll，进入DOM3时代，支持html5的浏览器对事件处理addEventListener的兼容也会更好。
• 新增 Element.classList
  
  • 元素类的操作，可以对类进行直接操作
    如 ele.classList.add(“classname”)，ele.classList.remove(“classname”)，以及ele.classList.toggle(“classname”)等
• 新增data-*自定义属性
  
  • 这里其实自定义属性早已经普及，不会影响页面布局，但可被浏览器使用，用于存储数据，丰富应用的功能
• 可用性更强的表单(智能表单)
  
  • 新增表单功能如：占位符，自动聚焦，模拟进度，自动完成，数据列表等
  • 新增输入类型如：数字，日期，时间，邮件，URL ，颜色和搜索框等。 这样通过表单类型可以决定弹出移动端键盘的类型，也就是虚拟键盘适配。
  • 新增表单元素如：秘钥生成字段<keygen>，表单输出元素<output>，命令菜单列表<menu>、<command>
• SVG 和 音视频技术(多媒体)
  
  • SVG的创建交互
  • 音频、视频、字幕以及全屏API等
• Canvas
  
  • 平面2D 绘图
  • 3D WebGL 应用于游戏场景开发
• 移动端手势操作
  
  • 移动端事件基本touch事件
  • 模拟手势操作
  • 手势封装库
• 原生拖放
  
  • 拖放事件
  • 自定义放置目标、dataTransfer对象
  • dropEffect 与 effectAllowed对象
  • 可拖动
  • 其他成员
• 地理定位(Geolocation API)
  
  • 位置信息
  • HTML5 Geolocation API
  • 隐私
• 离线应用和客户端存储
  
  • 离线检测 navigator.onLine
  • 应用缓存 manifest
  • 数据存储 cookie , sessionStorage，localStorage，Web SQL，Indexed DB
• 文件访问 File API
  
  • 文件系统API
  • FileReader
  • 使用 XHR上传文件
• 历史访问 History API
  
  • 使用History API保存当前位置
  • 使用History API改变URL
  • 只能在同一个域名下工作
  • 利用History API钓鱼
  • 烦人的动画URL
• 通信基础API (Communication API)
  
  • 跨文档消息通信 postMessage API
  • XHR2
• 实时web技术
  
  • 轮询 和 长轮询
  • 事件服务器事件
  • SSE 数据推送
  • Web Sockets
  • Socket.IO
• 设备信息访问，JS可以访问硬件的一些信息，用于开发App
  
  • 网络状态
  • 硬件访问
  • 设备方向
  • 地理围栏
• 多线程 WebWorkers API
  
  • 在后台开启线程，处理其他操作
  • 不能操作DOM
  • 出错不可见
• 桌面通知 Notification API
• Page Visibility API
• Web 计时

HTML5 的未来展望

我们在上面列举了一些HTML5的特性，当然还有很多，它可以用来构建我们的web站点，手机应用，以及游戏开发，还可以构建桌面应用(Electron)，以及操作系统(Google Chrome操作系统)，以及P2P网络。从HTML5来看，我们知道这一前端技术，已经走得越来越远了，新的技术一直在不断的更新，现在的前端不仅仅只是以前的前端了，跳出前端，我们会看到更大的世界——全栈，所以未来还有很长的路要走。