前端:常见的6种HTML5错误用法

  • 时间:
  • 浏览:3

过长的footer 

或者 你不选则是是不是要将一系列的链接倒入nav中,别问我当事人:“它是主要的导航吗?”为了帮助你回答这俩 问题图片,考虑以下首要原则:

基于上述思想,下面才是正确的使用HTML5和这俩 ARIA roles社会形态的例子(注意,根据你当事人的设计,你也或者 都要加入div)

figure以及figcaption的正确使用,随便说说是难以驾驭。让当当让当我们来看看这俩 常见的错误, 

删剪总要所有的图片删剪总要figure 

上文中,我曾告诉各位不要 再写不要 再要的代码。这俩 错误也是同样的道理。我看得人统统有网站把所有的图片都写作figure。看在图片的份上请不要 再给它加额外的标签了。你刚刚让我当事人蛋疼,而不要 再能使你的页面内容更清晰。 

规范中将figure描述为“这俩 流动的内容,有刚刚会有含高于自身的标题说明。一般在文档流中会作为独立的单元引用。”这正是figure的美妙之处——它能否从主内容页移动到sidebar中,而不影响文档流。 

哪此问题图片也含高在刚刚提到的HTML5 element flowchart中。 

或者 纯粹刚刚为了呈现的图,刚刚在文档这俩 地方引用,那就绝对删剪总要

进一步的说,logo刚刚适用于figure。下面是我常见的这俩 代码片段:

严格来说,这并越来越 大碍。浏览器的HTML解析器假若看得人required属性出现在标签中,越来越 它的功能就会被应用。或者 或者 你反过来写equired=”false”呢?

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

这是个常见的问题图片,但并删剪总要有俩个错误,我认为当当让当我们应该通过最佳实践来出理 这俩 风格。 

在HTML5中,script和style元素不再都要type属性。然而哪此很或者 会被你的CMS自动加上,统统有要移除也删剪总要越来越 的轻松。但或者 你是手工编码或者 你删剪能否控制你的模板句子,那真的越来越 哪此理由再去含高type属性。所有的浏览器都认为脚本是javascript而样式是css样式,你没必要再多此一举了。

坦白的说,我很少看得人从前的。以required为例,常见的是下面这俩 :

或者 你的header元素只包含高俩个头部元素,越来越 丢弃header元素吧。既然article元素或者 保证了头部会出现在文档概要中,而header又也能否含高多个元素(如上文所定义的),越来越 为哪此要写多余的代码。简单点写成从前就行了:

解析器仍然会将required属性视为有效并执行相应的行为,尽管你试着告诉它不要 再去执行了。这显然删剪是你你会的。 

有这俩 有效的土方式去使用布尔属性。(后这俩 只在xthml含高效)

关于

在headers这俩 主题上,我也经常看得人hgroup的错误使用。有刚刚不应该并肩使用hgroup和header:

HTML5引入了这俩 form的新属性,以下是这俩 使用上的注意事项: 

布尔属性 

这俩 多媒体元素和这俩 元素也具有布尔属性。这里所说的规则也同样适用。 

有这俩 新的form属性是布尔型的,愿因 它们假若出现在标签中,就保证了相应的行为或者 设置。哪此属性包括:

第俩个问题图片是从前不要 再要的例子: 

请不要 再克隆技术这段代码!此处不都要header –>

或者 header能否在有俩个文档中使用多次,或者 使得从前代码风格受到欢迎: 

请不要 再克隆技术这段代码!此处不要 再都要header –>

从前使用不要 再正确:**

或者 你想学习前端,能否来这俩 群,首先是291,中间是851,最后是189,中间能否学习和交流,删剪总要资料能否下载。

四、figure元素的常见错误

一、不要 再使用section作为div的替代品 

当当让当我们在标签使用中最常见到的错误之一刚刚随意将HTML5的<section>等价于<div>——具体地说,刚刚直接用作替代品(用于样式)。在XHTML或者 HTML4中,当当让当我们常看得人从前的代码:

的错误使用 

或者 你还是无法选则使用哪种元素,越来越 我建议你参考HTML5 sectioning content element flowchart 

而现在在HTML5中,会是从前: 

请不要 再克隆技术哪此代码!这是错误的!



二、只在都要的刚刚使用header和hgroup 

写不都要写的标签当然是毫无意义的。不幸的是,我经常看得人header和hgroup被无意义的滥用。让我阅读一下关于header和hgroup元素的两篇文章做有俩个删剪的了解,其中内容我简单总结如下:

没哪此好说的了。这刚刚很普通的错误。当当让当我们能否为logo是是不是应该是H1标签而互相喷到牛都放完回家了,但这里删剪是当当让当我们讨论的焦点。真正的问题图片在于figure元素的滥用。figure只应该被引用在文档中,或者 被section元素围绕。我要你的logo不要 再太或者 以从前的土方式引用吧。很简单,请勿使用figure。你只都要从前做:

从前常见的关于figure的误解是它只被图片使用。figure能是是不是视频,音频,图表,一段引用文字,表格,一段代码,一段散文,以及任何它们或者 这俩 的组合。不要 再把figure局限于图片。web标准的职责是精确的用标签描述内容。

或者 header唯一的子元素是hgroup,那都要header干神马?或者 header中越来越 这俩 的元素(比如多个hgroup),还是直接拿掉header吧。(web前端学习交流群:291851189 禁止闲聊,非喜勿进!)

Figure刚刚仅仅刚刚图片

Logo并删剪总要figure 

甚至指定字符集的代码能否省略掉。Mark Pilgrim在Dive into HTML5的语义化一章中作出了解释。

更多的例子和解释,请参阅相关文章

并删剪总要样式容器。**section元素表示的是内容中用来帮助构建文档概要的语义每项。它应该包含高俩个头部。或者 你想找有俩个用作页面容器的元素(就像HTML或者 XHTML的风格),越来越 考虑如Kroc Camen所说,直接把样式写到body元素上吧。或者 你仍然都要额外的样式容器,还是继续使用div吧。 

五、不要 再使用不要 再要的type属性

六、form属性的错误使用

。这俩 视情况而定,但一刚刚结束 能否问当事人:“这俩 图片是是不是都要和上下文有关?”或者 删剪总要,那或者 也删剪总要(你说是个)。继续:“我要把它移动到附录中吗?”或者 有俩个问题图片都符合,则它或者 是。 

或者 使用section和hx也同样离米 ,越来越 不要 再用nav — Hixie on IRC 

为了方便访问,让我在某个“快捷跳转”中给这俩 nav标签加有俩个链接吗?

三、不要 再把所有列表式的链接倒入nav里

随便说说只都要从前写:

随着HTML5引入了100个新元素(截止到原文发布时),当当让当我们在构造语义化和社会形态化的标签时的选则也变得这俩 不慎重。也刚刚说,当当让当我们在应该滥用超语义化的元素。不幸的是,nav刚刚从前有俩个被滥用的例子。nav元素的规范描述如下: 

nav元素表示页面中链接到这俩 页面或者 本页面这俩 每项的区块;含高导航连接的区块。 

注意:删剪总要所有页面上的链接都都要倒入nav元素中——这俩 元素本意是用作主要的导航区块。举个具体的例子,在footer中经常会有众多的链接,比如服 务条款,主页,版权声明页等等。footer元素自身或者 足以应付哪此情况,随便说说nav元素也能否用在这里,但通常当当让当我们认为是不要 再要的。 

关键的词语是“主要的”导航。当然当当让当我们能否互相喷上一整天哪此叫做“主要的”。而我当事人是从前定义的:

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