前端学习笔记(十五)

第十五章 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结构性标签

    

页眉 ,也可用于板块头部
    

导航 （链接的的一个列表）
    

页面上的版块
    

用来在页面中表示一套结构完整且独立的内容部分
        如：杂志或报纸中的一篇文章，用户提交的评论内容，可互动的页面模块挂件等
    

侧边栏、广告、nav元素组，以及其他类似的内容部分
    

页面的底部 或者 版块底部

三、HTML5语义化标签

    

一个标题和一个子标题，或者标语的组合
    

< figure > 用于对元素进行组合。一般用于图片或视频
    

元素为元素组添加标题
     用来表现时间或日期
    

        链接链接
    

    

        

潭州教育

        

付出不亚于任何人的努力

    

    

        (注意没有alt)
        

说明文字

    

    

早上 9:00 开始营业。

参数
    

情人节 有个约会。

     标签定义选项列表。请与 input 元素配合使用该元素，来定义
    input 可能的值。请使用 input 元素的 list 属性来绑定 datalist ID。
    

用于描述文档或文档某个部分的细节该元素用于摘录引用等 ，与标签 配合使用Open 属性默认展开
    < summary> details 元素的标题
    

定义一段对话, 默认展开需要添加 open属性
    

定义文章 或页面作者的详细联系信息
    
        
    

        

潭州教育

        

国内将知名的IT培训机构

    

    

        

老师

        

2+2 等于？

        

学生

        

4

        

老师

        

答对了！

    

    

        email:[email protected].

        web:Example.com

        QQ:68603587

    

     定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
    比如磁盘用量、查询结果的相关性。
     定义进度条
     需要标记的词或句子，默认黄色背景

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

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

    一 js动态创建标签

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

    二 引入tml5shiv.js 兼容插件

        
        
             76
        
        

五、 IE条件注释语句

    针对的浏览器版本
     IE7 以下版本 （小于IE7）
     IE7及以下版本 （包含IE7）
     IE7 以上版本 （大于IE7）
     IE7及以上版本 （包含IE7）
     非IE7版本
     非IE版本