查看: 41|回复: 0

扣丁学堂浅谈常见的HTML5错误用法有哪些

发表于 2018-7-31 10:39:28

如今的HTML5开发技术已经深入到了我们的生活中,各大公司企业中也有很多专业的HTML5人才,因此加入到HTML5开发行业的人也在不断的增加,本篇文章扣丁学堂HTML5培训小编和大家分享一下常见的HTML5错误用法有哪些,对HTML5开发感兴趣的小伙伴为了避免在今后的工作中遇到问题,就随着小编一起来了解一下吧。


一、不要使用section作为div的替代品:
人们在标签使用中最常见到的错误之一就是随意将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元素表示的是内容中用来帮助构建文档概要的语义部分。它应该包含一个头部。如果你想找一个用作页面容器的元素(就像HTML或者XHTML的风格),那么考虑如Kroc Camen所说,直接把样式写到body元素上吧。如果你仍然需要额外的样式容器,还是继续使用div吧。
基于上述思想,下面才是正确的使用HTML5和一些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>
以上就是扣丁学堂HTML5在线学习小编为大家简单分享的几种常见的HTML5错误用法,后期小编整理出来会陆续发布出来供小伙伴们观看,想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。扣丁学堂不仅有专业的HTML5培训班供学员学习,还有与时俱进的课程体系和大量的HTML5在线视频供学员免费学习。想要学好HTML5开发的小伙伴现在就行动吧。扣丁学堂H5技术交流群:559883758。

文章转载自:扣丁学堂http://www.codingke.com/


回复

使用道具 举报