返回上一页
客服QQ
客服QQ
一切从沟通开始……
盘点HTML5标签使用的常见误区
作者：睿美印象网站建设工作室 发布日期：2012-11-03
现在HTML5还处在草案阶段,有些新的标签元素的解释也是经常有变化,甚至标签加入 移出也很频繁(比如 hgroup),同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考,让大家的学习过程更摸索.本文将给大家分享html5构建页面的小错误和不好的实践方法，让我们在以后的工作中避免这些错误。
不要把<Section>当成简单的容器来定义样式
我们经常看到的一个错误，就是武断的将<div>标签用<Section>标签来替代，特别是将作为包围容器的<div>用来替换。在XHTML或者HTML4中，我们将会看到类似下面的代码：
XML/HTML Code复制内容到剪贴板
<!– 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>
现在我看到了下面的代码样子：
XML/HTML Code复制内容到剪贴板
<!– 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>取决于你的设计。)
XML/HTML Code复制内容到剪贴板
<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>
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
不要把<Section>当成简单的容器来定义样式
我们经常看到的一个错误，就是武断的将<div>标签用<Section>标签来替代，特别是将作为包围容器的<div>用来替换。在XHTML或者HTML4中，我们将会看到类似下面的代码：
XML/HTML Code复制内容到剪贴板
<!– 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>
现在我看到了下面的代码样子：
XML/HTML Code复制内容到剪贴板
<!– 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>取决于你的设计。)
XML/HTML Code复制内容到剪贴板
<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>
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
已有 0 条评论
暂无评论
- 14、【视频】相对定位和绝对定位
- 想浏览器支持HTML5吗？一简单JS搞定
- 《精通HTML5编程》第三章：介绍Audio和Video标签
- Windows Internet Explorer 10 开发者指南
- HTML5和CSS3工具资源汇总
- 第八天 下拉及多级弹出菜单
- 5个常遇到的css hack 及解决办法
- HTML5基础教程系列：第2部分，组织页面的输入
- 3、【视频】如何清除列表前的圆点
- 更简洁的 CSS 清理浮动方式
- 如何使用HTML5实现拍照上传应用
- 世界上最短的时钟代码！更短的，有木有？
- 两种方法实现超出省略号效果
- HTML5、CSS3应用教程之 跟DIV说Bey!Bey!
- HTML5基础教程系列：第1部分，初试锋芒
- 利用HTML5 Canvas做在线图像处理
版权所有：睿美印象网络网站建设工作室 2010-2012 服务热线：15636322282（网站建设工作室）
