HTML5部分新语义标签
2017-04-27 本文已影响43人
Rella7
语义标签
举个例子，语义标签就是标签本身代表了一定的含义
-
HTML4.01- 语义标签
- p标签：段落
- img标签：图片
- 。。。等等
- 语义性不强的：
- div:作为容器存在
- 在网站布局中使用广泛
- 搜索引擎友好，但是搜索引擎更友好的依旧是内容
- div:作为容器存在
- 语义标签
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,比如
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的操作,但是处理的逻辑会多一些
-
js框架"html5shiv"获取地址
- 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 src="js/html5shiv.min.js"></script>
<![endif]-->
<header></header>
</body>
</html>
