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