H5C3学习笔记

最新推荐文章于 2022-11-20 22:50:43 发布
最新推荐文章于 2022-11-20 22:50:43 发布
阅读量427 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44114415/article/details/99940318
版权

呔！妖怪

CSS3

1.全屏动画插件fullpage

Github-fullpage

fullpage

  • 件功能介绍

    • 基于 jQuery 的插件，它能够帮你很方便、很轻松的制作出全屏网站。
    • 支持鼠标滚动，支持前进后退和键盘控制，多个回调函数，
      支持手机、平板触摸事件，支持 CSS3 动画，支持窗口缩放，窗口缩放时自动调整，
      可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等。
    • 参考文档：http://www.dowebok.com/demo/2014/77/
    • 原理：window.onmousewheel = function(){ console.log(‘ok’) };

  • 使用步骤

    • 引用文件
        <link rel="stylesheet" href="css/jquery.fullPage.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.fullPage.js"></script>
    • html结构
<div id="fullpage">
	<div class="section">Some section1</div>
	<div class="section">
    	<div class="slide">Some section2.1 </div>
    	<div class="slide">Some section2.2 </div>
    	<div class="slide">Some section2.3 </div>
    </div>
	<div class="section">Some section3</div>
	<div class="section">Some section4</div>
</div>
  • js初始化
// #### 全屏切换效果
// > 通过鼠标的滚轮 切换全屏页面
// 
// - 使用fullpage来完成
$(function($)
	{ 
			//初始化
		$('#dowebok').fullpage({
			//设置颜色
			sectionsColor: ["#fadd67", "#84a2d4", "#ef674d", "#ffeedd", "#d04759", "#84d9ed", "#8ac060"],
			//取消默认垂直居中
			verticalCentered:false,
			//导航
			navigation: true,
			//屏幕滚动到下一个时的回调函数
			afterLoad: function(link,index){
				console.log(index)
				$('.section').eq(index-1).addClass('now')
			},
			//初始化完毕后触发
			afterRender:function(){
				$('.more').on('click',function(){
					$.fn.fullpage.moveSectionDown();
				})
				 /*当第四屏的购物车动画结束之后执行收货地址的动画*/
				 $('#cart').on('transitionend',function(){
					 console.log("以结束")
				 })
			},
			//滚动前的回调函数
			onLeave:function(index,nextIndex,direction){
				if(index == 2 && nextIndex == 3){
					$('.section').eq(index-1).addClass('leaved')
				}
				if(index == 3 && nextIndex == 4){
					$('.section').eq(index-1).addClass('leaved')
				}
			},
			//页面滚动时间（毫秒）
			scrollingSpeed:1000
			
		});
		
		}) //入口函数
  • 配置
选项类型默认值说明
verticalCentered字符串true内容是否垂直居中
resize布尔值false字体是否随着窗口缩放而缩放
slidesColor函数无设置背景颜色
anchors数组无定义锚链接
scrollingSpeed整数700滚动速度，单位为毫秒
easing字符串easeInQuart滚动动画方式
menu布尔值false绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
navigation布尔值false是否显示项目导航
navigationPosition字符串right项目导航的位置，可选 left 或 right
navigationColor字符串#000项目导航的颜色
navigationTooltips数组空项目导航的 tip
slidesNavigation布尔值false是否显示左右滑块的项目导航
slidesNavPosition字符串bottom左右滑块的项目导航的位置，可选 top 或 bottom
controlArrowColor字符串#fff左右滑块的箭头的背景颜色
loopBottom布尔值false滚动到最底部后是否滚回顶部
loopTop布尔值false滚动到最顶部后是否滚底部
loopHorizontal布尔值true左右滑块是否循环滑动
autoScrolling布尔值true是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
scrollOverflow布尔值false内容超过满屏后是否显示滚动条
css3布尔值false是否使用 CSS3 transforms 滚动
paddingTop字符串0与顶部的距离
paddingBottom字符串0与底部距离
fixedElements字符串无
normalScrollElements无
keyboardScrolling布尔值true是否使用键盘方向键导航
touchSensitivity整数5
continuousVertical布尔值false是否循环滚动，与 loopTop 及 loopBottom 不兼容
animateAnchor布尔值true
normalScrollElementTouchThreshold整数5-
  • 方法
名称说明
moveSectionUp()向上滚动
moveSectionDown()向下滚动
moveTo(section, slide)滚动到
moveSlideRight()slide 向右滚动
moveSlideLeft()slide 向左滚动
setAutoScrolling()设置页面滚动方式，设置为 true 时自动滚动
setAllowScrolling()添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling()添加或删除键盘方向键控制
setScrollingSpeed()定义以毫秒为单位的滚动速度
  • 回调函数
名称说明
afterLoad滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
onLeave滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数

2.动画

.cs{
	transform: translateX(200px);
	transition: transform 1s;
	}
	/*------------------------------------------------*/
