频道栏目
首页 > 资讯 > HTML 参考手册 > 正文

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

16-05-18        来源:[db:作者]  
收藏   我要投稿
下面小编就为大家带来一篇使用语义化标签去写你的HTML 兼容IE6,7,8。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧!
 
 

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

XML/HTML Code复制内容到剪贴板
  1. <div class="header">这是头部div>  
  2. <div class="content">这是中间内容区div>  
  3. <div class="footer">这是底部div>    

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

XML/HTML Code复制内容到剪贴板
  1. <header>这是头部header>  
  2. <content>这是中间内容区content>  
  3. <footer>这是底部footer>    

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

XML/HTML Code复制内容到剪贴板
  1. document.createElement("header");   
  2. document.createElement("content");   
  3. document.createElement("footer");    

css:

header,content,footer{display:block}

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

 

1.  
2.
3.4.5.6. 13.<script type="text/javascript"> 14.document.createElement("header"); 15.document.createElement("content"); 16.document.createElement("footer"); 17.</script>18.19. 20.21.
这是头部
22.这是中间内容区 23.
这是底部
24.25.

 

 

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

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

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

附1:

 

相关TAG标签
上一篇:【HTML5】Canvas绘制简单图片教程
下一篇:浅析html input 等值改变添加监听事件
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站