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

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表达能力的增强，这一点应该是用的最多的