.section01 .sofa{
		position: absolute;
		top: 150px;
		left: 220px;
		animation: sofa01 0.8s linear 1s infinite alternate;
	}

@keyframes sofa01 {
		from{
			transform: none;
			
		}
		to{
			transform: translateY(20px);
			
		}

2.1转换

  • 缩放 scale() 单位（0.5）
    • transform-origin: left top; 设置缩放中心点
  • 位移 translate
  • 旋转 rotate 单位：deg 轴的旋转
  • 倾斜 skew
    以上四种转换方式是比较特殊，其实他们都是由 matrix 矩阵

2.2动画速度

forwards 保持最后动画状态

infinite 循环

infinite alternate 倒放循环

  • ease 先快后慢 最后非常慢
  • linear 匀速
  • ease-in 速度越来越快
  • ease-out 速度越来越慢
  • ease-in-out 速度先快后慢
    以上五种动画速度是比较特殊，其实他们都是由 贝塞尔曲线 来的

2.3 3d转换 translate3d rotate3d

2d转换和3d转换区别：
1.除了多了一个参数表示3d
2.在移动端使用3d转换可以优化性能（如果设备有3d加速引擎 GPU 可以提高性能 ,是2dz转换是无法调用GPU）

2.4过度的结束后回调函数 transitionend

/*.能不能监听到动画或者过度的结束*/
		/*.css3当中 过渡 transitionend  动画 animationend*/
		//过渡结束后执行
		$('div').on('transitionend',function(){
			console.log(45)
		})

3.Stellar插件视差滚动

  • 描述

    • 视差滚动（Parallax Scrolling）指网页滚动过程中，
      多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术
      主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。
      这种效果可以给网站一个很好的补充。

  • 特性

    • 视差滚动效果酷炫，适合于个性展示的场合。
    • 视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。
    • 视差滚动容易迷航，需要具备较强的导航功能。

  • 原理

    • 传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，
      而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。
      有的时候也可以加上一些透明度、大小的动画来优化显示。利用background-attachment属性实现。

  • 使用步骤

    • 引用文件
        <script src="jquery/jquery.min.js"></script>
    <script src="jquery.stellar.min.js"></script>
    • html结构
      • 在要实现滚动视差的元素上添加data-stellar-background-ratio="0.5"
        <div class="content" id="content1">
        <p>TEXT HERE</p>
    </div>
    <div class="content" id="content2">
        <p>TEXT HERE</p>
    </div>             
    <div class="content" id="content3" data-stellar-background-ratio="0.5">
        <p>TEXT HERE</p>
    </div>
    <div class="content" id="content4" data-stellar-background-ratio="0.5">
        <p>TEXT HERE</p>
    </div>
    <div class="content" id="content5" data-stellar-background-ratio="0.5">
        <p>TEXT HERE</p>
    </div>
    <div class="content" id="content6" data-stellar-background-ratio="0.5">
        <p>TEXT HERE</p>
    </div>
    • 基本样式
        .content {
        background-attachment: fixed;  //必须添加
        height: 400px;
    }
    #content1 {
        background-image: url("..");
    }
    #content2 {
        background-image: url("..");
    }
    #content3 {
        background-image: url("..");
    }
    #content4 {
        background-image: url("..");
    }
    #content5 {
        background-image: url("..");
    }
    #content6 {
        background-image: url("..");
    }
    • js初始化
        $.stellar({
        horizontalScrolling: false,
        responsive: true
    });

  • 参数解释

名称说明
horizontalScrolling 和 verticalScrolling该配置项用来设置视差效果的方向。horizontalScrolling设置水平方向，verticalScro设置垂直方向， 为布尔值，默认为true
responsive该配置项用来制定load或者resize时间触发时是否刷新页面，其值为布尔值，默认为false
hideDistantElements该配置项用来设置移出视线的元素是否隐藏，其值为布尔值，若不想隐藏则设置为false
data-stellar-ratio=“2”定义了此元素针对页面滚动的速度比率，比如，0.5为页面滚动的50%，2为页面滚动的200%，所以数值越大，你可以看到页面元素滚动速度越快。
data-stellar-background-ratio该配置项用在单个元素中，其值为一个正数，用来改变被设置元素的影响速度。 例如 值为0.3时，则表示背景的滚动速度为正常滚动速度的0.3倍。如果值为小数时最好在样式表中设置

小知识

1.背景图的百分比

