新闻

该内容已经被标记书签！

标记书签错误，请重试！

理解HTML5语义 – 第2部分：文档结构和全局属性

作者 Stephanie (Sullivan) Rewis 发布于 2011年12月22日

领域: 语言 & 开发
主题: Adobe ,; RIA

分享到

文档结构中的变化
全局属性
超级骗子—link元素

在我之前编写的有关HTML5语义的文章中，我探讨了添加到HTML5规范中的一些新元素，以及它们的语义含义。在本文中，我将介绍HTML4（或XHTML——本文中会交替使用这两个术语）和HTML5文档结构之间的区别，包括新增的全局属性。

文档结构中的变化

HTML5在文档自身上引入了多处更改。我个人不满意的是，HTML5允许作者创建格式不规范的文档。换句话说，它允许更松散的结构，其中<p>和<li>元素不需要结束。浏览器仍然知道如何处理它。它不区分大小写，所以您可以随意采用大写或小写。如果您习惯于编写HTML4，您可以继续采用该样式。如果XHTML是您的首选，可以继续保持——它完全是可接受的。但是，即使格式松散的文档受支持，也不是明智的做法。排除混乱的代码中的问题可能很麻烦，因此我建议继续使用规则的标记。

文档类型

HTML4和HTML5之间最明显的区别是新的缩短的文档类型。我不了解您，但我记不住HTML4或XHTML1文档类型。它们冗长无趣。但我们现在可以摆脱这种较长的文档类型了：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

采用一种非常简短、没有版本的文档类型：

<!DOCTYPE HTML>

丢掉版本编号并不意味着HTML从来没有进步和发展。因为HTML5打算向后兼容，所以W3C感觉没有必要在扩展它时继续使用编号系统。无论如何，现代浏览器将呈现它能够呈现的内容。Internet Explorer（版本5或更早版本）使用了一种不合规、不完善的盒状模型。当Microsoft转向采用标准的W3C盒状模型呈现时，需要一种新方式来表明将哪种呈现模式用于网页。文档类型的创建使浏览器可以在标准模式（W3C版本）或Quirks模式（不完善的版本，网络上许多早期的文档都使用它）之间切换呈现模式。新的、简化的文档类型包含让浏览器知道以标准模式呈现文档所需的最少数量的字符。

字符集

文档的另一种结构变化在字符集或字符编码上。以前您使用：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

像文档类型一样，现在可以使用以下简化的版本：

<meta charset="utf-8">

样式表和脚本链接

为了保持简单，<link>和<script>元素不再需要type属性。以前您使用以下代码：

<link href="assets/css/main.css" rel="stylesheet" type="text/css" /> 
<script src="assets/js/modernizr.custom.js" type="text/javascript"></script>

现在您可以使用以下缩短的版本：

<link href="assets/css/main.css" rel="stylesheet" /> 
<script src="assets/js/modernizr.custom.js"></script>

完整文档

将上述信息添加到一个文档中，您的HTML5页面将类似以下形式：

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Document Name</title> 
       <link href="assets/css/main.css" rel="stylesheet" /> 
       <script src="assets/js/modernizr.custom.js"></script> 
    </head> 
    <body> 
        <p>Your content</p> 
    </body> 
</html>

全局属性

请注意，HTML4属性上也存在一些变化。一些现有的属性（您可能已熟悉）已全局化。它们可在需要时应用于任何和所有元素。它们包括：

accesskey
class
dir
id
lang
style
tabindex
title

此外，添加了一组新的全局属性。让我们快速看看每个属性。

contenteditable属性

contenteditable属性允许将任何HTML元素设置为可编辑。它可包含3个值：true、false和inherit。

您可能已看到了contenteditable的实际应用。在编写您希望用户能够与演示交互和更改值的教程时它非常有用（参见CSS技巧演示）。或许您已在某场会议的演示上看到，演示者使用HTML5创建了她的幻灯片——然后在演示时在浏览器中实时编辑它们。

