HTML5属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体。例如video标签和audio、canvas标签。
HTML5新特性:
- 取消了过时的显示效果标记<font></font>和<center></center>...
- 新表单元素引入
- 新语义化标签的引入
- canvas标签(图形设计)
- 本地数据库(本地存储)
- 一些API
HTML5的优势是跨平台,缺点是PC端浏览器支持不是特别友好,造成用户体验不佳。
先来看看语义化标签, 标签有header、footer、nav、article、aside、section、main等。
为什么需要语义化标签:
- 顾名思义,便于阅读,易修改,易维护
- 搜索引擎友好,便于SEO
- 面向未来的HTML,浏览器在未来可能提供更丰富的支持。
由于语义化标签是html5新特性,在一些旧版本浏览器支持不友好,比如IE8及以下都不识别语义化标签,那么如果要求兼容旧版浏览器的话,应该如何兼容做呢?这里提供三个解决方案:
- 通过document.createElement('xxx')来创建一个语义化标签,同时需要css样式配合设置该标签display为block
- 第一种方式对于每一个语义化标签都需要设置css, 不大方便。因此第二种方式是引入一个第三方已经写好的语义化标签js。
- 第三种方式(最佳解决方案):在第二种方式的基础上,加上一个<!--[if lte IE 8]><![endif]-->判断,设置只有IE8及以下浏览器才加载这个js, 优化性能。
先看下测试效果,IE8下处理前和处理后的区别:
测试代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5新特性</title>
<style type="text/css">
/* 语义化标签 */
nav { background-color: red; }
.nav { display: block; height: 40px; background-color: yellow; }
</style>
</head>
<body>
<div class="container">
<div id="tanFour">
<h3>语义化标签</h3>
<div>为什么需要语义化:1、顾名思义,便于阅读,易修改,易维护;2、搜索引擎友好,便于SEO;3、面向未来的HTML, 浏览器在未来可能提供更丰富的支持。</div>
<ul>
由于语义化标签是html5新特性,在一些老版浏览器支持不友好,如何兼容老版浏览器:有三个解决方法
<li>脚本通过document.createElement('xxx')创建标签,并且在样式中设置该标签display为block</li>
<li>第一种方式对于每一个语义化标签都需要设置css, 不大方便。因此第二种方式是引入一个第三方已经写好的语义化标签js。</li>
<li>第三种方式(最佳解决方案):在第二种方式的基础上,加上一个<!--[if lte IE 8]><![endif]-->判断,设置只有IE8及以下浏览器才加载这个js, 优化性能。</li>
</ul>
<!-- 第一种兼容解决方案, 脚本创建语义化标签,设置样式display为block -->
<!--<script type="text/javascript">-->
<!--document.createElement('nav');-->
<!--</script>-->
<!-- 第二种解决方案:引入第三方脚本 -->
<!--<script type="text/javascript" src="./js/html5shiv.min.js"></script>-->
<!-- 第三种解决方案:只有在ie8及以下才加载第三方脚本,优化性能,终极解决方案 -->
<!--[if lte IE 8]>
<script type="text/javascript" src="./js/html5shiv.min.js"></script>
<![endif]-->
<nav class="nav">语义化标签1</nav>
<nav>语义化标签2</nav>
<nav class="nav">语义化标签3</nav>
</div>
</div>
</body>
</html>