.box {
width: 1000px;
height: 500px;
border: 1px solid #ccc; /* 背景图大小/
background: url("…/cart/images/06-bg.png") no-repeat 25% bottom / 1200px 300px;
/1.背景图的百分比不是按照容器的大小去换算的 注意：：：/
/*2.百分比的背景定位：基于 容器的宽度-背景的宽度 /
/3.计算公式 背景的x的定位 = （容器的宽度-背景的宽度 ） 百分比/
}

2.transform: 。。。。;转换后层级会提升

3.旋转移动要先移动后旋转，否则X、Y轴方向会发生改变

/*             移动              旋转          缩放*/
transform: translateY(500px) rotate(10deg) scale(0.4);

4.在移动断调用虚拟键盘的时候 enter键变成 搜索按钮

 <!--在移动断调用虚拟键盘的时候 enter键变成 搜索按钮 -->
                <form action="#">
                    <input type="search" placeholder="搜索你喜欢的商品">
                </form>

HTML5

语义化标签兼容问题及条件注释

兼容插件下载

html5shiv.js

文档

   <!--引用要在头部引用 -->
	<!--[if lte IE 8]>
        <script src="html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<!--1.语义化标签的作用-->
<!--1.1 从开发角度考虑是提高代码的可读性可维护性-->
<!--1.2 网站的发布者：seo 搜索引擎优化 -->

<!--2.语义化标签的兼容问题-->
<!--2.1 IE9以下不支持H5标签（大部分css3属性，一些H5的api）-->
<!--2.2 IE9以下不认识，把这些标签当做行内元素去看待-->
<!--2.3 语义化标签需要动态创建 document.createElement('header') 同时设置块级元素-->
<!--2.4 有一款插件能帮你完成这件事件  html5shiv.js   -->
<!--2.5 必须引入在头部，在页面结构之前，提前解析h5标签-->
<!--2.6 优化处理：支持H5标签的不需要加载，IE9以下不支持H5加载-->
<!--2.7 js判断客户的浏览器版本可以做到，但是不能做到js提前加载-->
<!--2.8 条件注释：网页的任何地方  根据浏览器版本去加载内容（html标签）-->
<!--2.9 固定语法  lt 小于  gt 大于  lte 小于等于  gte 大于等于 -->
<header>
1
</header>
<footer>
2
</footer>
<!--[if lt IE 9]>
    <h1>您的版本浏览器太低，请升级</h1>
<![endif]-->

H5事件委托

e.target

ul.onclick = function (e) {
	console.log(e.target)
}

data

一：getAttribute()方法


const getId = document.getElementById('getId');
// //getAttribute()取值属性
console.log(getId.getAttribute("data-id"));//122
console.log(getId.getAttribute("data-vice-id"));//11
// //setAttribute()赋值属性
getId.setAttribute("data-id","48");
console.log(getId.getAttribute("data-id"));//48

二：dataset()方法


//data-前缀属性可以在JS中通过dataset取值，更加方便
console.log(getId.dataset.id);//112
//data-vice-id连接取值使用驼峰命名法取值 
console.log(getId.dataset.viceId);//11
 
//赋值
getId.dataset.id = "113";//113
getId.dataset.viceId--;//10
 
//新增data属性
getId.dataset.id2 = "100";//100
 
//删除，设置成null，或者delete
getId.dataset.id2 = null;//null
delete getId.dataset.id2;//undefind

三：jquery data()方法


var id = $("#getId").data("id"); //122
var viceId = $("#getId").data("vice-id"); //11
//赋值
$("#getId").data("id","100");//100

四：jquery attr()方法


var id = $("#getId").attr("data-id"); //122
var viceId = $("#getId").attr("data-vice-id"); //11
//赋值
$("#getId").attr("data-id","100");//100

H5-dom扩展

获取元素
document.getElementsByClassName ('class'); 
//通过类名获取元素，以伪数组形式存在。

var Node = document.querySelector('li.className');
//通过CSS选择器获取元素，符合匹配条件的第1个元素。

document.querySelectorAll('ul li');
//查询id需要加#号 
// => NodeList(4) [li, li.active, li, li]
//通过CSS选择器获取元素，以伪数组形式存在。
类名操作
Node.classList.add('class'); 
//添加class

Node.classList.remove('class'); 
//移除class

Node.classList.toggle('class'); 
//切换class，有则移除，无则添加

Node.classList.contains('class'); 
//检测是否存在class
自定义属性

在HTML5中我们可以自定义属性，其格式如下data-*=""

<div id="demo" data-my-name="itcast" data-age="10">
<script>
/*
  Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，
  Node.dataset则存储了所有的自定义属性的值。
  */
var demo = document.querySelector(反馈);
//获取
//注：当我们如下格式设置时，则需要以驼峰格式才能正确获取
var name = demo.dataset['myName'];
var age = demo.dataset['age'];
//设置
demo.dataset['name'] = 'web developer';
<script/>

<body>
<!--
1.自定义属性  data-* 自定义属性
2.获取元素的自定义属性  jquery获取方式  $('div').data('自定义属性的名称)
3.自定义属性的名称是什么？ data-user==>user data-user-name==>userName
4.命名规则 遵循驼峰命名法
5.获取元素的自定义属性 h5的方式  dataset  自定义属性的集合
-->
<div data-user="wl" data-user-age="18"></div>
<script src="../3d切割轮播图/jquery.min.js"></script>
<script>
    var div = document.querySelector('div');
    /*jquery获取所有  $('div').data() */
    var set = div.dataset;
    /*jquery获取单个自定义属性  $('div').data('user')*/
    /*var user = set.user;
    var user = set['user'];*/

    /*jquery设置单个属性  $('div').data('user','gg')*/
    set.user = 'gg';

    /*jquery的data() 操作内存里的*/
    /*H5的dataset     操作dom里的*/

</script>
</body>
导航 history
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
历史相关api
history
history.back()  去上一条历史
history.forward() 去下一条历史
history.go(1) 相对当前  跳多少条记录   正 前走  负 后退
-->
<!--
H5新增一些
history.pushState();
history.replaceState();
window.onpopstate = function(){}
实现网页中常见的开发模式   单页面应用程序  single page application  SPA
什么单页面应用程序：在一个页面上实现网站的大部分功能
实现的方案：1：哈希 hash (路由)  2: 历史追加   特点：改变地址栏是不会跳转的
-->
<!--
ajax渲染
优点：性能更好，提高用户体验
缺点：不利于seo,搜索引擎收录的网页源码

解决方案：同时会去更改地址栏 （地址栏在服务端一定有对应的页面）
-->
<button class="btn1">追加历史</button>
<button class="btn2">替换当前历史</button>
<script>
    document.querySelector('.btn1').onclick = function () {
        /*1.存数据  null*/
        /*2.存标题  null*/
        /*3.追加的历史记录的地址*/
        history.pushState(null,null,'test.html');
    }
    document.querySelector('.btn2').onclick = function () {
        /*1.存数据  null*/
        /*2.存标题  null*/
        /*3.替换的历史记录的地址*/
        history.replaceState(null,null,'test.html');
    }

    window.onpopstate = function(){
        /*监听历史切换事件*/
        /*当前地址 没有包括域名*/
        console.log(location.pathname);
    }
</script>
</body>
</html>
导航（带her参数）
 location.href = 'searchList.html?key='+key;
监听切换历史事件

window.onpopstate

/*1.ajax异步加载 渲染页面*/
/*2.渲染什么页面需要和后台提供的地址保持一致*/
/*3.切换历史渲染页面*/
$(function () {
    $('.wrapper').on('click','a',function () {
        //渲染页面  页面标识
        var page = $(this).parent().data('page');
        render(page);
        /*地址保持一致*/
        /*追加地址  而且这个地址后台一定要存在*/
        var historyUrl = $(this).attr('href');
         /*地址栏追加相应地址  而且这个地址后台一定要存在*/
        history.pushState(null,null,historyUrl);
        return false;
    });
    /*监听切换历史*/
    window.onpopstate = function () {
        /*获取切换后地址栏信息*/
        console.log(location.pathname);
        /*根据信息判断需要加载什么页面的内容*/
        var pathname = location.pathname;
        var page = 'index';
        /*判断地址*/
        if(pathname.indexOf('index.php') > -1 ){
            page = 'index';
        }else if(pathname.indexOf('my.php') > -1){
            page = 'my'
        }else if(pathname.indexOf('friend.php') > -1){
            page = 'friend';
        }
        render(page);
    }
});
var render = function (page) {
    /*怎么调用ajax 请求方式  请求地址  请求参数  返回数据结构和意义 */
    /*发出请求*/
    $.ajax({
        type:'get',
        url:'api/data.php',
        data:{
            page:page
        },
        dataType:'json',
        success:function (data) {
            /*渲染页面*/
            /*选中样式*/
			// 属性选择器
            $('[data-page]').removeClass('now');
            /*data返回了当前页面的标识*/
            /*属性选择器$('[data-name]')*/
            $('[data-page="'+data.page+'"]').addClass('now');
            /*网页内容*/
            $('.content').html(data.html);
        }
    });
}
drag拖拽事件
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖拽</title>
	<style>
		body {
			padding: 0;
			margin: 0;
			background-color: #F7F7F7;
			position: relative;
		}

		.box {
			width: 150px;
			height: 150px;
			background-color: yellow;
			position: absolute;
			top: 100px;
			left: 50px;
		}

		.container {
			width: 300px;
			height: 300px;
			background-color: green;
			position: absolute;
			top: 100px;
			left: 50%;
			margin-left: -150px;
		}
	</style>
</head>
<body>
    <!-- 给要拖拽的div元素添加draggable='true' -->
	<div class="box" draggable="true"></div>
	<div class="container"></div>

	<script>
		var box = document.querySelector('.box');
		var container = document.querySelector('.container');

		// 整个拖拽都会执行
		box.addEventListener('drag', function (e) {
			console.log('drag');
		});

        // 拖拽的点离开当前盒子
		box.addEventListener('dragleave', function () {
			console.log('dragleave');
		});

		// 拖拽开始
		box.addEventListener('dragstart', function () {
			this.style.backgroundColor = 'red';
			console.log('dragstart')
		});

		// 拖拽结束
		box.addEventListener('dragend', function (ev) {
			this.style.backgroundColor = '';
			console.log('dragend');
		});


		//在目标元素上移动
		container.addEventListener('dragover', function (e) {
			this.style.backgroundColor = 'yellow';
            console.log('目标dragover');
			e.preventDefault();
		});

		//在目标元素松开
		container.addEventListener('drop', function (e) {
			this.style.backgroundColor = 'black';
			console.log('目标drop');
			e.preventDefault();
		});
        //在目标元素离开
        container.addEventListener('dragleave', function (e) {
            this.style.backgroundColor = '';
            console.log('目标dragleave');
            e.preventDefault();
        });
	</script>
</body>
</html>

H5-新增API

全屏方法

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

  • Node.requestFullScreen() 开启全屏显示
  • Node.cancelFullScreen() 关闭全屏显示
  • 由于其兼容性原因，不同浏览器需要添加前缀如：
    webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。
    Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。
  • document.fullScreen检测当前是否处于全屏
    不同浏览器需要添加前缀
    document.webkitIsFullScreen、document.mozFullScreen
<div class="box">
    <video width="500" src="video/trailer.mp4"></video>
</div>
<button class="btn1">全屏</button>
<button class="btn2">取消全屏</button>
<script>
    document.querySelector('.btn1').onclick = function () {
        /*全屏操作*/
        /*每一个元素都有全屏方法*/
        /*H5的api存在兼容问题*/
        /*在IE9以下不支持  加也没有用*/
        /*但是在高级浏览器新版本支持，但是需要加上私有前缀*/
        /*私有前缀：css (-webkit-,-moz-,-ms-,-o-) */
        /*在js当中也有私有前缀  在方法属性之前加上就可以  首字母大小*/
        //document.querySelector('video').webkitRequestFullScreen();

        /*页面文档全屏*/
        //document.querySelector('body').webkitRequestFullScreen();
        document.documentElement.webkitRequestFullScreen();
        //document.querySelector('.box').webkitRequestFullScreen();
    }
    document.querySelector('.btn2').onclick = function () {
        /*取消全屏   跟元素没有关系*/
        document.webkitCancelFullScreen();
    }
多媒体

video.

/因为api是属于原生的dom元素的/

自定义播放器

方法

方法描述
addTextTrack()向音频/视频添加新的文本轨道
canPlayType()检测浏览器是否能播放指定的音频/视频类型
load()重新加载音频/视频元素
play()开始播放音频/视频
pause()暂停当前播放的音频/视频

属性

属性描述
audioTracks返回表示可用音轨的 AudioTrackList 对象
autoplay设置或返回是否在加载完成后随即播放音频/视频
buffered返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller返回表示音频/视频当前媒体控制器的 MediaController 对象
controls设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin设置或返回音频/视频的 CORS 设置
currentSrc返回当前音频/视频的 URL
currentTime设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted设置或返回音频/视频默认是否静音
defaultPlaybackRate设置或返回音频/视频的默认播放速度
duration返回当前音频/视频的长度（以秒计）
ended返回音频/视频的播放是否已结束
error返回表示音频/视频错误状态的 MediaError 对象
loop设置或返回音频/视频是否应在结束时重新播放
mediaGroup设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）
muted设置或返回音频/视频是否静音
networkState返回音频/视频的当前网络状态
paused设置或返回音频/视频是否暂停
playbackRate设置或返回音频/视频播放的速度
played返回表示音频/视频已播放部分的 TimeRanges 对象
preload设置或返回音频/视频是否应该在页面加载后进行加载
readyState返回音频/视频当前的就绪状态
seekable返回表示音频/视频可寻址部分的 TimeRanges 对象
seeking返回用户是否正在音频/视频中进行查找
src设置或返回音频/视频元素的当前来源
startDate返回表示当前时间偏移的 Date 对象
textTracks返回表示可用文本轨道的 TextTrackList 对象
videoTracks返回表示可用视频轨道的 VideoTrackList 对象
volume设置或返回音频/视频的音量

事件

事件描述
abort当音频/视频的加载已放弃时
canplay当浏览器可以播放音频/视频时
canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时
durationchange当音频/视频的时长已更改时
emptied当目前的播放列表为空时
ended当目前的播放列表已结束时
error当在音频/视频加载期间发生错误时
loadeddata当浏览器已加载音频/视频的当前帧时
loadedmetadata当浏览器已加载音频/视频的元数据时
loadstart当浏览器开始查找音频/视频时
pause当音频/视频已暂停时
play当音频/视频已开始或不再暂停时
playing当音频/视频在已因缓冲而暂停或停止后已就绪时
progress当浏览器正在下载音频/视频时
ratechange当音频/视频的播放速度已更改时
seeked当用户已移动/跳跃到音频/视频中的新位置时
seeking当用户开始移动/跳跃到音频/视频中的新位置时
stalled当浏览器尝试获取媒体数据，但数据不可用时
suspend当浏览器刻意不获取媒体数据时
timeupdate当目前的播放位置已更改时
volumechange当音量已更改时
waiting当视频由于需要缓冲下一帧而停止
地理定位

在HTML规范中，增加了获取用户地理信息的API，
这样使得我们可以基于用户位置开发互联网应用，
即基于位置服务 (Location Base Service)

  • 获取当前地理信息
navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
  • 重复获取当前地理信息
navigator. geolocation.watchPosition(successCallback, errorCallback)

  • 当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
    position.coords.latitude纬度
    position.coords.longitude经度
    position.coords.accuracy精度
    position.coords.altitude海拔高度

  • 当获取地理信息失败后，会调用errorCallback，并返回错误信息error

  • 在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。

    /*判断浏览器是否支持 navigator.geolocation*/ 
if(navigator.geolocation){
	/*在桌面浏览器使用geolocation会遇到网络阻塞问题 （国内政策）*/
        /*getCurrentPosition 获取当前定位信息 */
        navigator.geolocation.getCurrentPosition(function (position) {
            /*获取定位信息成功*/
            /*position 定位信息对象*/
            /*position 属性 coords 坐标对象*/
            /*coords 有 经纬度 海拔 ... */
            /* latitude 维度  longitude 经度 */

        },function(PositionError){
            /*获取定位信息失败*/
            /*PositionError 失败信息*/
        })
    }

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Geolocation</title>
    <style type="text/css">
        html,body {
            height: 100%
        }
        body {
            margin: 0;
            padding: 0;
        }
        #container {
            height: 100%
        }
    </style>
</head>
<body>
<div id="container"></div>
<!-- 引入百度javascript版 API -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=	0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>

    /*h5  geolocation */
    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(function (position) {
            /*获取定位成功回调函数*/
            /*定位数据*/
            console.log(position);
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;

            // 这些都是写死
            var map = new BMap.Map("container"); // container表示显示哪个容器
            // 把经度纬度传给百度
            /*40.1691162668,116.6348530780*/
            var point = new BMap.Point(longitude, latitude);
            //默认的比例
            map.centerAndZoom(point, 20);
            //添加鼠标滚动缩放
            map.enableScrollWheelZoom();
            // 只写上面三行就可出现地图了，并且会定位
            // 定义好了一个图片标记
            var myIcon = new BMap.Icon("1.png", new BMap.Size(128, 128));
            // 创建标注
            var marker = new BMap.Marker(point, {icon: myIcon});
            map.addOverlay(marker);
            //点击地图，获取经纬度坐标
            map.addEventListener("click",function(e){
                console.log("经度坐标："+e.point.lng+" 纬度坐标："+e.point.lat);
            });
        }, function (error) {
            /*获取定位失败回调函数*/
            /*失败原因*/
            console.log(error)
        });
    }