您可以将任何属性设置为可编辑。想象一下创建页面内文本编辑器的可能性。如果您使用本地存储，您的用户可在以后返回到页面并保留更改。因为自5.5版以来，IE就已支持contenteditable，所以它得到了很好的支持（但还未应用到移动领域）。如果您要将页面的一部分设置为可编辑，可以使用outline和一个属性选择器为用户提供一种可视指示：

[contenteditable]:hover, [contenteditable]:focus { 
    outline: 2px dotted red; 
} 
<p contenteditable="true">Your content</p>

属性选择器自IE7以来就已得到支持，允许您确定具有特定属性的目标元素。请注意，我同时使用了和伪类。这样，同时使用鼠标和键盘导航的用户可看到可视指示。我选择使用轮廓线代替边框，因为它不会向盒状模型添加元素，所以页面区域不会在触发时突然闪现。请注意，如果拥有IE6/7支持很重要，您应该使用边框代理。

contextmenu属性

依据W3C HTML5工作草案：

“contextmenu属性提供了元素的上下文菜单。该值必须是DOM中的一个菜单元素的ID。”

菜单元素本身只是一组命令。它们可能为表单元素、列表项或其他元素。菜单是隐藏的，直到键击或鼠标单击等事件的触发导致它提供选项和动作的气泡式菜单。

这使您能够像下拉菜单一样节省UI空间，因为它仅在以某种方式请求时才显示。目前现代浏览器中还不支持，但它已为第一次实现做好了准备。代码可能类似于：

<label for="char">Charter name: </label> 
<input name="char" type="text" contextmenu="boatmenu" required> 
<menu type="context" id="boatmenu"> 
    <!—menu content elements here --> 
</menu>

data-*属性

W3C HTML5工作草案表明，

“自定义数据属性是一个没有命名空间的属性，它的名称以字符串“data-”开头，在连字符后拥有至少1个字符……”

这些自定义数据属性允许您创建属性来与在您自己的网站上运行的脚本共享数据。它们还未被一般软件使用或采纳。您可以指定任意多个自定义数据属性。依据caniuse.com，“所有浏览器可能都已使用data-*属性，并使用getAttribute访问它们。”

得益于出色的支持，坊间已存在许多自定义数据属性的示例。如果您拥有Dreamweaver CS5.5，您可以创建一个jQuery Mobile (JQM)应用程序。jQuery Mobile广泛使用了自定义数据属性来识别元素、主题和许多其他实体的角色。以下是一个JQM页面的示例

<div data-role="page" id="page" data-theme="b"> 
    <div data-role="header"> 
        <h1>Header</h1> 
    </div> 
    <div data-role="content">Content</div> 
    <div data-role="footer"> 
        <h4>Footer</h4> 
    </div> 
</div>

role和aria-*属性

如果希望使网站可供具有各种不同的浏览习惯和身体缺陷的用户访问，您将会发现role和aria-*属性。WAI-ARIA (Accessible Rich Internet Applications)这种方法提供了一些方式来定义您的动态Web内容和应用程序，以使具有残疾的人们能够识别和成功与之交互。这是通过定义文档或应用程序结构的role，或通过定义部件角色、关系、状态或属性的aria-*属性来完成的。

规范建议使用ARIA使HTML5应用程序更容易访问。当使用语义HTML5元素时，您应该设置它们的相应角色。基本结构可能类似于：

<header id="banner" role="banner"> 
    ... 
</header> 
<nav role="navigation"> 
    ... 
</nav> 
<article id="post" role="main"> 
    ... 
</article> 
<footer role="contentinfo"> 
    ... 
</footer>

还有大量aria-*属性可使您的内容更容易导航和理解。aria-labelledby、aria-level、aria-describedby和aria-orientation等属性都使您的内容更容易理解。您可在ARIA声明和属性页上查阅更多相关信息。

在我以前编写的有关HTML5语义的文章中，我介绍了新的figure和figcaption元素。我使用的代码类似于：

<figure> 
    <img src="virgin-gorda.jpg" 
       alt="The boat as seen through the rocks at the Baths on Virgin Gorda."> 
    <figcaption>The Baths at Virgin Gorda</figcaption> 
</figure>

