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

阅读数:12308 2011 年 12 月 22 日

话题:语言 & 开发

目录

在我之前编写的有关 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-* 属性

如果希望使网站可供具有各种不同的浏览习惯和身体缺陷的用户访问,您将会发现rolearia-*属性。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