HTML 5.1和主要元素

最新推荐文章于 2021-11-24 14:09:15 发布

cungui5726

最新推荐文章于 2021-11-24 14:09:15 发布

阅读量149

点赞数

文章标签： java js css javascript html ViewUI

原文链接：https://thenewcode.com/648/HTML-51-and-the-main-element

版权

While programmers concentrate on supporting the technological panoply of HTML5, various working groups have moved on to HTML 5.1. That new specification, currently scheduled for publication in 2016, incorporates many efforts that did not make the deadline for 5.0, including Web Workers, Storage, Sockets, improved accessibility, and adaptive development.

当程序员专注于支持HTML5的技术全景时，各种工作组已转向HTML 5.1。该新规范目前计划于2016年发布，其中包含了许多未能在5.0之前完成的工作，包括Web Workers，存储，套接字，改进的可访问性和自适应开发。

为什么我们需要另一个元素？ (Why do we need another element?)

The new <main> element squeaked just over the line to make it into HTML5, largely at the insistance of developers, who felt it to be the last important element missing from the specification: after all, we had <header>, <footer>, <aside> and <nav> (based, at least in part, on established web development practices). The concept of <main> has long been in web pages as an attribute of ARIA landmark roles:

新的<main>元素仅在开发人员的坚持下才刚好插入到HTML5中，他们认为这是规范中缺少的最后一个重要元素：毕竟，我们有<header> ， <footer> ， <aside>和<nav> (至少部分基于已建立的Web开发实践)。 <main>的概念作为ARIA标志性角色的一个属性早已出现在网页中：

<div role="main">
	<!-- the _traditional_ role of main, now superseded by the <main> element -->
</div>

That's now replaced by:

现在已替换为：

<main role="main">
	<!-- the  same content -->
</main>

ARIA landmarks allow users with accessibility needs to skip quickly between the important sections of a page: role="navigation" demarks the central navigation of a site, for example. role="navigation" has its equivalent in the HTML5 <nav> element, and <main> fulfills the same need: it contains the main content of the page. Eventually, I’d expect the tag to be used by search engines to narrow their focus on content to be indexed.

ARIA地标允许具有可访问性的用户在页面的重要部分之间快速跳过：例如， role="navigation"标记站点的中央导航。 role="navigation"在HTML5 <nav>元素中具有等效功能，而<main>满足相同的需求：它包含页面的主要内容。最终，我希望搜索引擎可以使用该标签来缩小对要索引内容的关注。

<main> has excellent support across all browsers, with the support of IE, which does not recognize the element, even in IE 11. However, there are ways around this, as I'll show below.

<main>在所有浏览器中都具有出色的支持，并得到IE的支持，即使在IE 11中，IE也无法识别该元素。但是，有很多解决方法，如下所示。

使用主要 (Using main)

Not surprisingly, <main> is intended to contain the central content of a web page: as such, there can be only one <main> tag per page. Most importantly, <main> cannot be a child element of <header>, <footer>, <article>, <aside> or <nav>. The tag should employ an ARIA role of <main> for long-term compatibility with accessibility devices.

毫不奇怪， <main>旨在包含网页的中心内容：这样，每个页面只能有一个<main>标记。最重要的是， <main>不能是<header> ， <footer> ， <article> ， <aside>或<nav>的子元素 。该标签应采用<main>的ARIA角色，以与可访问性设备长期兼容。

Given those strictures, a typical use of <main> is shown in the following example:

考虑到这些限制，以下示例显示了<main>的典型用法：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Big Honkin’ Trucking Company</title>
	</head>
	<body>
		<header role="banner">
			<h1>Big Honkin’ Trucking Company</h1>
			<nav role="navigation">
				<a href="#">Rigs</a>
				<a href="#">Routes</a>
				<a href="#">Reefers</a>
			</nav>
		</header>
		<main role="main">
			<p>Our trucks are at your service 24/7. 366 days of the year, 
			specializing in long-haul freight and dangerous cargo.
			<p>Yeah, breaker one-nine, this here's the Rubber Duck, 
			you got a copy on me Pigpen? C'mon.
			<p>Ah yeah, ten-four Pigpen, for sure, for sure. By golly it's 
			clean clear to Flagtown. C'mon.
			<p>Yeah, that's a big ten-four there Pigpen. Yeah, we 
			definitely got the front door good buddy. Mercy sakes alive, 
			looks like we got us a convoy.
		</main>
		<aside role="complementary">
			<h1>Tweets From The Road</h1>
		</aside>
		<small>Copyright &copy; 2013 Big Honkin’ Trucking Company</small>
	</body>
</html>

Note that there’s still a place for the humble <div> element as a wrapper around the <section>, <main> and <aside> elements. <main> does not contribute to the sectioning of an HTML5 document.

请注意， <div>元素仍然可以作为<section> ， <main>和<aside>元素的包装。 <main>对HTML5文档的分段没有帮助。

开发人员资源 (Developer Resources)

Right now the easiest way to enforce browser awareness of <main> is to employ the most recent version of HTML5shiv in your site code, which just incorporated the element. Otherwise, you could use a little basic JavaScript:

现在，增强浏览器对<main>意识的最简单方法是在您的站点代码中使用HTML5shiv的最新版本，该版本刚刚合并了该元素。否则，您可以使用一些基本的JavaScript ：

document.createElement('main');

If writing support by hand, you will also need to create a basic display value in CSS: <main> would normally be displayed as a block tag on a page, but browsers don’t know that yet, and will default to presenting the tag inline unless you explicitly state otherwise:

如果手动编写支持，则还需要在CSS中创建一个基本的display值： <main>通常会在页面上显示为一个block标记，但是浏览器尚不知道，默认情况下会显示该标记inline除非您明确声明：