HTML5语义化实现方式(兼容)
2016-04-12 20:42
302 查看
可能几年之后,这个话题就不会再有人提起了。
我现在还是一个热爱前端,努力找实习的大学生,但不得不说,现在是一个web规则的过度期。
一切都是HTML5的原因。
就像ie6一样,总有一天,它会被大多数人抛弃。而总有一天,html5会被大多数的浏览器使用。
为什么要用html5的语义化标签
最简单也是最有用的一个:语义化加快了搜索引擎的搜索速度。
那么问题来了——ie不兼容怎么办?
并不是,我们要用兼容来解决这个问题。
一种比较“小聪明”的方法:
在nav里面放一个div,这样,我们就可以用nav_div来进行nav的css样式控制,同时也保留了语义话的目的。但是这种方法是一种取巧的方法,他会增加代码量,而且有一种麻烦的感觉,我明明可以用div来解决,还用nav干什么啊?而且这种方法会污染dom树。
好的兼容方法!!!
这样你就可以放心使用nav而不用担心ie系列不会识别出来了,快试试吧!
我现在还是一个热爱前端,努力找实习的大学生,但不得不说,现在是一个web规则的过度期。
一切都是HTML5的原因。
就像ie6一样,总有一天,它会被大多数人抛弃。而总有一天,html5会被大多数的浏览器使用。
为什么要用html5的语义化标签
最简单也是最有用的一个:语义化加快了搜索引擎的搜索速度。
那么问题来了——ie不兼容怎么办?
<header><nav><article>等这些英文大家并不陌生,通常被我们拿来命名一个div的id或class。而html5里,他们变成了一个和div一样的块级元素的存在。ie6,7,8并不会认识他们,这就意味着我们无法利用css来控制他们的样式了。难道要等到ie6,7,8淘汰了才用html5么?
并不是,我们要用兼容来解决这个问题。
一种比较“小聪明”的方法:
<nav class="nav"> <div class="nav_div"> <ul> <li>首页</li> </ul> </div> </nav>
在nav里面放一个div,这样,我们就可以用nav_div来进行nav的css样式控制,同时也保留了语义话的目的。但是这种方法是一种取巧的方法,他会增加代码量,而且有一种麻烦的感觉,我明明可以用div来解决,还用nav干什么啊?而且这种方法会污染dom树。
好的兼容方法!!!
<script> document.createElement('nav'); </script>
这样你就可以放心使用nav而不用担心ie系列不会识别出来了,快试试吧!
引用《HTML5敏捷实践》
相关文章推荐
- Android Manifest 用法
- Android学习笔记(二九):嵌入浏览器
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- HTML5中在客户端验证文件上传的大小
- 回顾 Firefox 历史
- 小白观察:微软释放出其基于 Chromium 的 Edge 浏览器
- html5 web数据存储
- 页面元素查找之Selectors API
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 表格标签table深入了解
- 浏览器 cookie 限制
- WEB标准网页布局中尽量不要使用的HTML标签
- 如何使用jquery easyui创建标签组件
- 玩转浏览器IE7的5个顶级使用技巧
- 字符集导致的浏览器跨站脚本攻击分析
- 更改IE浏览器的图标
- 如何创建ajax对象并兼容多个浏览器
- css ie6 ie7 ff的CSS hack使用技巧