语义标签举个例子，语义标签就是标签本身代表了一定的含义HTML4.01div:作为容器存在在网站布局中使用广泛
搜索引擎友好，但是搜索引擎更友好的依旧是内容p标签：段落
img标签：图片
。。。等等语义标签
语义性不强的：
HTML5部分新语义标签HTML5中有部分语义标签，在使用时十分简单，但是由于语义性更强，更利于开发者以及搜索引擎对于网页的理解。语义标签：标签名作用nav表示导航
header表示页眉
footer表示页脚
main文档主要内容
article文章
aside主题内容之外,侧边栏
实际应用如果我们布局如下页面
网页布局.pngHTML4.01中代码:由于篇幅问题，这里只贴出body内代码
- 导航1
- 导航2
- 导航3
HTML5中代码：这里直接使用新学习的语义标签
导航1
导航2
导航3
使用HTML5中新的语义标签,内容更为直观,即使删除了注释,依旧能够看出该标签的作用,语义性更强
说的通俗一些,内容一样,但是代码更少了
H5新语义标签兼容性虽然HTML5为我们提供了很多一些新的语义标签,但老版本的浏览器并这些内容,比如iE 8 及以下版本就不支持新语义标签
低版本IE显示问题测试代码html>
Title
header{ height: 100px; background-color: orangered;
}低版本IE测试方式:如果使用的是高版本的iE,比如ie11其内部能够调节ie的显示版本
打开浏览器->F12呼出开发者界面->选择仿真->选择浏览器版本
ie_test.gif测试效果:在版本小于等于ie8时,header标签就无法显示
解决方案
js代码创建标签在页面中添加创建header标签的代码
修改header的样式,添加display:blockhtml>
Title
header{ height: 100px; background-color: orangered;
}
// 使用代码创建header标签,创建后是行内元素
//在低版本的ie中,如果想要显示h5的新语义标签,需要设置为block
var headerDom = document.createElement('header'); document.body.appendChild(headerDom);
headerDom.style.display = 'block';优化代码执行--hack写法无论是js,或者js框架都需要执行js代码才能够解决兼容性问题,但是在高版本的浏览器中,那段js代码就没有必要执行了,所以我们通过一个叫做hack的方式来减少性能的浪费用法:使用 hack语法 将需要执行的js的代码包裹起来更多语法:
例如:IE6及IE6以下的IE5.x可识别
Emmet快捷键为: cc:ie6 +tab 键
*l:less
*g:greater
*t:than
*e:equal
IE6及IE6以下的IE5.x可识别
js框架直接导入js框架,js框架内部干的事情类似于帮助我们实现了创建 添加 displayblock的操作,但是处理的逻辑会多一些
html5shiv.min.js为压缩版js文件,较常用
通过条件注释让这个js文件 在指定的 IE版本中 才被加载使用js框架来解决html5新语义标签的IE浏览器兼容方法代码html>
Title
header { height: 100px; background-color: #f40;
}作者：Rella7
