学习笔记（1）HTML5

（1）前言

HTML5本身其实很简单，就是一些标签，没有什么复杂的。找个教程或手册，把用法搞清楚，一天应该就差不多能掌握了。其实HTML5最难的还是和JS的整合，首先必须熟悉和了解JavaScript的语法结构和基础，必要时还要学习一些JS库，方便开发。然后才能深入的学习一些基于HTML5的扩展知识，比如Canvas2D在浏览器中画图，可以用于游戏开发等等场合。WebSocket 浏览器可以与服务器间双向通信；而Socket方式能够大大提高浏览器与服务器间的通信效率，可以用于浏览器与服务器间通信频繁的场合，比如实时聊天。

（2）革新

对于 HTML 5 的革新，按我的理解，可以总结为语义明确的标签体系、化繁为简的富媒体支持、神奇的本地数据存储技术、不需要插件的富动画(canvas)、强大的 API 支持。

（3）标签

所有的HTML5结构标签本质上都是一个div标签，只不过有意义。

（4）文档声明类型

<!doctype html>

在编写HTML5文档时，要求指定文档类型。以确保浏览器在HTML5正确的模式下渲染。

（5）新增元素

目前，我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部，底部或者侧栏等。
有了它们，代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。
HTML 5增加了新的结构元素来表达这些最常用的结构：
section: 这可以表达书本的一部分或一章，或者一章内的一节
header: 页面主体上的头部。并非head元素
footer: 页面的底部（页脚），可以是一封邮件签名的所在
nav: 到其他页面的链接集合
article: 诸如blog, 杂志，纲要等之中的一条独立记录。

<!doctype html>
<html>
	<head></head>
	<body>
		<header>
			<nav></nav>
		</header>
		<div>
			<section>
				<article></article>
			</section>
			<aside></aside>
		</div>
		<footer></footer>
	</body>
</html>

传统的布局方式

HTML5布局方式

秒客网