很多低版本的浏览器是不识html5新增的标签的，所以为了解决浏览器兼容性问题，主要有两种方法：

  • js可以创建我们自定义的标签，例如，我们可以用js语句 document.createElement('leo')创建<leo>标签，然后再给它样式，但是创建的leo标签并不是一个块标签，所有可以利用display:block;使leo标签成为块标签，所以我们可以利用js语句分别将html5新增的标签（header,footer...）创建出来，然后分别设置他们的display:block;这样，就可以兼容低版本的浏览器。
  • 利用一个插件 html5shiv.js ，这也是跟第一种方法差不多，只不过第一种比较麻烦，现在将第一种方法写成js插件引入，比较方便。

新增的带有功能效果作用性的标签（datalist、datadetails）要想兼容，只能用原始的js来实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="js/html5shiv.js"></script>

<style>

    body{

        margin:0px;

        padding:0px;

    }

    header{

        /*display: block;*/

        height:100px;

        background: #9f3;

    }

    article{

        /*display: block;*/

        position: relative;

        padding:10px;

        background: #cf6;

        overflow: hidden;

        zoom:1;

    }

    aside{

        /*display: block;*/

        position: absolute;

        left: 10px;

        top:10px;

        width:200px;

        height: 300px;

        background: #f06;

    }

    section{

        /*display: block;*/

        margin-left: 210px;

        height: 300px;

        background: #f90;

    }

    footer{

        /*display: block;*/

        height: 100px;

        background: #c60;

    }

</style>

<script src="js/html5shiv.js"></script>

<script>

    /*兼容低版本浏览器：

    (1) 利用js创建这些标签，然后再将所有的标签都display:block;

    （2）利用插件html5shiv.js

    */

    // document.createElement('header');

    // document.createElement('article');

    // document.createElement('aside');

    // document.createElement('section');

    // document.createElement('footer');

</script>

</head>

<body>

<header>用在页面的头部或者板块的头部</header>

<article>

    <aside>侧边栏</aside>

    <section>内容区域</section>

</article>

<footer>页面底部</footer>

</body>

</html>

html5新增标签兼容性的更多相关文章

  1. 盒子模型，定位技术，负边距，html5 新增标签

    盒子模型 /*[margin 外边距] margin属性最多四个 1.只写一个值,四个方向的margin均为这个值 2.写两个值:上,右两个方向,下默认=上,右 默认=左 3.写三个值:上.右.下三个 ...

  2. html5新增标签/删除标签

    闲聊: 最近小颖工作稍微比较轻松,没事就看看慕课,看了看:HTML5之元素与标签结构,里面简单讲解了下HTML5的一些新特性,小颖之前没写过HTML5的页面,所以就当写笔记将那些新的特性整理出来,也方 ...

  3. 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题

    https://www.cnblogs.com/yangjie-space/p/4816279.html html5shiv.js和respond.min.js 做页面常用的东西,写这里用的时候省点去 ...

  4. 让旧浏览器支持HTML5新增标签

    首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素.   ...

  5. html5 新增标签和特性

    文档类型设定 document HTML: XHTML: HTML5 字符设定 <meta http-equiv="charset" content="utf-8& ...

  6. HTML5新增标签及具体用法

    html5自从推广普及以来,迅速被各大浏览器支持.采用html5设计的网页逐渐成为网页设计的时尚.下面就温习下html5的新增标签. HTML 5 中的新特性包括了嵌入音频.视频和图形的功能,客户端数 ...

  7. HTML5新增标签的汇总与详解

    趁着一点闲暇时间,把HTML5的新增标签整理了一下,用了表格的形式展现,分别归纳了各标签的用法及属性分析.这样方便各位以后在运用HTML5标记遇到疑惑时,直接上来对照看下就明了了,希望对大家有帮助哦. ...

  8. 第二篇、HTML5新增标签

    <html> <head> <meta charset="UTF-8"> <title>html5新增的标签</title&g ...

  9. CSS3主要知识点复习总结+HTML5新增标签

    文件夹: 1.CSS 属性编写顺序 2.CSS3属性(内核前缀) 3.position相对/绝对定位 4.overflow:scroll等的差别 5.display属性应用 6.盒模型计算方法和Bug ...

随机推荐

  1. 使用ttXactAdmin、ttSQLCmdCacheInfo、ttSQLCmdQueryPlan获取SQL相关具体信息[TimesTen运维]

    使用ttXactAdmin.ttSQLCmdCacheInfo.ttSQLCmdQueryPlan获取SQL相关具体信息,适合于tt11以上版本号. $ ttversion TimesTen Rele ...

  2. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  3. PHP str_replace() 函数

    定义和用法 str_replace() 函数使用一个字符串替换字符串中的另一些字符. 语法 str_replace(find,replace,string,count) 参数 描述 find 必需.规 ...

  4. jQuery遍历json

    使用 each var anObject = {one:1,two:2,three:3}; $.each(anObject,function(name,value) { alert(name); al ...

  5. eclipse代码提示框背景色改动

    因为个人习惯,喜欢把eclipse的文本编辑框背景调成全黑色,可是代码提示框的默认背景色也是黑色.所以两者就冲突了.导致看不到代码提示框的内容. 后来发现代码提示框的背景色能够改动.改动内容例如以下: ...

  6. C++如何用system命令获取文件夹下所有文件名

    http://www.cplusplus.com/reference/cstdlib/system/ http://bbs.csdn.net/topics/30068943 #include < ...

  7. Model

    using System.Collections.Generic; using System.ComponentModel.DataAnnotations; namespace iFlytekDemo ...

  8. objc_msgSend消息传递学习笔记 – 对象方法消息传递流程

    在Effective Objective-C 2.0 – 52 Specific Ways to Improve Your iOS and OS X Programs一书中,tip 11主要讲述了Ob ...

  9. httpURLConnection-网络请求的两种方式-get请求和post请求

    GET请求 /** * 从网络获取json数据,(String byte[}) * @param path * @return */ public static String getJsonByInt ...

  10. iOS越狱程序开发

    iOS越狱程序开发http://www.docin.com/p-760246852.html