行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、hr、link、input、img、meta
jpg是有损压缩格式，png是无损压缩格式。所以，相同的图片，jpg体积会小。比如我们一些官网的banner图，一般都很大，所以适合用jpg类型的图片。但png分8位的和24位的，8位的体积会小很多，但在某些浏览器下8位的png图片会有锯齿。
<a target="_blank">链接</a>
target用法：_blank表示在新窗口打开被链接的文档；_self表示在相同的框架中打开被链接文档，这也是默认值；_parent表示在父框架打开被链接文档；_top表示在整个窗口中打开被链接文档。
strong:粗体强调标签，强调，表示内容的重要性；
em:斜体强调标签，更强烈强调，表示内容的强调点；
● src是引入外部资源下载到文档，会暂停其他资源的下载
● href是链接外部资源，不会暂停其他资源的下载
<form action="http://localhost8080/xxx/register" method="post">
用户名<input type="text" name="username" />
密码<input type="password" name="userpwd" />
确认密码<input type="password" />
性别<input type="radio" name="sex" value="male" checked="checked" />男
<input type="radio" name="sex" value="female" />女<br />
兴趣爱好<input type="checkbox" name="hobby" value="singing" />唱歌
<input type="checkbox" name="hobby" value="dancing" />跳舞
<input type="checkbox" name="hobby" value="running" checked="checked" />跑步
<input type="checkbox" name="hobby" value="swimming" />游泳
<input type="checkbox" name="hobby" value="climbing" />攀爬<br />
学历<select name="education">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected="selected">本科</option>
<option value="ss">硕士</option>
<option value="bs">博士</option>
</select><br />
简介<textarea rows="5" cols="30" name="briefIntroduction"></textarea><br />
<input type="submit" value="注册" />
<input type="reset" value="重置" /><br />
</form>
<tableborder="1"width="100%">
<!-- 补全代码 -->
<caption>bjpowernode</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</table>
<img alt="img" src="xxx" title="title" />
CSS2选择器：元素选择器，id选择器，群组选择器，类选择器，*通配符选择器，后代选择器
CSS2伪类选择器：a:link/visited/hover/active
CSS3选择器：空格 > +相邻兄弟选择器 ~通用选择器（查找后面所有）
一个css盒子从外到内可以分成四个部分：margin(外边距),border(边框),padding(内边距),content（内容）
默认情况下，盒子的width和height属性只是设置content（内容）的宽和高
盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框;
position 的常见四个属性值： relative，absolute，fixed，static。一般都要配合"left"、“top”、“right"以及"bottom” 属性使用。
1]static：默认位置，（static 元素会忽略任何top、bottom、left 或right 声明）一般不常用。
2]relative：位置被设置为relative 的元素，偏移的top，right，bottom，left 的值都以它原来的位置为基准偏移。注意relative 移动后的元素在原来的位置仍占据空间。
3]absolute：位置设置为absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的父容器设置了position 属性，并且position 的属性值为absolute 或者relative，那么就会依据父容器进行偏移。如果其父容器没有设置position 属性，那么偏移是以body为依据。注意设置absolute 属性的元素在标准流中不占位置。
4]fixed：位置被设置为fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以body 为依据的。注意设置fixed 属性的元素在标准流中不占位置。
总结：position设置为absolute和fixed的元素都脱离了文档标准流;
px实际上就是像素，用PX设置字体大小时，比较稳定和精确。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em的值并不是固定的；
em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，相对的是HTML根元素。
基本类型：null、undefined、boolean、number、string、symbol
对象（Object）：引用类型（也称为复杂类型）
注意: NaN 也属于 number 类型，并且 NaN 不等于自身。
NaN（Not a Number，非数字）是计算机科学中数值数据类型的一类值，表示未定义或不可表示的值。
虽然 NaN 是“Not a Number”，但是它的类型还是数值类型
console.log(typeof NaN === "number"); //true
NaN 和任何东西都不相等——甚至是它自己本身!
console.log(NaN === NaN); //false
undefined是undefined类型。表示"缺少值"，就是此处应该有一个值，但是还没有定义
(1)作为函数的参数，表示该函数的参数不是对象。
(2)作为对象原型链的终点。
null是object类型，代表“空值”，代表一个空对象指针
(1)变量被声明了，但没有赋值时，就等于undefined。
(2)调用函数时，应该提供的参数没有提供，该参数等于undefined。
(3)对象没有赋值的属性，该属性的值为undefined。
(4)函数没有返回值时或者return后面什么也没有，返回undefined。
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事 件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对 象层次的最顶层，即document对象（有些浏览器是window）。
打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。
同步会阻塞，异步不会阻塞
同步：程序运行从上而下，浏览器必须把这个任务执行完毕，才能继续执行下一个任务
异步：程序运行从上而下，浏览器任务没有执行完，但是可以继续执行下一行代码，当被调用者得到结果之后会通过回调函数主动通知调用者。
前者是切割成数组的形式，后者是将数组转换成字符串；
"=="会自动转换类型，因此直接判断两边的值
"==="先判断左右两边的数据类型，然后再判断两边的值
原型链继承，借用构造函数继承，组合继承，寄生式继承，寄生组合继承
如果说放在body的封闭之前，将会阻塞其他资源的加载；
如果放在body封闭之后，不会影响body内元素的加载；
document.write 只能重绘整个页面；
innerHTML 可以重绘页面的一部分；
闭包就是能够读取其他函数内部变量的函数。
闭包的缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量都永远不会被释放，所以我们应该在必要的时候，及时释放这个闭包函数。
document.getElementById(“ID”).value;
var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];//返回的所有的checkbox
var len = domList.length; //缓存到局部变量
while (len--) { //使用while的效率会比for循环更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}
var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”;
dom.style.color = “#000”;
var iArray = [];
funtion getRandom(istart, iend){
var iChoice = istart - iend +1;
return Math.floor(Math.random() * iChoice + istart;
}
//Math.random()就是获取0-1之间的随机数（永远获取不到1）
for(var i=0; i<10; i++){
var result= getRandom(10,100);
iArray.push(result);
}
iArray.sort();
var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
1)创建新节点
createDocumentFragment(); //创建一个DOM片段
createElement(); //创建一个具体的元素
createTextNode(); //创建一个文本节点
2)添加、移除、替换、插入
appendChild(); //添加
removeChild(); //移除
replaceChild(); //替换
insertBefore(); //插入
3)查找
getElementsByTagName(); //通过标签名称
getElementsByName(); //通过元素的Name属性的值
getElementById(); //通过元素Id，唯一性
//思路：先将字符串转换为数组 split()，利用数组的反序函数 reverse()颠倒数组，再利用 join() 转换为字符串
var str = '12345678';
str = str.split('').reverse().join('');
//思路：先将数字转为字符， str= str + '' ;
//利用反转函数，每三位字符加一个 ','最后一位不加； re()是自定义的反转函数，最后再反转回去！
for(var i = 1; i <= re(str).length; i++){
tmp += re(str)[i - 1];
if(i % 3 == 0 && i != re(str).length){
tmp += ',';
}
}
//思路：5个不同的数，每生成一次就和前面的所有数字相比较，如果有相同的，则放弃当前生成的数字！
var num1 = [];
for(var i = 0; i < 5; i++){
num1[i] = Math.floor(Math.random()*10) + 1; //范围是 [1, 10]
for(var j = 0; j < i; j++){
if(num1[i] == num1[j]){
i--;
}
}
}
//思路：每遍历一次就和之前的所有做比较，不相等则放入新的数组中！
rray.prototype.unique = function(){
var len = this.length,
newArr = [],
flag = 1;
for(var i = 0; i < len; i++, flag = 1){
for(var j = 0; j < i; j++){
if(this[i] == this[j]){
flag = 0; //找到相同的数字后，不执行添加数据
}
}
flag ? newArr.push(this[i]) : '';
}
return newArr;
}
AJAX（Asynchronous Javascript And XML）其实就是异步的javaScript和XML。它是一组用于异步显示数据的相关技术。换句话说，它在不重新加载网页的情况下发送和检索数据。
1.页面局部刷新。在读取数据的过程中，用户所面对的不是白屏，而是原来页面的转台，或者正在更新的信息提示状态，只有当接收到全部数据后才能更新相应的内容，而这种更新也是瞬间的用户几乎感受不到。
2.可以充分利用客户端闲置的处理能力，减轻服务器和网络传输的负担。
3.使得web中界面与应用相分离 也可以说是数据与呈现相分离。
1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
2.AJAX安全问题
3.对搜索引擎支持较弱
4.不好调试
5.违背了URL和资源定位的初衷
6.AJAX不是很好支持移动设备
AJAX模块在处理网络请求的时候包括以下四个步骤
①通过XMLHttpRequest类创建xhr对象
②为xhr对象添加属性与回调方法
③令xhr对象执行open()方法，指明请求被发往某处
④令xhr对象执行send()方法，发出请求。
补充：Ajax可以发出同步请求，也可以发出异步请求。但大多数情况下指的是异步请求，因为同步的Ajax请求对浏览器会产生‘阻塞效应。
//创建 XMLHttpRequest 对象
var ajax = new XMLHttpRequest(); //规定请求的类型、URL 以及是否异步处理请求。
ajax.open('GET',url,true); //发送信息至服务器时内容编码类型
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //发送请求
ajax.send(null); //接受服务器响应数据
ajax.onreadystatechange = function () {
if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {
//业务处理
}
};
常用的post,get,delete。不常用copy、head、link等等。
区别：
(1)post比get安全 (因为post参数在请求体中。get参数在url上面)
(2)get传输速度比post快 根据传参决定的。(post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
(3)post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右
(4)get获取数据 post上传数据(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)。
同步请求会阻止用户，直到检索到响应，而异步不会阻止用户。
回调函数将函数作为参数传递给另一个函数。如果我们必须在网站上执行各种AJAX任务，那么我们可以创建一个用于执行XMLHttpRequest的函数和一个用于执行每个AJAX任务的回调函数。
有几种用于调试AJAX应用程序的工具。
● 适用于Mozilla Firefox的Firebug
● 适用于IE的Fiddler（Internet Explorer）
● JavaScript HTML调试器
● MyEclipse AJAX工具
● 脚本调试器
在AJAX中有5个请求的就绪状态。
● 0：意味着未被发现
● 1：表示已打开
● 2：表示HEADERS_RECEIVED
● 3：表示装载
● 4：表示完成
其实美元符号$只是jQuery的别名，它是jQuery的选择器
1.我们可以在页面中使用多个document.ready()，但只能使用一次onload()。
2.document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用。
正常是有9中，但我们常用的就3种：
1.基本选择器：直接根据id、css类名、元素名返回匹配的dom元素。
2.层次选择器：也叫做路径选择器，可以根据路径层次来选择相应的DOM元素。
3.过滤选择器：在前面的基础上过滤相关条件，得到匹配的dom元素。
jQuery对象是一个包含了dom对象的数组 可以通过jQuery对象[下标]获取dom对象
将dom对象放入$("")中转为jQuery对象
如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate（）了，代码如下：
$("ul").delegate("li","click",function(){$(this).hide();}) 当元素在当前页面不可用时，可以使用delegate()
<script language="javascript" type="text/javascript">
$("*").css("border", "2px dotted red");
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#Button1').click(function () {
alert($('#inputField').attr("value"));
});
});
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
window.history.forward(1);
//OR
window.history.forward(-1);
});
</script>
官方微信
官方抖音