页面布局部分
----------------------------------------------------------------
align-items: center; 垂直居中 vh：单位 即将整个屏幕分为100个vh
margin: 0 auto 水平居中（块级标签居中） header(头部)
section(中部)
*{ footer(尾部)
margin: 0;
padding: 0; 去除间隙
} position: relative
相对定位
display: flex 弹性布局 position:adsolute; (绝对定位不会覆盖其他定位,与margin移动叠加)
绝对定位 （如果上级和上上级中，没有position,以body的左上角为基准进行移动，就近原则）
border-radius:30px 圆角度 font-size: 16px 字体大小(标准16px)
line-height:75px; 文字上下居中(与选定div高度相同)
text-align:center; 文字左右居中 （行级标签居中） text-decoration: none
去除下划线
justify-content: space-between 两边对齐 list-style: none
去除圆点
position: fixed;
top:0px 固定头部不动,top为头部移动距离 即移动后固定的位置
(将一层页面分割为上下两层)
position: relative;
top: 50%;
margin-top: div本身高度一样 (自适应居中)
left: 50%;
margin-left: div本身宽度一样
z-index: x; 层数
display: flex;
flex-direction: column;/* 弹性布局,按列等分 */
overflow-x: scroll; 在X轴方向加入滚动条 指定单位需要有一定长度
white-space: nowrap; 强制不换行
html,
body {
background: white;
font-family: '微軟正黑體','Microsoft JhengHei','微软雅黑','Microsoft YaHei','STHeiti','Gotham';
}
html ,body文字样式
vertical-align:middle; 文字与图片对齐
-------------------------------------------------------------------------------
连接跳转
<form action+网址 method=get>
<label>用户名：<input type="text" name="word"/></label>(text 输入框内容可视)（name为输出内容）
<label>密码：<input type="password"/></label>（password 输入框内容不可视）
<button>登录</button> 按钮
</form>
-----------------------------------------------------------------------
表格部分
border-collapse:collapse 表格变单线
<table border = "1"></table>（table为表格代码 border为添加表格边框）
<tr></tr> 每一列
<th></th> 每一行 <td></td> 每一行
标头（自带居中 加黑）
<th colspan="2"></th> 两列合并
<td rowspan="2"></td> 两行合并
（合并代码只写在th或td之后）
--------------------------------------------------------------------
input代码指令
（内容可见）
<input placeholder="请输入用户名" type="text" value="默认值" name="username" maxlength="10" autofocus="autofocus" readonly="readonly" />
( 输入框中没有内容时显示的内容 ) （初始值） （输出的内容） （最大输入字数） （光标初始位置） （只读属性，无法更改内容）
<textarea style="width: 500px;height: 500px; display: inline-block;" name="content" cols="10" rows="5" >123</ textarea >
（网页中的小网页） （宽 高 与width和height作用相同但无距离单位 俩者优先使用 width和height ）
<input type="date" />
（年月日选择表）
<input type="number" value="6" max="20" min="2"/>
（数字单项选择条型表）
<input type="range" min="2" max="10" value="3" />
(范围条)
<button>提交</button>
(按钮)
-------------------------------------------------------------------
列表指令
<select multiple="multiple">
<option>java</option>
<option>python</option>
<option>C++</option>
<option>C#</option>
<option>C#</option>
</select>
(列表多/单 选择)(multiple 多选代码指令 去除为单选）
<input list="hi"/>
<datalist id="hi">
<option> java </option>
<option> python </option>
</ datalist>
（整体为固定格式，单项选择列表）
<input type="radio" name="gender" value="0" checked="checked"/>男
<input type="radio" name="gender" value="1" />女
（单项圆点选择）
<input type="checkbox" name="gender" value="0" checked="checked"/>男
<input type="checkbox" name="gender" value="1" />女
（多项圆点选择）
---------------------------------------------------------------
储存部分
<script>
console.log(stpeof(storage)) (检测浏览器是否支持储存）
window.localstorage.time (数据储存 time为储存内容的形式 如文字则将time改为name）
console.log(window.localstorage.time) (输出储存的数据，括号中的代码为储存的代码)
window.localstorage.removeitem(time) (删除所储存的数据，括号内为储存的形式)
window.sessionstorage.time= (浏览器关闭储存的数据消失，与localstorage作用都为储存数据)
</script>
-------------------------------------------------------------------
input更改样式写法
input[type="text"]{ (所有的input的type中含有text的背景色改变为黑色)
background: black;
}
input[name="username"]{ （所有的input的name为username的背景色改变为黑色）
background: black;
}
input[name^="user"]{ （所有的input的name中以user开头的背景色改变为黑色 ^）
background: black;
}
input[name$="e"]{ （所有的input的name中以e结尾的背景色改变为黑色 $）
background: black;
}
input[name~="username"]{ （所有的input的name中含有username完整值的背景改变为黑色 ~）
background: black;
}
.hi:not(p){ （所有的以hi命名的同时内容中不含有p标签的，背景色改变为黑色）
background: black;
}
------------------------------------------------------------------
字体代码部分
color:red; (字体颜色)
font-family:”微软雅黑：“ （字体为微软雅黑）
font-weight:bold;（字体加粗）
font-style:italic;（字体倾斜）
text-align:center; （文字居中）
text-indent:55px; （首行空格距离）
letter-spacing:10px; （字与字之间的距离）
line-height:200px; （字段的行高）
vertical-align:super; （文字向上移动）
vertical-align:sub;（文字向下移动）
vertical-align:middle;（文字上下居中移动）
vertical-align:top;（文字头部对齐）
vertical-align:baseline;（文字底部对齐）
text-overflow: ellipsis; （文本溢出用省略号代替需要与 文字不换行代码连用）
占位符
  == 普通的英文半角空格
  == ==   == no-break space （普通的英文半角空格但不换行）
　 == 中文全角空格 （一个中文宽度）
  ==   == en空格 （半个中文宽度）
  ==   == em空格 （一个中文宽度）
  == 四分之一em空格 （四分之一中文宽度）
-----------------------------------------------------------------
文本部分
text-decoration:overline （为文本添加上划线 在字体上添加）
text-decoration:underline; （为文本添加下划线 在字体下添加）
text-decoration:line-through;（为文本添加划线 在字体本身添加）
text-transform:uppercase;（文本转换为大写）
text-transform:lowercase;（文本转换为小写）
text-shadow: red 100px 100px 5px;（文字阴影 依次为文字的颜色，水平，垂直阴影，模糊程度）
----------------------------------------------------------------------
音乐音频视频部分
（静音）
<audio src=”audios/5133.wav” type=”audio/wav” controls=” controls” autoplay=” autoplay” loop=”loop” muted></audio>
(音频视频路径) (类型) (显示控制面板) (自动播放) (循环播放)
<audio controls=” controls” autoplay=” autoplay” loop=”loop”>
<source src=”audios/5133.wav” type=”audio/wav” ></ source>
<source src=”audios/5133.mp3” type=”audio/mp3” ></ source>
</audio>
(两者中播放浏览器支持的种类 比如1不能播放自动播放2)
/*视频与音频类似*/
<video></video>
object-fit:fill; /* 视频填充当前页面 */
-------------------------------------------------------------------------------
弹性布局部分
box-sizing: border-box; （将边框也计入百分比划分之中）
overflow: hidden; （隐藏超出最大范围部分的内容 即 将内容大小超过规定大小的部分进行隐藏）
flex-direction: row; （横向排列）
reverse (将排列开始的方向调转 如正常纵向排列从上到下 加入代码后 从下到上进行排列)
flex-direction: column; （纵向排列）
flex-wrap: wrap （将超出部分进行换行 如一共20个DIV 一行最多放10个 加入后 剩下10个重起一行进行排列）
justify-content: space-between; （水平两边对齐）
justify-content: space-around; （均分）
justify-content: flex-end; （从尾部进行排列）
justify-content: flex-start; （从头部进行排列）
justify-content: center; （水平居中）
align-items:（垂直方向排列开头）
align-content: (将分为两排的DIV之间的空隙取消)
将justify-items: 更改为 align-content: 则水平排列改为垂直排列 代码与水平效果相同
flex-grow:2; （将弹性布局中1个单位大小的面积 变为两个单位的面积 数字可以改变 如 改变为3 则为三个单位大小的面积）
----------------------------------------------------------------------------------------------------------------------
特效代码
div:hover{
background: black; 鼠标移动到指定DIV时 背景色变为黑色 无需点击 写在style中
}
<div onclick="alert(123)"></div> 鼠标点击指定DIV时，弹出123的对话框 直接写在DIV中 在body中直接写入 写入汉字时 需要加入单引号
transition: （渐变指令 ，即 特效在特定的时间中完成 加入all即为所有特效 比如transition: all 2s 所有的特效在2S之内进行完成 ）
<div onclick="this.style.marginTop='110PX'"></div>
（点击时 div向下移动110px）
transform: (变换) transform: translate（平移） transform:scale（缩放） transform: rotate（旋转）（角度单位为deg）
transform: rotate(40deg) scale(2) translateX(2000px) translateY(500px);
（进行旋转 放大两倍 同时向左下方移动）
opacity:1(透明度 1为默认值)
box-shadow: 5px 5px 5px gray （外阴影 水平方向 垂直方向 模糊度 颜色）（加入inset为内阴影 在颜色后添加）
border-radius:30px 圆角度
transform-style: preserve-3d; （3d渐变 将单位改变为3D效果）
backface-visibility: hidden; （图片的背面进行隐藏）
background:no-repeact (图片不重复出现)
perspective: 2000px;（景深 为距离屏幕或镜头的远近 ）
background:size （背景图片大小）
transform-origin: （特效开始的位置）
background: url （背景图片引入代码）
overflow: hidden; （隐藏超出最大范围部分的内容 即 将内容大小超过规定大小的部分进行隐藏）
-----------------------------------------------------------------
特效注意点
做打开特效时 需要将位置已经发生变化的单位的移动的代码 再次输入进hover中
---------------------------------------------------------
X Y Z三轴方向
X Y Z 三个方向： 左手 拇指Y轴 食指X轴 中指 Z轴 以被 移动 物体的最初状态来确定XYZ 物体移动 三个轴跟随移动
--------------------------------------------------------------
JS部分
<script></script> 起始代码 写在head中
-------------------------------------------------------------------
JS基础
//var a = "hello world!";//引用
//var a = 18.235;//浮点型
//var a = (1==1);//布尔类型 两个等号 判断力度较弱 只要格式或者内容其一相等即为相同 相等输出true 不相等输出 false
三个等号 判断力度强 必须格式 内容完全一致
比如 1==”1“ 一个为数字 一个为字符串 两个等号输出 true 三个等号输出 false
alert（） 弹出
console.log(i++);// 先赋值再加1
console.log(++i);// 先加1再赋值
for(a = 0;a<5;a){
console.log(a++)
}
输出 0 1 2 3 4
for(a = 0;a<5;a){
console.log(++a)
}
输出 1 2 3 4 5
for(a = 0;a<9;a++){
if(a!=5) ！= 为不等于
console.log(a)
}
for(a = 0;a<9;a++){
if(a==5) continue continue 跳出本次循环 congtinue改为break 为终止循环 当a=5时终止循环
console.log(a)
}
当a=5时 跳出本次循环
-----------------------------------------------------------------
switch语句
<script>
var i = 2;
switch(i){
case 1: 当i=1时 打印一月
console.log("一月");
break; 程序终止代码
case 2:
console.log("二月");
break;
default: 默认
console.log("无"); 打印无
}
</script>
--------------------------------------------------------------------------
while语句
var i = 0;
while(i<10){
console.log(i++) 先进行判断在执行
}
两种方式输出结果一致
do{
console.log(i++) 先执行在进行判断
}while(i<10)
--------------------------------------------------------------------------------
JS数组的切割与连接
var arrays = words.split(" ");//根据空格进行切割 split为按照一定的标准将字符串切割为数组 括号内为标准
console.log(arrays);
console.log(arrays.join(",")); 用,将字符串连接 join为按照一定的标准将数组连接为字符串 括号内为标准
-------------------------------------------------------------------------------
js常用数学计算
console.log("x/y="+(x/y).toFixed(2));//保留两位小数
console.log("y-x="+Math.abs(y-x));//绝对值
console.log("x"+Math.sqrt(x));//平方根 Math为数学计算开头代码
------------------------------------------------------------------
<script>
for(var i = 1;i<100;i++){
var than =document.createElement("div") createElement 创建元素
than.style.width="100px"
than.style.height="100px"
than.style.background="red"
document.body.appendChild(than) 将than放入Body中
var text=document.createElement("i")
var texts=document.createTextNode(i+1) createTextNode 创建文本节点
text.appendChild(texts) 将texts放入text中
than.appendChild(text) 将text放入than中
}
</script>
---------------------------------------------------------------------------------------
<script>
for(var i = 1;i<101;i++){
var than = document.createElement("div") 创建100个DIV
document.body.appendChild(than)
}
var than =document.getElementsByTagName("div") 将创建的每一个div命名为than
var thans=function(shuzi,juli){ 创建函数 定义为 thans
return function(){ 变量为 shuzi，juli
for(var i = 0;i<100;i++){
if(i%2==shuzi) continue;
than[i].style.marginLeft=juli+"px";
}
}
}
window.setInterval(thans(0,200),2000) 设置间隔事件 以thans函数作为触发条件 变量为0，200 即 shuzi=0 juli=200 每2s触发一次
window.setInterval(thans(0,0),4000)
window.setInterval(thans(1,0),2000)
window.setInterval(thans(1,200),4000)
</script>
---------------------------------------------------------
var a="hello world"; var为定义代码 即把a 定义 为 hello world ；当选择打印a时 控制台输出 hello world
var x=10; 将x定义为10
var y=20; 将y定义为20
console.log(a); 打印代码 打印a定义 控制台输出 hello world
console.log(x+y); 打印x+y 控制台输出 30
if(x>5){ 选择 当x大于5时 控制台输出 da
console.log("da");
}else{ 否则 控制台输出 xiao
console.log("xiao"); js中； 除了数字以及变量定量外 都需要加入引号 ；双引号和单引号效果一样 即所有的命名符都需要引号
}
--------------------------------------------------------------------------------
var than= document.getElementById("than"); 固定格式 than为被选择单位的命名 getElementById（根据命名class或id 发生改变）
than.onclick=function(){ this可以代替than onclick 点击 function 函数
than.style.marginLeft="100px"; style后 加被改变的元素
}
整体意思为 点击命名为than的单位时 将命名为 than的单位向
左移动100px
--------------------------------------------------------------
var shang2 = document.getElementById("shang-2");
var i = 0;
window.setInterval(function(){ setInterval 设置间隔
shang2.style.transform="translateX(calc(-100%*"+((i++)%3)+"))";
},3000) 在JS中 不同语言需要使用双引号隔开 比如上 +((i++)%3)+ 为js代码
以外的其他代码都为css代码 需要将css代码加入双引号同时使用+号进行连接 字符串与非字符串之间
需要使用+号进行连接 3000为毫秒 1000毫秒=1秒 /为除 %为取余
将shang2定义为 shang-2 将i定义为0 将以shang2定义的单位以一定
间隔向X轴进行移动
----------------------------------------------------------------------------
<script>
var o =2;
var i =[22,23,34,56,78];
console.log(i.length);
console.log(Array.isArray(o));
console.log(Array.isArray(i));
</script>
Array.isArray(o) 判断是否为数组 o 打印false i 打印true
---------------------------------------------------------------------------------、
正则表达式
var words = "he l l o w o r l d";
console.log(words.split(/\s*/).join(""));// 正则表达式 \s表示空格 + 和{1,}表示至少一次 * {0,}表示至少0次
将字符串words以最少0个空格的标准切割为数组 再将数组连接为字符串
-----------------------------------------------------------------------------------------
<input type="text" name="qqq"/>
<span id="www"></span>
<script>
var than = document.getElementsByName("qqq")[0]; 获取input
var thans =document.getElementById("www"); 获取span
window.onkeyup= function(){
thans.innerText=than.value; 在span中放入input中的文本内容
}
</script>
thans.innerText （thans中的文本）
---------------------------------------------------------
var m = [1,2,3,4,5,6];
var n = m.reverse(); reverse 反转
toString() 将数组转换为字符串
--------------------------------------------------------------------------
数组操作
<script>
var content = "213g12jutitg435jthg345t";
var tester = new RegExp("jt","g"); RegExp 意思为正则表达式
console.log(m.reverse()); 将数组中的元素顺序反转
console.log(m.sort()) 将数组中的元素按从大到小排列 但只进行最前一位数字的大小比较
console.log(tester.exec(content)); (写一次 进行一次查找)
console.log(content.match(/jt/g)); （写一次 查询所有）
console.log(content.indexOf("jt")); （查找在字符串中是否存在jt）
console.log(content.search(/j.t/g)); （寻找字符串中是否存在j.t）. 为任意字符
// console.log(content.replace(/[a-z]/g,"*")); (替代)
// console.log(content); （）
// console.log(content.split(/t/g));
</script> /g为全局搜索 /i为忽略大小写 /m为多行搜索
g i m 可以同时使用并且位置可以随意摆放
----------------------------------------------------
sort补充
function paixu(a,b){
if(a>b){
return 1;
}else if(a<b){
return -1; 加入函数后 sort可进行数字大小的比较 而不是第一位的比较
}else{
return 0; 如var m = [1, 13, 12, 26,2,25, 37, 38];
} console.log(m.sort()) 打印（1，12，13，2，25，26，37，38）
} console.log(m.sort(paixu)) 打印（1，2，12，13，25，26，37，38）
console.log(m.sort(paixu))
--------------------------------------------------------------------------
dom操作
var m = new Array(); 获取一个名为m的数组 Array意思为数组
Math.random()// 0-1之间的浮点数
(Math.floor()); 向下取整数0.1->0 1.5->1
Math.ceil() 向上取整
console.log(Math.floor((Math.random()*100))); 取1-100之间的随机数；
var m = 1.23656;
console.log(parseFloat(m.toString().match(/\d+\.\d{2}/g)[0]));
toString 转换为字符串 parseFloat 转换为数字 match取得值为数组
先将m从数字转换为字符串 在执行match操作 在把获得的数组转换为数字
var date = new Date(); Date为日期
function getDate(){
return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDay()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
} 年 月 日 小时 分钟 秒
console.log(getDate());
由函数获取年月日以及时间
--------------------------------------------------------------------------------------------
var m = "babbcasdbbbbasABCawyeiuwqyeiubbb123123";
onsole.log(m.match(/b?/g)); 问号为最多1次 即小于等于1
onsole.log(m.match(/b+/g)); 加号为最少1次 即大于等于1
onsole.log(m.match(/b*/g))； 星号为最少0次 即大于等于0
onsole.log(m.match(/b*？/g))； 在星号 问号 加号 以及括号后面再次添加问号 即取消右边界
星号为最少0次 加入问号为 0 次
-----------------------------------------------------------------------------------
console.log(m.match(/^q/gm));// 以q为开头
console.log(m.match(/^k|4$/gm)); 以K为开头或者以4为结尾 $结尾的意思
console.log(m.match(/[a-zA-Z]+/g)); 所有在a到z区间中的字母
console.log(m.match(/[12-59]/g)); 1 或者 2到5 或者 9
console.log(m.match(/[^12-59]/g)); ^为在数集中 除 1 或者 2到5 或者 9 ，外的其他单位
---------------------------------------------------------------------------------------
常用的转义
\b 单词边界 \B 非边界
\d 数字 \D非数字
\n换行
\r回车
\s匹配一个空白字符，包括空格 制表符 换页符 换行符
\S非空白
\w匹配一个单字字符（字母 数字或者下划线）
\W非单字字符
--------------------------------------------------------------------------------------
查寻字符串中是否有某一字符
var words = "he l l o w o r l d";
var words2 = words.split(/\s*/); 将字符串剪切为数组
console.log(words2);
console.log(words2.indexOf("r")); indexOf查询 如果存在所找字符 则打印该字符所在的下坐标 不存在则输出-1
------------------------------------------------------------------------------------------
<script>
var array = [1,2,3,4,5,6];
var ab = ['a','b','c'];
array.splice(2,1); // 从下坐标2开始,删除一个元素
array.splice(2,0,'a','b','c'); 从下坐标2开始，删除0个元素 ，在下坐标为2的位置插入'a','b','c'
console.log(array);
</script>
splice（）括号中三个值 第一个为位置（底座标）第二个为删除的个数 第三个为插入
-----------------------------------------------------------------------------------------------------------
css3动画
@keyframes moveit { （@keyframes 动画开头 moveit 动画命名）
10% { 在时间为10%的时候 （比如总时间为10S 1s的时候向Y轴移动0px）
transform: translateY(0); 沿Y轴移动0px
}
30% { 在时间为30%的时候
transform: translateY(100px); 沿Y轴移动100px
}
50% { 在时间为50%
transform: translateY(0px); 沿Y轴移动0px
}
70% { 在时间为70%
transform: translateY(100px); 沿Y轴移动 100px
}
100% {
transform: translateY(0px);
}
------------------------------------------
background:linear-gradient(to right bottom,fuchsia,blue,red); （背景色渐变 to right bottom, 颜色向右下方依次出现 ,fuchsia,blue,red 出现 紫色 蓝色 红色 可以是多个颜色 ）
animation: moveit 5s infinite; 动画效果在5s中完成
