HTML5的Web标准实战

标签： HTML5 入门 HTML5 hml5 HTML5/CSS3 HTML | 发表时间：2011-10-07 17:30 | 作者：Rainbow johnny
出处：http://blog.moocss.com

我记得2009年下半年的时候，我就开始尝试使用HTML5的新元素，具体的说应该是HTML5的结构性元素的使用。

我使用HTML5的结构性元素重构我的博客，刚开始，查看了大量老外博客，也归纳总结了一下使用场景，在什么情况下使用HTML5的新元素代替原有的没有语义性div，还有如何组织文档内容结构也是比较头疼的事情。

虽然看了一下HTML5新元素的名词解释，还是比较迷茫，毕竟是概念性的东西，没有应用于生产的案例来的真实。

当时遇到的问题:

  • 如何让IE也支持HTML5的新元素？
  • 如何正确的使用HTML5的新元素代替HTML4中没有明确语义的标签？
  • section>等于div吗？
  • section、article、div 的区别？
  • 如何构建正确的HTML5 Web页面？
  • 等等……

但随着Firefox、Chrome、Opera、Safari和IE9+对HTML5的支持越来越好，也有一些比较知名站点已经开始大量的尝试HTML5新技术了，例如：淘宝，支付宝，去哪儿等站点，但是它们在HTML5结构性元素上的使用，我持有疑问，不敢苟同，我认为对于初学者最好不要模仿它们，会把大家引向误区，最好多看一些老外的网站和(W3C:HTML, WhatWG)，多分析人家是如何重构的，然后再慎重的应用于生产。

对于这些HTML5结构性元素，不单单是使用了语义化类名的div的替代品,更应该是它们使我们的网页更富于语义性、组织性、结构性、模块化…，如果你还是喜欢那些如此缠绕的标签汤和冗余嵌套，我无话可说。如果我们不加思考盲目的使用HTML5结构性元素的话，会陷入结构不明了，主次不分，语义不确定的状态，那和狭义的使用div+css有啥区别。

我们的目标是使用HTML5的语义性标记，尽可能接近地定义内容的含义，并且不会描述表现。

HTML5的Web标准实战,就是我今天要说的“如何使用HTML5的新元素构建一个结构良好，语义丰富的Web页面”。

常用类名和ID名的使用统计数据

接下来，我就说一说我们在HTML5实战时的常见误区。

慎用section

不要把section当作div的替代品,人们在使用section的过程中，很容易把section等价于div，会直接用section代替div 。我想说的是“不要把<section>当<div>那样用。”

W3C官方文档中是这样说的：

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

<section>看起来像是有语义版的<div>，但实际的使用是用在一个专题性的版块，且通常带有一个标题。适合用于章节、标签切换效果的每一个tab容器或论文中有编号的地方，也可以用于网站主页中划分简介、新闻、联系信息等板块(多为一些公司主页的版块化区域，“新闻”版块可能只有简单文章列表而没有正文，此类版块多在主要区域展示.)。

官方还给了一个提示：

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

说的十分明确，<section>不是一个普通的容器元素，当为了样式布局时，建议使用<div>。当元素内容明确的列举在大纲时建议使用<section>。

我想W3C的介绍说的已经足够明确，只要谨记一点就不容易用错：<section>不是一个通用的纯容器标签。对这个问题我困惑了很久，因为有些HTML5教程让我迷惑，而很多大网站也是在疯狂的使用<section>作为容器标签。

使用<section>

<section>可以相互嵌套，在页面中定义了一个特殊的顶级区块，于是可以从<h1>开始列提纲而不用担心会破坏网页的纲要。尽管没找到明确说明，但我个人认为在每一层<section>里还是仅使用一个<h1>为佳。

以Wordpress主题为例，我认为与#sidebar相对的#content部分，使用<section>包裹一堆<article>作为页面的主要内容并不太合适。而使用<section>用在整体布局是明显的错误。

