HTML5新标签元素的运用

2016-10-17 10:41:50

HTML5新标签元素的运用
1. article 元素 
article 代表文档,页面或程序中相对独立、完整的部分,通常用article 包裹。例如文章一样,里头依然可以包括header 、section 等元素。
 
    <article>
        <header>头部</header>
        <!--<p>这是article
            这样的嵌套是不允许的      
            <article>
            </article>
        </p>-->
        <!--注意在p元素中不能再嵌套article元素,浏览器在解析的时候会将article元素给提出来-->
        <!--也可以嵌套article-->
        <article>
            <header>头部</header>
            <section>内容区块</section>
            <footer>底部</footer>
        </article>
        <footer>底部</footer> 
    </article>
2. section 元素 
区块元素,将相对独立的部分用section 进行包裹 ,可以包含多个区块元素。(可以嵌套)。一个section元素通常使用标题和对应的内容的。不得为了样式的需要而使用section。可以使用div。 
3. nav 元素 
导航区块元素,作为导航连接组使用。(导航栏、侧边导航栏等)
 
    <nav>
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">简介</a></li>
            <li><a href="">首页</a></li>
            <li><a href="">简介</a></li>
        </ul>
    </nav>
4. aside 元素 
表示当前或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条。 
5. time 元素 和pubdate属性 ☆ (为了机器编码的时间,之前采样的是微格式形式【类名,属性】) 
HTML5 新增的主体结构元素 time、pubdate 属性,用来无歧义、明确地对机器的日期和时间进行编码,并且以让人易读的方式来展现它,这个元素就是 time 元素。 
作用:便于 搜索引擎 搜索,让搜索引擎知道这个页面的时间。 
datetime是规定日期和时间。否则,由元素的内容给定日期和时间。 
pubdate是指示元素中的日期和时间,是文档(或
 
元素)的发布日期。
    <!--  pubdate 代表当前发布的时间   与其他时间进行区分开  -->
    <time datetime="2016-10-16" pubdate>2016-10-16</time>
    <!--  舞会时间     -->
    <time datetime="2016-10-16">2016-10-16</time>
    <!--   日期和时间之间用T进行分割 间隔分隔符   -->
    <time datetime="2016-10-16T20:00">2016-10-16</time>
    <!--  Z表示机器编码使用的utc标准编码    -->
    <time datetime="2016-10-16T20:00Z">2016-10-16</time>
    <!--  +表示时差   -->
    <time datetime="2016-10-16T20:00+09:00">2016-10-16</time>
* 二、兼容性处理* 
在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(‘tagName’)来创建一遍(创建标签),这样IE低版本也能正常解析HTML5新标签了,在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题。 
百度html5shiv.min.js 或者去github找找。
 
<!--[if lte IE 8]>
        <script src="./js/html5shiv.min.js"></script>
<!--[endif]>

iOS QQ群

HTML5 QQ群

飞雀动态

行业新闻

Copyright © 2015-2016 Future education technology co., LTD All Rights Reserved