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

HTML5一些语义化的标签以及在IE6~8兼容性问题

2016-07-21 11:44 519 查看

HTML5一些语义化的标签：

这些语义化的标签在IE8版本之前（非标准浏览器）不支持，其他标准浏览器支持。除其他标签都是成对存在的。

<header> 标签定义文档的页眉（介绍信息）。
<hgroup> 页面上的一个标题组合。
<footer> 页面的底部或者版块底部。
<article> 用来在页面中表示一套结构完整且独立的内容部分。
<section> 页面上的版块，用于划分页面上的不同区域,或者划分文章里不同的节
<nav> 导航 （包含链接的的一个列表）
<aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
<figure> 用于对元素进行组合。一般用于图片或视频
<figcaption>  figure的子元素 用于对figure的内容 进行说明
<time>用来表现时间或日期，有datetime属性。
以下标签具有一些功能：
<datalist>选项列表。与 input 元素配合使用，来定义 input 可能的值，要设定input中list属性为datalist 的id。
<details>用于描述文档或文档某个部分的细节，Open 属性默认展开（最好显示的表明open）
< summary> details 元素的标题
<dialog>定义一段对话
<address> 定义文章 或页面作者的详细联系信息
<mark> 需要标记的词或句子
<keygen>给表单添加一个公钥 <keygen name="security" />
<progress>定义进度条

解决在非标准浏览器下不兼容的问题

一、针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们方法如下：

在页面的头部加下：

document.createElement(“header”);

document.createElement(“nav”);

document.createElement(“footer”);

……

HTML5语义化标签在IE6-8下，我们用js创建出来之后，他是不会有任何默认样式的甚至是 display，所以在样式表里要对这些标签定义一下它默认的display。

<!DOCTYPE HTML>
<html>
<head>
<meta  charset=utf-8">
<script> document.createElement("leo");
document.createElement("header");
document.createElement("article");
document.createElement("aside");
document.createElement("section");
document.createElement("footer");
</script>
<style>
body {
margin: 0;
}

header {
height: 100px;
background: #9F3;
display: block;
}

article {
padding: 10px;
background: #CF6;
overflow: hidden;
zoom: 1;
position: relative;
display: block;
}

aside {
width: 200px;
height: 300px;
background: #F06;
position: absolute;
left: 10px;
top: 10px;
display: block;
}

section {
margin-left: 210px;
background: #F90;
height: 300px;
display: block;
}

footer {
height: 100px;
background: #C6C;
display: block;
}

</style> </head>
<body>
<header>页面头部</header>
<article> <aside>侧边栏</aside>
<section>内容区域</section> </article>
<footer>页面底部</footer>

</body>
</html>

二、可以引用一个js插件解决HTML5语义化标签在IE6-8不兼容问题。

下载地址：http://www.bootcdn.cn/html5shiv/

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

标签： html5 兼容性语义化的标签

相关文章推荐

新的分享

章节导航