在XHTML或者HTML4中，我们常看到这样的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- HTML 4-style code -->
<div id="wrapper">
  <div id="header">  
    <h1>My super duper page</h1>
    <!-- Header content -->
  </div>
  <div id="main">
    <!-- Page content -->
  </div>
  <div id="secondary">
    <!-- Secondary content -->
  </div>
  <div id="footer">
    <!-- Footer content -->
  </div>
</div>

而现在在HTML5中，会是这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- Don’t copy this code! It’s wrong! -->
<section id="wrapper">
  <header>  
    <h1>My super duper page</h1>
    <!-- Header content -->
  </header>
  <section id="main">
    <!-- Page content -->
  </section>
  <section id="secondary">
    <!-- Secondary content -->
  </section>
  <footer>
    <!-- Footer content -->
  </footer>
</section>

这样使用并不正确：<section>并不是样式容器。section元素表示的是内容中用来帮助构建文档概要的语义部分。它应该包含一个头部。如果你想找一个用作页面容器的元素(就像HTML或者XHTML的风格)，那么考虑如Kroc Camen所说，直接把样式写到body元素上吧。如果你仍然需要额外的样式容器，还是继续使用div吧。

基于上述思想，下面才是正确的使用HTML5和一些ARIA roles特性的例子（注意，根据你自己的设计，你也可能需要加入div）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<body>
  <header>
    <h1>My super duper page</h1>
    <!-- Header content -->
  </header>
  <div role="main">
    <!-- Page content -->
  </div>
  <aside role="complementary">
    <!-- Secondary content -->
  </aside>
  <footer>
    <!-- Footer content -->
  </footer>
</body>

适合使用<section>标签的地方有：

  • 文章的评论列表，有着整齐的结构；
  • 文章内容的目录，有着文章内部结构纲要；
  • 侧栏widget，在WebDesignWall中我看到了这样的设计，因为widget内容大都是评论列表、文章列表，有着清晰的结构且是独立完整的一部分；
  • 将页面分节为不同主题区域。
  • 把文章划分为各个章节，但要在编辑器完成，目前来看并不易用。
  • 随着标签越来越多样化，把标签用对本来就不是一件容易事，用得完全合理就更难了。好在目前这些东西用户是看不到的，产品经理也不会留意。如果没有强迫症，大可不必纠结与此。

article 与 section 的纠缠

上面我们说了要慎用section,不要把section当作div使用。

div section article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化的钩子(hook)，对于一段主题性（一类事物）的内容，比如博客的侧栏，由许多的模块组成，每一个模块是独立完整的一部分，就非常适合使用 section。article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说， article 会有标题部分(通常包含在 header 内)，有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。虽然说section包含的内容也能算是独立的一块，但是它只能算是组成整体的一部分，article 才是一个完整的整体，例如：一篇篇幅很大的文章，就会有分出很多章节，也可以独立成块儿，并配有章节标题，这个时候使用 section 来包裹文章章节是最合适不过了。nav 和 aside 的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。

当作有语义的模块使用时

例如，我博客的侧栏就是下面的组织方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

  <aside class="sidebar" role="complementary">
       <section role="region">
           <h3>About Me</h3>
           <p>text,text,text,text</p>
       </section>
       <section role="region">
       		<h3>Recent Posts</h3>
            <ul>
            	<li>text,text,text,text</li>
                <li>text,text,text,text</li>
                <li>......</li>
            </ul>
       </section>
       <section role="region">
       		<h3>Recent Comments</h3>
            <ul>
            	<li>text,text,text,text</li>
                <li>text,text,text,text</li>
                <li>......</li>
            </ul>
       </section>
  </aside>

article 嵌套中section

html4中常见的文档

1
2
3
4
5
6
7
8
9
10
11
12

<h1>Rules for Munchkins</h1>
<h2>Yellow Brick Road</h2>
<p>It is vital that Dorothy follows it—so no selling bricks
as “souvenirs”</p>
<h2>Fan Club uniforms</h2>
<p>All Munchkins are obliged to wear their “I’m a friend of
Dorothy!” t-shirt when representing the club</p>
<p>
<strong>Vital caveat about the information above:
does not apply on the first Thursday of the month.
</strong>
</p>

