您的位置：首页 > Web前端 > HTML5

HTML5语义化标签，兼容性问题

2017-01-11 00:00 232 查看

摘要: HTML5

HTML5不仅仅作为HTML标记语言的一个最新版本，更重要的是它制定了web应用开发的一系列标准，成为第一个将web做为应用开发平台的HTML语言。

HTML5定义了一系列的新元素，如新语义化标签，智能表单，多媒体标签等，还提供了一些javascript API，如地理定位，重力感应，硬件访问等。可以在浏览器内实现类原生应用，甚至结合canvas我们可以开发网页版游戏。

语法规范
HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写更加简介，清晰

<body>
<p> 我是一段任性的文字，我就是不写闭合标签
</body>

特点
1.更简洁
2.更宽松
单标签不用写关闭符号
双标签省略技术标签
html,head,body,colgroup,tbody可以完全省略

实际开发中应该规范书写，不建议太随意

语义化标签

H5经典网页布局

<header>
<ul class="nav"></ul>
</header>
<!--主体部分-->
<div class="main">
<!--文章-->
<article></article>
<!--侧边栏-->
<aside></aside>
</div>
<!--底部-->
<footer></footer>

常用语义化标签

<nav>表示导航
<header>表示头部
<footer>表示尾部
<section>表示区块
<article>表示文章
<aside>表示侧边栏
<figuer>表示媒介内容分组与ul>li做比较
<mark>表示标记（带用“ul”，不怎么用）
<progress>表示进度（带用“ul”，不怎么用）
<time>表示日期

尽量避免全局使用header，footer，aside等语义化标签
###兼容处理
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素对待，所以我们只需要将其转化成块元素即可使用但是在ie9版本以下，并不能正常解析这些新标签，但是可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是讲HTML5的新标签通过document.createElement('tagName')来创建一遍，这样ie低版本也可以正常解析HTML5新标签，在实际开发中我们更多采取的是采用通过检测ie浏览器的版本来加载三方的一个JS库来解决兼容问题

<!--[if lte IE 8]>
<script src="./js/html5shiv.min.js"></script>
<![end if]-->

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航