HTML5是下一代的HTML。
什么是HTML5
HTML5将成为HTML、XHTML以及HTML DOM的新标准。
HTML的上一个版本诞生于1999年。自从那以后，Web世界已经经历了巨变。HTML5仍处于完善之中。然而，大部分现代浏览器已经支持HTML5特性。
HTML5是如何起步的?
HTML5是W3C与WHATWG合作的结果
W3C是指World Wide Web Consortium，万维网联盟
WHATWG是指 Web Hypertext Application Technology Working Group。
WHATWG致力于web表单和应用程序，而W3C专注于XHTML2.0.在2006年，双方决定进行合作，来创建一个新版本的HTML。
HTML5开发建立的一些规则是：
- 新特性应该基于HTML、CSS、DOM以及JavaScript
- 减少对外部插件的需求（比如Flash）
- 更优秀的错误处理
- HTML5应该独立于设备
- 开发进程应对公众透明
HTML5新特性
- 用于会话的Canvas元素
- 用于媒介回放的video和audio元素
- 对本地离线存储的更好的支持
- 地理定位、套接字、Web工作线程
- 新的特殊内容元素，比如article、footer、header、nav、section
- 新的表单控件，比如calender、date、time、email、URL、search
HTML5示例
文件后缀为：.html
<!DOCTYPE HTML>
<html>
<head>
<title>This is Shenzhen</title>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World!</h1>
<p>细看来，不是杨花，点点是调式泪。</p>
</body>
</html>
- <html>标签用于描述网页
- <body>表示可见的页面内容
- < h1 >文本显示为标题
- < p >文本显示为段落
HTML5工作流程
- 浏览器加载一个文档，其中包括用HTML写的标记和用CSS写的样式。
- 浏览器加载页面时，会为你的文档创建一个内部模型，其中包含HTML标记的所有元素。这个模型就是文档对象模型（Document Object Model），简称为DOM。
- 浏览器加载页面时，还会加载JavaScript代码，通常是页面加载之后就开始执行这些代码。
- 通过这些API，你就可以访问音频和视频、使用画布完成2D绘图、访问本地存储，还可以使用构建应用所需的很多其他优秀技术。要使用所有这些API，需要用到JavaScript。
主要的JavaScript API有：套接字、画布、离线缓存、Web工作线程、视频、本地存储、音频、表单、拖放、地理定位。
JavaScript
JavaScript为你的Web应用打开了一个新的世界，提供类丰富的描述和功能下面来看看利用JavaScript和HTML5可以做的的一些事情：
- 直接在页面上创建一个可绘制的2D表面，根本无需插件
- 使页面掌握位置信息，知道你的用户所在的位置
- 使用Web工作线程可以 提高JavaScript代码的效率，完成一些复杂的计算
- 使用浏览器存储在本地缓存数据，提高移动应用的速度
- 不需要特使插件来播放视频
...
...
...
当我们谈论HTML5时，我们在谈论什么
非官方说法： 标记 + JavaScript + CSS = HTML5
大多数人谈论HTML5的种种承诺时，实际上就是指所有这些技术的结合。也就是说，我们会有标记来搭建页面的核心结构，用JavaScript和所有相关API增加行为和新功能，另外用CSS为页面增加样式，它们结合在一起，这些就是我们用来构建未来Web应用的技术。
JavaScript和HTML示例
<!DOCTYPE HTML>
<html>
<head>
<title>My First JavaScript</title>
<meta charset="utf-8">
</head>
<body>
<script>
var drink = "Coca"
var lyrics = "";
var cans = 99;
while (cans > 0) {
lyrics = lyrics + cans + " bottle of " + drink + " on the wall <br>";
if (cans > 1) {
lyrics = lyrics + (cans - 1) + " bottle of " + drink + " on the wall <br>"
} else {
lyrics = lyrics + "No more bottle of " + drink + " on the wall <br>"
}
cans = cans - 1;
}
document.write(lyrics);
</script>
</body>
</html>
浏览器运行结果如下：
1.first.png
