怎样防止普遍的6种HTML5不正确用法

2021-02-23 15:22 jianzhan

1、不必应用section做为div的取代品

人们在标识应用中最多见到的不正确之1便是随便将HTML5的<section>等额的于<div>——实际地说,便是立即用作取代品(用于款式)。在XHTML或HTML4中,大家常看到这样的编码:

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

而如今在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元素表明的是內容选用来协助搭建文本文档概述的词义一部分。它应当包括1个头顶部。假如你想找1个用作网页页面器皿的元素(就像HTML或XHTML的设计风格),那末考虑到如Kroc Camen所说,立即把款式写到body元素上吧。假如你依然必须附加的款式器皿,還是再次应用div吧。

根据上述观念,下面才是正确的应用HTML5和1些ARIA roles特点的事例(留意,依据你自身的设计方案,你也将会必须添加div)

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

2、只在必须的情况下应用header和hgroup

写不必须写的标识自然是没什么实际意义的。悲剧的是,我常常看到header和hgroup被不经意义的乱用。你能够阅读文章1下有关header和hgroup元素的两篇文章内容做1个详尽的掌握,在其中內容我简易总结以下:

  • header元素表明的是1组详细介绍性或导航栏特性的輔助文本,常常用作section的头顶部
  • 当头顶部有多层构造时,例如有子头顶部,副题目,各种各样标志文本等,应用hgroup将h1-h6元素组成起来做为section的头顶部
  • header的乱用

因为header能够在1个文本文档中应用数次,将会使得这样编码设计风格遭受欢迎:
请不必拷贝这段编码!此处其实不必须header –>

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

假如你的header元素只包括1个头顶部元素,那末抛弃header元素吧。既然article元素早已确保了头顶部会出現在文本文档概述中,而header又不可以包括好几个元素(如上文所界定的),那末为何要写过剩的编码。简易点写成这样就可以了:

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

的不正确应用

在headers这个主题上,我也常常看到hgroup的不正确应用。有时不可该另外应用hgroup和header:

  • 假如仅有1个子头顶部
  • 假如hgroup自身就可以工作中的很好。。。这不空话么

第1个难题1般是这样的:

请不必拷贝这段编码!此处不必须hgroup –>
    <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>

第2个难题是另外一个无须要的事例:

请不必拷贝这段编码!此处不必须header –>

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

假如header唯1的子元素是hgroup,那还要header干神马?假如header中沒有别的的元素(例如好几个hgroup),還是立即拿掉header吧。

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

3、不必把全部目录式的连接放在nav里

伴随着HTML5引进了30个新元素(截止到原文公布时),大家在结构词义化和构造化的标识时的挑选也变得一些不小心重。也便是说,大家不可该乱用超词义化的元素。悲剧的是,nav便是这样1个被乱用的事例。nav元素的标准叙述以下:
nav元素表明网页页面中连接到别的网页页面或本网页页面别的一部分的区块;包括导航栏联接的区块。
 

留意:并不是全部网页页面上的连接都必须放在nav元素中——这个元素原意是用作关键的导航栏区块。举个实际的事例,在footer中常常会有诸多的连接,例如服 务条款,首页,版权申明页这些。footer元素本身早已足以应对这些状况,尽管nav元素还可以用在这里,但一般大家觉得是无须要的。
 

重要的词语是“关键的”导航栏。自然大家能够相互之间喷上1一天到晚什么是做“关键的”。而我本人是这样界定的:

  • 关键的导航栏
  • 站内检索
  • 2级导航栏(略有争议)
  • 网页页面内导航栏(例如很长的文章内容)
  • 既然并沒有肯定的对与错,因此依据1个非宣布网络投票和我自身的解释,下列的状况,无论你放不放,我总之不放在中:
  • 分页查询操纵
  • 社交媒体连接(尽管一些社交媒体连接也是关键导航栏,例如“有关”“个人收藏”)
  • blog文章内容的标识
  • blog文章内容的归类
  • 3级导航栏
  • 太长的footer
  • 假如你不确定性是不是要将1系列的连接放在nav中,问你自身:“它是关键的导航栏吗?”以便协助你回应这个难题,考虑到下列主要标准:
  • 假如应用section和hx也一样适合,那末不必用nav — Hixie on IRC

