html与css部分基础

1.获取data-id="值"和data-vice-id="值"

设置自定义属性值保存在标签上,有需要的时候可以通过js取出来

实用性很强

方法：

1.元素.getAttribute("data-id或者data-vice-id")

2.元素.dataset.id或者元素.dataset.viceId

3.jquery data()方法 元素.data("id或者vice-id")

4.jquery attr()方法 元素.attr("data-id"或者"data-vice-id")

2.本地存储

基于H5基础上的新特性----（重点知识，运用广泛）

方法：setItem getItem removeItem clear()

（1）临时存储（会话存储）sessionStorage //方法参照本地存储，这里不作解释

（2）永久储存（本地储存）localStorage

单数据存储：

localStorage.setItem("键名"，值)；//保存为一个对象的形式

localStorage.getItem("键名")；//获取键名对应的数据

localStorage.removeItem("键名")；//删出键名对应的数据

localStorage.clear()；//清空全部本地存储

多数据存储----又分为数组形式和数组对象形式 ---方法和单数据相同，数据结构不同

JSON是js对象的字符串表示法，它使用文本表示一个js对象的信息，本质是一个字符串。

数组形式--例： var arr=["abc","def"]; localStorage.setItem("user",JSON.stringify(arr));//将数据转换成JSON字符串保存，才能保存原有的结构。 let arr1=JSON.parse(localStorage.getItem("user"));//获取的时候需要将JSON字符串转换成js对象（这里的对象指数组）,还原其结构。 console.log(arr1[0]);//打印数组中索引为0的数据，也就是abc

数组对象形式--例： var arr=[{name:"张三",age:18},{name:"王五",age:20}]; localStotage.setItem("info",JSON.sttingify(arr));//存储 let arr1=JSON.parse(localStorage.getItem("info"))；//获取 console.log(arr1[0].name);//打印得到数组arr1中索引为0的对象的name属性值，也就是张三

本地存储--断点添加数据（项目实际操作综合案例）

说明：先获取数据，判断是否为null。如果为null，定义新数组保存数据，否则用获取到的数组往里添加数据即可。

例：

//一进页面就获取本有的数据展示，只判断有数据的情况，没有数据不作操作。 //获取一堆元素 var titles = document.querySelectorAll(".title span"), list1 = document.querySelector(".list1"),//显示内容 list=document.querySelectorAll(".content>div"); endBtn = document.querySelector(".list2 button"),//提交按钮 inp = document.querySelector(".inp"),//输入内容 date = document.querySelector(".date");//选择的时间 //标题循环注册事件 for(let i=0;i<titles.length;i++){ titles[i].onclick=function(){ //循环删除类名 for(let a=0;a<titles.length;a++){ //删除标题类名 titles[a].classList.remove("active"); //隐藏对应的内容 list[a].style.display="none"; } this.classList.add("active"); //显示对应的内容，也可以data-id自定义索引来显示 list[i].style.display="block" } } //一进页面就调用数据显示在页面上 var data = localStorage.getItem("info"); if (data != null) { //数据转化为js对象 data = JSON.parse(data); var strs = '';//定义空字符来保存数据 //循环拼接 for (let i = 0; i < data.length; i++) { var listStr = `${data[i].text}&emsp;&emsp;&emsp;${data[i].time}`//内容和日期的拼接字符串 strs += `<div>${listStr}<button data-id="${i}">删除</button></div>`//相加 } list1.innerHTML = strs;//赋值给页面 } //提交按钮点击事件 endBtn.onclick = function () { //操作数据 //1.先获取本地存储看是否有数据，如果有就直接往里添加数据 2.如果没有就定义一个数组保存数据，添加到本地存储中. //获取输入的内容和选择的时间并创建对象保存 var textlist = inp.value;//内容 var timelist = date.value;//时间 var alltext = { text: textlist, time: timelist };//创建对象保存 var data = localStorage.getItem("info");//获取本地存储数据 if (data == null) { var arr = [];//定义一个空数组保存数据 arr.push(alltext);//将对象添加到数组中 localStorage.setItem("info", JSON.stringify(arr));//然后将数组添加到本地存储中 } else { //已经有数据 data = JSON.parse(data);//JSON字符串转化为js对象(数组) data.push(alltext);//将对象添加到数组中 localStorage.setItem("info", JSON.stringify(data));//然后将数组添加到本地存储中 } location.reload(); } //删除功能 var btns=document.querySelectorAll(".list1 button"); for(let j=0;j<btns.length;j++){ btns[j].onclick=function(){ console.log(333) this.parentNode.remove(); //获取本地存储数据并转化为js对象,按索引删除 var arr2=JSON.parse(localStorage.getItem("info")); arr2.splice(j,1); //重新添加到本地存储中 localStorage.setItem("info",JSON.stringify(arr2)); if(arr2.length==0){ localStorage.removeItem("info"); } location.reload();//删一次刷新一次页面 } }

3.H5布局标签

<header> //定义头部

<nav> //定义导航

<main> //定义主要内容

<section> //定义文档中的节

<article> //定义页面独立的内容区域

<aside> //定义侧边栏

<footer> //定义页脚

4.transition过渡动画

transition 只能添加在初始样式里。

transition：属性1 时间秒 动画特效 延时时间，属性2 时间秒 动画特效 延时时间；

transition:all 时间秒 动画特效 延时时间；//所有样式都参与动画。

动画特效：

linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

