Html5入门教程系列(1)–总览

11次阅读

Html5 入门教程系列(1)– 总览：http://www.ningmop.com/15024.html
Html5 入门教程系列(2)–javascript 介绍：http://www.ningmop.com/15025.html
Html5 入门教程系列(3)–CSS 第一部分：http://www.ningmop.com/15026.html
Html5 入门教程系列(4)–CSS 第二部分：http://www.ningmop.com/15027.html
Html5 入门教程系列(5)–WebSocket：http://www.ningmop.com/15028.html

说起 html5，可能是近 1 - 2 年最火的技术词汇之一了，由于市场需求爆增，人才也趋之若鹜。目前，有很大一部分人的口头禅是H5，这里我要吐槽一下，如果你并不了解html5，而是从别人口中听到H5，那么请注意，H5 这个词现在已经不等于 html5 了！究其原因，应该是随着微信生态圈的发展，一部分人将 使用 css3 构建的适应手机分辨率显示的网页 简称为 H5。严格来说H5 只是 html5 的一部分，如果你只是想知道如何制作所谓的 H5，那么本系列可能并不能帮到你很多，你可以去学习专门的css3 的教程。这个系列是笔者曾经在某公司 (500 强外企金融类) 所做的培训内容，培训总共 5 天。主要围绕 html5,css3,javascript 进行，适用于 web 前端工程师的入门。回想起来，由于当时英语水平不足以及临时抱佛脚，压力是非常大，不过这种经历可能这辈子也不会再有了吧。本着总结和分享的精神，这里我把培训的内容整理成博文，方便大家入门。如有不妥之处望指正。

Outline

首先，我先罗列出教程各部分的大致安排，我会按照这个顺序逐步展开：

javascript 介绍
css 介绍
jquery
XMLHttpRequest
javascript 面向对象
html 语义化
表单控件
websockets
canvas 和 svg
地理信息接口
新的拖拽 api
多媒体
存储 api
离线应用

html5 是一种以前其他技术的演进和增强，所以单独介绍 html5 的新特性可能对于入门来说并不合适，所谓饭还是要一口口吃，这些内容可能不全部是 html5 的内容范畴，但却是前端入门必需的，比如javascript 介绍。而有些内容在 html5 之前就有了，但是在 html5 标准下被增强了，比如XMLHttpRequest。

历史

html5 其实早就开始起草，经过多年的努力，终于在 2014 年 10 月 28 日，第一个 HTML5 标准宣布发布。大家可以从 w3c 的官方文档中看到这个时间。当年这个事件，还是相当令人兴奋的。这意味着，浏览器的兼容乱象终于得以规范和实质性改变。事实上，在 html5 第一版标准颁布到今天，前端工程师的日子一天比一天好过了。ie8 逐渐被企业抛弃，普通用户逐渐接受新的浏览器，移动互联网逐渐取代 PC 互联网，html5 标准的流行比想象中的还要快一些，当然这不纯粹是技术因素。

HTML5 包含什么

先来看看 html5 标准相对于以前的技术究竟有哪些变化：

语义化标签：增加了诸多的标签，让开发者更容易表达 html 的语义。比如 <section> <aside> <header> 等；引入的一些新的表单控件，这些控件具有更为精准的 UI 呈现。
互联增强：引入WebSockets，使得网页也具有了与服务器进行双工通信的能力
离线能力：支持一些简单的客户端存储和数据库，实现客户端存储，以前通常用 cookie；离线应用功能可以使得应用可以离线运行
多媒体呈现：音视频呈现能力增强，引入<audio> <video>，可以嵌入字幕
图形图像：Canvas 绘图、WebGL 的 3D 渲染支持、SVG
性能提升：XMLHttpRequest 的增强，Web 异步任务能力，历史接口(History API)，拖拽的原生支持
设备访问：访问相机、地理位置、设备角度等
样式增强：CSS 表达能力的增强，这一点应该是用的最多的