您的位置:知识库 » Web前端

解读 HTML5:建议、技巧和技术

作者: sofish  发布时间: 2010-09-02 20:53  阅读: 1241 次  推荐: 0   原文链接   [收藏]  
摘要:无论你想简单了解,还是深入学习HTML5。这篇文章将会有助于您进一步了解和学习HTML5。

  现今我们能用 HTML5 吗,能用它做些什么呢,是否真的是 Flash 杀手?想必你也注意到了这些日渐增长且常被问起的类似问题,被讨论着,甚至被回答过。在我看来,你必须自己回答这些基本的问题。

  这篇文章的本意是想帮你通过一些基本指南的学习,以轻松学习代码模板。一旦你熟悉了这些基本,并想更进一学习,你还将会找到更多提供了建议、技巧和技术的有用资源。

  HTML 5 特性

  官方详细的文档是寻找 HTML5 特性的最好地方,当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性:

  • 语义化标记
  • Form 表单增强功能
  • 视频/音频
  • 画布(Canvas)
  • 可编辑内容
  • 拖放
  • 稳健的数据存储

  检测浏览器支持

  在你开始尝试 HTML5之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可以帮助你向着正轨走:

  你还可以运行 Javascript(用Javascript 检测浏览器特性)来检测 HTML5 特性的支持。你还应该用用Modernizr:一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。

  你可能也会想留意不断变化的"浏览器市场份额分享"—这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。

  值得注意的变更点

  除了新的特征,你还应该记下这些重要的变更点:

  • 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型:<!DOCTYPE html>。它有意不使用版本,因此文档将会适用所有版本的HTML。
  • 简单易记的语言标签你并不需要在<html> 中使用xmlns 或xml:lang 标记。<html lang="en"> 将对 HTML5 有效。
  • 简单易记的编码类型你现在可以在 meta 标签中使用"charset":<meta charset="utf-8″/>
  • 不需要闭合标签在 HTML5 中,空标签(如:br、img 和 input )并不需要闭合标签。
  • 废弃的标签下面这些标签并不被 HTML5 支持:
    <acronym>、<applet>、<basefont>、<big>、
    <center>、<dir>、<font>、<frame>、<frameset>、
    <noframes>、<s>、<strike>、<tt>、<u> 和<xmp>

  简单代码示例:

1 <!doctype html>
2  <html lang="en">
3  <head>
4 <meta charset="utf-8" />
5 <title>HTML5 Document</title>
6 </head>
7 <body>
8
9 </body>
10 </html>

  你可以使用HTML5 ValidatorW3C Markup Validation Service 来测试你的 HTML5 文档。

  语义化标记

  HTML5 新增的一些新标签除了不仅仅是更具语义的<div> 标签的替代品,并不提供额外的功能。这些都是新增的标签:<article><section><aside><hgroup><header>,<footer><nav><time><mark><figure> 和 <figcaption>
  这些标签被除了IE 外的所有现代浏览器(Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+)支持。Javascript 提供了document.createElement(tagName)的方法,让你可以用来创建新的 HTML5 标签。代替自己创建这些元素,你还可以用HTML5 Enabling Script 或 IE Print Protector —这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。
你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset:

  简单代码示例: 兼容 IE 的 HTML5 页面布局

1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <title>HTML5 Semantic Markup Demo: Cross Browser</title>
6 <link rel="stylesheet" href="html5reset.css" type="text/css" />
7 <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" />
8 <!--[if lt IE 9]>
9 <script src="html5.js"></script>
10 <![endif]-->
11 </head>
12 <body>
13 <header>
14 <hgroup>
15 <h1>Page Header</h1>
16 <h2>Page Sub Heading</h2>
17 </hgroup>
18 </header>
19 <nav>
20 <ul>
21 <li><a href="#">Home</a></li>
22 <li><a href="#">Projects</a></li>
23 <li><a href="#">Portfolio</a></li>
24 <li><a href="#">Profile</a></li>
25 <li><a href="#">Contact</a></li>
26 </ul>
27 </nav>
28 <article>
29 <header>
30 <h1>Article Heading</h1>
31 <time datetime="2010-05-05" pubdate>May 5th, 2010</time>
32 </header>
33 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
34 <section>
35 <header>
36 <h1>Section Heading</h1>
37 </header>
38 <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
39 <footer>
40 <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p>
41 </footer>
42 </section>
43 <section>
44 <header>
45 <h1>Section Heading</h1>
46 </header>
47 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
48 <figure>
49 <img src="item-1.png" alt="Club">
50 <img src="item-2.png" alt="Heart">
51 <img src="item-3.png" alt="Spade">
52 <img src="item-4.png" alt="Diamond">
53 <figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption>
54 </figure>
55 <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p>
56 <footer>
57 <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p>
58 </footer>
59 </section>
60 <footer>
61 Article Footer
62 </footer>
63 </article>
64 <aside>
65 <header>
66 <h1>Siderbar Heading</h1>
67 </header>
68 <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
69 </aside>
70 <footer>
71 Page Footer
72 </footer>
73 </body>
74 </html>

注意:没有一个 div标签,id 或 class 属性被使用到—简洁、小巧和更语义化的标记(View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。

注意:这个示例在 IE6 下并未正常显示。这只是因为我使用 CSS child combinators 来避免使用额外的 class。你可以在 IE6 下用自己的 CSS ,像其他浏览器一样处理 HTML5 标记。

原文请看:HTML5 Unleashed: Tips, Tricks and Techniques

0
0
 
标签:HTML5

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