html5-深入浅出（1）

html5 标签

　　html5的写法是相当灵活的，请看下面的代码，标签p大写或者大小写混写或者属性名大小写掺杂

<p>段落</p>
<P>段落</P>
<p>段落</P>
<p CLAss="cls">段落</p>
<p CLAss=cls>段落</p>

　　浏览器运行，查看结果，很完美，没有一点错误，但是不推荐这种写法，我们还是要按照html的规范来，看着就像对的。

<p>段落</p>
<p class="cls">段落</p>

html5语义化标签

　　好处

结构清晰、可读性较好、便于团队维护和开发
无障碍阅读（屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页）
有利于SEO搜索引擎对页面内容的抓取

　　我们在页面中输入如下代码

　　　　height:40px;
　　　　line-height: 40px;
　　　　background-color:pink;
　　　　text-align:center;
　　}
</style>


<header>头部</header>

然后浏览器中运行，查看结果和正常使用div一样。但是当我们运行在(<=IE8)的浏览器中发现，哎我的颜色呢，我的块元素呢？不过现在需要兼容这版本的浏览器已经不多了，但是老板说得兼容，我们是不是就没办法了呢，是的，没办法。那怎么可能，我们可以这样做，直接上代码

　　<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
　　　　/*样式添加 display: block; 如果不添加此时显示为 内联元素*/
        header {
            height: 40px;
            line-height: 40px;
            background-color: pink;
            text-align: center;
            display: block;
        }
    </style>
    <script>
        /*
         * 该标签下的css 中设置display:block;
         * 通过dom的方式创建这个标签
　　　　　 * 要放在引用之前
         */
        document.createElement('header');
    </script>

    <body>
        <header>头部</header>
    </body>

</html>

我们再次打开，很完美了不是，但是我现在只引用了一个，如果多个的话我还这样写嘛，此时我们可以使用html5shiv这个文件，直接引入即可。html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。我们把自己创建的代码删除然后引入 <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>，浏览器也是完美运行。我们使用其他不是ie的浏览器时，发现这个文件也被加载，那怎么行，所以我们可以加入这样一句话

<!--此注释仅仅IE浏览器可识别-->
    <!--如果是小于等于IE8的浏览器才会加载此文件-->
    <!--[if lte IE 8]> 
        <script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
    <![endif]-->
    <body>
        <header>头部</header>
    </body>

好了，再打开不是ie8的浏览器，发现js文件已经不会加载了，好了，今天就到这里，下次再会。