HTML5学习

算法之王underscore.js函数库

jQuery函数库用来操作DOM【节点】，underscore则封装了
许多算法功能。使用压缩版。

underscore对外暴露的是一个下划线函数_。

使用方法

//随机数方法
_.random(n,m);
//计算出数组最值
_.max([1,2,3,4,5,6]);
_.min([1,2,3,4,5,6]);
//数组去重
_.uniq([1,1,2,2,3,4,4,4,5]);
//JSON数据格式****
var xiaoming = {
	name:"小明",
	age:"18",
	sex:"man"
};
console.log(_.keys(xiaoming));
console.log(_.values(xiaoming));

特效之王jQueryUI函数库

依赖jQuery的一个函数库，需要引用jQuery，jQueryUI官网

//拖拽功能
$(".cur").draggable();//对类名为cur的拖拽
//排序拖拽
$(".box").sortable();

HTML5

新增了语义化标签：header、footer、main、nav、多媒体【视频、音频】、canvas、背景系列样式、选择器、动画功能【2D、3D】、存储功能【本地存储、会话存储】、移动端开发。在三大结构中都有新增。

1.HTML兼容问题

查询某个知识点的兼容情况caniuse

2.H5新的骨架

1.type属性可省略，如：style、input、script。
2.标签的属性值可省略引号。

3.新增7个布局标签

双标签、块级标签。浏览器解析时速度会快一些，有助于网站优化。

header头部

footer底部

main主要部分

nav导航标签

aside侧边栏标签

section分段

article文章

4.新增小语义化标签

address地址

文本倾斜。
地图生成器会产生地图相关代码，将代码放入address中即可。

bdo设置文本方向

属性：dir=>rtl/ltr【文本方向：从右到左/从左到右】

<bod dir="rtl">灰太狼</bod>//文本从右到左显示

cite引用

引用名人名言使用

<cite>李白</cite>

code 显示代码

detail阐述名词

结合summary使用。

<detail>
	<sunmmary>故宫</sunmmary>
	<p>
		北京故宫是中国明清两代的皇家宫殿，旧
		称紫禁城，位于北京中轴线的中心。北京
		故宫以三大殿为中心，占地面积约72万平
		方米，建筑面积约15万平方米，有大小宫
		殿七十多座，房屋九千余间。
	</p>
</detial>

pre预保留格式*

怎么复制粘贴，样式不变。

ruby添加拼音

结合rt标签使用

<ruby>
	我<rt>wo</rt>
	爱<rt>ai</rt>
	你<rt>ni</rt>
</ruby>

template

内部嵌套子元素不会显示

5.新增9个表单元素

form表单有个action属性，设置表单元素提交地址

range进度条

<form>
	<p>
		你的身高：<input type=rage min=150 max=200 value=180>		
	</p>
</form>

color选择颜色

<form>
	<p>
		你喜欢的颜色：<input type=color>		
	</p>
</form>

date日历

日历：<input type=date>	

week 周

这个月第几周：<input type=week>	

time时间

时间：<input type=time>	

email邮箱

邮箱地址：<input type=email>	

url 网址

网站地址：<input type=url>	

search搜索

搜索什么：<input type=search>	

numbei计数器

计数器：<input type=number step=0.5>	

6.表单新增属性

placeholder占位符

结合文本框使用，展示提示文字

<input type=text placeholder=请输入你的密码>

disabled不可使用

<input type=text placeholder=请输入你的密码 disabled>

autofocus自动聚焦

结合文本框使用，实现自动聚焦。

<input type=text placeholder=请输入你的密码 aotufocus>

readonly只读

结合文本框使用，实现文本框只读，无法输入新的文本

<input type=text placeholder=请输入你的密码 readonlys>

label

结合表单元素使用单复选，选中文字也可选中

<label>
		<input type=checkbox >读书
</label>

datalist下拉菜单

<input type=text list=box>
//list属性与datelist的id时一样的
<datalist id=box>
		<option>HTML</option>
		<option>CSS</option>
		<option>JS</option>
		<option>Vue</option>
</datalist>

7.实战

调色板

8.video视频、audio音频

video

支持视频格式：MP4、OGG【类似MP3】、webM【谷歌开发媒体文件】

video{
		outline:none;//去外边框
}

   //视频地址 控制条 海报封面图片路径 自动播放 静音 循环播放
<video scr="" controls poster="" autoplay muted loop></video>

自定义video播放页面

<video src=""></video>
<button class="play">play</button>
<button class="pause">pause</button>