如果添加aria-describedby属性，您可以在<figure>和<figcaption>元素之间创建一种对于残疾人技术而言在语义上还不存在的关系。代码可能类似于：

<figure> 
    <img src="virgin-gorda.jpg" 
       alt="The boat as seen through the rocks at the Baths on Virgin Gorda." 
       aria-describedby="capt1"> 
    <figcaption id="capt1">The Baths at Virgin Gorda</figcaption> 
</figure>

要了解更多信息，请查阅Derek Featherstone的ARIA教程并在SitePoint上查看坊间的可访问性资源。

draggable和dropzone属性

这两个属性放在一起使用，因为它们是新的拖放API（DnD API）的一部分。对于draggable属性，有3种状态：true、false和auto（auto不是关键字，它是默认的缺少值），依据W3C HTML5工作草案：

“true状态表示元素可拖动；false状态表示它不可拖动。auto状态使用用户代理的默认行为。”

如果您将拖动某个实体，您还需要能够放置它。这正是dropzone属性所做的。目前可指定3个值——copy、move和link：copy创建被拖动元素的一个副本；move实际将元素移动到新位置；link创建被拖动的数据的链接。DnD API正开始获得Gmail的关注，Gmail使用它作为其文件上传的基础，允许您之际将文件拖到浏览器上。Ryan Seddon创建了一种方式来测试自定义字体，而无需将它们上传到服务器（称为Font Dragr）。它使用DnD API并允许您将字体文件拖到浏览器上以供预览。

这些属性得到了很好的支持（在除Opera外的所有浏览器中，包括Android），但对于dropzone，您将需要深入分析一下JavaScript。如需获得介绍细节的优秀教程，请查阅Remy Sharp的HTML5 Doctor文章Native Drag and Drop。请注意，您也应该使用aria-dropeffect和aria-grabbed（状态）来使内容更容易访问。

hidden属性

以下是W3C HTML5工作草案对hidden属性的介绍：

“hidden属性是一个布尔属性。当在一个元素上指定时，它表示元素还不或不再相关。用户代理不应呈现指定了hidden属性的元素。”

当然，您还必须使用JavaScript操作此属性。一个示例可能是使用hidden属性来登录Web游戏。最初，用户将看到隐藏了游戏的登录屏幕。在验证凭据后，用户将看到隐藏了登录屏幕的游戏。

当一个元素应用了hidden属性时，它将向所有用户代理隐藏，包括屏幕读取器；但是，脚本和表单控件仍可执行。这只是表示上的一处更改，display:none也是如此。（HTML5可访问性要求所有支持的浏览器（基本上仅不包括IE）使用display:none）。您将回想起，display:none会导致元素完全不显示方框——所以围绕它的所有内容都会折叠到它的区域中。hidden属性也是如此。您可能需要谨慎考虑，使用属性hidden、display:none还是aria-hidden属性更好。

<fieldset id="login" hidden>

spellcheck属性

依据W3C HTML5工作草案：

“用户代理可支持检查可编辑文本的拼写和语法，无论是在表单控件（比如文本区元素的值）中，还是在编辑主机中的元素（使用contenteditable）。”

就像contenteditable属性一样，spellcheck属性的可能值包括true、false或inherit：true表示它将被检查，false表示它将不会被检查，inherit获取父元素的值（如果有）。

您可以观看Wufoo中的实时演示，查看拼写检查的实际应用。现代浏览器中具有良好的拼写检查支持（但不可用于IE或Safari Mobile）。图1给出了拼写检查在Chrome浏览器中的实际应用的屏幕截图。请注意像任何文本编辑器或邮件程序中一样的红色下划线。

<input type="text" spellcheck="true">

图1. 拼写检查在Chrome浏览器中的实际应用。

如果polyfill不可用，拼写检查不会真正需要它来进行回调。它是一个不错的属性，但在大部分情况下都不需要，并且会静默地失败，所以没有理由不在适当时添加它。

超级骗子—link元素

恐怕您已对所有这些新全局变量弄得头昏眼花了，我将向您介绍有关HTML5语义的最激动人性的元素。它是您将立即开始使用文档类型的最大原因，即使您还未使用该新元素。

