HTML 5 入门
4.62/5 (26投票s)
HTML5 新特性介绍。
目录
引言
HTML4 已经伴随我们很久了，大约十年。而且，它并没有真正进行过重大更新。当然有 XHTML，但那也只是让事情变得稍微严格一些——如果你关心合规性，它会让你编写质量更好的代码。HTML5 做得更多。首先，它增加了一些新功能。数量不多，但增加的功能都非常有用。
HTML5 的工作早在 2004 年就开始了，现在它正变得越来越有趣。浏览器支持正在增加，我最感兴趣的元素——CANVAS——在五大主流浏览器中已有四个支持。然而，由于 MSIE 不支持它，目前还不太可行地使用它。
那么，有什么新内容呢？
<canvas><canvas>是一个由 JavaScript 控制的 2D（目前是，将来可能会有其他维度）绘图区域。你可以用它做各种各样的事情——图表、游戏、演示文稿等。因为它由 JavaScript 控制，所以你可以非常容易地与它进行交互。一个例子是我添加到 RGraph 中的工具提示功能。简而言之，点击条形图，你会得到一个可以包含各种 HTML（图像、视频等）的工具提示。我在这里写了一篇关于<canvas>标签的简短入门。<video><video>标签让在网页中嵌入视频剪辑变得更加容易。它具有src（自然）、autoplay和loop等属性。<video>标签对可用性（例如，盲人访问）有影响，因此可以包含描述视频的附加标记，理想情况下是视频的完整文字稿。<audio><audio>标签与<video>非常相似，但用于音频文件。令人惊讶。- 上下文菜单
HTML5 提供了一种定义上下文菜单的方法，使其在 Web 应用程序中更容易使用。或许，对于网站来说不是那么有用，但对于上下文菜单可以提供大量选项而又不占用 UI 空间的应用程序来说，肯定很有用。
- 新的结构元素
由于 HTML 大体上是非结构化的，因此提供了一些新元素来尝试纠正这个问题。这些元素包括
<section>- 文本或书籍的一个部分或章节。<header>- 页面头部。这与<head>元素不同。<footer>- 页面底部。通常是放置所有法律废话的地方。<nav>- 指向其他页面的导航链接。例如，你可以将你的网站导航放入其中。<article>- 例如，一篇博客文章可以由此封装。<aside>- 此标签可用于为文本块提供额外信息。很像书籍等中的侧边栏材料。<figure>-<figure>元素可用于为你的主文本添加不一定与文本紧密相关的图表注释。
- 新的内联元素
HTML5 引入了新元素来帮助指示基本元素，例如时间或数字。
<mark>- 这表示一段文本以某种方式被标记。例如，你可以使用它来标记结果列表中的搜索词。<time>- 你可以使用它来表示文本块中的时间或日期。<meter>- 这可用于指示某种数字。它可以有多个属性，包括：value、min、max、low、high和optimum。<progress>- 这可用于显示某种进度条。它有几个属性：value和max。max属性可以省略。
- 新的表单输入类型
input 元素现在可以有一组新的类型，包括
datetime本地日期时间datemonth周时间numberrangeemailurl
其中一些在桌面 UI 中已经很常见，因此实现起来应该不难，并且在用户填写表单时会更加熟悉。
- 已弃用元素
以下元素已被弃用或替换
acronymappletbasefontbigcenterdirfontframeframesetisindexnoframesnoscriptsstrikettu
- 字符编码语法
HTML 5 文档的字符编码语法现在是：
<meta charset="UTF-8">。 - 新的交互元素
一些很棒的东西，将使构建网站，也许更重要的是，Web 应用程序变得更容易
<details>- 这可用于提供关于某个特定内容的更多信息。例如，浏览器可以将其实现为工具提示。此标签可以有一个open属性，该属性决定内容是否最初向用户显示。<datagrid>- 与传统表格（设计为静态）不同，这可用于提供一组具有一定交互性的数据。例如，选择行或列、编辑数据、排序以及在客户端通常与数据进行交互。<menu>- 以前是已弃用元素，<menu>在 HTML5 中以新含义回归。例如，它可以包含<command>元素，这些元素会导致特定操作发生。例如，你可以使用此元素提供某种工具栏或上下文菜单（参见上文）。它可以有label和icon属性。它们可以嵌套以提供多级菜单。
- 新的 DTD
HTML5 有一个更简单的新 DTD：
<!doctype html>。我想你会同意，这要好得多，也更容易记住。据我所知，这是因为 HTML 不再与 SGML 相关联。 - 链接上的 href 可选
这现在是可选的，因为链接可以与脚本结合使用。在 Web 应用程序中可能比在网站中更有用。
- async 属性
这规定一段脚本可以异步执行，而不是阻塞页面的其余部分直到它完成。
总结
HTML5 很可能是大家一直在等待的 HTML 更新。它为该语言提供了有用的补充，将使构建基于 Web 的应用程序更加容易和高效，同时使代码更简单。
当然，并非所有浏览器都将支持所有功能（<咳>MSIE</咳>），但随着时间的推移，新的项目已经专门设计来适应这种情况。所以，每个人都是赢家。大多数浏览器已经支持部分规范，有些已经支持很长时间了。一个例子是 <canvas>，它受到 Firefox、Opera、Chrome 和 Safari 的支持。据我所知，Firefox 3.1 将支持更多功能，即 <audio> 和/或 <video> 标签。迫不及待。