</script>
</body>
</html>
本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，
同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，
HTML5规范提出了相关解决方案。

  • 特性

    • 设置、读取方便
    • 容量较大，sessionStorage约5M、localStorage约20M
    • 只能存储字符串，可以将对象JSON.stringify() 编码后存储

  • window.sessionStorage

    • 生命周期为关闭浏览器窗口
    • 在同一个窗口(页面)下数据可以共享

  • window.localStorage

    • 永久生效，除非手动删除（服务器方式访问然后清除缓存）
    • 可以多窗口（页面）共享

  • 方法

    • setItem(key, value) 设置存储内容
    • getItem(key) 读取存储内容
    • removeItem(key) 删除键值为key的存储内容
    • clear() 清空所有存储内容

  • 存储对象或数组时

    • 存储时转json为字符串

      • window.localStorage.setItem("data",JSON.stringify(data));

    • 取值时转换回来

      •  JSON.parse(window.localStorage.getItem("data"));
历史管理

提供window.history，对象我们可以管理历史记录，
可用于单页面应用，Single Page Application，可以无刷新改变网页内容。

  • pushState(data, title, url) 追加一条历史记录
    • data用于存储自定义数据，通常设为null
      ​+ title网页标题，基本上没有被支持，一般设为空
      ​+ url 以当前域为基础增加一条历史记录，不可跨域设置
  • replaceState(data, title, url) 与pushState()基本相同，
    不同之处在于replaceState()，只是替换当前url，不会增加/减少历史记录。
  • onpopstate事件，当前进或后退时则触发
