• 盘点 HTML5标签使用的常见误区
    时间:2011-12-20   作者:佚名   出处:互联网

    最近组内进行HTML5标签的学习,方法呢就是大家每人挑选几个标签,自己先去学习,然后给大家作讲解.这个过程大家还是挺有收获的.但是现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.下面是我在 html5doctor 上面看到的一篇文章,在目前大家懵懂的阶段,可能看看大师的讲解会更容易理解。由于才疏学浅,很多不明白的地方可能只是做了字面上的翻译,不对的地方还请大家多多指教。

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

    不要把<Section>当成简单的容器来定义样式

    我们经常看到的一个错误,就是武断的将<div>标签用<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>
    现在我看到了下面的代码样子:

     <!– Don’t copy this code! It’s wrong! –>
     <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 ),通常的做法是直接对<body>标签定义样式就像Kroc Camen描述的那样子,如果你还需要额外的元素来定义样式,使用<div>,就像Dr Mike 阐述的那样, div并没有灭亡,如果这里没有其它更合适的,div可能是你最合适的选择。记住这点,这里我们重新修正了上面的例子,通过使用两个新角色。(你是否需要额外的<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 sectioning content element flowchart来让你继续前行。

    网友留言/评论

    我要留言/评论

    相关文章

    使用Jquery解析JSON数据的方法介绍:用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明。 这里首先给出JSON字符串集,
    在线检查网页浏览器的兼容性:BrowserShots.org 是一个很不错的在线服务,它主要帮助你检查一下你所设计网站是否兼容所有的浏览器。其目前支持四个操作系统:Linux, Windows, MacOS和BSD。浏览器支持的就多了:包括MSIE,Firefox,Chrome,Safari,Opera,Dillo,SeaMonkey,Navigator等等浏览器的不同版本。
    Web开发中需要了解的东西:在StackExchange上有人问了这样一个问题:What should every programmer know about web development?(关于Web开发,什么是所有程序员需要知道的?)里面给出的答案非常不错,所以,我翻译转载过来。 顺便说一下,StackExchange真是非常好,大家可以对同一个答案做贡献和修订,看看这个问题的修订过程你就知道了——专业的问答网站应该怎么去做。这就是我在这篇文章中也说过真正的用户体验是什么样的。
    关于Android应用开发优化的十条建议:随着移动平台的发展和其应用的不断改善,质量成为决定成败的关键。用户要求他们选择安装的应用响应快、性能好,如果某个应用不能提供卓越的功能和稳定的用户体验,那这样的应用注定会被很快卸载。
    关于Wordpress搜索引擎优化的一些技巧分享:很多人都喜欢把什么都往博客里面扔,汽车,电影,音乐,等等等。当然,这样的做法并没有错。但是,搜索引擎是很笨的,你的主题太多太杂,搜索引擎就不知道你的博客是关于什么的。同时,读者对这种形式也会感到疑惑。
    在Android手机上快速制作指南针:本文介绍一下用Rexsee制作的指南针,方便简单,纯页面实现哦,具体内容如下。
    对于PKI(公钥基础结构)及证书服务的理解:对于PKI及证书服务的这些概念,相信初学者会有许多迷惑的地方,那是因为其中的某些关键概念没有理解清楚,我力争以通俗易懂的方式给初学者一些启示。
    数据分析之 - DAU,MAU,及DAU/MAU专业名词解释:最近看到FaceBook上的social game分析报表,发现一些未知专业名词,比如DAU(或者dau)以及MAU(mau)这两个缩写是什么?其含义代表什么呢?分析这两个指数对我们又有什么帮助呢?
    Twitter Api文档 - 中文翻译:Twitter最近甚火,风靡全球,就连奥巴马竞选都派上了用场,可见其威力之巨大,现把twitter api文档翻译为中文,供各位爱好者使用!