HTML5 CSS3 （动画/语义化标签/插件/HTML5新增API）

JavaScript 、CSS 实现动画的区别：

JS :  帧动画 

CSS :补间动画

帧动画: 使用定时器每隔一段时间更改当前元素的状态
补间动画: 通过过渡(只要状态发生改变产出动画) 产生动画(多个节点来控制动画),性能会更好

注意： 在支持H5C3的的浏览器尽可能使用css3动画(便于移动端开发)
 

 

border-images ：有浏览器兼容问题

border-images ：url   切割距离/边框宽度  平铺方式       

                            url（....）   167px/20px   round      自动填充宽高内容，四个角保留位置

border-images-slice 切割位置上下左右;一个数字值默认切割的四个边都一样，一般切割为九宫格形式（上下左右四刀）

border-images-repeat 平铺： round（环绕）  stretch（拉伸）   repeat（平铺）

 

 

 

语义化标签：

指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、利于SEO。

 （反对页面大篇幅使用无语义化的div+span+class，而鼓励使用HTML定义好的语义化标签。）

// html中语义化标签：
 body, article, nav, aside, section, header, footer, hgroup,h1-h6 ，address

//css也有语义化 ，一般指的是 class和ID命名的语义

更多语义化标签：MDN

作用：

        1.从开发角度考虑是提高代码的可读性可维护性-

       .2 网站的发布者: 便于 seo搜索引擎优化
 

 

语义化标签兼容问题：

 IE9以下不支持H5标签 (大部分CSS3属性，一 些H5的api)  ，把这些标签当做行内元素

解决：    1. 动态创建document. createElement( 'header')  语义化标签，同时设置为块级元素

               2.当需要创建非常多的语义化标签时，可以通过 html5shiv. js  插件完成动态创建语义化标签

 

引入html5shiv. js 文件

1. 必须在头部引用，提前加载，为了在页面结构之前，提前解析h5标签

2.  优化处理 支持h5标签的浏览器不需要加载，使用js navigator.userAgent  可以判断当前是什么浏览器 但是这已经是页面加载完成，不能做到提前加载。所以使用html条件注释判断 

   .........
    

 

html条件注释：

//判断是不是IE浏览器



//判断是那一个浏览器




//实例：判断浏览器版本是否小于IE9



//  lt小于   gt大于  lte小于等于   gte大于等于

 

 

视差滚动效果插件（Stellar.js）：

 视差滚动( Parallax Scrolling )指网页滚动过程中，多层次的元素进行不同程度的移动,视觉上形成立体运动效果。主要核心就

 是前景和背景以不同的速度移动,从而创造出3D效果。

 

使用步骤：

一、引入jquery 与stellar 插件

二、标签设置 data-stellar-background-ratio=“xx” ，以及设置对应样式  background-attachment: fixed;

三、js初始化

$(function (){
    
 //设置某一个元素
    $(" ").stellar();

    
 //所有设置background-attachment的元素
    $.stellar({
    horizontalScrolling: false,
    responsive: true
    });

});

 

插件属性：

1. horizontalScrolling 和verticalScrolling  设置效果方向,水平或垂直，布尔值，默认为true。

2.responsive       设置load或resize事件触发时，是否刷新页面。 默认是false。

3.hideDistantElements   设置是否要隐藏移出视线的元素。默认false 不隐藏。

4.data-stellar-background-ratio   在元素标签内设置滚动速度，需要在样式表里设置background-attachment: fixed

 

 

 

 

---

HTML5    新增API（进行DOM 元素操作）

1. 选择器：

document.querySelector()  根据css选择器返回第一个匹配的元素，没有返回null；

document.querySelectorAll("selector")  返回的是元素数组

 

2. classList 属性 

 js之前操作类都是通过 className 

JQ 可以通过 addClass()  removeClass()  toggleClass()   hasclass()

现在HTML5 基于classLsit属性  ,可以通过更多方式操作类（移动端需要）

 classList.add()
 classList.remove()
 classList.toggle()
 classList.contains()

 

3.自定义属性 

标签内设置自定义属性：data- 属性名          

 alice 
 样式 

 注意：  标签内自定义属性名的名称是data后的驼峰写法。

 

获取自定义属性： 

// html5方式
document.querySelector("div").dataset.user;      //获取单个
document.querySelector("div").dataset["user"];

document.querySelector("div").dataset;   //获取所有


//jq方式
$("div").date("user");          //获取单个

$("div).data();               //获取所有


html5 方式设置
document.querySelector("div").dataset.user = "keke";

jq设置
$("div").data("user","keke");

jqurey 中的data（）方法操作的是内存，不会在标签内显示。

html5 中的dataset属性操作的是dom，会在标签显示。

 

html通过setAttribute方法设置属性，操作的是dom

    ① 可以设置属性成功，并且设置到标签内

    ② 必须通过getAttribute方法才能获取属性值，点调用获取不到

 

 

4.全屏方法

      HTML5规范允许用户自定义网页上任一元素全屏显示。

element.requestFullScreen()  //开启全屏显示

element.cancelFullScreen()   //关闭全屏显示

例子：

document.querySelector("video").requestFullScreen();

页面文档全屏
  document.documentElement.mozrequestFullscreen();

注意：由于其兼容性原因,不同浏览器需要添加前缀（-webkit-    -moz-   -ms-   -o-）

如webkit内核浏览器: webkitRequestFullScreen、 webkitCancelFullScreen ,

如chrome浏览器。Gecko内核浏览器: mozRequestFullScreen、mozCancelFullScreen 。

 

      ●document . fullScreen检测当前是否处于 全屏状态

不同浏览器需要添加前缀document.webkitlsFullScreen. document.mozFullScreen

 

 

多媒体播放

 

 

 

 

历史相关API

原来： 

history
history.go()     //正，下一条。负，上一条
history.back()
history.forward()

新增API

   history.pushState()   //新增历史记录
   history.replaceState()  //替换历史记录

   //开发模式，实现单页面应用程序
   window.onpopstate = function (){

   }

单页面应用程序：在一个页面上实现网站的大部分功能。

实现方法：

1. hash 地址栏的哈希（也称路由）

2.历史追加       //地址栏不跳转