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

骑猪看日落 2023-08-17 16:39 30阅读 0赞

### 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- 属性名

<div class = "user" data-id = "123" data-name = "aa" > alice </div>
    <div class = "user" data-id = "124" data-name = "css" > 样式 </div>

注意：  标签内自定义属性名的名称是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.历史追加       //地址栏不跳转

[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list