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

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

  本文我将给大家分享html5构建页面的小错误和不好的实践方法,让我们在以后的工作中避免这些错误。

  不要把

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

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

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

01   
02 <div id="wrapper">  
03   <div id="header">  
04     <h1>My super duper pageh1>  
05       
06   div>  
07   <div id="main">  
08       
09   div>  
10   <div id="secondary">  
11       
12   div>  
13   <div id="footer">  
14       
15   div>  
16 div>

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

01   
02 <section id="wrapper">  
03   <header>  
04     <h1>My super duper pageh1>  
05       
06   header>  
07   <section id="main">  
08       
09   section>  
10   <section id="secondary">  
11       
12   section>  
13   <footer>  
14       
15   footer>  
16 section>

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

详细说明:http://html5.662p.com/thread-47-1-1.html

时间: 2024-10-10 07:59:17

盘点 HTML5标签使用的常见误区的相关文章

HTML5标签使用的常见误区----转载

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

【转】HTML5标签使用的常见误区

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

HTML5标签使用的常见误区

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

前端开发中常见的HTML5标签乱用案例

一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用作替代品(用于样式).在XHTML或者HTML4中,我们常看到这样的代码: 12345678910111213141516 <!-- HTML 4-style code --><div id="wrapper">  <div id="header">

蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换

蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换 1.常见标签-块属性的标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/reset.css"> </head> <

HTML5标签学习

<abbr> 表示一个缩写形式,比如 "Inc."."etc.".通过对缩写词语进行标记,您就能够为浏览器.拼写检查程序.翻译系统以及搜索引擎分度器提供有用的信息. <address> <address> 标签定义文档作者或拥有者的联系信息. 如果 <address> 元素位于 <article> 元素内部,则它表示该文章作者或拥有者的联系信息. 通常的做法是将 address 元素添加到网页的头部或底部.

技术干货 | Docker容器中需要避免的十种常见误区

Docker容器的三大优势: 第一:具备恒定特性–操作系统.库版本.配置.文件夹以及应用程序全部涵盖在内.大家可以将质量检查流程中使用的测试镜像原封不动地引入生产环境当中. 第二:具备轻量化特性–容器的体积非常小巧.相较于动辄成百上千MB的操作系统,它只需要配备主进程所必需的内存外加数十MB额外容量. 第三:速度惊人–大家可以享受等同于单一进程的容器启动速度.相较于长达数分钟的传统负载启动时长,现在我们完全能够在几秒钟内启动一套新容器. 不过很多用户仍然在以对待典型虚拟机的方式审视容器,在这种情

html5标签说明

页面结构发生变化 web 1.0 table时代 多层嵌套效率低.seo抓取能力不强 web 2.0 时代 大量的DIV+CSS   典型案例(微博.博客) web3.0时代 html5 减少DIV+CSS 简洁 典型案例(百度) 标签的变化 增加25个标签 结构元素 section元素:表示页面中的一个内容区块:比如章节.页眉.页脚或页面中的其他部分.它可以与h1 h2 h3 h4 h5 h6等元素结合起来 article  元素:表示页面中的一块与上下文不相关的独立内容,譬如博客中的一篇文章

玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. html5新增的input类型有:email,url,number,range,date pickers,datalist,telephone,search,color email:提交时会自动验证输入的内容是否满足格式 邮箱 :<input type="email" name=&quo