您可以为任何内容添加超链接，真的。

围绕图像添加链接和围绕它的字幕添加相同链接，此功能已存在很长时间。或者围绕标题和它下面的内容段略放置相同但分派的链接，此功能也已存在很长时间。据W3C HTML5工作草案：

“a元素可围绕整个段略、列表、表格，甚至整节而添加，只要其中没有交互式内容（比如按钮或其他链接）。”

那么此功能有何妙用呢？当我了解此功能后，我做的第一件事就是进入我自己的站点，其中主页已将标题/段略分组，但独立包装。我将代码更改为：

<ul> 
    <li>...</li> 
    <li id="training"> 
        <a href="services.html#train"> 
            <h1>Corporate Training</h1> 
            <p>Bring your team up to speed on web standards, HTML5, CSS3, accessibility or Dreamweaver with a top expert in the industry.</p> 
        </a> 
    </li> 
    <li>...</li> 
</ul>

这具有很好的浏览器支持。在我自己的工作中，我偶尔遇到过奇怪的呈现错误，我总是通过设置display: block的超链接来修复它。Derek Featherstone使用此技术对可访问性执行了广泛的测试。他发现残疾技术也可接受此功能。

a元素可以是一个占位符

当在整个站点使用一致的导航时，您通常不希望用户当前所在的页面链接到它自身。但是许多时候，导航样式集成了a元素，就像它集成包含它的li或p一样。请删除整个a元素，这样链接就不会经常使设计崩溃。现在已修复了这一问题——您只需整个删除href。以下是W3C对该主题的陈述：

“如果a元素没有href属性，那么该元素表示一个占位符，可在其中放置一个链接，只要它是相关的。”

所以对于基于列表的导航，如果用户在services.html页面上，代码将类似于：

<ul> 
    <li>...</li> 
    <li id="services"><a>Services</a></li> 
    <li id="resources"><a href="resources.html">Resources</a></li> 
    <li id="clients"><a href="clients.html">Clients</a></li> 
</ul>

使用元素作为占位符，这一功能也得到了良好的支持。如果您为导航内容添加了下划线（与菜单中不同），下划线将不会显示，因为它不是一个超链接。您的样式的剩余部分将保持不变。大功告成！

不要害怕在规范中查阅所有全新的HTML5功能。如果觉得这个过度专业的版本的内容太多，Ben Schwarz清除了浏览器供应商部分，仅留下了您和我需要知道的信息：HTML5空间的一个额外的刻度版本！

编码愉快……

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights

此作品依据Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License授权。与本作品中包含的代码示例相关、超出本许可范围的权限可在Adobe上找到。

查看原文：Understanding HTML5 semantics – Part 2: Document structure and global attributes

本文所属的特别专题为 RIA

浏览更多 RIA 相关内容在： http://www.infoq.com/ria

该专题中的其他最新内容

没有回复

关注此讨论回复

现有用户：

InfoQ

InfoQ

现有用户：

新闻

理解HTML5语义 – 第2部分：文档结构和全局属性

文档结构中的变化

文档类型

字符集

样式表和脚本链接

完整文档

全局属性

contenteditable属性

contextmenu属性

data-*属性

role和aria-*属性

draggable和dropzone属性

hidden属性

spellcheck属性

超级骗子—link元素

您可以为任何内容添加超链接，真的。

a元素可以是一个占位符

相关厂商内容

没有回复

深度内容

领导力大挑战

论道WP（三）：应用程序栏

Java SE1.6中的Synchronized

开源编辑器实现之UEditor分享

GUI应用的若干问题和模式

MongoDB、Java及ORM

基于模式的架构评审

案例分析：基于消息的分布式架构

现有用户：

新用户：

现有用户：

新用户：

新闻

文档结构中的变化

文档类型

字符集

样式表和脚本链接

完整文档

全局属性

contenteditable属性

contextmenu属性

data-*属性

role和aria-*属性

draggable和dropzone属性

hidden属性

spellcheck属性

超级骗子—link元素

您可以为任何内容添加超链接，真的。

a元素可以是一个占位符

相关厂商内容

没有回复

深度内容