var video = document.querySelector("video");
var playbtn =document.querySelector(".play");
var pausebtn =document.querySelector(".pause");
playbtn.onclick = function(){
	//播放视频
	video.play();
}
pausebtn.onclick = function(){
	//暂停视频
	video.pause();
	//currentTim获取播放时间
	console.log(video.currentTime);
	//duration获取视频总时长
	console.log(video.duration);
	//操作声音【0 0.5 1】
	console.log(video.volume);
	video.volume = 0.5;	
}
//*********************************************
//视频三个事件
//检测视频是否播放，播放则事件函数执行一次
video.onplay = function(){
		console.log(111);
}
//检测视频是否暂停，播放则事件函数执行一次
video.onpause = function(){
		console.log(111);
}
//如果视频当前播放时间发生变化，事件处理函数立即执行
video.ontimeupdate = function(){
		console.log("当前播放时间更新");
}

audio音频

使用方式和视频几乎一样，
常用音频格式：MP3、OGG、WAV
获取音频爱给网

    //   地址   进度条     静音  自动播放 循环播放
<audio src="" controls  muted autoplay loop></audio>

自定义audio音频按钮，同上视频方法、事件。使用audio,play()和audio.pause()

9.浏览器存储功能

本地存储localstroage

使用localstroage对象的方法，在浏览器中进行存储、读取，只能存储字符串类型数据
浏览器中持久存储数据，选择本地存储。

//输入以k-v对的形式，v只能是字符串
localstroage.setItem("info","首次向浏览器存储数据");
//存储JSON,将JSON转换为字符串
localstroage.setItem("k",JSON.stringify({"a":1}));
//将数据转换为引用类型
var a = [1,2,3,4,5];
JSON.parse(a);
//读取浏览器数据
localstroage.getItem("info");

应用场景：存储用户名【无论一级、二级、还是三级页面都可以使用】，

会话存储sessionStroage

会话存储使用方式、方法同上，但会话存储通过sessionstroage对象实现，且存储不持久，关掉网页就没了。

10.选择器

新增：
属性选择器、子类选择器、关系型选择器、伪类选择器、伪选择器

属性选择器

可以自定义属性，放在中括号中

p[v-if]{
	color:red;
}
p[v-if="cur"]{
	color:blue;
}
/*带v-if且以li开头*/
p[v-show^="li"]{
	color:blue;
}
/*带v-if且以tion结尾*/
p[v-show$="tion"]{
	color:blue;
}
/*带v-if且选择所有带有i的*/
p[v-show*="i"]{
	color:blue;
}

<p>长大我要当宇航员</p>
<p v-if>长大我要当宇航员</p>
<p v-if="cur">长大我要当宇航员</p>
<p v-show="list">长大我要当宇航员</p>
<p v-show="condition">长大我要当宇航员</p>

子类选择器

匹配某些父元素的子节点，两种类型：不区分子元素类型、区分子元素类型的。

不区分子元素类型

语法规则：基础选择器或高级选择器：子类选择器

/*匹配div第一个h1*/
h1:first-child{
	color:red;
}
/*匹配div的最后一个儿子节点h5*/
h5:last-child{
	color:blue;
}
/*匹配某一个节点的第N个索引值的子节点,括号中索引值可换为n的倍数*/
p:nth-child(7){
	background-color:yellow;
}
p:nth-child(2n){
	background-color:yellow;
}
h5:nth-last-child(2){
	background-color:pink;
}

<div>
	<h1>我是一级标题</h1>
	<h1>我是一级标题</h1>
	<p>我是段落</p>
	<p>我是段落</p>
	<p>我是段落</p>
	<p>我是段落</p>
	<p>我是段落</p>
	<p>我是段落</p>
	<p>我是段落</p>
	<h5>我是五级标题</h5>
	<h5>我是五级标题</h5>
</div>

区分子元素类型

匹配某一个父元素内部某一类型的子节点。
语法规则：基础选择器或高级选择器：子类选择器

/*匹配父节元素内部的p类型的第一个子元素*/
p:first-of-type{
	background-color:red;
}
/*匹配父节元素内部的p类型的最后一个子元素*/
p:flast-of-type{
	background-color:rblue;
}
/*匹配父节元素内部的p类型的第n个子元素(对应索引值)*/
p:nth-of-type(n){
	color：yellow;
}

关系型选择器

语法规范：A、B代表基础选择器或高级选择器
A+B：代表A选择几点后紧随的姊妹元素B
A~B：A选择器后面紧随的所有姊妹元素B

伪类选择器

:hover 鼠标移上
:disabled 不可使用
:focus 聚焦
:empty 空的
例：

input：disabled{
		border:5px solid pick;
}

伪选择器

基本语法：基础选择器或高级选择器::伪选择器

/*清除默认样式*/
*{
	margin:0;
	padding:0;
}
/*::first-letter段落首个汉字或字母*/
p::first-letter{
	color:red;
	font-size:30px;
}
/*::first-line段落第一行*/
p::first-line{
	color:yellow;
}
/*::election选择勾选的文本*/
p::selection{
	background:purple;
}

伪元素