html5中的做法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<article>
    <h1>Rules for Munchkins</h1>
    <section>
        <h2>Yellow Brick Road</h2>
        <p>It is vital that Dorothy follows it—so no selling bricks
        as “souvenirs”</p>
    </section>
    <section>
        <h2>Fan Club uniforms</h2>
        <p>All Munchkins are obliged to wear their “I’m a friend of
        Dorothy!” t-shirt when representing the club</p>
        <p>
        <strong>Vital caveat about the information above:
        does not apply on the first Thursday of the month.
        </strong>
        </p>
    </section>
</article>

如上，html4中的文档结构，<h1>和<h2>就比较纠结，这篇文章到底是介绍<h1>以下的所有内容；还是说它只是指<h2>以下的信息。

如果每个段落归那个<h2>管，html4从语义上就无从下手;在HTML5中,<section>元素就可以就可以使其语义明确。

到这儿，也许有人会问，为什么这个内容块儿不使用<article>如果使用了<article>就无法像<section>这样正确地划分这篇文章了，因为这些内容块儿，不是独立的，离散的实体。

section 中嵌套 article

例如有这样的一篇文章，有多个完整独立的主题，一个是关于骆驼的，一个是关于植物的，都主题鲜明，都可以作为独立的专题，这个时候我们希望它们位于不同的栏目中或者是标签界面中不同的选项面板中。

那又如何实现那？HTML4就不多说了，HTML5中是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<section>
	<h1>Articles about llamas</h1>
    <article>
        <h2>The daily llama: buddhism and South American camelids</h2>
        <p>blah blah</p>
    </article>
    <article>
        <h2>Shh! Do not alarm a llama</h2>
        <p>blah blah</p>
    </article>
</section>
<section>
	<h1>Articles about root vegetables</h1>
    <article>
        <h2>Carrots: the orange miracle</h2>
        <p>blah blah</p>
    </article>
    <article>
        <h2>Eat more Swedes (the vegetables, not the people)</h2>
        <p>blah blah</p>
    </article>
</section>

为什么不把两个<section>写成<article>呢？因为在上面的例子中，每个<section>都是独立的实体的一个集合，其中每个实体都可以聚会，但你通常不会想把集合聚会成一个单独的实体。

article 与 section 是互相纠缠的，但各自的职责是明确的，我们可以有父<section>,它可以嵌套<article>，而<article>反过来可以拥有一个或多个<section>。并非所有的页面都需要这样，但是以这种方式嵌套完全是可以接受的并且是正确的。

正如这样一个例子“想想一份报纸。报纸分成版块。有体育版块，房地产版块，娱乐版块，军事版块，等等。每一个版块都包含文章，而这些文章又划分成小节。”

只在需要的时候使用header和hgroup

写不需要写的标签当然是毫无意义的。不幸的是，我经常看到header和hgroup被无意义的滥用。

header元素表示的是一组介绍性内容或者导航性质的辅助文字。它通常包含了节（section）的标题（一个h1到h6的元素，或者一个hgroup元素），但不是必须的。

header的滥用

由于header可以在一个文档中使用多次，可能使得这样代码风格受到欢迎：

1
2
3
4
5
6
7

<!-- 不要复制此代码!这里不需要header-->
<article>
  <header>  
    <h1>My best blog post</h1>
  </header>
  <!-- Article content -->
</article>

如果你的header元素只包含一个头部元素，那么丢弃header元素吧。既然article元素已经保证了头部会出现在文档概要中，而header又不能包含多个元素（如上文所定义的），那么为什么要写多余的代码。简单点写成这样就行了：

1
2
3
4

<article>  
  <h1>My best blog post</h1>
  <!-- Article content -->
</article>

<hgroup>不合理使用

hgroup 是HTML5中新定义的元素，用来将标题和副标题群组。在我们已经有header标签的情况下，为什么我们还要一个<hgroup>标签？