离线应用

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。

  • 优势
    • 1、可配置需要缓存的资源
    • 2、网络无连接应用仍可用
    • 3、本地读取缓存资源，提升访问速度，增强用户体验
    • 4、减少请求，缓解服务器负担
  • 缓存清单
    • 一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名
    • 例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest=“demo.appcache”，路径要保证正确。
  • manifest文件格式
    • 1、顶行写CACHE MANIFEST
    • 2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
    • 3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
    • 4、FALLBACK: 换行 当被缓存的文件找不到时的备用资源
  • 其它
    • 1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
    • 2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制
    • 3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
    • 4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存
文件读取

HTML5新增内建对象，可以读取本地文件内容。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文件读取</title>
</head>
<body>
	<input type="file" class="file" multiple>
	<!--<select name="" id="">
		<option value=""></option>
	</select>-->
	<img src="" alt="" id="img">
	<script>
		/*获取到了文件表单元素*/
		var file = document.querySelector('.file');
		/*选择文件后触发*/
		file.onchange = function () {
			/*初始化了一个文件读取对象*/
			var reader = new FileReader();
			/*读取文件数据  this.files[0] 文件表单元素选择的第一个文件 */
			reader.readAsDataURL(this.files[0]);
			/*读取的过程就相当于 加载过程 */
			/*读取完毕  预览 */
			reader.onload = function () {
			    /*读取完毕 base64位数据  表示图片*/
			    console.log(this.result);
				document.querySelector('#img').src = this.result;

			}
		}
	</script>
