常见

HTML :

<! DOCTYPE html> 注意 声明文档类型
<meta http-equiv="refresh" content="0"; url="">'经过一段时间转到另外某个页面
<meta>标签 除了定义解析编码还有优化SEO设置
举例：
<meta charset = "utf-8">
meta：vp 快捷打开
<meta name="viewport" content="width=device-width"/>
<! --只有移动端才能识别 --> <! --content 设置成和设备一样的宽度 -->
<meta name="keywords" content="关键词" >
<meta http-equiv="X-UA-Compatible" content="IE=redge" /> //content="IE=redge" 如果是IE浏览器打开 就用用户的最新版本
<blockquote></blockquote>长段落引用 //有个可选属性 cite="URL"，告知引用的文字来源
<strong></strong>强调字体，加粗
<q></q>短文引用
<em></em>斜体
<del></del> 删除线(横贯线)
<br />换行
<hr />分界线
符号实体 : & nbsp;空格
<address></address> 地址标签
<code></code>短篇计算机代码
<pre></pre>长篇计算机代码
ol>li 有序列表
ul>li 无序列表
dl>dt+dd 自定义列表
table>tr>th+tr>td表格
td属性 rowspan 表示一竖列中 占几格
td属性 colspan 表示一横行中 占几格
<a href=“”></a> 超链接
a标签 target 属性补充：
_blank :在新的页面打开
_parent: 在父框架集中打开被链接文档。
_self:默认。在相同的框架中打开被链接文档。
_top :在整个窗口中打开被链接文档。
<base target="_blank" /> //让当前页面所有a标签 target属性打开方式一样
<img src="" /> 插入图片
form 表单：
<form action="#"> 提交表单到#
<label for="">
<input type="text" value="默认值" id="" >文本框
</label>
<label for=""> <input type="password" id="">密码框
</label>
select>option 下拉列表 //option 属性 selected="selected"默认选中项 <textarea cols（宽）="" rows（高）=" " resize: none; ></textarea>文本域 <fieldset><legend>分组1</legend></fieldset> //表单分组
</form>
input type 类型 ：
raido:单选按钮 checkbox：复选按钮 file:文件选择框
submit:提交按钮 reset:重置按钮 email:邮箱
checked 属性 默认选中状态
raido name属性名要一样才能单选
required input 属性 设置后必填项
resize: none 文本域禁止拉伸

快捷键 (Emmate 语法)：
举例：
ul>li>a[href="#"]*2

<ul>
   <li><a href="#"></a><a href="#"></a></li>
</ul>option{哦嗨哟}*2
<option value="">哦嗨哟</option>
<option value="">哦嗨哟</option>

CSS：

浏览器对多个样式来源进行叠加，最终确定结果的过程
来源有五个
1.内联样式>2.内部样式>3.外部样式表>4.浏览器用户自定义样式>5.浏览器默认样式
选择器优先级 important>id>class
引入方式：
1.内联：

<style>
p{width:20px; height:20px}
</style> 

