全国免费咨询热线:

400-611-9921

 
小心Html5的写法误用

2014-12-10

1898

人们在标签使用中最常见到的错误之一就是随意将HTML5的等价于——具体地说,就是直接用作替代品(用于样式)。在XHTML或者HTML4中,我们常看到这样的代码 HTML 4-style code...
人们在标签使用中最常见到的错误之一就是随意将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>并不是样式容器。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>

关键词:广州品牌网站建设公司, 广州网站制作公司, 广州网站建设, 广州网站设计, 网站建设, 手机网站开发
热门标签
点击展开
关于纵天
广州市纵天信息科技有限公司成立于2008年,是中国领先的整合式互联网应用服务商。12年专业历程,坚持以科技创新为先导的网络服务,服务超过8000+知名品牌与创新客户,涉及网站设计、APP应用开发、微信开发、平面设计、视频拍摄、互联网整合营销等多个领域。
微信咨询
官方微信
联系方式

地址1:广州市天河区珠江新城邦华环球广场16F

地址2:杭州市滨江区滨安路1190号智汇中心B308

业务 QQ: 3561401262

E-mail: sales@zomsky.com




咨询
电话
微信
官方微信
TOP

立即与纵天项目顾问通话

400-611-9921

您也可以咨询我们的在线客服或预约资深顾问

信息保护中,请放心填写
关闭
免费获取方案