</body>
</html>
网络状态

  • 我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值

    • window.online用户网络连接时被调用
    • window.offline用户网络断开时被调用
    // 通过window.navigator.onLine可以返回当前的网络状态
		alert(window.navigator.onLine);

		window.addEventListener('online', function () {
			//alert('online');
			$('.tips').text('网络已连接').fadeIn(500).delay(1000).fadeOut();
		});

		window.addEventListener('offline', function () {
			//alert('offline');
			$('.tips').text('网络已断开').fadeIn(500).delay(1000).fadeOut();
		});

border-image

img

.box:first-child{
            /*border-image: url("images/border01.jpg") 167/20px round;*/
            /*1.在内容变化的容器可以使用，边框自动填充*/
            /*2.用法：*/
            /*2.1 图片资源*/
            border-image-source: url("images/border01.jpg");
            /*2.2 切割的尺寸 默认的单位px 而且不能使用小数*/
            /*2.2.1 切割的位置距离对应的边的距离  切了四刀   4个切割的尺寸*/
            border-image-slice: 167;/*167 167 167 167*/
            /*2.3 边框的宽度*/
            border-image-width: 20px;
            /*2.4 平铺的方式  三种平铺方式 round stretch repeat*/
            /*round 环绕 完整的自适应（等比缩放）平铺在边框内*/
            /*stretch 拉伸 拉伸显示在边框内容 变形的*/
            /*repeat 平铺 从边框的中间向两侧平铺 自适应平铺但是不是完整的*/
            border-image-repeat: round;

        }
        .box:nth-child(2){
            border-image: url("images/border01.jpg") 167/20px stretch;
        }
        .box:last-child{
            border-image: url("images/border01.jpg") 167/20px repeat;
        }

