H5_Day1
一、underscore函数库
对外暴露_
<script>
//随机数法：_.random(a,b);返回一个[a,b]区间内的随机数；原生的方法：Math.random(),[0,1]之间的一个随机数
console.log(_.random(1,40));
//计算数组中的最大值:_.max();返回一个数组中的最大值
console.log(_.max([1,2,3,4,5,6,7]));
//计算数组中的最小值：_min();返回一个数组中的最小值
console.log(_.min([1,2,3,4,5,6,7]));
//数组去重：_uniq();返回一个数组，去掉其中重复的元素
console.log(_.uniq([1,1,2,2,3,3,3,3,4]));
//对JSON的操作
var xiaoming = {
name : "xiaoming",
age : 18,
sex : "男"
}
console.log(_.keys(xiaoming));
console.log(_.values(xiaoming));
</script>
二、jQueryUI函数库
概述：jQueryUI也是前端当中比较常用的一个JS函数库。切记：当前这个函数库依赖JQ。
也就是说当你使用jQueryUI函数库功能之前，务必先引入JQ。jQueryUI函数库它主要的作用是可以轻轻松松实现一些网页效果：拖拽、折叠卡片等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src = "jQuery.js"></script>
<script src = "jquery-ui.min.js"></script>
</head>
<body>
<div class = "cur">
<p>请拖拽我</p>
</div>
<ul class = "box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<script>
//利用jQueryUI实现拖拽效果
$(".cur").draggable();
//利用jQueryUI完成排序拖拽效果
$(".box").sortable();
</script>
三、HTML5
3.1、概述
l 新的骨架
l 新增了很多的语义化标签：header、footer、main、nav等等
l 新增多媒体功能【视频、音频】
l 新增画布【canvas】功能：可以实现一些小游戏
l 背景系列样式、选择器、新增动画功能【不仅仅可以实现2D动画、3D动画也可以实现】
l 新增存储功能【本地存储、会话存储】
l 新增移动端开发等等
总结：HTML5：HTML5就是超文本标记语言第五次重大修改。
需要注意：这次重大修改当中：结构层、样式层、行为层
3.2HTML5兼容问题
概述：超文本标记语言的第五次重大修改当中，新增的知识点一共555个。需要注意一件事情，不同的浏览器厂商对于新增的知识点兼容情况各不相同。
浏览器厂商：谷歌、IE、火狐、欧朋等等。
查询不同浏览器厂商兼容个数:https://html5test.com/results/desktop.html
不同浏览器厂商兼容知识点个数不同：但是谷歌浏览器兼容相对而言最好的。
查询某一个知识点的兼容情况:https://caniuse.com/
3.3、新的骨架
<!DOCTYPE html>
<!-- DTD:文档声明方式，这行代码可不是标签 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 清除默认样式 */
*{
margin:0;
padding: 0;
}
div{
width:100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>标签可以省略自身的type属性</div>
<input/>
<img src=./img/1.jpg alt="">
</body>
</html>
<script>
alert(123)
</script>
l 标签可以省略type属性。
l 在HTML5新的骨架下，标签的属性值可以省略双引号。
l 新的骨架下的注意事项知道即可，书写习惯还是按照我们以前的习惯书写即可。
3.4布局标签
概述：在前面课程当中，我们学习了很多布局标签【大纲标签】比如：div、p等等。在超文本标记语言第五次重大修改当中，又新增了一些布局标签【七个】，都是双闭合标签、都是块元素。这七个布局标签使用方式与div是一样的。
l 新增了一共七个布局标签、都是双闭合标签、都是块元素、使用方式方法和以前的div是一样的。
l 七个布局标签：header、footer、nav（导航）、main（主体）、aside（侧边栏）、section（段落）、article（文章）。
l 七个语义化标签浏览器底层在进行解析的时候速度会快一些，有助于网站优化。
3.5小语义标签
3.5.1、address标签
作用：利用这个标签在网站中显示地址
地图生成器:http://api.map.baidu.com/mapCard/
<address>北京天安门</address>
<address>
<iframe width="504" height="967" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://j.map.baidu.com/s/_d3IFb"></iframe>
</address>
address的文本是倾斜的
会使用百度地图的地图名片生成器
3.5.2、bdo标签
作用：通过修改dir属性的值ltr或者rtl来设置文本的方向。
<bdo dir="rtl">wozuishuai</bdo>
3.5.3、cite标签
若引用名人名言等，可以用这个标签
同样的，cite中的文本有一些倾斜。
<div>
举头望明月，低头思故乡。
<cite>李白</cite>
</div>
3.5.4、code标签
作用：在网站中显示一些代码可以用code标签来显示
<code>var a = 100;</code>
3.5.5details标签和summary标签
details标签一般结合summary标签一起使用，主要作用是阐述、解释某一些名词的作用。
效果类似于折叠卡片，点击三角形按钮可以展开或者收起。
<details>
<summary>长城</summary>
<p>长城（The Great Wall），又称万里长城，是中国古代的军事防御工事，是一道高大、坚固而且连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。
长城修筑的历史可上溯到西周时期，发生在首都镐京（今陕西西安）的著名典故“烽火戏诸侯”就源于此 [1-6] 。春秋战国时期列国争霸，互相防守，长城修筑进入第一个高潮，但此时修筑的长度都比较短。秦灭六国统一天下后，秦始皇连接和修缮战国长城，始有万里长城之称 [6] 。明朝是最后一个大修长城的朝代，今天人们所看到的长城多是此时修筑。 [7]
长城资源主要分布在河北、北京、天津、山西、陕西、甘肃、内蒙古、黑龙江、吉林、辽宁、山东、河南、青海、宁夏、新疆这15个省区市。其中河北省境内长度2000多千米，陕西省境内长度1838千米 [8-16] 。根据文物和测绘部门的全国性长城资源调查结果，明长城总长度为8851.8千米，秦汉及早期长城超过1万千米，总长超过2.1万千米。 [17] 现存长城文物本体包括长城墙体、壕堑/界壕、单体建筑、关堡、相关设施等各类遗存，总计4.3万余处（座/段）。 [18]
1961年3月4日，长城被国务院公布为第一批全国重点文物保护单位 [19] 。1987年12月，长城被列入世界文化遗产 [20] 。2020年11月26日，国家文物局发布了第一批国家级长城重要点段名单 [21] 。</p>
</details>
3.5.6、pre标签
预保留格式：文本怎么复制的格式，就怎么显示这个格式
<pre>
asdj sjoajo1 ajij
ss ad
ssssss
</pre>
空格，回车等一些格式会原封不动的加载在网页中
3.5.7、ruby标签
经常结合rt标签（标签里面放汉语拼音）一起使用，作用是给汉语加上汉语拼音
<ruby>
我爱你<rt>wo ai ni</rt>
</ruby>
3.5.8、template标签
在vue框架中会出现。
在template标签中的内容（文本，内部子元素）默认不显示。
<template>
woshi123
<h1>123</h1>
</template>
3.6、新增的表单元素
作用：收集用户输入的信息，已经学习的表单元素：text radio checkbox button等，在HTML5中，新增了九个表单元素
<body>
<form action="">
<p>
你的身高: <input type="range" min = "150" max = "200" value = "190">
<!-- vaule代表初始值 -->
</p>
<p>
你喜欢的颜色： <input type="color">
</p>
<p>
日期： <input type="date">
</p>
<p>
当前是这年第几周： <input type="week">
</p>
<p>
时间： <input type="time">
</p>
<p>
你的邮箱： <input type="email">
<input type="submit">
<!-- 在提交时若不是邮箱格式会提示 -->
</p>
<p>
你经常查看的网站： <input type="url">
<input type="submit">
<!-- 在提交时如果不是网站格式会提示 -->
</p>
<p>
搜索框： <input type="search">
<!-- 在框的后面有个叉叉，可以点击清除框内所有文本 -->
</p>
<p>
计数器： <input type="number" step = "0.5">
<!-- 通过step属性可以设置每一次点击改变的数值大小，默认step值为1 -->
</p>
</form>
</body>
form标签有一个常用属性action，作用是设置表单元素提交的地址
3.6.1表单元素新增的属性
概述：在前面课程当中我们已经学习过了很多表单元素，以及我们也掌握了一些表单元素常用属性：type、value等等。在这次超文本标记语言第五次重大修改当中，表单元素还是新增很多的属性、除此之外还新增的一些标签可以结合表单元素一起使用。
<form action="">
<p>
<input type="text" placeholder = "请你输入你的密码">
<!-- placeholder，占位符，结合文本框一起使用，在输入文本之前会提示，在输入文本后会自动消失 -->
</p>
<p>
<input type="text" disabled>
<!-- disabled，不可使用，结合任意表单元素，表示当前的表单元素不能使用 -->
</p>
<p>
<input type="text" aotufocus>
<!-- aotufocus，自动聚焦，结合文本框一起使用，控制光标的闪动 -->
</p>
<p>
<input type="text" readonly>
<!-- readonly，只能读不能写，结合文本框一起使用，表示该表单元素只能读 -->
</p>
</form>
注意事项：超文本标记语言第五次重大修改当中、还新增了一些标签可以结合表单元素一起使用
<label>
<input type="checkbox">吃饭
</label>
<!-- 当鼠标点击文字时，表单元素也会给出响应，注意label标签不能有for属性值，不然会导致功能失效 -->
<input type="text" list = "box">
<datalist id = "box">
<option>js</option>
<option>vue</option>
</datalist>
input和datalist的属性值必须一致。
效果类似于一个下拉菜单
3.7、实战调色板
<script>
var json = {
r:0,
g:0,
b:0
}
$("input:eq(0)").on("input",function(){
json.r = $(this).val();
$(this).siblings().html(json.r);
$(".box").css({
"background":`rgb(${json.r},${json.g},${json.b})`
});
});
//在js中利用rgb给盒子设置背景颜色时要注意：
//1.rgb要用``而不是“”，这个符号在tab上面
//2.在传json的数值时，要用${json.r}
$("input:eq(1)").on("input",function(){
json.g = $(this).val();
$(this).siblings().html(json.r);
$(".box").css({
"background":`rgb(${json.r},${json.g},${json.b})`
});
});
$("input:eq(2)").on("input",function(){
json.b = $(this).val();
$(this).siblings().html(json.r);
$(".box").css({
"background":`rgb(${json.r},${json.g},${json.b})`
});
});
</script>
注意事项：
1.给范围条绑定事件时，用on（“input”，function（）{}），代表范围条（或者其他表单元素的值）的value值发生变化时立即执行函数
2.在js中用rgb给盒子设置背景颜色时，rgb用``而不是双引号，这个符号在tab上面；在传json的数据时，要用${json.r}这种格式
3.用val（）方法来获取value的值
四：视频与音频
4.1视频
概述：在HTML5中，新增双闭合标签video可以展示视频
注意：video标签只支持mp4格式、ogg格式、webM格式。
video标签不是行内元素，是双闭合标签，有默认宽高300*150，视频默认不播放。
video标签需要通过src属性去引入视频的路径【相对路径和绝对路径都可以】。
controls属性，给视频添加控制条
poster属性，给视频引入封面，属性值是图片的路径，点击播放后就会消失
autoplay属性，自动播放，有兼容性问题，在谷歌浏览器中不能自动播放，在IE中可以
muted属性，静音播放，如果加入了muted属性的话，在谷歌浏览器中就可以自动播放
loop属性，视频循环播放。
outline：none；可以去除外部黑色边框。
在很多情况下，系统默认的控制条不能使用，这个时候需要我们自己在编写相关程序来达到控制条的效果。
<script>
var playbtn = document.querySelector(".play");
var pausebtn = document.querySelector(".pause");
var video = document.querySelector("video");
playbtn.onclick = function(){
video.play();
};
pausebtn.onclick = function(){
video.pause();
//还可以通过以下三个属性来操作视频的相关属性值
//操作视频的当前时长：currentTime属性
console.log(video.currentTime);
//操作视频的声音：volume属性，值只有三个0 0.5 1 表示声音的倍数
console.log(video.volume);
//获取视频的总时长：duration；
console.log(video.duration);
};
</script>
视频绑定的三个事件
//视频独有的三个绑定事件
//第一个，onplay事件，判断视频是否正在播放，如果在播放则立即调用一次函数
video.onplay = function(){
alert("我播放了");
};
//第二个：onpause事件，判断视频是否暂停，如果暂停则立即调用一次函数
video.onpause = function(){
alert("我暂停了");
};
//第三个：ontimeupdate事件，判断视频当前播放时间是否发生变化，若发生变化则立即调用一次
video.ontimeupdate = function(){
console.log(123);
};
4.2音频
概述：如果你想在你的项目中播放音乐，则用audio双闭合标签来实现
audio标签能够支持的音频格式：mp3，ogg、wav
src属性，可以导入路径来导入音频。
controls属性，给音频加入控制条。
muted属性，静音
autoplay属性，自动播放，谷歌浏览器不支持
loop属性，循环播放。
<audio src="../audio/1.mp3" controls muted autoplay loop></audio>
<script>
var playBtn = document.querySelector(".playBtn");
var pauseBtn = document.querySelector(".pauseBtn");
var audio = document.querySelector("audio");
playBtn.onclick = function(){
audio.play();
};
pauseBtn.onclick = function(){
audio.pause();
console.log(audio.currentTime);
console.log(audio.volume);
console.log(audio.duration);
};
// 音频同样可以绑定三个事件
// 判断是否开始播放时间
audio.onplay = function(){
alert("我播放了");
};
// 判断是否暂停
audio.onpause = function(){
alert("我暂停了");
};
// 判断是否正在播放音频
audio.ontimeupdate = function(){
console.log("我正在播放");
};
</script>
和视频几乎一致，音频没有poster属性。
五、浏览器的存储功能
在HTML5中，可以让浏览器存储一些重要信息的功能。浏览器存储分为两种，一种是本地存储【localStroage】、一种是会话存储【sessionStroage】
5.1、本地存储【localStroage】
可以通过localStroage对象的方法在浏览器中存储或者读取一些数据。
本地存储功能只能向浏览器中存储字符串类型的数据
<script>
//如果想在浏览器中持久化的存储数据，则选用本地存储------>localStroage
//调用localStroage的setItem方法，传的参数类似于JSON的KV对,特别注意本地存储只能存储字符串类型的数据
localStorage.setItem("info","首次尝试在浏览器中持久化存储数据");
//如果存储多条数据，其中数据的K是相同的则会发生覆盖,下面的123会覆盖掉前面的首次尝试在浏览器中持久化存储数据
localStorage.setItem("info","123");
localStorage.setItem("infos","xixi");
//如果非要存储引用类型的数据，比如JSON，那么可以调用JSON的stringify方法将JSON转化为字符串类型再进行存储,用这种方法存储的JSON数据在获取的时候并不是引用类型，而是字符串类型
localStorage.setItem("info1",JSON.stringify({"a":1}));
//读取浏览器中存储的数据
var result = localStorage.getItem("info");
console.log(result);
//获取到的字符串类型的JSON可以通过JSON的parse方法将其重新转化为JSON数据格式，然后就可以采用点语法进行数据的获取
var result1 = localStorage.getItem("info1");
console.log(JSON.parse(result1).a);
</script>
何为持久化存储：【网页关闭，电脑关机】都不会导致存储的数据消失，除非手动点击clear。
localStroage.setItem(K,V);可以进行存储数据，但是只能存储字符串类型的数据
localStroage.getItem(K);可以通过K读取到V的值
JSON是内置对象，可以运用他的stringify和parse方法将引用类型的数据转换为字符串和将引用类型字符串转化为引用类型
本地存储功能是有上限的，大概是5M左右。
本地存储功能的应用场景：一般用来存储一些重要的信息，比如用户名。本地存储的数据在同一域名下【不管是一级页面还是二级、三级】都可以共享使用本地存储的数据
5.2、会话存储功能【sessionStroage】
使用的方式和方法跟本地存储一样的，使用sessionStroage对象去实现的
<script>
//同样的，调用setItem方法来进行数据的会话存储,会话存储如果代码注释掉后，会话存储的数据就会丢失掉
sessionStorage.setItem("info","我是会话存储");
//调用getItem方法可以进行数据的读取
var result = sessionStorage.getItem("info");
console.log(result);
</script>
本地存储用的比会话存储多。
浙公网安备 33010602011771号