font : "Microsoft YaHei Light"
//span 水平居中，内容居中
span{
display: flex;
justify-content: center;
}
常用
F12 ： 浏览器调试窗口
src ： “拿取”（引入），
href： "连结前往"（引用）
window: 当前浏览器窗口
HTML
<body
text 文字颜色
bgcolor 页面的背景色
background 页面的背景图片
onload='函数()'>
<p 短路
align left center right (默认：right)>
<div 分区标签 透明衣柜 自动换行
style >
<span 分区标签 透明衣柜 无自动换行>
<font 字体标签
face 字体
size 字的大小
color 字的颜色>
<h1~6 标题标记
class='' 类选择器
id='' id选择器
style='1:2' css>
<b 加粗>
<i 倾斜>
<del 删除线>
<u 下划线>
<ol 有序标签
type='A' 字母排序
type='I' 罗马排序
start='3' 序列从几开始><li></li></ol>
<ul 无序标签
type='disc' 默认，实心圆
type='square' 方块
type='circle' 空心圆><li></li><ul>
<a 超链接标签
href='http://lagou.com' 外网
href='01 test.html' 本地网
href='mailto:[email protected]' 发邮件>
<table 表格标签
border='1px' 边框
width='400px' 表格的宽度
align='center' 格的对齐方式
cellspacing='0' 单元格间距><tr><td></td></tr></table>
<tr 表格中的行
align right left center>
<td 数据单元格
colspan 列的合并
rowspan 行的合并>
<form 表单标签
action 服务器的地址（家的地址）
method GET POST 回家的交通方式
onsubmit="return login()" >
<input 表单中元素(单身)
type='text' name='' placeholder='' maxlength='' onfocus='函数()' onblur='函数()'
type='password' name=''
type='checkbox' name='' checked='checked' onchange='函数()' name='one'
type='radio' name='sex' checked='checked'
type='file' name=''
type='reset' name='' value='清空'
type='submit' name='' value='提交'
type='button' name='' value='XXX'
type='color'
type='date'
type='month'
type='week'
type='number' min='' max='' step=''
type='range'
type='search'>
<progress 表单中元素(进度条)>
<select 表单中元素(下拉列表)>
<option 下拉列表中的项
selected='selected'>
<textarea 表单中元素(文本域)
cols='10'
rows='5'></textarea>
<button 表单中元素(按钮)>
<frameset 框架集标签
rows='11%,*,13%'
onload='函数'>
<frame 框架标签
src='XXX.html'>
<frameset 框架集里面的框架集
cols='15%,*'>
<frame 第二个框架集里面的框架
src='XXX.html'>
<video 媒体标签
src='路径' .mp4
controls 播放按钮之类
loop 循环播放视频
autoplay 自动播放Chrome不好使>
<mark 高亮>
<input list='citys' 模糊查询>
<datalist id='citys'>
<option value='北京'></option>
<option value='南京'></option>
<option value='上海'></option>
</datalist>
<hr 水平线 单身
align left right center 水平线位置
size 粗细 px
width 宽度 %
color 颜色>
<img 图片标签
src 路径
width 宽度 px
height 高度 px
border 边框 px
alt 图片不可以显示时，默认显示的文本信息
title 鼠标悬停图片上，默认显示的文本信息
align left right middle top bottom 图片附件文字的对齐方式/>
<br/> 换行 回车 单身
<br> 换行 回车 单身
CSS
<style>
标签选择器{
属性:值;}
类选择器{
属性:值;} .
id选择器{
属性:值;} #
</style>
h1{
color:red; } 标签选择器
.X{
color:red; } 类选择器（元素中的class属性）
#X{
color:red; } id选择器（元素中的id属性）
.X, #X{
color:red; } 选择器组
div p{
color:red; } 派生选择器：子孙p都抚养
div>p{
color:red; } 派生选择器：子p抚养（孙p不抚养）
a:link{
} 超链接的伪类 未访问
a:visited{
} 超链接的伪类 访问过
a:hover{
} 超链接的伪类 鼠标悬浮
a:active{
} 超链接的伪类 鼠标点住
li:first-child{
} 超链接的伪类 第一个子元素添加样式
{
font-family :"HanWangKanDaYan"; 字体
font-size : 50px; 字体大小
font-weight : bold; 字体加粗
color :red; 字体颜色
text-align : center; 居中对齐
text-decoration : underline; 下划线
line-height : 30px; 行高
text-align : right 首航文本缩进
text-indent : 2em; 空两格，首行缩进
}
{
background-color: pink; 背景颜色
background-image: url(img/11.jpg); 背景图片
background-repeat: repeat-x; 平铺方式
background-position: -100px -100px; 背景图片的起始位置 x y
background-attachment: fixed; 固定背景
}
ul{
list-style-type: none; 无标记
}
ol{
list-style-type: decimal-leading-zero; 开头的数字标记
list-style-type: upper-roman; 大写罗马数字
list-style-type: upper-alpha; 大写英文字母
list-style-image: url(img/mylocation24.png); 图片
}
{
border-width: 2px;
border-style: solid;
border-color: red;
border: 10px solid red;
border-right-color: green;
border-bottom-style: dashed;
}
{
width: 400px;
height: 300px;
border: 30px solid darkgreen;
outline: 5px dashed red;
}
{
border: 2px solid palevioletred; 边框
margin-top: 50px; 外上边距
margin-left: 200px; 外左边距
padding-top: 20px; 内上边距
padding-left: 40px; 内左边距
}
。。。。
JS
Onclick=''
alert('');
console.log();
true+10 = 11
true+true = 2
parseInt('6.32')=6;
parseInt('a')=NaN;
parseFloat('6.32')=6.32;
typeof(var)
===
!==
长度，属性 var.length
大写 var.toUpperCase()
小写 var.toLowerCase()
指定下标下的字符 var.charAt(index)
下标下的字符在unicode编码中的编号 var.charCodeAt(index)
第一次出现的index var.indexOf(str)
最后一次出现的index var.lastIndexOf(str)
截取字符串中一部分 var.substring(fromindex,toindex)
将字符串中的旧字符替换成新字符 var.replace(oldvar,newvar)
分割 var.split('分割的节点')
创建数组方式1 var arr = new Array();
创建数组方式2 var arr = new Array(10,'hello',true);
创建数组方式3 var arr = [10,'sun',false];
数组->字符串（默认分隔符） arr.toString()
数组->字符串（自定义分隔符） arr.join('-')
添加元素 arr.concat(5,6)
提取一部分元素 arr.slice(fromindex,toindex)
倒序 arr.reverse()
字符排序 arr.sort()
数值排序 arr.sort( lagou ) function lagou(a,b){
return a-b}
0~1之间随机数 Math.random()
绝对值 Math.abs(x)
上舍入 Math.ceil(x)
下舍入 Math.floor(x)
x的y次幂 Math.power(x,y)
四舍五入 Math.round(x)
平方根 Math.sqrt(x)
e的指数 Math.exp(x)
数的自然对数 Math.log(x)
创建对象 var n = new Number(12.345);
固定两位小数并四舍五入 n.toFixed(2) 12.35
开头 ^ /^
结尾 $ $/
方式1:直接new对象 var reg = new RegExp('^[a-zA-Z0-9]{5,8}$');
方式2:不new对象 var reg = /^\d{1,3}$/;
连接表达式和字符串 var bol = reg.test(18); test()方法，返回值类型boolean
创建对象 var time = new Date();
获取年月日时分秒毫秒 time.getXXX();
语法1 function test(a,b){
...; return ...;}
调用 test(1,2);
语法2（构造函数） var fn = new Function('形参1','形参2','函数体');
调用 fn('有参1','有参2');
语法3（匿名函数） var fn = function(a,b){
...; return ...;}
调用 fn('有参1','有参2');
参数列表 arguments[i]
不是数字 isNaN(123)
字符串中的运算符生效 eval('1+3')
转码 encodeURI('拉勾网') -> %E6%8B%89%E5%8B%BE%E7%BD%91
解码 decodeURI('%E6%8B%89%E5%8B%BE%E7%BD%91') -> 拉勾网
function test3(){
var count = 0;
function jia(){
return count+=1;
}
return jia;
}
var fn = test3();
fn();
fn();
console.log(fn());
普通弹框 alert(“hello，拉勾”);
控制台日志输出 console.log(“谷歌浏览器按F12进入控制台”);
页面输出 document.write('<h1>hello.拉钩</h1>');
确认框 confirm(“确定删除吗？”);
输入框 prompt(“请输入姓名：”);
通过id属性获得元素节点对象 document.getElementById('username');
通过id属性获得元素节点对象值 document.getElementById('username').value;
通过name属性获得元素节点对象集 document.getElementsByName('one');
通过标签名称获得元素节点对象集 document.getElementsByTagName('tr');
添加节点 document.createElement('img');
设置节点的属性 document.createElement('标签名').setAttribute('属性','属性值');
添加某节点的子节点 节点.appendChild(节点);
获取某节点的父节点 节点.parentNode
删除某节点 节点.parentNode.removeChild(自己节点)
替换节点 节点.parentNode.replaceChild(new节点,old节点);
窗口时间 <body onload='test()'>
表单元素事件 <input onfocus='a()' onblur='b()'>
鼠标事件 单机 <img src="..." onclick="dan()">
鼠标事件 双击 <img src="..." ondblclick="shuang()">
鼠标事件 悬浮 <img src="..." onmouseover="shang(this)">
鼠标事件 移出 <img src="..." onmouseout="xia(this)">
鼠标事件 按下去 <script> window.onkeydown = function(){
console.log(event.keyCode)}
鼠标事件 弹上来 <script> window.onkeyup= function(){
{
console.log(event.keyCode)}
事件冒泡 取消冒泡 e.stopPropagation();
事件捕获 记得有这样的事，正常现象
创建对象1 var dog = new Object(); dog.nickname = '娜娜'; dog.wang = function(){
..}
创建对象2 function userinfo(name,age){
this.name=name;this.age=age;this.say=function(){
...}} var user = new userinfo('kim',30); user.say();
创建对象3 var user = {
name:'kim',age:527,say:function(){
...}}; user.say();
语法格式 var json = {
1:1, 2:2}; var json = [{
},{
}]; var json = {
1:1, 2:2, 3:[1,2,3]}
window.open('http://lagou.com','拉勾网','width=500,height=300,left=400');
screen.width
screen.height
location.href
location.reload();
location.href='http://lagou.com';
history.go(-1)
history.back()
localStorage.setItem("name","curry");
localStorage.getItem("name");
localStorage.removeItem("name");
localStorage.a=1;
localStorage['b']=2;
localStorage.setItem('c',3);
var a = localStorage.a;
var b = localStorage['b'];
var c = localStorage.getItem('c');
sessionStorage.setItem('name','貂蝉');
sessionStorage.getItem('name');
sessionStorage.removeItem('name');
sessionStorage.clear();
setInterval(函数,时间);
setTimeout(函数,时间);
ES6
var [x,y,z] = arr;
let {
username,weapon,horse} = user;