盘点HTML5标签使用的常见误区

2019-10-25 11:20:23 织梦安装使用
  • 文章介绍

 现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入 移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.本文将给大家分享html5构建页面的小错误和不好的实践方法,让我们在以后的工作中避免这些错误。

不要把

当成简单的容器来定义样式

我们经常看到的一个错误,就是武断的将

标签用
标签来替代,特别是将作为包围容器的
用来替换。在XHTML或者HTML4中,我们将会看到类似下面的代码:

XML/HTML Code复制内容到剪贴板
  1. >  
  2.  <div id=”wrapper”>  
  3.    <div id=”header”>  
  4.      <h1>My super duper pageh1>  
  5.      >  
  6.    div>  
  7.    <div id=”main”>  
  8.      >  
  9.    div>  
  10.    <div id=”secondary”>  
  11.      >  
  12.    div>  
  13.    <div id=”footer”>  
  14.      >  
  15.    div>  
  16.  div>  

现在我看到了下面的代码样子:

XML/HTML Code复制内容到剪贴板
  1. >  
  2.  <section id=”wrapper”>  
  3.    <header>  
  4.      <h1>My super duper pageh1>  
  5.      >  
  6.    header>  
  7.    <section id=”main”>  
  8.      >  
  9.    section>  
  10.    <section id=”secondary”>  
  11.      >  
  12.    section>  
  13.    <footer>  
  14.      >  
  15.    footer>  
  16.  section>  

直观的看,上面的例子是错误的:

并不是一个容器.
元素是有语意的区段,帮助构建文档大 纲。它应该包含标题。如果你要寻找一个可以包含页面的元素(不论是 HTML 或者 XHTML ),通常的做法是直接对标签定义样式就像Kroc Camen描述的那样子,如果你还需要额外的元素来定义样式,使用
,就像Dr Mike 阐述的那样, div并没有灭亡,如果这里没有其它更合适的,div可能是你最合适的选择。记住这点,这里我们重新修正了上面的例子,通过使用两个新角色。(你是否需要额外的
取决于你的设计。)

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.    <header>  
  3.      <h1>My super duper pageh1>  
  4.      >  
  5.    header>  
  6.    <div role=”main”>  
  7.      >  
  8.    div>  
  9.    <aside role=”complementary”>  
  10.      >  
  11.    aside>  
  12.    <footer>  
  13.      >  
  14.    footer>  
  15.  body>  

如果你还是无法确定哪一个元素更适合使用,我建议你去查看HTML5 sectioning content element flowchart来让你继续前行。

上一篇:jQuery Mobile开发HTML5移动应用..

下一篇:HTML5中事件属性简介

专业的织梦模板定制下载站,在线购买后即可下载!

商业源码

跟版网模板,累计帮助5000+客户企业成功建站,为草根创业提供助力!

立刻开启你的建站之旅