img

nction () {
//alert(‘offline’);
$(’.tips’).text(‘网络已断开’).fadeIn(500).delay(1000).fadeOut();
});




## border-image

![img](https://img-blog.csdnimg.cn/2020052516083267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExNDQxNQ==,size_16,color_FFFFFF,t_70)

```css
.box:first-child{
          /*border-image: url("images/border01.jpg") 167/20px round;*/
          /*1.在内容变化的容器可以使用，边框自动填充*/
          /*2.用法：*/
          /*2.1 图片资源*/
          border-image-source: url("images/border01.jpg");
          /*2.2 切割的尺寸 默认的单位px 而且不能使用小数*/
          /*2.2.1 切割的位置距离对应的边的距离  切了四刀   4个切割的尺寸*/
          border-image-slice: 167;/*167 167 167 167*/
          /*2.3 边框的宽度*/
          border-image-width: 20px;
          /*2.4 平铺的方式  三种平铺方式 round stretch repeat*/
          /*round 环绕 完整的自适应（等比缩放）平铺在边框内*/
          /*stretch 拉伸 拉伸显示在边框内容 变形的*/
          /*repeat 平铺 从边框的中间向两侧平铺 自适应平铺但是不是完整的*/
          border-image-repeat: round;

      }
      .box:nth-child(2){
          border-image: url("images/border01.jpg") 167/20px stretch;
      }
      .box:last-child{
          border-image: url("images/border01.jpg") 167/20px repeat;
      }

[外链图片转存中...(img-1eSVFun0-1566353279281)]

img

-SkyBlue-
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5C3高频知识点总结（H5C3、圣杯布局、弹性盒模型、浮动、定位）
qq_50906507的博客
11-20 966
H5C3高频知识点总结
h5前端学习笔记
03-21
【标签】"h5"、"前端"、"学习笔记"进一步明确了内容的重点。"h5"即HTML5，是前端开发的核心；"前端"意味着这些笔记涉及的是用户可见和交互的部分，包括网页设计和用户体验；"学习笔记"则提示我们，资料可能以教程、...
H5C3教程
无糖加冰
01-06 1133
H5C3教程 文章目录H5C3教程HTML5简介什么是HTML5?HTML5 是如何起步的？HTML5浏览器支持HTML5 语义元素HTML5 表单元素HTML5 表单属性HTML5 新的 Input 类型HTML5 Video(视频)HTML5 Audio(音频)HTML5内联SVGHTML5 MathMLHTML5 拖放（Drag 和 Drop）HTML5 Geolocation（地理定位）HTML5 Web 存储HTML5 Web SQL 数据库HTML5 应用程序缓存HTML5 Web Worker
web入门之H5C3
weixin_43079274的博客
05-09 572
HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div> <div class=“nav”> </div> <div class=“con
H5C3常见知识点总结
qq_59185329的博客
11-20 693
H5C3常见知识点总结
H5C3新特性简单总结
南风的博客
02-06 3830
H5C3新特性简单总结
h5c3动画例子
01-02
使用html5+css3完成的网页设计作品
H5C3面试题.docx
03-29
H5C3 面试题 本文总结了 H5C3 面试题的知识点，涵盖了 CSS3 的新特性、边框、阴影、2D/3D 转换、过渡、动画、弹性盒子、媒体查询、响应式布局的优缺点、C3 动画的八大参数、标签语义化等方面的知识。 一、CSS3 新...
PHP个人学习笔记
03-13
PHP个人学习笔记
h5c3新增标签及用法
10-20
html5 css3中新增的属性事件 新增DOM选择和操作样式、 网络监听接口、全屏接口；CSS3中 transition过渡 、transform二维变换、transform3D转换、动画animation、伸缩布局等等
基于H5C3的简单聊天页面的实现
02-21
简单的在线沟通系统页面的实现，没有实现功能，可以作为初学者的教学文本
H5C3常用知识点
liuliuhhxxttxs的博客
11-20 631
background-clip：border-box（默认）/padding-box（不占边框）/content-box （不占边框和内边距）过渡的时间速度曲线：transition-timing-function:ease（默认慢快慢）/linear（匀速）；动画的时间速度曲线：animation-timing-function:ease（默认慢快慢）/linear（匀速）；background-orign：border-box /padding-box（默认）/content-box。
H5C3常用技巧总结(必看)
程序猿小九九的博客
03-08 584
父盒子塌陷问题、块元素、行内元素、行内块元素的特性、盒子居中、body的常用基础设置等
H5C3基础学习总结之CSS三大特性
程序猿小九九的博客
02-02 301
目录 CSS三大特性 层叠性 继承性 优先级 盒子模型 边框(border) 内边距（padding） 外边距（margin） 外边距典型应用 外边距合并 嵌套块元素垂直外边距的塌陷 相邻块元素垂直外边距的合并 清除内外边距 CSS三大特性 CSS有三个非常重要的特性：层叠性、继承性、优先级。 层叠性 层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。 比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，.
前端知识总结之H5C3篇
weixin_33672109的博客
05-30 831
一. H5新增了以下的几大类元素: 内容元素: header , nav , footer , section 表单控件: calender , date , time , email , url , search 本地存储: localStorage 长期存储数据,浏览器关闭后数据不会丢失, SessionStorage 数据在浏览器关闭之后自动删除 媒介播放: video , audio 绘...
移动端WEB开发之响应式布局和bootstrap的介绍
zh_hunan的博客
11-05 544
响应式开发原理 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 响应式布局容器 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。 bootstrap的介绍 Bootstrap框架：顾名思义就...
纯H5+C3实现后台管理页面布局效果
kilig
08-08 1228
后台管理系统页面布局的特点 1)头部导航栏位置固定，高度固定、宽度自适应 2)内容部分宽度高度自适应，高度为页面高度的剩下部分（除了头部导航栏剩下的部分保证全屏铺满，不出滚动条） 实现代码 分析说明： html和body元素给高100%，然后content高设置100%就可以铺满整个页面， 给导航栏nav_top 10%的高度，宽度100%，导航栏就撑满浏览器宽度并且显示在内容盒子content顶部。再给html和body设置外边距为0，overflow：hidde，此时整个页面全屏被content铺满。
H5C3
valentinelzt的博客
03-24 134
h5新增语义化标签 header头部标签 nav导航标签 article内容标签 section块级标签 aside侧边栏标签 footer尾部标签 语义化标签注意事项 语义化标签主要针对搜索引擎 可以使用一次或者多次 在IE9浏览器中，需要把语义化标签都转换为块级元素 语义化标签，在移动端支持比较友好 h5音视频标签 audio音频标签 video视频标签 注意事项 audio 1、...
html5/css3响应式布局介绍
CNM3333的专栏
09-16 1089
html5/css3响应式布局介绍及设计流程，利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 一个普通的自适应显示的三栏网页，当你用不同的终端来查看这个页面的时候，他会根据几种终端来显示不同的样式，在电脑上是三列，在pad上应该也是 三列，在大屏手机上是三行，在屏幕小于320的手机
h5c3写一个登录页面
最新发布
03-13
我可以回答这个问题。要编写一个登录页面，你需要使用HTML5和CSS3来创建页面布局和样式。你还需要使用JavaScript来实现用户登录和验证功能。...在验证成功后，可以将用户重定向到另一个页面或显示欢迎消息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值