下面是文档关于的描述 <hgroup>的描述：

hgroup一般被用作将一个或者更多的h1到h6的元素群组，比如，一个区块内的标题和它的副标题。

The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.W3C Specification

从定义中我们得知<hgroup>扮演着一个可以包含一个或者更多标题相关的容器的角色,这些标题可能在<header>元素中。它只能包含从h1-h6的标题元素，这些标题可能是副标题、二选一的标题或者标记标题。

在<header>的使用过程中,我们经常会误使用<hgroup>.在下面这种情况下你不能将<header>标签和<hgroup>标签一起使用:

  • 这里只有一个标题,
  • 或者<hgroup>本身就够了(比如:不需要<hgroup>)

第一种情形看上去是下面的样子:

1
2
3
4
5
6
7

<!-- Don’t copy this code! No need for hgroup here -->
<header>
  <hgroup>
    <h1>My best blog post</h1>
  </hgroup>
  <p>by Rich Clark</p>
</header>

这种情况下,将<hgroup>移除,只保留标题就好.

1
2
3
4

<header>
  <h1>My best blog post</h1>
  <p>by Rich Clark</p>
</header>

第二种情况也是包含了他们并不需要的标签.

1
2
3
4
5
6
7

 <!-- Don’t copy this code! No need for header here -->
<header>
  <hgroup>
    <h1>Article title</h1>
    <h2>Article subtitle</h2>
  </hgroup>
</header>

当<header>标签的子元素只有<hgroup>的时候,为什么我们还需要一个额外的<header>? 如果没有额外的元素放到<header>中(比如<hgroup>的兄弟元素),我们直接将<header>元素去 掉就好.

1
2
3
4

<hgroup>
  <h1>Article title</h1>
  <h2>Article subtitle</h2>
</hgroup>

当你的有一个标题有副标题或者其它的和section或者article有关系的元数据时，将<hgroup>和元数据放到一个单独的<header>元素容器中。

1
2
3
4
5
6
7
8
9
10
11

<!-- A heading which uses header and hgroup -->
<article>
     <header>
         <hgroup>
             <h1>Article title</h1>
             <h2>Article subtitle</h2>
         </hgroup>
         <p>(<time datetime="2009-07-13">13th July, 2009</time>)</p>
     </header>
     <p>Content…</p>
</article>

我们为什么要使用<hgroup>

我们用<hgroup>一切源起文档大纲(document outline).

当群组的标题在<hgroup>元素的时候，大纲的算法将会覆盖掉群组中低等级的标题，而将最高等级的标题作为大纲。下面的就是一个例子：

1
2
3
4
5
6

<header>
    <hgroup>
        <h1><a href="/">Mini Apps</a></h1>
        <h2>Web applications for iPhone, Android & other mobile platforms</h2>
    </hgroup>
</header>

<hgroup>包含h1-h2的标题元素，但是在大纲中只包含<h1>.就像下图展示的那样子。

我们可以从这个链接查看文档大纲：http://gsnedders.html5.org/outliner/

不要将所有的链接列表都放到<nav>标签

在HTML5新增的30个元素中(在我们写这篇文章的时候),我们在构建更具语义\结构化的标签的时候,我们的选择变得太丰富.也就是说我们对现在给我们提供的这些超级有语义的标签,我们可能会滥用.<nav>就是一个很悲剧的例子.在规范中的描述是这样的:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

WHATWG HTML spec

nav元素表示页面中链接到其他页面或者本页面其他部分的区块；包含导航连接的区块。

注意：不是所有页面上的链接都需要放在nav元素中——这个元素本意是用作主要的导航区块。举个具体的例子，在footer中经常会有众多的链接，比如服 务条款，主页，版权声明页等等。footer元素自身已经足以应付这些情况，虽然nav元素也可以用在这里，但通常我们认为是不必要的。

WHATWG HTML spec

这里面的关键词是”重要”导航.我们可能会对”重要”有不同的定义,但是我的理解是:

  • 主要导航
  • 网站搜索
  • 二级导航(这个能是有争议的)
  • 页面内链接(比如一篇很长的文章，目录区域)

