欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

防止容易见到的六种html5错误使用方法

企业模板

基于上述思想,下面才是正确的用HTML5和一些ARIA roles特质的例子(注意,依据你一个人的设计,你也会需要加入p)

1、不要用section代替p

大家在标签用中最容易见到到的错误之一就是随意将HTML5的<section>等价于<p>——具体地说,就是直接用作替代品(用于样式)。在XHTML或者HTML4中,大家常看到如此的代码:

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

而目前在HTML5 中,会是如此:

<!-​​- 请勿复制这类代码!这是不对的!--><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>并非样式

容器

[wrapper]。<section>元素表示的是内容中用来帮构建文档概要的语义部分。它应该包括一个

头部

[heading]。假如你想找一个用作页面容器的元素(就像HTML或者XHTML的风格),那样考虑如Kroc Camen所说,直接把样式写到body元素上吧。假如你仍然需要额外的样式容器,还是继续用p吧。

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

更多的例子和讲解,请参阅有关文章。

假如你还是没办法确定用哪种元素,那样我建议你参考HTML5 sectioning content element flowchart。

2、只在需要的时候用header和hgroup

写无需写的标签当然是毫无意义的。不幸的是,我常常看到<header>和<hgroup>被无意义的滥用。你可以阅读一下关于<header>和<hgroup>元素的两篇文章做一个详细的认知,其中内容容易概要如下:

<header>元素表示的是一组介绍性或者导航性质的辅助文字,常常用作section的头部。 当头部有多层结构时,譬如有子头部,副标题,各种标识文字等,用<hgroup>将h1-h6元素组合起来作为section的头部。

<header>

因为header可以在一个文档中用多次,可能使得如此代码风格遭到欢迎:

<!-​​- 请勿复制这段代码!此处并无需header --><article> <header> <h1>My best blog post</h1> </header> <!-- Article content --></article>

假如你的<header>元素只包括一个头部元素,那样丢弃<header>元素吧。既然<article> 元素已经保证了头部会出目前文档概要中,而<header>又不可以包括多个元素(如上文所概念的),那样为何要写多余的代码。容易点写成如此就好了:

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

<hgroup>的错误用

在headers这个主题上,我也常常看到hgroup的错误用。有时不应该同时用<hgroup>和<header>:

假如只有一个子头部 假如hgroup自己就能工作的非常不错。

第一个问题通常是如此的:

<!-​​- 请勿复制这段代码!此处无需hgroup --><header> <hgroup> <h1>My best blog post</h1> </hgroup> <p>by Rich Clark</p></header>

此例中,直接拿掉hgroup,让heading 裸奔吧。

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

第二个问题是另一个非必须的例子:

<!-​​- 请勿复制这段代码!此处无需header --><header> <hgroup> <h1>My company</h1> <h2>Established 1893</h2> </hgroup></header>

假如<header>唯一的子元素是<hgroup>,那还要<header>干神马?假如<header>中没其他的元素(譬如多个<hgroup>),还是直接拿掉<header>吧。

<hgroup> <h1>My company</h1> <h2>Established 1893</h2></hgroup>

关于

3、不要把所有列表式的链接放在nav里

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.

伴随HTML5引入了30个新元素(截止到原文发布时),大家在架构语义化和结构化的标签时的选择也变得有的不慎重。也就是说,大家不应该滥用超语义化的元素。不幸的是,nav就是如此一个被滥用的例子。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.

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

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).

WHATWG HTML spec

注意:不是所有页面上的链接都需要放在nav元素中——这个元素本意是用作主要的导航区块。举个具体的例子,在footer中常常会有海量的链接,譬如服务条约,主页,版权声明页等等。footer元素自己已经足以应对这类状况,虽然nav元素也可以用在这里,但一般大家觉得是非必须的。

规范中将<figure>描述为“一些流动的内容,有时会有包括于自己的标题说明。通常在文档流中会作为独立的单元引用。”这正是figure的美妙之处——它可以从主内容页移动到sidebar中,而不影响文档流。这类问题也包括在之首要条件到的HTML5 element flowchart中。

重要的词汇是“主要的”导航。当然大家可以互相喷上一整天什么叫做“主要的”。而我是如此概念的:

主要的导航(Primary navigation) 站内搜索(Site search) 二级导航(略有争议)(Secondary navigation (arguably)) 页面内导航(譬如非常长的文章)(In-page navigation (within a long article, for example))

既然并没绝对的对错,所以依据一个非正式投票与我一个人的讲解,以下的状况,不管你放不放,我反正不放在<nav>中:

