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

最新推荐文章于 2024-10-28 15:09:19 发布

weixin_39578899

最新推荐文章于 2024-10-28 15:09:19 发布

阅读量129

点赞数

文章标签： html5新标签转换插件

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标签的浏览器不需要加载，使用jsnavigator.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.历史追加 //地址栏不跳转