虽然并没有对错之分,但根据我的理解和一个民意投票让我觉得在下面这些情形下,我不会使用<nav>标签:

  • 翻页
  • 社交类的链接（虽然有些社交类的链接也是主要的链接，比如关于我About me和品味Flavours ）
  • 博客文章的标签
  • 博客文章的分类列表
  • 第三级导航
  • 大页脚

如果你不能确定是否使用<nav>，那就先对你问一下下面的几个问题：“者是否是一个主要链接？”，你可以根据下面的几个因素来回答你刚才的问题：

  • 如果用<section>和标题标签能够解决你的问题，那就不要去使用<nav>–Hixie on IRC
  • 你是不是为了增加可访问性而增加的一个快捷跳转链接呢？

如果上面的回答都是“不”，那可能就不适合使用<nav>.

<figure>元素的错误

<figure>和经常与它合伙作案的<figcaption>，是很难掌握的标签，下面是经常看到的一些小错误。

并不是所有的图片都是figure（注：比较难理解阿，image=图片，figure=图形）

之前，我曾经说过不要写那些不需要的标签。这个错误也是相同的。我经常看到一个网站上的每张图片都有<figure>标签。这些额外增加的标签并不会给你带来任何的益处，并且还增加了你自己的工作强度和让自己的内容变得更难理解。

在规范中关于<figure>的解释如下：“一些文本流，可能包含标题——它们通常是作为文档的主要内容流中的一个自我包含的独立单元。”在那里有完美的表述，就是它可以被从主内容中移除–比如放到边拦，而对文档流没有影响。

如果仅仅是一张表现类的图片而且和文档中其他的内容没有关系的话，那就不需要使用<figure>.”这张图片需要对上下文的内容作出解释吗？”，如果答案是”否”，那就可能不是<figure>(可能是<aside>),”我能把它移到附录里面吗？”，如果这两个问题的答案都是”是”，那就可能是<figure>.

你的标志不是一个<figure>

将上面的延伸开来，对你的logo也是这样。下面是两组我找到的有规律的代码片断：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 <!-- Don’t copy this code! It’s wrong! -->
<header>
  <h1>
    <figure>
      <img src="/img/mylogo.png" alt="My company" class="hide" />
    </figure>
    My company name
  </h1>
</header>
 
<!-- Don’t copy this code! It’s wrong! -->
<header>
  <figure>
    <img src="/img/mylogo.png" alt="My company" />
  </figure>
</header>

这里就不需要说啥了，这是很明显的错误，可能你认为我们说的是不是将logo放在H1标签里面，但是我们在这里并不讨论这个问题。让我们迷惑的 是<figure>元素。<figure>标签只用在当有上下文需要说明或者被<section>包围的时候。我这里要说的是你的logo可能很少会被这种情况下使用。很简单，那就不要去这样做，你需要的仅仅是下面的样子。

1
2
3
4

<header>
  <h1>My company name</h1>
  <!-- More stuff in here -->
</header>

figure只能用在标签上的误解

另一个对<figure>的误解就是我们通常认为它只能用在图片上面。事实上并不是这样子的，它可以被用在 <video><audio>, 一个图标 (比如<SVG>, ), 一个引用, 一个表格, 一段代码, 一段散文, 或者任何和这些相关的组合. 不要把你的<figure>标签仅仅局限在图片上。我们网页制作师的任务就是用标签更准确的描述内容。

这里有一篇更深入讲解 <figure>的文章I wrote about &lt;figure&gt;，很值得阅读的。

不相关信息，<aside>

<aside>,通常用作页面的侧边栏。它表示与aside元素周围的内容无关的内容所组成的一个页面的节，也可以认为该内容与aside周围的内容是分开独立的。

该元素可以用于摘录引用或者是边栏这样的排版效果，用于广告，用于一组导航元素，以及你认为是与页面主内容区分开来的其他内容体。

