前端学习笔记(十五)

第十五章 HTML5新增标签

一、HTML5概述

    1.简介
        HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次大修改.HTML5将成为 HTML、XHTML 以及 HTML DOM 的新标准。
    2.设计目的HTML5的设计目的是为了在移动设备上支持多媒体。
    3.新特性(只介绍特性,具体内容自己了解)
        1) 语义特性（Class：Semantic）
            HTML5赋予网页更好的意义和结构。
        2) 本地存储特性（Class: OFFLINE & STORAGE）基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。
        3) 设备兼容特性 (Class: DEVICE ACCESS)HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphon es及摄像头相联。
        4) 连接特性（Class: CONNECTIVITY）在新窗口中打开(O)HTML5拥有更有效的服务器推送技术，ServerSentEvent和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
        5) 网页多媒体特性(Class: MULTIMEDIA)支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
        6)三维、图形及特效特性（Class: 3D, Graphics & Effects）基于SVG、Canvas、WebGL及CSS3的3D功能

        7) 性能与集成特性（Class: Performance & Integration）HTML5通过XMLHttpRequest2等技术，解决以前的跨域等问题 

        8)CSS3特性(Class:CSS3)

            在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果
    4.浏览器支持
        1.HTML5有部分内容兼容到IE9，IE8及以下对H5完全不兼容后面的内容不再考虑此类浏览器。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。
        2.部分内容需要加兼容前缀，
        -webkit- 常用于兼容chrome
        -moz- 常用于兼容firfox
        -o- 常用于兼容opera
        -ms- 常用于兼容IE
        3.兼容性查询网站：http://caniuse.com/

二、HTML5结构性标签

    <header></header> 页眉 ,也可用于板块头部
    <nav></nav> 导航 （链接的的一个列表）
    <section> <section> 页面上的版块
    <article></ article > 用来在页面中表示一套结构完整且独立的内容部分
        如：杂志或报纸中的一篇文章，用户提交的评论内容，可互动的页面模块挂件等
    <aside></ aside> 侧边栏、广告、nav元素组，以及其他类似的内容部分
    <footer></footer> 页面的底部 或者 版块底部

三、HTML5语义化标签

    <hgroup></hgroup> 一个标题和一个子标题，或者标语的组合
    <figure> < figure > 用于对元素进行组合。一般用于图片或视频
    <figcaption> </figcaption> 元素为元素组添加标题
    <time></time> 用来表现时间或日期
    <nav>
        <a href=“#”>链接</a><a href=“#”>链接</a>
    </nav>
    <hgroup>
        <h1>潭州教育</h1>
        <h2>付出不亚于任何人的努力</h2>
    </hgroup>
    <figure>
        <img src=“”/>(注意没有alt)
        <figcaption> 说明文字</figcaption>
    </figure>
    <p> 早上 <time>9:00</time> 开始营业。 </p>参数
    <p> <time datetime="2008-02-14">情人节</time> 有个约会。 </p>
    <datalist></datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义
    input 可能的值。请使用 input 元素的 list 属性来绑定 datalist ID。
    <details></details> 用于描述文档或文档某个部分的细节该元素用于摘录引用等 ，与标签 配合使用Open 属性默认展开
    < summary></summary> details 元素的标题
    <dialog></dialog> 定义一段对话, 默认展开需要添加 open属性
    <address></address> 定义文章 或页面作者的详细联系信息
    <input type="text" list="valList" />
        <datalist id="valList">
            <option value="javascript">javascript</option>
            <option value="html">html</option>
            <option value="css">css</option>
        </datalist>
    <details open="open">
        <summary>潭州教育</summary>
        <p>国内将知名的IT培训机构</p>
    </details>
    <dialog open>
        <dt>老师</dt>
        <dd>2+2 等于？</dd>
        <dt>学生</dt>
        <dd>4</dd>
        <dt>老师</dt>
        <dd>答对了！</dd>
    </dialog>
    <address>
        email:<a href="mailto:68603587@qq.com">68603587@qq.com</a>.<br>
        web:Example.com<br>
        QQ:68603587<br>
    </address>
    <meter> 定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
    比如磁盘用量、查询结果的相关性。
    <progress><progress> 定义进度条
    <mark></mark> 需要标记的词或句子，默认黄色背景

四、HTML5结构标签IE低版兼容

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

    一 js动态创建标签

        a 在页面的头部加下：
        b 要对新创建的标签定义display:block属性

    二 引入tml5shiv.js 兼容插件

        <meter min=”0” max=”10” value='3' low='' high='' ></meter>
        <progress max="100" value="76">
             <span>76</span>
        </progress>
        <script>
            document.createElement(“header”);
            document.createElement(“nav”);
            document.createElement(“footer”);
        </script>

五、 IE条件注释语句

    针对的浏览器版本
    <!--[if lt IE 7]> 内容 <![endif]--> IE7 以下版本 （小于IE7）
    <!--[if lte IE 7]>内容<![endif]--> IE7及以下版本 （包含IE7）
    <!--[if gt IE 7]>内容<![endif]--> IE7 以上版本 （大于IE7）
    <!--[if gte IE 7]>内容<![endif]--> IE7及以上版本 （包含IE7）
    <!--[if !IE 7]>内容<![endif]--> 非IE7版本
    <!--[if !IE]><!--> 非IE版本 <!--<![endif]-->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->