分页控制(Pagination controls) 社交链接(虽然有的社交链接也是主要导航,譬如“关于”“珍藏”)(Social links (although there may be exceptions where social links are the major navigation, in sites like About me or Flavours, for example)) 博客文章的标签(Tags on a blog post) 一篇博客中的博客分类(Categories on a blog post) 三级导航(Tertiary navigation) 过长的footer(Fat footers)

假如你不确定是不是要将一系列的链接放在<nav>中,问你一个人:“它是主要的导航吗?”为了帮你回答这个问题,考虑以下最重要原则:

假如用<section>和<hx>也同样适合,那样不要用<nav> —Hixie on IRC 为了便捷访问,你会在某个“快捷跳转”中给这个<nav>标签加一个链接吗?

假如这类问题的答案是“不”,那就跟<nav>鞠个躬,然后一个人离开吧。

4、figure元素的常见问题

<figure>与<figcaption>的正确用,确实是难以驾驭。让大家来看看一些容易见到的错误。

不是所有些图片都是<figure>上文中

我曾告诉各位不要写非必须的代码。这个错误也是同样的道理。我看到不少网站把所有些图片都写作figure。看在图片的份上请勿给它加额外的标签了。你只不过叫你自己蛋疼,而并不可以使你的页面内容更明确。

不要把figure局限于图片。web标准的职责是精确的用标签描述内容。

假如纯粹只不过为了呈现的图,也不在文档其他地方引用,那就绝对不是

。其他视状况而定,但刚开始可以问自己:“这个图片是不是需要和上下文有关?”假如不是,那可能更不是
(或许是个)。继续:“我可以把它移动到附录中吗?”假如两个问题都符合,则它可能是<figure>。

Logo并非figure

进一步的说,logo也不适用于figure。下面是我容易见到的一些代码片段:

<!-​​- 请勿复制这段代码!这是错的--><header> <h1> <figure> <img src="/img/mylogo.png" alt="My company" class="hide" /> </figure> My company name </h1></header><!-​​- 请勿复制这段代码!这也是错的--><header> <figure> <img src="/img/mylogo.png" alt="My company" /> </figure></header>

没什么好说的了。这就是非常一般的错误。大家可以为logo 是不是应该是H1 标签而互相喷到牛都放完回家了,但这里不是大家讨论的焦点。真的的问题在于figure 元素的滥用。figure 只应该被引用在文档中,或者被section 元素围绕。我想你的logo 并不太可能以如此的方法引用吧。非常简单,请不要用figure。你仅需如此做:

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

figure也不只只不过图片

另一个容易见到的关于figure的误解是它只被图片用。figure可以是视频,音频,图表,一段引用文字,表格,一段代码,一段散文,与任何它们或者其他的组合。

5、不要用非必须的type属性

这是个容易见到的问题,但并非一个错误,我觉得大家应该通过最好实践来防止这种风格。在HTML5中,script和style元素不再需要type属性。然而这类非常或许会被你的CMS自动加上,所以要移除更不是那样的轻松。但假如你是手工编码或者你完全可以控制你的模板的话,那真的没什么理由再去包括type属性。所有些浏览器都觉得脚本是javascript而样式是css样式,你不必再画蛇添足了。

<!-​​- 请勿复制这段代码!它太沉余了! --><link type="text/css" rel="stylesheet" href="css/styles.css" /><script type="text/javascript" src="js/scripts" /></script>

其实仅需如此写:

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

甚至指定字符集的代码都可以省略掉 ​​。Mark Pilgrim在Dive into HTML5的语义化一章中作出知道释。

6、form属性的错误用

HTML5引入了一些form的新属性,以下是一些用上的需要注意的地方:

布尔属性

一些多媒体元素和其他元素也具备布尔属性。这里所说的规则也同样适用。有一些新的form属性是布尔型的,意味着它们只须出目前标签中,就保证了相应的行为已经设置。这类属性包含:

‧autofocus autocomplete ‧required

坦白的说,我极少看到如此的。以required为例,容易见到的是下面这种:

<!-​​- 请勿复制这段代码! 这是错的! --><input type="email" name="email" required="true" /><!-​​- 另一个错误的例子--><input type="email" name="email" required="1" />

严格来讲,这并没大碍。浏览器的HTML 分析器只须看到required 属性出目前标签中,那样它的功能就会被应用。但假如你反过来写equired=”false”呢?

<!-​​- 请勿复制这段代码! 这是错的! --><input type="email" name="email" required="false" />

析器仍然会将required属性视为有效并实行相应的行为,尽管你试着告诉它不要去实行了。这显然不是你想要的。有三种有效的方法去用布尔属性。(后两种只在xthml中有效)

requiredrequired=""required="required"

上述例子的正确写法应该是:

<input type="email" name="email" required />


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.nsxcb.cn 关注: 时间:2022-04-11 18:02
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/HTML/HTML5/20220411/13718.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