可参照网址http://cubic-bezier.com

5.css3变形

配上过渡动画transition 可实现动画时间的过渡和特效

2d变形 transform

transform 可以同时定义多个属性

//一次性定义平移100px 旋转1800度 缩小0.5倍 transform:translate(100px) rotate(1800deg) scale(0,5,0.5)

1）平移 translate（x,y）//只写一个值表示水平方向平移

2）缩放 scale(x,y)  //只写一个值，默认第二个值等于第一个

3）旋转 rotate(deg) //2d旋转，沿顺时针，和Z轴旋转类似

              rotateX(deg) //沿X轴3d旋转

              rotateY(deg) //沿Y轴3d旋转

              rotateZ(deg) //沿Z轴3d旋转

4）斜切skew(x,y) //只提供一个值，则第二个值默认为0

              skewX(deg) //水平方向上斜切

              skewY(deg) //竖直方向上斜切

6.css3自定义动画

animation-play-state: paused/running;控制动画是否运行 用js配合控制该属性值实现暂停和开始

transform-origin：x y； //定义动画中心点 比如旋转动画可以定义其旋转中心点

animation参数：

animation：1自定义动画名称 2执行时间 3特效 4延时时间 5执行次数（infinite无限循环或者直接给数值） 6是否反序播放（alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放） 7控制播放完成帧数(forwards 结束时应用该属性，就是保持结束时的状态)；   

例：自定义动画 div{ animation:自定义动画名称1 执行时间 特效,自定义动画名称2 执行时间 特效; } @keyframes 自定义的动画名称1{ 0%{background:url(1)no-repeat;} 20%{background:url(2)no-repeat;} 50%{background:url(3)no-repeat;} 75%{background:url(4)no-repeat;} 100%{background:url(5)no-repeat;} } @keyframes 自定义动画名称2{ 0%{transform:translateX(0) rotateY(0)} 49.999%{transform:translateX(800px) rotateY(0)} 50%{transform:translateX(800px) rotate(180deg)} 99.999%{transform:translateX(0) rotate(180deg)} 100%{transform:translateX(0) rotate(0)} }

7.动画库swiper ,移动端轮播插件

使用方法：https://www.swiper.com.cn/usage/index.html

flex布局

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

1.容器属性

容器属性 一共六个

flex-direction 表示主轴对齐方式，四个值

flex-direction:row; //水平布局 也是默认的布局

flex-direction:row-reverse; //反向水平布局

flex-direction:column; //垂直布局

flex-direction:column-reverse; //反向垂直布局

flex-wrap定义一条轴线排不下的时候，如何换行 三个值

flex-wrap:wrap; //换行

flex-wrap:nowrap; //不换行

flex-wrap:wrap-reverse; //反向换行，第一行在最下方

flex-flow属性是flex-direction属性和flex-wrap属性的复合形式，默认值为row nowrap，两个值；

flex-flow:row wrap; //水平布局 换行

flex-flow:column nowrap; //垂直布局 不换行

justify-content 英文表示调整内容，定义子项在主轴方向的对齐方式 五个值

justify-content:flex-start; //起点对齐

justify-content:flex-end; //终点对齐

justify-content:center; //居中

justify-content:space-between; //两端对齐，中间间隔一样

justify-content:space-around; //间隔等分，所有子项间隔都相等，所以子项之间的间距比子项与边框的间距大一倍。

align-item 定义项目在交叉轴上如何对齐 有五个值

align-item:flex-start; //交叉轴起点对齐

align-item:flex-end; //交叉轴终点对齐

align-item:center; //交叉轴居中对齐

align-item:baseline; //在第一行文本的基线上对齐 也就是说后面的都按照第一个文本的最底部进行对齐

align-item:stretch; //默认值，如果项目未设置高度或设为auto，将占满整个容器的高度，不设置也行 ，所以用的少

align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 ，本属性去掉了间隔，和align-items区分开来

align-content:flex-start; //交叉轴起点对齐

align-content:flex-end; //交叉轴终点对齐

align-content:center; //交叉轴居中对齐

align-content:space-between; //交叉轴两端对齐，中间间隔平均分布

align-content:space-around; //交叉轴间隔等分，子项的间隔比子项与边框的间隔大一倍。

align-content:stretch; //默认值，子项占满整个交叉轴。

2.子元素属性

flex布局子元素的属性 一共有六个属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order: -1

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为1，其他项目都为0，则前者占据所有的剩余空间

flex-grow: 1; //如果其他子项为0 ，本子项就占满整个剩余空间，通常会用复合属性 flex来设置

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效

flex-shrink:0; //设置为0 就不缩小

flex-basis 自定义在主轴的大小，等同于设置的宽高，它的默认值为auto，即项目的本来大小

flex-basis: 300px; //自定义在主轴的大小

flex属性是flex-grow（放大比例）, flex-shrink（缩小比例） 和 flex-basis（自定义大小）的简写，默认值为0 1 auto。后两个属性可选。 经常使用该属性来分配剩余空间

flex:1; //这个子元素分配所有的剩余空间 有三个值，通常只用第一个

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch（伸展）

align-self: flex-start;//该子项在交叉轴起点对齐

align-self: flex-end; //该子项在交叉轴的终点对齐

align-self: center; //该子项在交叉轴居中对齐

align-self: baseline; //该子项通过基线对齐

align-self: stretch; //默认，也就是没有设置高度的时候会占满整个容器