例如,一个<article>中使用<aside>，是表示该文章的不相关信息或摘录引用的好办法，但是这不是放全页导航的好地方。

<aside>有一个隐式的ARIA角色“note”，但是可以使用 role=”complementary” 或role=”search”（如果它包围着一个搜索表单）。

mark 与 em 和 strong

mark的妙用

<mark> 用来高亮显式文字片断对于用户或页面内容的相关性。

<mark> 元素允许我们标记所做的事情，相当于使用一支荧光笔在打印的纸张上标出一些文字。它与强调不同，对于强调，我们使用<em>。

但是如果有一些已有的文本，并且想要让文本没有强调的内容处于显眼的位置，可以使用<mark> 并将其样式化为斜体，或者使用黄色的荧光笔背景色。

<mark>用于搜索时，标记结果页中搜索关键词的信息是非常合适的。比较用strong 和 em 更合适，至少<mark>没有改变页面的内容的含义。

<em>、<i>、<strong>、<b>的区别

<em>表示内容的着重点（stress emphasis），<strong>表示内容的重要性（strong importance）<strong>不会改变所在句子的语意，em 则会改变所在句子的语义。

<em>是句意强调，加与不加会引起语义变化。<strong>是重要性强调，和局部还是全局无关，局部强调用<strong>也可以，<strong>强调的是重要性，不会改变句意。

<b>和<i> 仅用来使文本呈现粗体和斜体，区别其它文本，不会产生任何语义的变化。

不要去使用那些不必要的type属性

这可能是我们最常见的一些问题，它们并不是真正的错误，但我觉得我们的最好实践还是尽量避免这种模式。
在HTML5中，我们并不需要给<script>和<script>增加 type 属性，如果这些从CMS默认添加的内容中移出是很痛苦的事情，那当你手工编码的时候还写入它们或者你能完全的控制你的模板时候你完全可以删掉它们。因为所 有的浏览器都会将<script>解析成Javascript和<script>标签是CSS，你不再需要那个type属性了：

1
2
3

<!-- Don’t copy this code! It’s attribute overload! -->
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/scripts.js"></script>

现在我们可以写成下面的样子：

1
2

<link rel="stylesheet" href="css/styles.css" />
<script src="js/scripts.js"></script>

你也能够对编码的设置作出省略。Mark Pilgrim在Dive into HTML5的语义化一章中作出了解释。

不要包含错误的标单属性

你可能发现<html5>引入了很多新的表单属性。现在我就给大家讲讲一些不合适的使用。

布尔值属性

新引入的标签属性有几个是布尔类型的，它们的标签行为基本接近。这些属性包括：

  • autofocus
  • autocomplete
  • required

坦白的说，下面的这种情况对我来说并不常见，但我们从 required 作为例子，如下：

1
2
3
4

<!-- Don’t copy this code! It’s wrong! -->
<input type="email" name="email" required />
<!-- Another bad example -->
<input type="email" name="email" required />

基本上看，这段代码并不会带来危害。客户端对 HTML的解析遇到 required 标签属性时，他的功能就会生效。但是当我们将代码修改，录入 required=”false” 的情况呢？

1
2

<!-- Don’t copy this code! It’s wrong! -->
<input type="email" name="email" required />

解析的时候依然会遇到 required 属性，虽然你希望加入的行为是 假，它依然会被解析成 真。
这里有三种合理的方法让布尔值生效。（第二种和第三种方案只有你在写 XHTML 解析的时候需要）

我们上面的例子可以写成下面的样子：

1

<input type="email" name="email" required />
参考资料：

相关日志 »

相关 [html5 web 标准] 推荐：

HTML5的Web标准实战

- johnny - blog.moocss.com
我记得2009年下半年的时候，我就开始尝试使用HTML5的新元素，具体的说应该是HTML5的结构性元素的使用. 我使用HTML5的结构性元素重构我的博客，刚开始，查看了大量老外博客，也归纳总结了一下使用场景，在什么情况下使用HTML5的新元素代替原有的没有语义性div，还有如何组织文档内容结构也是比较头疼的事情.