2.嵌入式：<a style="width:20px;height:20px"></a>
3.外部链接：<link href="#" rel="stylesheet"/> // @import url(文件路径) 将css文件样式导入到当前位置
常见css属性：
width height background border padding margin font-size font-family color line-height text-align text-indent
.class ｛｝ //类选择器
.box li { ｝ //后代选择器
h1[id] [class]{ } //属性选择器
ele:nth-child(n) //属于其父元素的第 N 个子元素。
overflow、display、visibility的区别
visibility:hidden 隐藏元素 要占据空间 属性值visibility或initial 可显示子元素

• 三个方式去掉设置间距基线
  font-size=0
display:block
vertical-align:middle;

display, text-transform（控制英文字体大小写）, overflow , visibility ,opacity , direction（设置文本流方向）, font-weight , cursor white-space（文本空白符+换行）, font-style （字体倾斜） , text-decoration （文本线） , word-spacing （英文单词间距）, letter-spacing （中文单词间距） ,outline: none (取消元素周围的轮廓线), box-sizing ,column-count( 表示父元素里面的文本显示几列 ) , box-reflect（反射（倒影））, zoom(设置元素缩放) , vertical-align text-overflow: ellipsis(文字变成省略号)

css3

transform （对元素进行旋转、缩放、移动或倾斜）
选择器：
｛｝ //所有标签选择器
p{} div{} //标签选择器
#name｛｝ //ID选择器
h1.class{ } //符合选择器 选择所有h1标签名为class名字的
h1, h2, p { } //并集选择器
div > p { } //子元素选择器
div[class="test"]{ } //设置 class 属性值包含 "test" 的所有 div 元素
[class^="icon-"]{ } //class属性内容以icon-开头
ele:first-letter //段落首字母或文字设置
伪类：
: link 未被访问的连接
: hover 鼠标指针悬停在元素上
: active 被按下时候发生的改变
: visited 访问之后的改变
: focus 获得焦点时的改变

overflow 溢出隐藏方式 限于块级元素
display:none; 隐藏元素 包含子元素 不占据空间

• 整站项目开发：
  两种方式：
  一：从头往下一次把每个盒子写完
  二：先把整站的布局搞定，然后把每个布局盒子中的子元素补齐（模块化）

• 平稳退化：
  浏览器在不支持javascript的情况下仍能顺利访问网站。

• 渐进增强：
  用一些额外的信息去包裹原始数据几乎都符合‘平稳退化’原则

• 向后兼容：
  自己的理解：现代大多数浏览器兼容DOM属性和方法，而老式浏览器就算支持JS 但有可能依然不理解DOM →向老的浏览器兼容 （平稳退化）

HTML5

getImageData()：
复制画布上指定矩形的像素数据，然后通过 putImageData() 将图像数据放回画布,返回的数据是一个对象，此对象包含三个属性，分别是data、width和height，其中data就是图像的像素数据。data是一个一维数组，顺次记录着每个像素点的RGBA信息。R代表红色，G代表绿色，B代表蓝色，A代表不透明度，其取值范围均为0-255。对于A，0代表完全透明，255代表完全不透明

canvas putImageData() ：
复制画布上指定矩形的像素数据，将图像数据放回画布。
canvas fillRect()：
绘制“已填色”的矩形。默认的填充颜色是黑色 两个点 p1是对象的x轴起始 p2是对象的y轴起始 p3画布的宽 p4画布的高
fillStyle = "" 设置画布样式
lineWidth 属性设置线条的宽度，lineCap属性设置线条末端 平头、圆头、方头，lineJoin属性控制线条相交的方式的圆交、斜交、斜接
clearRect() 清除画布上矩形区域
beginPath() 绘制新路径
fillText() p1 字符串，x轴 y轴
对象属性：font 、textAlign、textBaseline

toDataURL()：
canvas中将图片的二进制格式转为dataURL格式使用的方法
drawImage() ：
在画布上绘制图像、画布或视频 第一个放图片元素 第二个放xy的点
drawImage有三种用法
context.drawImage(img, x, y);
这种方法会将图片左上角置于坐标相对于画布的(x， y)点上，如果画布尺寸足够则画出整个图像，否则将超出画布的部分舍弃

context.drawImage(img, x, y, width, height);
新绘制的图像会根据指定的尺寸进行放大或缩小

context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
sx和sy指定图像被截取部分左上角在图片上的坐标，swidth和sheight指定图像被截取部分的尺寸，x和y指定图像被截取部分画在画布上的位置，width和height指定图像被截取部分在画布上重绘的尺寸
grayscale 属性
element.grayscale //灰度图
<object>可以引用各种影片播放器
HTML5 音频和视频的兼容性，要包含下列三个版本
1.基于H.264和AAC的MP4
2.WebM（VP8+Vorbis）
3.基于Theora视频和Vorbis音频的Ogg文件
为了最大程度兼容不支持HTML5的浏览器一般还准备Flan或QuickTime插件版视频

controls 自定义控件：
currentTime 返回当前播放的位置 秒计算
duration 返回媒体的总时长 对于流媒体返回无穷大 秒计算
paused 表示媒体是否处在暂停状态
play 在媒体播放开始时发生
pause 在媒体暂停时发生
loadeddata 在媒体可以从当前播放位置开始播放
ended 在媒体播放完而停止的时候发生
! 不管创建什么控件，都要在video标签写上 controls

JS

JavaScript 由
ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
组成

ECMAScript：
语法、类型、语句、关键字、保留字、操作符、对象

DOM分为三部分：
（1）核心DOM（DOM Core）：遍历DOM树、添加新节点、删除节点、修改节点
它们并不专属JS，支持DOM任何一种程序设计语言都可以使用

（2）HTML DOM：以一种简便的方法访问DOM树
它们只能用来处理web文档

（3）XML DOM：准用于操作XML文档

引入方式：
1.内联
<script> 内容</script>
2.外部
<script src='"文件名".js'></script>
<script> type属性值：
Src
Async 异步 同步执行JS 和HTML的东西 JS下载完毕就可以执行
Sync 同步
defer 只有外部脚本可以使用 文档完全被解析显示才执行

数据类型分为两大类：
基本类型 （使用typeof）
Number
String
Null //空
Boolean //当值为0 、空字符串、NaN、Undefined null为 false
NaN
Undefined //变量声明，但未赋值
引用类型 （使用tinstanceof）
Object
Date ?
Array
Function

for循环快捷键 itar
无穷大 infinity
最小值：Number.MIN_VALUE 值为5e-324
迭代：重复反馈的过程的活动，每一次对过程的重复被称为一次“迭代”，而每一次迭代得到的结果会被用来作为下一次迭代的初始值

方法：
is() //检查是否有id class 标签名 选择器表达式
hasClass() //检查是否有class
typeof() //查看当前变量的数据类型
isNaN() //不是数值的值会导致这个函数返回true
parseInt() //解析一个字符串，并返回一个整数 也可进制数转换
Number() //字符串只要有一个不是数字的字符，返回NaN
String() //可把任何值转换成字符串 不能转换进制的字符串
toString() //把值或进制转换成字符串 无法转换null和undefined
split() //用于把一个字符串分割成字符串数组
eval() //返回计算字符串的值
join() //把数组里所有元素放入字符串里用制定的符号来分隔 eg alert(arr.join()) → 啊，西，吧
parseFloat() //解析字符串返回数字
getAttribute() //返回指定属性名的属性值。
setAttribute(属性，更改的内容)
getElementById( ) //获取元素id名
indexOf（） //返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf() //返回某个指定的字符串值在字符串中最后出现的位置。
createElement () //创建元素
createTextNode(） // 创建文本节点
insertBefore() // 插入到目标元素前面
addLoadEvent() //加载
addEventListener //添加监听事件不加on 不兼容可用 attachEvent代替 事件要加on前缀
push() //在数组末尾添加目标 （2017.7.4）
pop() //去掉数组末尾目标
shift() //在数组开头去掉数组目标
unshift() //在数组开头添加目标
slice() //切割（提取）数组中某个字符并返回切割的字符 两个字符的位置来指定子串
substr() //用下标获取字符串字符位置 字符位置和长度来指定子串
splice() //在指定数组某一位后面添加或删除目标
concat() //arrOne.concat(arrTwo,arrThe) 合并数组，组合数组按照添加顺序排序
reduce() //目前用来数组求和 参数（前一个值，当前值，index，array）
reduceRight() //作用同上，不过是反方向迭代
reverse() //数组顺序反向
sort() //用于数组排序，内写函数，最好写比较
toLowerCase() //返回数组小写形式
toLocaleUpperCase() //返回数组大写形式
Number() //返回数字形式
every() //对数组中每一项运行给定函数，如果每项返回的结果为true，返回 true
some() //对数组中每一项运行给定函数，如果有一项返回的结果为true，返回 true
filter() //对数组中每一项运行给定函数，返回结果为true的项组成数组
map() //对数组中每一项运行给定函数，每项返回结果组成数组 参数：item（当前每一项）、index（索引值）、arr（原数组）
forEach() //对数组中每一项运行给定函数，没有返回值 参数同上
parse() //接受表示时间字符串参数，根据内容返回相应日期毫秒 美国格式
UTC() //参数（年，月，日，分，秒，毫） 中国格式 月份类似index H(0~23)
now() //返回自1970年1月1日 00:00:00 UTC到当前时间的毫秒数（在不支持的浏览器下把对象转换成字符串）
getTime() //返回值同上
toDateString() //显示星期、月、日、年
toTimeString() //显示时分、秒、时区
toLocaleDateString() //地区格式显示星期、月、日、年
toLocaleTimeString() //显示时分、秒
toUTCString() //显示完整的UTC日期 向后兼容可用toGMTString
( get/set )PullYear() //取得/设置4位数年份
( get/set ) Month() // 取得/设置 月份 0表示一月
( get/set ) Date() // 取得/设置 天数
( get/set ) Hours() //取得/设置 小时
( get/set ) Minutes() //取得/设置分钟
( get/set ) Seconds() //取得/设置 秒
( get/set ) Miliseconds() //取得/设置 毫秒
setTime() //毫秒，会改变日期
hasOwnProperty() //检测对象是否这个属性值
Object.keys(val) //返回对象的属性 键
querySelectorAll //获取匹配的选择器元素

toString() 和 toLocaleString() 区别：
在Date对象区别显著，根据浏览器不同显示方式会不同，前者输出一般为军用时间，后者输出当地适应格式返回时间

属性
length //返回对象的长度
children //获取一个元素的所有子元素 不包括节点
childNodes //获取一个元素的所有子元素 包括节点
appendChild //添加子节点到目标对象下
innerHTML //获取 | 修改 定义文本内容
nodeValue //获取 | 修改 元素节点的值
nextSibling //下一个兄弟节点

innerHTML 返回了元素所包含的全部的节点的所包含的各种值了，以字符串的形式。
nodeValue 返回属性值
value 返回元素的输入值

js事件属性
clientX | Y 获取x或者y轴的数据

转义符
console.log( ""abc"") 输出"abc"
console.log( ""\t abc""); 输出 " abc"
\n 换行 \t 制表 \ b 空格
\r 回车 \ \ 斜杠 \ ' 单引号

运算符优先级
一元运算符 ++ -- ！
算术运算符 * / % 后 + -
关系运算符 > >= < <=
相等运算符 == != === !==
逻辑运算符 && 后 | | //短路运算符
&& // 两个条件都成立，那么这个表达式才成立
| | //其中一个条件成立，那么这个表达式就成立

• a++ 和 ++a 区别
  eg:

 var a = 1;
 ++a; // 先a = a + 1  再表达式返回a 的值
 a++; //  先返回表达式 再加;
 var a = 1 ; var b = ++a  + ++a; console.log( b );  //5
 var a = 1 ; var b = a++ + ++a ; console.log( b );  //4
 var a = 1 ; var b =a++ + a++; console.log( b );  //3

• 按位操作符：
  & ：eg var x= 25&3; // 1 两个数值对应位 同1 才1
  | ：eg var x= 25|3; //27 两个数值有1就得1
  ^ : eg var x= 25^3; //26 两个数值对应只有一个1的时候才返回1
  << : eg var x= 2<<5; //64 十进制10 往左移五位数 1000000
  >> : eg var x= 64>>5; //10 十进制1000000 往右移五位数
  >>> : eg var x = 64>>>5 //无符号右移正整数和>>一样 负数差距大

Math对象：
Math.PI //π
Math.pow(2,53) //2的53次幂
Math.sqrt(3) //3平方根
Math.round( 0.6 ) //四舍五入 1.0
Math.ceil( 0.6 ) //向上取整数 1.0
Math.floor( 0.6 ) //向下取整数 0.0
Math.abs( -5 ) //绝对值 5
Math.max( a,b,c ) //最大值
Math.min ( a,b,c ) //最小值
Math.random( ) //生成0-1之间的随机数

FCC题 arguments 类似数组的对象，对应传递函数的参数。只有length callee属性
Array.prototype.slice.call（argunments, ） 第二个选择参数index;
可以通过 arguments对象访问某个参数
eg : addNum(one,tow)
one == arguments[0],tow == arguments[1];

if else结构：
1） if 条件括号后面不能加分号;
2） if 和else 中的代码 不能两段同时进行

switch case:
switch ( 变量 )｛
case 变量的值1：
代码块1；
break；
.....
default:
默认代码块；
break;
｝

while循环
while( 条件语句boolean ){
执行的代码}
终止 break；
continue :结束本次循环开始下一次循环

do while
先执行再判断
do{ 代码 }while（boolean）;

for 循环
for( var i=0;i<次数;i++){
代码｝；

lable语句 lable:statement
可搭配break、continue 用于双循环第一次达到条件后立刻退出整个循环；

隐式转换：
1.使用+ - * / % 运算符来隐式转换成number
eg1:
var a ="123";
a = +a; //typeof a =>number
eg2.:
var a ="123";
a = a * 1; //typeof a =>number
eg3.:
var a ="123";
a = a % 12; //3

2.转换成字符串
var a = 123;
a=a + "";

3.转换成布尔
var a = 123;
a=！a ; //typeof a =>false

三元运算符
结构： boolean表达式？操作一：操作二；

var a = 14;  
var b = 15;
a>b? alert( a ) : alert( b );

三位数比较

var a = 14;  
var b = 15;
var c = 16;
( a>b ? a : b)>c ? alert( a>b ? a : b ) :alert( c );

使用new创建对象：
var a = new Object();
创建属性：
a.xingming="yoyo";
a.chengji=99;
a.xingbie="女"；
取值：
alert(a.chengji);

构造函数创建对象：
var a = function(){
this.name = "ys",
this.xingbie = "女"
}

更好的做法：
var a = {
name: 'Jeffrey',
lastName : 'Way',
someFunction : function() {
console.log(this.name);
}
};

对象：
Array
Date

数组（Array）：
var a = new Array( );
a[0] = "81";
a[1] = "89";
a[2] = "85";
a[3] = "86";
var arr = [ ];//创建一个数组
更好的做法：
var a = ['Joe','Plumber'];
遍历数组所有值：
1 . alert(a.length);

2. for in ,循环定义一个变量eg:
   var i ;
   for(i in a){
   alert(a[i] )}; //
3. for 循环 遍历 eg:
   for( var i=0;i<a.length;i++){
   console.log( a[i] );
   };

Date
var x = new Date();
都有个设置UTC日期的方法
当创建函数后面的参数叫形参 ( 形式参数）;
当调用函数后面的参数叫实参（实际参数）;
函数参数也可以当做变量来使用

执行环境： 定义了变量和函数有权访问的其他数据
变量的作用域：
全局变量
局部变量

作用域链 可以向上搜索但不能向下搜索 保证对执行环境有权访问的所有变量和函数的有序访问

闭包：
在函数内部可以访问到函数外部的变量。

1.全局作用域的预解析
2.先找到var、 function和参数
3.找到var 、function 之后，把它们提前
4.解析一行执行一行

作用域链：局部找不到值就在上一层作用域中找，找到了就用 找不到会再上一层 这个就是作用域链。

把一个需求分解成一组函数或数据的能力—编程。

递归：
就是函数调用自己，进入无限循环，要有结束的条件。
var i = 0;
function f1( ){
console.log("从前有座山，山里有···");
i++;
if (i<10){
f1( );
}
}
f1( );

函数和方法的区别

• 函数 是可以执行的javascript代码块，由javascript程序定义或javascript实现预定义。函数可以带有实际参数或者形式参数，用于指定这个函数执行计算要使用的一个或多个值，而且还可以返回值，以表示计算的结果。
• 方法 是通过对象调用的javascript函数。也就是说，方法也是函数，只是比较特殊的函数。

对象的属性可以包含基本值、对象或函数，对象就是一组没有顺序的值，可以把它想象成键值对，其中值可以是数据和函数。

• 创建函数三种方法

1.创建对象的形式：
var student = new Object( );
student.name = "YS";
student.age = 20;
student.sex = "女";
student.score = 100;
student.sayHi = function( ) {
console.log("大家好，我是" + this.name);
};
console.log(student.score);

2.自定义构造函数的形式：
function Person(name,age,sex,score){
this.name = name;
this.age =age;
this.sex = sex;
this.score = score;
this.sayHi =function(){
console.log("大家好，我是"+this.name);
}
}
var s1 = new Person("YS",20,"女",100);
console.log(s1);
3.函数直接量
var person = function(){代码}

for in 遍历对象的属性和方法
var arr = new Array(5,6,7,8,9);
for(var key in arr){
console.log( arr[key] );
}
有些系统提供的对象的属性和方法无法遍历，原因：属性和方法被设置为不可遍历

instanceof 操作符 关键字
用于检测引用类型的值是否是对象的实例
a instanceof b?alert("true"):alert("false"); //a是b的实例？真:假

DOM :文档对象模型 （document object model）又成为文档树模型，是一套操作HTML和XML文档的API （应用程序编辑接口）
可以做什么？
找对象
设置元素的属性
设置元素的样式
动态创建和删除元素
事件-触发响应

内置对象：eg 用户自定义 ;
原生对象: 程序开始之前内置到ECMAScript里 eg parseInt;
宿主对象: 由宿主环境提供,可能是ES自身实现的,通常是浏览器，并可能包括如window、alert.

RegExp正则表达式
元字符需要转义 前面+
{([ \ ^ & | ? * + . ])}
var x = /[bc]at/g;
var x= new RegExp("[bc]at","g");
\u4E00-\u9FA5 匹配任何汉字

JQ

jq如果和其他库命名重复要重新定义：
eg: var * = jQuery.noConflict(); *(".class"); == $(".class");

• 方法：
  prop() -设置或返回元素属性和值
  text() - 设置或返回所选元素的文本内容
  html() - 设置或返回所选元素的内容（包括 HTML 标记）
  val() - 设置或返回表单字段的值
  attr() - 获取属性
  parent() -元素父元素
  children() -子元素
  clone() -克隆元素
  append() - 在被选元素内部的结尾插入内容 可添函数
  appendTo() -将元素添加到目标后面 可用于选择器
  prepend() - 在被选元素内部的开头插入内容
  after() - 在被选元素之后插入内容
  before() - 在被选元素之前插入内容
  remove() -移除元素
  appendto() -将元素移到某个元素下
  clone() -将元素克隆
  伪类
  :even -双数
  :odd -单数

• 重载：
  reload chongzai
  overloaded zhongzai
  个人理解：Js 函数名没有两个相重的，会用后面定义的，其他语言有的可以有两个一样的函数名 只要传递的参数和个数不一样就行 ,不存在函数签名特性，ECMAScript 函数不能重载；

• 当DOM和JS对象创建了循环引用，不用它们的时候手动清理内存，赋值null 这种做法叫解除引用（让值脱离执行环境，以便垃圾收集器下次运行时将其收回）；

• AJAX：
  使用现有标准的新方法在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
  不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
  XMLHttpRequest 对象 IE5 和 IE6 使用 ActiveXObject 是ajax核心 用于在后台与服务器交换数据