HTML5入门

2016-03-13 本文已影响263人刘涤生

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