以便便捷浏览,你会在某个“便捷自动跳转”中给这个nav标识加1个连接吗?

假如这些难题的回答是“不”,那就跟鞠个躬,随后独自离去吧。

4、figure元素的普遍不正确

figure和figcaption的正确应用,的确是无法掌控。让大家看来看1些普遍的不正确,

并不是全部的照片全是figure

上文中,我曾告知各位不必写无须要的编码。这个不正确也是一样的道理。我看到许多网站把全部的照片都创作figure。看在照片的份上请不必给它加附加的标识了。你只是让你自身蛋疼,而其实不能使你的网页页面內容更清楚。
标准中将figure叙述为“1些流动性的內容,有时会有包括于本身的题目表明。1般在文本文档流中会做为单独的模块引入。”这更是figure的美好的地方——它能够从主內容页挪动到sidebar中,而不危害文本文档流。
这些难题也包括在以前提到的HTML5 element flowchart中。

假如纯碎只是以便展现的图,也不在文本文档别的地区引入,那就肯定并不是

。别的视状况而定,但1刚开始能够问自身:“这个照片是不是务必和左右文相关?”假如并不是,那将会也并不是(或许是个)。再次:“我能够把它挪动到附录中吗?”假如两个难题都合乎,则它将会是。
Logo其实不是figure

进1步的说,logo也不可用于figure。下面是我普遍的1些编码片断:

<!-- 请不必拷贝这段编码!这是错的 --><header>
    <h1>
        <figure> ![My company](/img/mylogo.png) </figure>
        My company name </h1></header>
<!-- 请不必拷贝这段编码!这也是错的 --><header>
    <figure> ![My company](/img/mylogo.png) </figure></header>

没甚么好说的了。这便是很一般的不正确。大家能够为logo是不是应当是H1标识而相互之间喷到牛都放完回家了了,但这里并不是大家探讨的聚焦点。真实的难题在于figure元素的乱用。figure只应当被引入在文本文档中,或被section元素紧紧围绕。我想你的logo其实不太将会以这样的方法引入吧。很简易,请勿应用figure。你只必须这样做:

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

Figure也不仅只是照片

另外一个普遍的有关figure的误会是它只被照片应用。figure能够是视頻,声频,图表,1段引入文本,报表,1段编码,1段散文,和任何它们或别的的组成。不必把figure局限于照片。web规范的岗位职责是精准的用标识叙述內容。

5、不必应用无须要的type特性

这是个普遍的难题,但其实不是1个不正确,我觉得大家应当根据最好实践活动来防止这类设计风格。
 

在HTML5中,script和style元素已不必须type特性。但是这些极可能会被你的CMS全自动再加,因此要移除也并不是那末的轻轻松松。但假如你是手工制作编号或你彻底能够操纵你的模版的话,那真的沒有甚么理由再去包括type特性。全部的访问器都觉得脚本制作是javascript而款式是css款式,你没必要再多此1举了。

<!-- 请不必拷贝这段编码!它太冗余了! --><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的词义化1章中作出掌握释。

6、form特性的不正确应用

HTML5引进了1些form的新特性,下列是1些应用上的留意事项:

布尔运算特性

1些多新闻媒体元素和别的元素也具备布尔运算特性。这里所说的标准也一样可用。
有1些新的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特性视作合理并实行相应的个人行为,虽然你试着告知它不必去实行了。这明显并不是你要想的。

有3种合理的方法去应用布尔运算特性。(后两种只在xthml中合理)

  • required
  • required=””
  • required=”required”

上述事例的正确写法应当是:

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

总结

以上所述是网编给大伙儿详细介绍的怎样防止普遍的6种HTML5不正确用法,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!