【HTML5】Web Storage简析

- - 博客园_首页
什么是Web Storage. web storage是HTML5规范中提出的一种本地存储解决方案. 在这之前，我们在开发中遇到本地存储问题时，通常有两种解决方式. cookie：兼容性最好，但也有不少问题，下面会简单做下对比. 各浏览器实现的非标准化的本地存储方案，如IE的userData，firefox的global storage等，毫无疑问，最大的问题是兼容性.

HTML5 Web socket和socket.io - wishyouhappy

- - 博客园_首页
 　　HTML5的新特性，用于双向推送消息（例如网页聊天，手机推送消息等）. client利用regular http请求webpage. 请求的webpage 执行javascript脚本,open a connection to server.. 有新的信息时服务器和客户端可以相互发送信息（Real-time traffic from the server to the client .

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业，新标准既可能是无限财富的源泉，也可能导致企业帝国的毁灭. 尽管存在着如此多的风险，标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时，计算领域的主要争议是Unix是否是一个可行的操作系统（以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战），以及哪个视窗平台（SUN/AT&T还是IBM/DEC/HP）将成为标准.

HTML5引领下的Web革命

- - 译言-电脑/网络/数码科技
HTML5引领下的Web革命. ACM通讯，第55卷，第7刊，16到17页 10.1145/2209249.2209256. 万维网开发人员最近表示新的HTML5标准对网络的演变过程，工作方式和使用途径而言，都是一次非凡的革新. 新的标准简化了程序运行方式，协调了各种终端设备和应用程序之间互访的入口，给用户带了让人惊喜的全新功能.

Nokia Maps 正式推出 HTML5 web app 版

- - UNWIRE.HK 流動科技生活
看來近年寫程式的趨勢，已由以往的 native app，開始轉向採用 web app，因為後者始終不受平台限制，只要編寫一個支援 HTML-5 格式的 web app，就可以在 iPhone、iPad、Android 手機、平板、Windows Phone 手機、甚至在 Blackberry 平台的裝置上使用，對於研發程式的公司來說，確實是最具經濟效益的方法.

AT&T公布HTML5 Web应用API

- - HTML5研究小组
北京时间1月10日消息，据国外媒体报道，AT&T首席营销官大卫·克里斯托弗(David Christopher)今天在该公司第六届开发者峰会公布了面向HTML5应用的API(应用编程接口)平台API Catalog. HTML5应用可以在多种设备和移动操作系统上运行. 　　iPhone版Visual Voicemail将是AT&T的首款网络API.

HTML5本地存储 Web Storage - 紫尘

- - 博客园_首页
Web Storage基本介绍. 　　HTML5 定义了本地存储规范 Web Storage ， 提供了两种存储类型 API  sessionStorage 和 localStorage，二者的差异主要是数据的保存时长及数据的共享方式. 　　　　localStorage 一直存储在本地，数据存储是永久的，除非用户或程序对其进行删除操作；.

HTML5 Web Speech API，让网站更有趣

- - SegmentFault 最新的文章
Web API 变得越来越丰富，其中一个值得注意的是 Web Speech API. 传统的网站只能“说”，这个API的出现，让网站能“倾听”用户. 这个功能已经开放了一系列的用法，非常棒. 在这篇文章中，我们将看一下这项技术和建议的用法，以及如何用它来增强用户体验的一些好例子. 声明：本技术比较前沿，目前该规范是W3C的“非官方编辑器的征求意见稿”（截至2014年6月6日）.

谷歌Chrome加速HTML5标准落地

- - HTML5研究小组
“快速、易用和安全的浏览体验是Chrome赢得用户青睐的关键. ”谷歌产品经理陈瑞怡日前在接受《计算机世界》报采访时表示，自发布以来，基于Webkit内核的Chrome浏览器在速度方面已经提高了6倍，并且平均每6周就会推出新的版本. 在浏览器市场，谷歌Chrome的历史并不长，推出仅3年，但用户数已达到2亿，成为浏览器市场的主要成员.