伪元素：给某个父元素内部添加子节点。
1.双闭合标签才有伪元素；
2.伪元素必有content属性；
3.伪元素必脱离文档流（浮动、定位）
语法规则：
基础选择器或高级选择器::after||before

div::after{
	/*定位或浮动脱离文档流*/
	position:absolute;
	/*必备content属性*/
	content:"";
	width:100px;
	height:100px;
	background-color:red;
	left:300px;
}

11.border-radius圆角设置

两种写法：百分比、像素（四个值左上、右上、右下、左下）。
园：50%、border-radius:50px 50px 50px 50px ;
叶子：border-radius:0px 3000px 0px 300px ;

12.阴影

盒子阴影【box-shadow】、文本阴影【text-shadow】
四个属性值：右侧 底部 模糊程度(值越大越模糊) 阴影颜色。多个阴影用逗号隔开。

box-shadow:10px 10px 10px cyan,10px 10px 10px blue;

五个属性：inset（内阴影） 左侧 上部 模糊程度(值越大越模糊) 阴影颜色。

box-shadow:inset 10px 10px 10px cyan,inset 10px 10px 10px blue;

文本阴影和盒子使用方法一致，但没有内阴影，即无inset。

12.background系列属性

background:(url("./") no-repeat)背景系列综合属性
background-image背景图
background-color背景颜色
background-position背景定位
background-repeat背景图重复设定

background-origin背景图起源

三个属性值：border-box(从边框开始显示)、padding-box（默认，从内边距padding开始显示）、content-box（从内容开始显示）

background-clip背景图裁切

四个属性值：border-box(从边框开始裁切)、padding-box、content-box、text（文本裁切）
文本裁切有兼容问题，需要写兼容如下：

-webkit-background-clip:text;
conor:rgba(0,0,0,0.2);

background-size背景图尺寸

属性写法：
1.px像素，如：background-size:100px 100px;
2.百分比,如：background-size:50% 50%;
3.cover：全覆盖，将原图水平、垂直拉伸，可能会有部分看不见
4.contain，尽可能将原图原封不动的展示出来

雪碧图

css图像合并的方法，将小图标合并到一张图上，使用背景图定位来展示图片。
减少加载网页图片对服务器的申请。

将显示图片变为原图的一半大小：
background-size要是原图的一半大小，背景图定位数据也是一半，盒子大小也为原来的一半大小。

13.transition过度动画

H5新增样式属性。
1.过渡动画必有事件触发
2.参与过度动画，样式属性值需发生变化
3.transition：过渡动画属性 总时间 动画速率 动画延迟
属性：
3.1.transition-property过度属性
3.2.transition-duration过度动画总时间【s||MS】
3.3.transition-function过度动画速率：

属性	含义
linear	匀速
ease-in	慢速开始
ease-out	慢速结束
ease	慢速开始、慢速结束
ease-in-out	慢速开始、慢速结束
cubic-bezier（0，0，0，0）	贝塞尔曲线
3.4.transition-delay过渡动画延迟时间【S

/*过度动画改变宽高*/
div{
	width:200px;
	height:200px;
	background:blue;
	transition:width 2s linear 0s,
			   height 2s linear 0s;
	/*transition:all 2s linear 0s;这种写法更好*/
}
div:hover{
	width:400px;
	height:400px;	
}

14.transform变换

transform变换实现元素2D、3D变换。
实现动画如下：缩放比例【scale】、平移【translate】、旋转【rotate】

2D变换

/*等比例放大缩小*/
/*一个属性值：代表宽高为原来的多少倍。
两个属性：第一个为宽度、第二个为高度的变换。*/
transform:csale(2);
transform:csale(0.5 0.5);
/*按几何中心旋转图片*/
transform:rotate(100deg);
/*平移图片,第一个参数x轴，第二个y轴*/
transform:translate(20px,20px);

3D变换

3D主要使用旋转【rotateX、rotateY、rotateZ】、
平移【translateX、translateY、translateZ】。
1.想看到3D旋转效果，需要通过父子盒子嵌套使用
2.父盒子需加上景深属性【perspective:1000px;】，数值大小表示远近距离

3D实战

15.animation动画

语法格式：
animation: 动画名称 总时间 速率 延迟 执行次数
animation-name动画名称
animation-duration动画总时间
animation-timing-function动画速率
animation-delay第一次动画延迟时间
animation-iteration-count动画执行次数
可有可无的属性：
animation-direction动画是否反向执行【alternate反向也算一次动画】
animation-fill-mode动画执行完毕是否停留在终止的地方【forwads返回动画开始】
注意：
animation使用分为两部分，分为声明和调用。

div{
	position:absolute;
	width:100px;
	height:100px;
	background:red;
	/*调用动画*/
	animation:donghua 2s linear 0s 2;
}
/*声明动画*/
@-webkit-keyframes donghua{
	from{
		left:0px;
	}
	to{
		left:800px;
	}
}

16.实战

火狐实战