• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > 使用语义化标签去写你的HTML 兼容IE6,7,8

使用语义化标签去写你的HTML 兼容IE6,7,8

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含标签,HTML,IE6,7,8等相关知识,佚名 希望在学习及工作中可以帮助到您

HTML5增加了更多语义化的标签,如header,footer,nav……让我们在页面编写的时候,不需要再用下面这种方法去布局了:

  1. <div class="header">这是头部</div>  
  2. <div class="content">这是中间内容区</div>  
  3. <div class="footer">这是底部</div>    

而可以用这样的方式去布局:

  1. <header>这是头部</header>  
  2. <content>这是中间内容区</content>  
  3. <footer>这是底部</footer>    

但是IE不向前支持,所以我们想让它支持IE6,7,8需要在js和css里增加一点小代码,如下:

  1. document.createElement("header");   
  2. document.createElement("content");   
  3. document.createElement("footer");    

css:

header,content,footer{display:block}

以上的意思就是自定义一个标签为header并将其设为块状显示,下面附上完整代码吧:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>用语义化标签去写你的HTML,兼容IE6,7,8</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. header,content,footer{display:block}   
  9. header{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}   
  10. content{width:600px;height:250px;line-height:250px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}   
  11. footer{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}   
  12. </style>  
  13. <script type="text/javascript">  
  14. document.createElement("header");   
  15. document.createElement("content");   
  16. document.createElement("footer");   
  17. </script>  
  18. </head>  
  19.     
  20. <body>  
  21. <header>这是头部</header>  
  22. <content>这是中间内容区</content>  
  23. <footer>这是底部</footer>  
  24. </body>  
  25. </html>  

接着说些无关的吧,为什么要语义化去写html呢?

首先,代码易于阅读,当别人看你代码的时候,一眼就能明白;其次,有利于SEO,搜索引擎的爬虫很大程度上会忽略用于表现的标记,而只注重语义标记。

所以,赶快开始用语义化标签去写你的HTML吧,何况这也不难,对吧?

附1:

以上这篇使用语义化标签去写你的HTML 兼容IE6,7,8就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持微课江湖。

原文地址:http://www.cnblogs.com/shouce/p/5385701.html

您可能想查找下面的文章:

  • 控制input标签只能输入数字
  • 细数html中的列表标签
  • html中常用的标签总结(必看)
  • 深入浅出meta标签
  • 标签栏的几种实现方法(推荐)
  • HTML中相似的标签和属性的区别详解
  • HTML基础重点_一般标签、常用标签和表格
  • 浅谈html标签的显示模式(块级标签,行内标签,行内块标签)
  • 使用语义化标签去写你的HTML 兼容IE6,7,8
  • XHTML中的常用标签整理

相关文章

  • 2017-08-05这样去写你的 HTML 让你的代码更好的兼容性
  • 2017-08-05PHP-HTMLhtml重要知识点笔记(必看)
  • 2017-08-05HTML弹出透明层事例大小可以设置也可以比例化
  • 2017-08-05使用vertical-align实现input和img对齐
  • 2017-08-05body的属性 body标签主要的属性小结
  • 2017-08-05知名浏览器对DOCTYPE模式的选择机制
  • 2017-08-05表单元素属性readonly和disabled使用对比
  • 2017-08-05WML 标签汇总
  • 2017-08-05Html,sHtml,XHtml区别分析小结
  • 2017-08-05纯HTML标签你熟悉多少?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML网页的浏览器标题栏显示小图标的方法
    • html表单上传文件的“浏览”按钮修改方法
    • form上传文件后提示保存action的原因及解决方法
    • Html中value和name属性的作用及其使用介绍
    • 用Meta标签代码让360双核浏览器默认极速模式不是兼容模式
    • 详解HTML的style标签以及相关的CSS引用
    • 10个未被充分利用或被误解的HTML标签
    • 表格边框/单元格之间分隔线的隐藏实现方法
    • HTML 中的 dl(dt,dd)、ul(li)、ol(li) 使用方法
    • W3C教程(2):W3C 程序

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有