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>
330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
