本文全面介绍了HTML5、CSS3及JavaScript的基础知识和技术要点，覆盖了从HTML5的结构标签到CSS3的动画效果，再到JavaScript的核心概念与实践技巧。适合前端开发者深入理解和掌握前端技术栈。
H5知识点复习（面试必备）
一，HTML部分
01，WEB的三层结构？
• 结构层：也叫内容层，由HTML提供。 HTML叫超文本标记语言。（HyperText Markup Language）
• 样式层：修饰层，由CSS提供
• 行为层：JavaScript提供
02，HTML基本结构？
文本声明 <!DOCTYPE html> 的作用？
根标签 <html>
头部 <head>
主体 <body>
03，HTML中的基本标签？
标题标签：hn headline 定义标题 经典用法：作为标题或网站logo
段落标签：p
超链接标签：a 站内（相对路径，绝对路径）， 站外（URL）， 锚点（设置锚点和链接到锚点）
图像标签：img alt(图片路径错误时显示alt对应属性值， SEO) src width height title
div和span 没有任何语义， 是用来组织划分结构的，主是配合CSS完成页面布局和页面美化。
04，alt和title的区别？
1，title是仅仅是为了提示，有利于用户体验， alt有利于SOE。
2，alt只能在图片标签中使用， titile可以在所有标签中使用
05，什么是标签的语义化？
所谓的标签语义化就是使用什么样的标签做什么样事，有利于SEO， 使网页结构更加合理，方便其它设备解析。
06，列表标签？
无序列表
ul + li list u->unorder li->list type
常见列表类， 导航， 轮播图， tab选项卡.....
有序列表
ol+li o order list
自定义列表
dl dt dd definition list title description
作用：对一个值进行解释
体现在三个方面：
1，一个值一个解释
2，一个值多个解释
3，多个值一个解释
07，表格标签？
table tr th td thead tbody tfoot
table的相关属性：
width, heigth, bgcolor, border, cellspacing, cellpadding, align
tr的相关属性：
height, bgcolor, allign, valign
td和th的相关属性：
rowspan colspan
08，表单？
form（表单） input （表单元素） select和option(下拉菜单) textarea(文本域)
action: 提交哪个页面进行处理
method: 提交方式，常见有get提交和post提交， 默认是get提交
09，get和post的区别？
1，get提交，提交内容都是出现在地址栏中，post不会
2，get提交不太安全，post相对安全
3，.........
二，CSS部分
01，CSS布局的优点？
1，可以实现表现层和结构层的完全分离， 符合WEB标准
2，便于维护，团队开发等
02，CSS的继承性？
所谓的继承性是指我们写的样式不仅可以应用到某具体的元素，还可以应用到它的后代。
font- text- color line-height
03，CSS的层叠性？
所谓的层叠性是指当多个样式冲突时，以哪个样式为准。
引入CSS的三种方式：
行内 > 内部 = 处部
基本选择器：
ID > CLASS > P
选择器的特殊值：
id:0100 class:0010 p:0001 行内：1000
特殊值最终的结果是一样的，就采用就近原则
!important
04，CSS的基本语法？
选择器{}
05，CSS的选择器？
基本选择器：
标签选择器，ID选择器，CLASS选择
其它选择器：
通配符选择器， 后代选择器， 分组选择器， 伪类选择器， 交集选择器p.item
06，引入CSS的三种方式？
1，行内 要标签里面写入 style属性
2，内部 在head标签中写入style标签
3，外部 在当前页面的外面写一个css文件，然后通过link引入
07，CSS的属性？
字体 font- 6个 font-family font-size font-weight font-style font color
文本 text- 4个 text-align text-indent text-decoration
盒模型 6大属性
布局 4个
列表 1 个
定位 6个
表格 3个
08，什么是盒模型？
HTML标签都是矩形的，类似于一个盒子，我们可以通过6大属性来控制这个盒子，那么这个矩形就是盒子模型。width, height, border,padding,marign,background
09，元素的分类 ？
在CSS中，我们把HTML标签分类了两类：块状与行内。 块状元素和行内元素。
块级元素：
div, hn, 列表类，p, 表格类， form
行级元素：
完全行级的
span a em strong i b label button
行内块：
img input
10，块级元素和行内元素的区别？
1，块级元素独占一行，行内元素并排显示
2，对于盒子模型的6属性，块级元素都起作用，行级元素width和height不起作用，maring和padding在我不垂直方向不起作用，其它都起作用
3，行内块对盒模型6大属性都起作用，就是不能独占一行
11，流动布局？
所谓的流动布局就是按照标准文档流进行的布局，标准文档流中有两个特征：block 独占一行，从上到下进行布局， inline 从左到右并排显示，如果满一行，自动换行。
12，浮动布局？
什么是浮动布局？
所谓的浮动布局是CSS又提出一个布局模型，流动布局是遵循标准文档，浮动布局是脱离标准文档，但是它并没有完全脱离。它的作用：让块级元素可以并排显示，在同一行上和平共处。
注意点：
1，浮动布局和流动布局是不同的布局模型。但是如果一个盒子浮动了，那么这个盒子的内部默认还是按照流动布局进行的。
2，如果一个盒子浮动了，那么它就会被自动设置成块级元素。
3，如果一个元素浮动了，那么它势必会对它后面的元素造成影响，可以使用clear去清除影响。也就是清除浮动。
13，详解盒模型？
盒模型分为：标准的盒模型和IE的盒模型
width和height
对于块级元素，它表示内容区域
对于行级元素，无效，宽是由内容决定的，高是由font-size决定
默认值是auto， 可以给它设置百分比，是相对于父元素的widht和height来说的。
border 粗细 样式 颜色
边框的大小（粗细） border-width 可以从四处方向进行描述 5px thin medium 等，
边框的样式 border-style 可以从四处方向进行描述 solid dash dotted none
边框的颜色 border-color 可以从四处方向进行描述 三种表示法
padding 内边距 补白 内容到border的距离
padding后面写一个值：上，下，左，右的padding都一样
写两个值：第一个值表示上下，第二个值表示左右
写三个值：第一个值表示上，第二个值表示左右，第三个值表示下
写四个值：按上，右，下，左顺序
分为四个方向：
padding-top
padding-right
padding-bottom
padding-left
注意点：
1，有些标签有默认的padding
2，对于行内元素，padding在垂直方向上不影响行高
3，padding可以设置百分比，是相对于父元素的widht而言
margin 外边距 元素与元素之间的距离 是在border之外的
margin后面写一个值：上，下，左，右的padding都一样
写两个值：第一个值表示上下，第二个值表示左右
写三个值：第一个值表示上，第二个值表示左右，第三个值表示下
写四个值：按上，右，下，左顺序
分为四个方向：
margin-top
margin-right
margin-bottom
margin-left
注意点：
1，有些标签有默认的margin
2，对于行内元素，margin在垂直方向上无效
3，margin可以设置百分比，是相对于父元素的widht而言
4，margin的重叠现象（margin塌陷问题）
5，margin可以设置负值
background
background-color
background-image
background-repeat
background-position
background-attachment
14，浮动元素的表现？
• 1，字围
• 2，脱标
• 3，贴靠
• 4，收缩
15，清除浮动？
clear:both
overflow:hidden
16，display:none和visibility:hidden的区别
display: 显示 作用是用来设置元素的显示状态
block
inline
inline-block
none
一个元素如果设置了display:none，那么它就不显示了，并且在页面中不占任何空间。
一个元素如果设置了visibility:hidden，那么它也不显示了，但是它会占据页面的空间。
17，层布局模型？ position
相对定位
position:relative 需要配合 top, left, rigth, bottom来设置偏移距离 使用其中两个就可以， 相对于没有定位前的那个位置进行定位的，定位后原来的空间仍被保留
什么地方用相对定位：
1，作为绝对定位的参考点
2，实现一些局部位置的调整时
绝对定位
position:absolute 需要配合 top, left, rigth, bottom来设置偏移距离 使用其中两个就可以， 还有可能要使用到z-index来设置顺序。
它是按照参考点进行定位的，通常我们把参考点设置到它的父元素，子绝父相。
使用绝对定位就完全脱离了标准文档流。可以使用z-index来改变显示的顺序。
固定定位
position:fixed 需要配合 top, left, rigth, bottom来设置偏移距离 使用其中两个就可以， 固定定位的参考点是相对于视窗。
不固定：
position:static
18，列表布局
list-style
list-style-type
list-style-positon
list-style-imgage
三，JS部分
01，什么是JS？ JS包含哪些内容？
JS是一门运行在浏览器端的脚本语言，是一门真正的编程语言。JS可以控制HTML，CSS，给页面提供行为。 JS游戏编程。
内容：
ECMAScript 是JS的一个标准
BOM 浏览器对象模型， JS访问浏览器的接口
DOM 文档对象模型，JS访问页面内容的接口
02，页面引入JS的三种方式？
• 行内 将JS代码作为标签的属性
• 内部 在页面中使用script标签，将JS代码写在scirpt标签中
注意问题：1，script可以放在页面中任意位置，推荐放到最后。
2，script标签可以写多个，js代码就放在scirpt标签中。
• 外部 在页面中通过script标签中的src属性引入外部的js文件
注意问题：1，当你使用了外部引入js， 那么script中就不能写代码了，写了
也不会执行的。
03，JS声明变量有哪些特征？
var variable(变化)
var a = 1; // 定义了一个变量，名称叫a, 它的值是1;
• 单独声明
• 一次性声明多个
• 遗漏声明 避免
• 重复声明 避免
04，JS的中都有哪些数据类型？
数据类型：
基本数据类型
数值 number
不区分整数和小数
3.14 99
最大值和最小值
Number.MAX_VALUE Number.MIN_VALUE
整数有多种表示
10进制 16进制 8进制
小数也有多种表示
3.14 .14 3.14e5
算术运算符的特殊性
溢出不报错
除0不报错
运算的不精确性
不要比较两个小数
字符串
需要使用引号引起来 单引号 双引号， 引号在配对使用
外双内单 外单内双
布尔
true
false
下面的数值会被隐式转化成false, 其它的被转化成true
undefined
null
0/-0
NaN
“”
undefined
是针对普通变量来说的
如果声明了一个变量，但是没有赋值，它的值就是undefined
null
是针对对象来说的
var timer = null;
引入数据类型
内置对象 JS语言（ECMAScript）中本身提供的对象
宿主对象 BOM或DOM中的对象
自定义对象
05，JS的中都有哪些运算符？
具有某种功能的符号叫运算符。JS中的运算符有6大类。
• 算术运算符
• 赋值运算符
• 逻辑运算符
• 关系运算符
• 位运算符
• 其它运算符
算术运算符
+ - * / % ++ --
赋值运算符
= += -= *= /= %=
a += 5 ---> a = a+5;
逻辑运算符
&& || !
关系运算符
> >= < <= = = = = = ! = ! = =
位运算符
略
其它运算符
typeof + ?: delete instance of
06，如何理解i=j=k=10?
赋值运算符的副作用：将一个数赋给一个变量，这个时候，整体表达式也有一个值，就是那个数。
赋值运算符具有右结合性，首先它将10赋给了k, 那么此时k的值就是10， 又因为赋值运算符具有副作用，所以k=10整体也有一个值，这个值就是10. 接着又将这个10赋给了j .....
07，= ，==， ===的区别？
= 是赋值运算符 具有右结合性 会将右边的值赋给左边的变量
== 是关系运算符 是用来判断左右两个操作数的值是否相等
=== 也是关系运算符 是用来判断左右两个操作数的值和数据类型是否相等
08，var a=6; var b = true; console.log( a && b ); console.log( b && a );
第一个结果是 true
第二个结果是6
需要从三个层次去理解：
1，如果操作数都是布尔值，只有二者都为true时，结果才为true, 否则为false
2，&&可以对真值或假值进行运算，如果两个都是真值， 则返回一个真值。但是真值并不仅限于true, 假值也不仅限于false。下面的值会被转化成false:undefined, null, 0/-0, NaN, “” 。 最终的结果并不总是ture或false, 而是当前的值。如果第一个表达式的值为真，那么就以么二个表达式的值为结果，这个结果不是转换化的值，而是值本身。
如果第一个表达式为假，那么就以第一个表达式的值作为结果，这个结果不是转换化的
值，而是值本身。
3，运算过程中，先计算左操作数的值，如果左操作数为假，则整个表达式的结果为假，也就是左操作数的值。同时停止对右操作数的运算。 如果左操作为真值，整体的结果就依赖于右操作数。
09，var x = false; var y = 3; console.log( x && y-- ); console.log( y );
第一个结果为false
第二个结果为3
10，强制类型转化的例子？隐匿类型转化的例子？
强制转化：
parseInt(), parseFloat(), Boolean(), String(), Number(), Object()
隐式转化：
字符串连接运算符+， 只在一个操作数为字符串，那么另一个操作数会被隐式转化成字符。
！逻辑非， 会将操作数隐式转化成布尔值， 然后取反
== 关系运算符 undefied == null 会将undefined和null都转化成false
11，JS中都有哪些表达式？
任何有值的内容都是表达式。
• 原始表达式
• 运算符构成的表达式
• 对象和数组初始化表达式
• 函数定义表达式
• 调用表达式
• 对象创建表达式
原始表达式
直接量，关键字，变量都是原始表达式，是表达式构成的最小单位。
运算符构成的表达式
算术表达式，关系表达式，逻辑表达式，赋值表达式
对象和数组初始化表达式
定义对象和定义数组
函数定义表达式
var f = function(){}
调用表达式
由于函数调用，都会返回一个值，叫调用表达式
对象创建表达式
var a = new Date(); 创建对象，通常会返回一个对象，叫对象创建表达式
12，打印九九乘法表？
任何有值的内容都是表达式，语句就是命令或整句。它的特征以;结尾， 作用是用来执行某条指令。
JS中常见语句：
• 表达式语句 在表达式后面加上;就形成了表达式语句
• 复合语句 {}
• 声明语句 var function
• 条件语句 if if..else.. if... else if...else switch
• 循环语句 for while do...while
• 跳转语句 break continue return 标签跳转
13，break和continue的区别？
当用来循环语句时，break表示跳出整个循环，不再进行循环。continnue跳出本次循环，继续下次循环。
break可以用来switch语句。
return 跳转语句只能用来函数中。
14，函数定义的两种方式？ 它们有什么区别？
编程中的函数也是借鉴数学中的函数。 函数能够提示一些规律，有这个规律后可以解决实际问题，或者一个函数就是一个功能。我们要使用这个功能，那么我们就去调用这个函数。函数的作用：代码重用，用于组织代码，作为构造器，用于生成对象。
• 函数声明
• 函数表达式
函数声明
是使用function关键字
格式如下：
function 函数名（形参）{ 函数体 }
函数声明后，只有调用了，能执行
函数表达式
var f = function(){}
本质就是一个变量
区别：
使用声明的方式，会在预编译期间把函数声明提前。那么函数表达式不能提前，它的本质就是一个变量，我们就要遵循变量的使用规则---先声明后使用。
15，JS是一门弱数据类型语言？都体现在哪些方面？
1，变量在声明的时候，可以不指定类型
2，函数中的参数，在声明的时候，也不需要指定类型
3，.....
16，JS中都有哪些作用域？
作用域是针对变量来说的，是指变量的生效范围，就是一个变量在什么范围内可以访问，在什么范围内不能访问。
全局作用域 -- 全局变量 全局的是不能去访问局部的
局部作用域 -- 局部变量 局部的可以去访问全局的
全局变量和局部变量的分界点 -- 函数
JS中没有块级作用域{}
17，目前我们学习的创建对象方式有如些？
什么是对象？ 对象是属性的无序集合， 把静态特征和动态的行为组合在一起，形成一个完整的对象。
• 直接量（字面量）
• new 关键字
直接量（字面量）
// 方式一
var dog = { “name”:”haha”, “age”:5, “run”:function(){} };
// 方式二
var dog = {};
dog.name = “haha”;
dog.age = 6;
dog.run = function(){};
new 关键字
var dog = new Object();
dog.name = “haha”;
dog.age = 7;
dog.run = function(){};
18，什么是对象？什么是单体内置对象？
什么是对象？ 对象是属性的无序集合， 把静态特征和动态的行为组合在一起，形成一个完整的对象。
所谓的单体内置对象就是不需要new，直接使用的，如Math
19，随机一个[20, 90)之间的整数？
[0 90) [20 90)
20，打印出如下图形？
*
**
***
****
*****
*
***
*****
********
第一个图案：
第二个图案：
分析如下：
21，什么是数组？ JS中的数组和C语言中的数组有什么区别？
什么是数组？ 数组是值的有序集合，值就是我们前面所讲的各种数据类型的数据。
区别（特点）：
1，JS数组是无类型，数组元素可以是任意类型
2，数据元素也可以是对象或数组
3，JS数组是动态的，根据需要它会们增长或缩减
4，JS数组的索引不一定是连续的，它们之间可以有空缺
5，JS数组是对象的特殊形式，类似于矩形和正方形。
22，创建数组有哪些方式？
• 直接量（字面量）
• new的方式
直接量（字面量）
var arr = [“html”, 12, true, “css”]; []就表示一个数组 对象是使用{}
new的方式
var arr = new Array(“html”, 12, true, “css”);
注意：
var arr = new Array(5); // 创建一个数组长度为5的数组
var arr = new Array(“5”); // 创建一个数组，里面有一个数组元素，为字符串5
23，数组的基本操作？
增删改查
获取一个数组元素：
数组名[索引]
增加一个元素：
var arr = [1,2,3];
数组名[索引] = “haha”;
修改一个元素：
数组名[索引] = “haha”;
添加：
push 在数组的后面去追加新的元素
var arr = [1,2,3];
arr.push(4); // 在arr后面追加一个4 [1,2,3,4]
unshift 在数组的前面插入新的元素
var arr = [1,2,3];
arr.unshift(4); // 在arr后面追加一个4 [4,1,2,3]
删除：
pop 删除数组中的最后一个元素
var arr = [1,2,3];
arr.pop(); // [1,2]
shift 删除数组中的第一个元素
var arr = [1,2,3];
arr.shift(); // [2,3]
24，数组中的常用方法？
• join
• reverse
• concat
• sort
• slice
• toString
join
将数组中的元素，使用某种符号连接起来，从而形成字符串
reverse
将数组中的元素，顺序倒置
concat
合并多个数组
sort
对数组中的元素进行排序
slice
切割，截取数组中的片段
格式：slice(start, end); start和end表示索引值（不包含end索引值对应的元素）
toString
是从object继承过来的，意思是将数组转化成字符串
25，创建字符串都有哪些方式？
• 直接量（字面量）
• new方式
直接量（字面量）
直接使用引号引起来，就可以，单引号或双引号都可以
new方式
26，字符串的一些常见操作？
• length
• concat
• 查找
• 截取
• 大小写转换
• 替换
• 转数组
length
可以通过length获取字符串的长度
concat
和+类似
查找
charAt char是字符的意思 at在什么地方 charat可以获取字符串中的某个字符
charCodeAt 获取字符串中的某个字符对应的ascii码
indexOf 获取索引
lastIndextOf 获取字符串自右向左中第一个字符出现的位置
search 通常用在正则中
截取
substr(start, length)
substring(start, stop)
slice
截取
大小写转换
toLowerCase, toUpperCase
替换
replace
str.replace(“a”, “A”);
转数组
split
四，DOM部分
01，什么是BOM？ 什么DOM？以及BOM与DOM的关系？
bom（brower object model）: 浏览器对象模型
bom的组成：
window
navigator
frames
location
history
document
screen
为什么需要bom?
让JS有能力与浏览器进行”对话“。
dom: 文档对象模型
bom中包含了dom, document非常重要，所以我们单独提出来形成一个概念：dom
02，为什么现在还在使用DOM0？
dom 是分版本， DOM0， DOM1， DOM2，DOM3
• 1，DOM0的兼容性是最好的，所有浏览器都支持这个DOM0
• 2，DOM0中提供了很多有方便的方法来获取文档中的元素
03，DOM1中的两大核心？
1，树模型
当页面加载完后，会形成一个树模型。
树模型中常见的三大节点：
• 元素节点
• 属性节点
• 文本节点
节点与节点之间的关系：
• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling
• previousSibling
使用节点与节点之间的关系不好的地方：
• 1，写起来费劲
• 2，兼容性问题
2，标准方法
• getElementById
• getElementsByTagName
04，节点与节点之间都有什么关系？
节点与节点之间的关系：
• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling
• previousSibling
注意：有一个关系没有问题，parentNode
05，选取文档元素的方式都有哪些？
• DOM0级中有若干个方法
• 节点之间的关系
• 标准方法
06，操作元素节点？
• 创建 createElement
• 插入 appendChild insertBefore
• 删除 removeChild
• 替换 replaceChild
• 复制 cloneNode
创建 createElement
var h1 = document.createElement(‘h1);
h1.innerHTML = “这是新创建的h1元素”
注意：创建完之后，并没有插入到文档树中，需要使用插入元素的方法。
插入 appendChild insertBefore
appendChild 在父元素的最后追加一个新元素
insertBefore 在父元素的某个子元素之前插入一个新元素
document.body.appendChild(h1);
document.body.insertBefore(h1, p);
删除 removeChild
只有父节点才有删除元素的权限
父节点.removeChild(h1);
假如不想获取父节点，怎么删除：
子节点.parentNode.removeChild(子节点);
替换 replaceChild
父节点.replaceChild(new, old);
假如不想获取父节点，怎么替换：
子节点.parentNode.replaceChild(new, old);
复制 cloneNode
要复制的元素.cloneNode(布尔值);
false: 浅拷贝 只复制当前元素
true: 深拷贝 复制当前元素以及当前元素的后代
07，操作属性节点？
获取：
• box.getAttribute(“id”);
• img.getAttribute(“src”);
设置：
• box.setAttribute(“id”, “item”);
• img.getAttribute(“src”, “./imgs/01.jpg”);
删除：
• box.removeAttribute(“id”);
08，操作文本节点？
1，nodeValue 效率低
2，innerHTML 可以一个标签中所有内容，包含其它标签， 还可以进行设置
h2.innerHTML; // 获取
h2.innerHTML = “这是一个h2”； // 设置
3，createTextNode
09，DOM究竟是什么？
• D: Document, 就是HTML文档本身
• O: Object 对象 在具体的操作中，我们使用了大量的对象， document, element我们利用这些对象的属性或方法来完成相应的操作。
• M: Model 模型 树模型， 当页面载入完毕后，就会形成一个树模型。
10，JS控制CSS都有哪些方式？
• 1，脚本化行内样式
• 2，脚本化CSS类
• 3，查询计算出的样式
• 4，获取元素的尺寸
• 5，获取元素的位置
1，脚本化行内样式
ele.style.backgroundColor()
2，脚本化CSS类
ele.className =”box”;
ele.className = “”;
3，查询计算出的样式
标准浏览器：window.getComputedStyle
IE浏览器：ele.currentStyle[“width”]
4，获取元素的尺寸
offsetWidht = border+padding+widht
offsetHeight = border+padding+height
5，获取滚动条滚动的距离
scrollTop 滚动条在垂直方向上滚动的距离
scrollLeft 滚动条在水平方向上滚动的距离
5，获取元素的位置
offsetLeft
offsetTop
它们都是获取到相对于父定位元素的位置
11，事件的三要素？
事件模型的三要素：
• 事件源 事件发生的地方
• 事件 具体的一个事件
• 监听器 事件发生后，做了什么事
12，为什么需要事件绑定，以及都有哪些绑定方式？
一个事件发生是需要载体的，就是在哪个元素上发生，那么就需要将事件绑定到这个元素上，让这个元素去监听这个事件是否发生，所以需要进行事件绑定。
方式：
• 1，DOM0级的事件绑定
• 2，HTML方式的事件绑定
• 3，DOM2级的事件绑定
• 4，IE的事件绑定
1，DOM0级的事件绑定
JS: ele.onclick = function(){}
jQ: $(“ele”).click(function()({});
2，HTML方式的事件绑定
<h2 oncllick=”alert(‘点我干啥’)” > HTML方式事件绑定</h2>
3，DOM2级的事件绑定
绑定：
事件源.addEventListenner(事件， 监听器);
解绑：
事件源.removeEventListenner(事件， 监听器);
4，IE的事件绑定
绑定：
事件源.attachEvent(事件，监听器);
解绑：
事件源.detachEvent(事件，监听器);
13，封装一个跨浏览器的事件绑定函数？
14，什么是事件流？ 事件流的传播方式都有哪些？
当一个元素发生了某个事件，那么它的父元素也可能引发这个事件，一层一层的，形成一个流，这就是事件流。
事件流有两种传播方式：
• 1，冒泡型 h2 -- > div ---> body --> html --> document
• 2，捕获型 document -- > html -- > body -- > div -- > h2
15，DOM中都有哪些事件类型？
• 焦点事件
• 鼠标事件
• 键盘事件
• UI事件
• 表单事件
焦点事件
focus
blur
鼠标事件
click
mouseover
muoseout
muosedown
mouseup
mousemove
键盘事件
keyup
keydown
keypress
UI事件
load
unload
beforeunload
select
resize
scroll
表单事件
submit
reset
change
16，什么是事件对象？ 事件对象从什么地方来？
js中提供事件对象的作用是为我们提供事件触发时的一些详细参数，我们可以利用这些参数来实现各种需求。
事件对象从什么地方来？
• 在标准浏览器，事件对象是作为监听器的一个参数，参数名没有要求。
• 在IE浏览器中，事件对象是作为window的一个属性event. 这个名称是固定的
17，事件中的this是什么玩意？
在DOM0级方式绑定方式中：
ele.onclick = funciton(){ console.log(this) } // ele 事件源
在DOM2级方式绑定方式中：
ele.addEventListener(‘click”, function(){ console.log(this) }) // ele 事件源
HTML事件绑定方式中：
<h2 onclick = “f1()”>HTML事件绑定</h2>
<script>
function f1(){ console.log(this) } // window
</script>
在DOM0级以及DOM2级中，this是指事件源， 在HTML级中，this并不总是指向事件源，有时候，它每指向window. 使用下面的方式，可以让this指向事件源：
<h2 onclick = “f1(this)”>HTML事件绑定</h2>
18，如何阻止默认事件？
有下面两种方式：
• 在监听器中使用 return false; 这种是针对DOM0 和 HTML方式
• 事件对象中有个preventDefault（DOM2）和returnValue（IE）属性， 针对DOM2和IE
19，JS中实现动画是利用什么东西？ 它们有什么区别？ 使用时，需要注意什么问题？
利用定时器：
setTimeout() 一次性
setInterval() 连续不继
注意问题：
使用前和使用后最好清除定时器。
setTimeout() ---> clearTimeout()
setInterval() ---> clearInterval()
五，HTML5部分
01，什么是HTML5，你是如何理解HTML5的?
1，从狭义的角度，HTML5就是HTML4的一个升级版，增加了一些内部，删除了一些内容。
2，广义的角度，html5 = html4升级版+css升级版+js的升级版， 或者说它是一个平台，在这个平台上，衍生出了各种技术。
3，从行业角度，html5就是一个标准，一个规范。
02，什么是标签的语义化？ 你是如何理解标签的语义化的？
什么样的标签做什么事，赋予标签意义，用合适标签去描述WEB结构。
03，HTML5中又增加了哪些新的标签？
• header
• footer
• nav
• section
• artical
• aside
• fieldset
• legend
• time
• figure
• figurecation
• progress
• meter
• mark
• output
04，对于不支持HTML5中新标签的浏览器，怎么做兼容？
最简单是使用插件，把插件引到我们项目中。 html5shiv.js
还可以把h5中用到标签创建出来，设置为块级元素。
05，HTML5中新增的表单元素类型有哪些？
• email
• number
• url
• color
• time
• datetime
• week
• month
• tel
• range
06，HTML5中新增的表单元素有哪些？
• datalist 数据列表
• output 输出
07，HTML5中新增的表单属性有哪些？
• autofocus
• required
• placehorder
• pattern
• multiple
• autocomplete
• autocomplete = “off”
• form
08，HTML5中音频和视频？
视频：
video src controls poster preload loop autoplay
兼容性：video
source src
source src
API:
方法： play(), pause()
属性：paused, duration, volume, muted, currentTime
音频：
audio src controls loop autoplay preload
兼容性：audio
source src
source src
09，HTML5中新增加的获取元素的方式有哪些？
1, querySelector(“选择器”); // 选择满足条件第一个
2, querySelectorAll(“选择器”); // 选择满足条件所有，返回一个数组
3, getElementByClassName(“类名”); // 选择满足条件所有，返回一个数组， 有兼容性问题
10，HTML5中新增加的类操作是什么？
classList中有几个方法：
1，去掉一个类 ele.classList.remove(“class”);
2，增加一个类 ele.classList.add(“class”);
3，开关 ele.classList.toggle(“class”);
4，判断是否有这个类 ele.classList.contains(“class”)
11，如何访问HTML5中的自定义属性？
自定义属性：
以data-打头, 假如： data-her-Name
访问：
ele.dataset.herName
12，使用自定义属性完成tab选项卡的思路？
13，HTML5中新的事件拖拽事件有哪些？
拖拽元素：
• ondrap 拖拽时触发
• ondrapstrrt 拖拽刚开始就触发
• ondrapsend 拖拽结束就触发
目标元素：
• ondrapenter 拖拽元素进入目标元素时触发
• ondrapleave 拖拽元素离开目标元素时触发
• ondrapover 拖拽元素在目标元素上拖拽时触发
• ondrop 拖拽元素在目标元素上扔下时触发
六，CSS3部分
01，CSS中都有哪些选择器？
c2中有如下选择器(8个)：
p
id
class
div span
div, span
*
:hover
div.box
c3中有如下选择器：
属性选择器：
• input[title]
• input[title=”haha”]
• input[title *=”haha”]
• input[title ^=”haha”]
• input[title $=”haha”]
• input[title ~=”haha”]
• input[title |=”haha”]
关系选择器
• div p
• div>p
• div+p
• div~p
伪类选择器
• :nth-child(n)
• :first-child
• :last-child
• :nth-last-child(n)
• :only-child
• :nth-child(2n) :nth-child(even)
• :nth-child(2n+1) :nth-child(odd)
• :nth-child(-n+5)
• :nth-of-type(n)
• :first-of-type
• :last-of-type
• :nth-of-type(2n) :nth-of-type(even)
• :nth-of-type(2n+1) :nth-of-type(odd)
• :nth-of-type(-n+5)
• :only0-of-type
• :nth-last-of-type(n)
• :hover
• :active
• :focus
• :checked
• :disabled
• :enabled
• :lang()
• :empty
• :not()
• :root
伪元素选择器
• :before
• :after
• :first-letter
• :first-line
• ::selection
02，CSS3中增加了哪些新属性？
03，CSS3中的三大核心是什么？
• 过渡动画
• 变形
• 自定义动画
过渡动画
transition 属性名 动画时长 缓冲曲线 等待时间
步骤：
1，产生突变
2，transition
变形
transform
自定义动画
animation
04，CSS3中都有哪些二维变型？
• 旋转变形
• 斜切变形
• 绽放变形
• 位移变形
旋转变形(z轴)
transform:rotate(deg)
斜切变形
transform:skew(y轴和x轴靠拢的度数，x轴向y轴靠拢的度数)
绽放变形
transform:scale(x轴的缩放， y轴的缩放)
位移变形
transform:translate(x轴正方向位移， y轴的正方向位移)
05，CSS3中都有哪些三维变型？
旋转变形
transform:rotateX(deg)
transform:rotateY(deg)
transform:rotateZ(deg)
位移变形
transform:translateX(deg)
transform:translateY(deg)
transform:translateZ(deg)
06，在C3中如何自定义动画？
1, 定义关键帧 @keyframes
2, animation
07，什么是响应式？
一套代码在不同端都可以合理显示。 根据媒体查询实现。
08，说一下rem单位？
root 表示是根标签文字大小的多少倍。
09，什么时间用到视口？
做手机站时，需要使用视口。
10，说一下你认识的百分比？
width:50%; 相对于父元素的宽度的
heigth:20%; 相对于父元素的高度的
padding-left:10%; 相对于父元素的宽度的
margin: 15%; 相对于父元素的宽度的
border-widht:12%; 不能这么写，border不可以设置百分比
11，什么是弹性布局？弹性布局中的四大概念是什么？
弹性布局是C3中提出一个新的布局模型， 与之前的流动布局，浮动布局，层布局完全不一样。
• 容器：只要给一个盒子加上display:flex, 那么这个盒子就是容器。
• 项目：容器的直接子元素就是项目
• 主轴：项目默认的排列顺序就是主轴
• 交叉轴：与主轴垂直的那么轴就是交叉轴
12，容器中都有哪些属性？ 项目中都有哪些属性？
容器：
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
• flex-flow
项目：
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self
13，什么是媒体查询？
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
七，JQ部分
01，JQ的入口函数和JS的入口函数有什么区别？
1, js: window.onload = function(){} jq: $(function(){});
2，js的需要等所有的资源加载后之后才执行， jq只需要DOM元素加载完就执行。
3，js中的入口函数只能写一个，jq可以写多个。
02，JQ如何控制HTML，如何控制CSS，如何控制标签性？
控制HTML:
.html(“<h1>123</h1>”) 没有参数，表示访问， 如果有一个参数，表示修改
控制CSS：
.css() 一个参数表示访问 两个参数表示修改
控制属性：
.attr() 一个参数表示访问，两个参数表示修改， 对于表单元素有个bug, 针对这个bug，jq提供了一个prop(); 一个参数表示访问 两个参数表示修改
03，说一下JQ中的选择器都有哪些？
• 基本选择器：
• 过滤选择器：
• 筛选选择器：
基本选择器：
• p
• id
• class
• div.box
• ul li
• div, span
• *
• >
• +
• ~
过滤选择器：
• 基本过滤选择器
• 子元素过滤选择器
• 内容过滤选择器
• 可见性过滤选择器
• 属性过滤选择器
• 表单元素属性过滤选择器
筛选选择器：
• 过滤筛选选择器
• 查找筛选选择器
• 串联筛选器
04，JQ中都有哪些动画，是怎么实现的？
1, 显示，隐藏动画 .show() .hide() .toggle()
2，滑动动画， .slideUp() .slideDown() .slideToggle()
3，透明度动画 .fadeOut() .fadeIn() .fadeTo()
4，自定义动画 .animate({}, time) 也叫动画版的 .css({})
5，停止动画 .stop();
05，JQ操作元素节点？
查找元素： 选择器选择
增加元素：
在父元素内部增加
.append() .appendTo() .prepend() .prependTo()
作为兄弟元素增加
.brfore() .insertBefore() .after() .insertAfter()
包裹元素
.wrap .wrapAll .wrapInner
删除元素：
.remove() .empty() .detach
修改元素：
.replaceWith() .replaceAll()
复制元素：
.clone()
06，JQ操作属性节点？
• .attr()
• .removeAttr()
• .addClass()
• .removeClass()
• .hasClass()
• .toggleClass()
• .prop()
• .val()
07，JQ操作文本节点？
• .html()
• .text()
08，JQ操作样式？
• .css()
• .widht()
• .height()
• .innerWidht()
• .innerHeight()
• outerWidht()
• outerHeight()
• outerWidht(true)
• outerHeight(true)
09，JQ都有哪些事件？
1，标准的DOM事件
和原生的是一样
• UI事件
• 鼠标事件
• 键盘事件
• 焦点事件
• 表单事件
2，自定义事件
• 页面载入事件
• 鼠标事件中又增加了两个：mouseenter mouseleave
• 焦点事件中又增加了两个：focusin focusout
3，事件绑定
• bind
• unbind
• one
• error
4，事件委托
• delegate()
• undelegate()
• on()
• off()
5，事件触发
• 事件名（）
• triggger(事件名)
10，如何获取事件发生的位置？
使用事件对象event中pageX, pageY
11，JQ中如何阻止事件冒泡？
有三种方式：
1，给事件加判断
2，stopPropagation()
3, return false
12，JQ如何阻止默认事件？
有两种方式：
1，return false
2，event.preventDefault()
13，JQ对象如何转化成JS对象？JS对象如何转化成JQ对象？
jq -- > js : 加下标[0] .get(0)
js -- > jq : $()包括起来就可以
1
一，HTML部分
01，WEB的三层结构？
• 结构层：也叫内容层，由HTML提供。 HTML叫超文本标记语言。（HyperText Markup Language）
• 样式层：修饰层，由CSS提供
• 行为层：JavaScript提供
02，HTML基本结构？
文本声明 <!DOCTYPE html> 的作用？
根标签 <html>
头部 <head>
主体 <body>
03，HTML中的基本标签？
标题标签：hn headline 定义标题 经典用法：作为标题或网站logo
段落标签：p
超链接标签：a 站内（相对路径，绝对路径）， 站外（URL）， 锚点（设置锚点和链接到锚点）
图像标签：img alt(图片路径错误时显示alt对应属性值， SEO) src width height title
div和span 没有任何语义， 是用来组织划分结构的，主是配合CSS完成页面布局和页面美化。
04，alt和title的区别？
1，title是仅仅是为了提示，有利于用户体验， alt有利于SOE。
2，alt只能在图片标签中使用， titile可以在所有标签中使用
05，什么是标签的语义化？
所谓的标签语义化就是使用什么样的标签做什么样事，有利于SEO， 使网页结构更加合理，方便其它设备解析。
06，列表标签？
无序列表
ul + li list u->unorder li->list type
常见列表类， 导航， 轮播图， tab选项卡.....
有序列表
ol+li o order list
自定义列表
dl dt dd definition list title description
作用：对一个值进行解释
体现在三个方面：
1，一个值一个解释
2，一个值多个解释
3，多个值一个解释
07，表格标签？
table tr th td thead tbody tfoot
table的相关属性：
width, heigth, bgcolor, border, cellspacing, cellpadding, align
tr的相关属性：
height, bgcolor, allign, valign
td和th的相关属性：
rowspan colspan
08，表单？
form（表单） input （表单元素） select和option(下拉菜单) textarea(文本域)
action: 提交哪个页面进行处理
method: 提交方式，常见有get提交和post提交， 默认是get提交
09，get和post的区别？
1，get提交，提交内容都是出现在地址栏中，post不会
2，get提交不太安全，post相对安全
3，.........
二，CSS部分
01，CSS布局的优点？
1，可以实现表现层和结构层的完全分离， 符合WEB标准
2，便于维护，团队开发等
02，CSS的继承性？
所谓的继承性是指我们写的样式不仅可以应用到某具体的元素，还可以应用到它的后代。
font- text- color line-height
03，CSS的层叠性？
所谓的层叠性是指当多个样式冲突时，以哪个样式为准。
引入CSS的三种方式：
行内 > 内部 = 处部
基本选择器：
ID > CLASS > P
选择器的特殊值：
id:0100 class:0010 p:0001 行内：1000
特殊值最终的结果是一样的，就采用就近原则
!important
04，CSS的基本语法？
选择器{}
05，CSS的选择器？
基本选择器：
标签选择器，ID选择器，CLASS选择
其它选择器：
通配符选择器， 后代选择器， 分组选择器， 伪类选择器， 交集选择器p.item
06，引入CSS的三种方式？
1，行内 要标签里面写入 style属性
2，内部 在head标签中写入style标签
3，外部 在当前页面的外面写一个css文件，然后通过link引入
07，CSS的属性？
字体 font- 6个 font-family font-size font-weight font-style font color
文本 text- 4个 text-align text-indent text-decoration
盒模型 6大属性
布局 4个
列表 1 个
定位 6个
表格 3个
08，什么是盒模型？
HTML标签都是矩形的，类似于一个盒子，我们可以通过6大属性来控制这个盒子，那么这个矩形就是盒子模型。width, height, border,padding,marign,background
09，元素的分类 ？
在CSS中，我们把HTML标签分类了两类：块状与行内。 块状元素和行内元素。
块级元素：
div, hn, 列表类，p, 表格类， form
行级元素：
完全行级的
span a em strong i b label button
行内块：
img input
10，块级元素和行内元素的区别？
1，块级元素独占一行，行内元素并排显示
2，对于盒子模型的6属性，块级元素都起作用，行级元素width和height不起作用，maring和padding在我不垂直方向不起作用，其它都起作用
3，行内块对盒模型6大属性都起作用，就是不能独占一行
11，流动布局？
所谓的流动布局就是按照标准文档流进行的布局，标准文档流中有两个特征：block 独占一行，从上到下进行布局， inline 从左到右并排显示，如果满一行，自动换行。
12，浮动布局？
什么是浮动布局？
所谓的浮动布局是CSS又提出一个布局模型，流动布局是遵循标准文档，浮动布局是脱离标准文档，但是它并没有完全脱离。它的作用：让块级元素可以并排显示，在同一行上和平共处。
注意点：
1，浮动布局和流动布局是不同的布局模型。但是如果一个盒子浮动了，那么这个盒子的内部默认还是按照流动布局进行的。
2，如果一个盒子浮动了，那么它就会被自动设置成块级元素。
3，如果一个元素浮动了，那么它势必会对它后面的元素造成影响，可以使用clear去清除影响。也就是清除浮动。
13，详解盒模型？
盒模型分为：标准的盒模型和IE的盒模型
width和height
对于块级元素，它表示内容区域
对于行级元素，无效，宽是由内容决定的，高是由font-size决定
默认值是auto， 可以给它设置百分比，是相对于父元素的widht和height来说的。
border 粗细 样式 颜色
边框的大小（粗细） border-width 可以从四处方向进行描述 5px thin medium 等，
边框的样式 border-style 可以从四处方向进行描述 solid dash dotted none
边框的颜色 border-color 可以从四处方向进行描述 三种表示法
padding 内边距 补白 内容到border的距离
padding后面写一个值：上，下，左，右的padding都一样
写两个值：第一个值表示上下，第二个值表示左右
写三个值：第一个值表示上，第二个值表示左右，第三个值表示下
写四个值：按上，右，下，左顺序
分为四个方向：
padding-top
padding-right
padding-bottom
padding-left
注意点：
1，有些标签有默认的padding
2，对于行内元素，padding在垂直方向上不影响行高
3，padding可以设置百分比，是相对于父元素的widht而言
margin 外边距 元素与元素之间的距离 是在border之外的
margin后面写一个值：上，下，左，右的padding都一样
写两个值：第一个值表示上下，第二个值表示左右
写三个值：第一个值表示上，第二个值表示左右，第三个值表示下
写四个值：按上，右，下，左顺序
分为四个方向：
margin-top
margin-right
margin-bottom
margin-left
注意点：
1，有些标签有默认的margin
2，对于行内元素，margin在垂直方向上无效
3，margin可以设置百分比，是相对于父元素的widht而言
4，margin的重叠现象（margin塌陷问题）
5，margin可以设置负值
background
background-color
background-image
background-repeat
background-position
background-attachment
14，浮动元素的表现？
• 1，字围
• 2，脱标
• 3，贴靠
• 4，收缩
15，清除浮动？
clear:both
overflow:hidden
16，display:none和visibility:hidden的区别
display: 显示 作用是用来设置元素的显示状态
block
inline
inline-block
none
一个元素如果设置了display:none，那么它就不显示了，并且在页面中不占任何空间。
一个元素如果设置了visibility:hidden，那么它也不显示了，但是它会占据页面的空间。
17，层布局模型？ position
相对定位
position:relative 需要配合 top, left, rigth, bottom来设置偏移距离 使用其中两个就可以， 相对于没有定位前的那个位置进行定位的，定位后原来的空间仍被保留
什么地方用相对定位：
1，作为绝对定位的参考点
2，实现一些局部位置的调整时
绝对定位
position:absolute 需要配合 top, left, rigth, bottom来设置偏移距离 使用其中两个就可以， 还有可能要使用到z-index来设置顺序。
它是按照参考点进行定位的，通常我们把参考点设置到它的父元素，子绝父相。
使用绝对定位就完全脱离了标准文档流。可以使用z-index来改变显示的顺序。
固定定位
position:fixed 需要配合 top, left, rigth, bottom来设置偏移距离 使用其中两个就可以， 固定定位的参考点是相对于视窗。
不固定：
position:static
18，列表布局
list-style
list-style-type
list-style-positon
list-style-imgage
三，JS部分
01，什么是JS？ JS包含哪些内容？
JS是一门运行在浏览器端的脚本语言，是一门真正的编程语言。JS可以控制HTML，CSS，给页面提供行为。 JS游戏编程。
内容：
ECMAScript 是JS的一个标准
BOM 浏览器对象模型， JS访问浏览器的接口
DOM 文档对象模型，JS访问页面内容的接口
02，页面引入JS的三种方式？
• 行内 将JS代码作为标签的属性
• 内部 在页面中使用script标签，将JS代码写在scirpt标签中
注意问题：1，script可以放在页面中任意位置，推荐放到最后。
2，script标签可以写多个，js代码就放在scirpt标签中。
• 外部 在页面中通过script标签中的src属性引入外部的js文件
注意问题：1，当你使用了外部引入js， 那么script中就不能写代码了，写了
也不会执行的。
03，JS声明变量有哪些特征？
var variable(变化)
var a = 1; // 定义了一个变量，名称叫a, 它的值是1;
• 单独声明
• 一次性声明多个
• 遗漏声明 避免
• 重复声明 避免
04，JS的中都有哪些数据类型？
数据类型：
基本数据类型
数值 number
不区分整数和小数
3.14 99
最大值和最小值
Number.MAX_VALUE Number.MIN_VALUE
整数有多种表示
10进制 16进制 8进制
小数也有多种表示
3.14 .14 3.14e5
算术运算符的特殊性
溢出不报错
除0不报错
运算的不精确性
不要比较两个小数
字符串
需要使用引号引起来 单引号 双引号， 引号在配对使用
外双内单 外单内双
布尔
true
false
下面的数值会被隐式转化成false, 其它的被转化成true
undefined
null
0/-0
NaN
“”
undefined
是针对普通变量来说的
如果声明了一个变量，但是没有赋值，它的值就是undefined
null
是针对对象来说的
var timer = null;
引入数据类型
内置对象 JS语言（ECMAScript）中本身提供的对象
宿主对象 BOM或DOM中的对象
自定义对象
05，JS的中都有哪些运算符？
具有某种功能的符号叫运算符。JS中的运算符有6大类。
• 算术运算符
• 赋值运算符
• 逻辑运算符
• 关系运算符
• 位运算符
• 其它运算符
算术运算符
+ - * / % ++ --
赋值运算符
= += -= *= /= %=
a += 5 ---> a = a+5;
逻辑运算符
&& || !
关系运算符
> >= < <= = = = = = ! = ! = =
位运算符
略
其它运算符
typeof + ?: delete instance of
06，如何理解i=j=k=10?
赋值运算符的副作用：将一个数赋给一个变量，这个时候，整体表达式也有一个值，就是那个数。
赋值运算符具有右结合性，首先它将10赋给了k, 那么此时k的值就是10， 又因为赋值运算符具有副作用，所以k=10整体也有一个值，这个值就是10. 接着又将这个10赋给了j .....
07，= ，==， ===的区别？
= 是赋值运算符 具有右结合性 会将右边的值赋给左边的变量
== 是关系运算符 是用来判断左右两个操作数的值是否相等
=== 也是关系运算符 是用来判断左右两个操作数的值和数据类型是否相等
08，var a=6; var b = true; console.log( a && b ); console.log( b && a );
第一个结果是 true
第二个结果是6
需要从三个层次去理解：
1，如果操作数都是布尔值，只有二者都为true时，结果才为true, 否则为false
2，&&可以对真值或假值进行运算，如果两个都是真值， 则返回一个真值。但是真值并不仅限于true, 假值也不仅限于false。下面的值会被转化成false:undefined, null, 0/-0, NaN, “” 。 最终的结果并不总是ture或false, 而是当前的值。如果第一个表达式的值为真，那么就以么二个表达式的值为结果，这个结果不是转换化的值，而是值本身。
如果第一个表达式为假，那么就以第一个表达式的值作为结果，这个结果不是转换化的
值，而是值本身。
3，运算过程中，先计算左操作数的值，如果左操作数为假，则整个表达式的结果为假，也就是左操作数的值。同时停止对右操作数的运算。 如果左操作为真值，整体的结果就依赖于右操作数。
09，var x = false; var y = 3; console.log( x && y-- ); console.log( y );
第一个结果为false
第二个结果为3
10，强制类型转化的例子？隐匿类型转化的例子？
强制转化：
parseInt(), parseFloat(), Boolean(), String(), Number(), Object()
隐式转化：
字符串连接运算符+， 只在一个操作数为字符串，那么另一个操作数会被隐式转化成字符。
！逻辑非， 会将操作数隐式转化成布尔值， 然后取反
== 关系运算符 undefied == null 会将undefined和null都转化成false
11，JS中都有哪些表达式？
任何有值的内容都是表达式。
• 原始表达式
• 运算符构成的表达式
• 对象和数组初始化表达式
• 函数定义表达式
• 调用表达式
• 对象创建表达式
原始表达式
直接量，关键字，变量都是原始表达式，是表达式构成的最小单位。
运算符构成的表达式
算术表达式，关系表达式，逻辑表达式，赋值表达式
对象和数组初始化表达式
定义对象和定义数组
函数定义表达式
var f = function(){}
调用表达式
由于函数调用，都会返回一个值，叫调用表达式
对象创建表达式
var a = new Date(); 创建对象，通常会返回一个对象，叫对象创建表达式
12，打印九九乘法表？
任何有值的内容都是表达式，语句就是命令或整句。它的特征以;结尾， 作用是用来执行某条指令。
JS中常见语句：
• 表达式语句 在表达式后面加上;就形成了表达式语句
• 复合语句 {}
• 声明语句 var function
• 条件语句 if if..else.. if... else if...else switch
• 循环语句 for while do...while
• 跳转语句 break continue return 标签跳转
13，break和continue的区别？
当用来循环语句时，break表示跳出整个循环，不再进行循环。continnue跳出本次循环，继续下次循环。
break可以用来switch语句。
return 跳转语句只能用来函数中。
14，函数定义的两种方式？ 它们有什么区别？
编程中的函数也是借鉴数学中的函数。 函数能够提示一些规律，有这个规律后可以解决实际问题，或者一个函数就是一个功能。我们要使用这个功能，那么我们就去调用这个函数。函数的作用：代码重用，用于组织代码，作为构造器，用于生成对象。
• 函数声明
• 函数表达式
函数声明
是使用function关键字
格式如下：
function 函数名（形参）{ 函数体 }
函数声明后，只有调用了，能执行
函数表达式
var f = function(){}
本质就是一个变量
区别：
使用声明的方式，会在预编译期间把函数声明提前。那么函数表达式不能提前，它的本质就是一个变量，我们就要遵循变量的使用规则---先声明后使用。
15，JS是一门弱数据类型语言？都体现在哪些方面？
1，变量在声明的时候，可以不指定类型
2，函数中的参数，在声明的时候，也不需要指定类型
3，.....
16，JS中都有哪些作用域？
作用域是针对变量来说的，是指变量的生效范围，就是一个变量在什么范围内可以访问，在什么范围内不能访问。
全局作用域 -- 全局变量 全局的是不能去访问局部的
局部作用域 -- 局部变量 局部的可以去访问全局的
全局变量和局部变量的分界点 -- 函数
JS中没有块级作用域{}
17，目前我们学习的创建对象方式有如些？
什么是对象？ 对象是属性的无序集合， 把静态特征和动态的行为组合在一起，形成一个完整的对象。
• 直接量（字面量）
• new 关键字
直接量（字面量）
// 方式一
var dog = { “name”:”haha”, “age”:5, “run”:function(){} };
// 方式二
var dog = {};
dog.name = “haha”;
dog.age = 6;
dog.run = function(){};
new 关键字
var dog = new Object();
dog.name = “haha”;
dog.age = 7;
dog.run = function(){};
18，什么是对象？什么是单体内置对象？
什么是对象？ 对象是属性的无序集合， 把静态特征和动态的行为组合在一起，形成一个完整的对象。
所谓的单体内置对象就是不需要new，直接使用的，如Math
19，随机一个[20, 90)之间的整数？
[0 90) [20 90)
20，打印出如下图形？
*
**
***
****
*****
*
***
*****
********
第一个图案：
第二个图案：
分析如下：
21，什么是数组？ JS中的数组和C语言中的数组有什么区别？
什么是数组？ 数组是值的有序集合，值就是我们前面所讲的各种数据类型的数据。
区别（特点）：
1，JS数组是无类型，数组元素可以是任意类型
2，数据元素也可以是对象或数组
3，JS数组是动态的，根据需要它会们增长或缩减
4，JS数组的索引不一定是连续的，它们之间可以有空缺
5，JS数组是对象的特殊形式，类似于矩形和正方形。
22，创建数组有哪些方式？
• 直接量（字面量）
• new的方式
直接量（字面量）
var arr = [“html”, 12, true, “css”]; []就表示一个数组 对象是使用{}
new的方式
var arr = new Array(“html”, 12, true, “css”);
注意：
var arr = new Array(5); // 创建一个数组长度为5的数组
var arr = new Array(“5”); // 创建一个数组，里面有一个数组元素，为字符串5
23，数组的基本操作？
增删改查
获取一个数组元素：
数组名[索引]
增加一个元素：
var arr = [1,2,3];
数组名[索引] = “haha”;
修改一个元素：
数组名[索引] = “haha”;
添加：
push 在数组的后面去追加新的元素
var arr = [1,2,3];
arr.push(4); // 在arr后面追加一个4 [1,2,3,4]
unshift 在数组的前面插入新的元素
var arr = [1,2,3];
arr.unshift(4); // 在arr后面追加一个4 [4,1,2,3]
删除：
pop 删除数组中的最后一个元素
var arr = [1,2,3];
arr.pop(); // [1,2]
shift 删除数组中的第一个元素
var arr = [1,2,3];
arr.shift(); // [2,3]
24，数组中的常用方法？
• join
• reverse
• concat
• sort
• slice
• toString
join
将数组中的元素，使用某种符号连接起来，从而形成字符串
reverse
将数组中的元素，顺序倒置
concat
合并多个数组
sort
对数组中的元素进行排序
slice
切割，截取数组中的片段
格式：slice(start, end); start和end表示索引值（不包含end索引值对应的元素）
toString
是从object继承过来的，意思是将数组转化成字符串
25，创建字符串都有哪些方式？
• 直接量（字面量）
• new方式
直接量（字面量）
直接使用引号引起来，就可以，单引号或双引号都可以
new方式
26，字符串的一些常见操作？
• length
• concat
• 查找
• 截取
• 大小写转换
• 替换
• 转数组
length
可以通过length获取字符串的长度
concat
和+类似
查找
charAt char是字符的意思 at在什么地方 charat可以获取字符串中的某个字符
charCodeAt 获取字符串中的某个字符对应的ascii码
indexOf 获取索引
lastIndextOf 获取字符串自右向左中第一个字符出现的位置
search 通常用在正则中
截取
substr(start, length)
substring(start, stop)
slice
截取
大小写转换
toLowerCase, toUpperCase
替换
replace
str.replace(“a”, “A”);
转数组
split
四，DOM部分
01，什么是BOM？ 什么DOM？以及BOM与DOM的关系？
bom（brower object model）: 浏览器对象模型
bom的组成：
window
navigator
frames
location
history
document
screen
为什么需要bom?
让JS有能力与浏览器进行”对话“。
dom: 文档对象模型
bom中包含了dom, document非常重要，所以我们单独提出来形成一个概念：dom
02，为什么现在还在使用DOM0？
dom 是分版本， DOM0， DOM1， DOM2，DOM3
• 1，DOM0的兼容性是最好的，所有浏览器都支持这个DOM0
• 2，DOM0中提供了很多有方便的方法来获取文档中的元素
03，DOM1中的两大核心？
1，树模型
当页面加载完后，会形成一个树模型。
树模型中常见的三大节点：
• 元素节点
• 属性节点
• 文本节点
节点与节点之间的关系：
• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling
• previousSibling
使用节点与节点之间的关系不好的地方：
• 1，写起来费劲
• 2，兼容性问题
2，标准方法
• getElementById
• getElementsByTagName
04，节点与节点之间都有什么关系？
节点与节点之间的关系：
• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling
• previousSibling
注意：有一个关系没有问题，parentNode
05，选取文档元素的方式都有哪些？
• DOM0级中有若干个方法
• 节点之间的关系
• 标准方法
06，操作元素节点？
• 创建 createElement
• 插入 appendChild insertBefore
• 删除 removeChild
• 替换 replaceChild
• 复制 cloneNode
创建 createElement
var h1 = document.createElement(‘h1);
h1.innerHTML = “这是新创建的h1元素”
注意：创建完之后，并没有插入到文档树中，需要使用插入元素的方法。
插入 appendChild insertBefore
appendChild 在父元素的最后追加一个新元素
insertBefore 在父元素的某个子元素之前插入一个新元素
document.body.appendChild(h1);
document.body.insertBefore(h1, p);
删除 removeChild
只有父节点才有删除元素的权限
父节点.removeChild(h1);
假如不想获取父节点，怎么删除：
子节点.parentNode.removeChild(子节点);
替换 replaceChild
父节点.replaceChild(new, old);
假如不想获取父节点，怎么替换：
子节点.parentNode.replaceChild(new, old);
复制 cloneNode
要复制的元素.cloneNode(布尔值);
false: 浅拷贝 只复制当前元素
true: 深拷贝 复制当前元素以及当前元素的后代
07，操作属性节点？
获取：
• box.getAttribute(“id”);
• img.getAttribute(“src”);
设置：
• box.setAttribute(“id”, “item”);
• img.getAttribute(“src”, “./imgs/01.jpg”);
删除：
• box.removeAttribute(“id”);
08，操作文本节点？
1，nodeValue 效率低
2，innerHTML 可以一个标签中所有内容，包含其它标签， 还可以进行设置
h2.innerHTML; // 获取
h2.innerHTML = “这是一个h2”； // 设置
3，createTextNode
09，DOM究竟是什么？
• D: Document, 就是HTML文档本身
• O: Object 对象 在具体的操作中，我们使用了大量的对象， document, element我们利用这些对象的属性或方法来完成相应的操作。
• M: Model 模型 树模型， 当页面载入完毕后，就会形成一个树模型。
10，JS控制CSS都有哪些方式？
• 1，脚本化行内样式
• 2，脚本化CSS类
• 3，查询计算出的样式
• 4，获取元素的尺寸
• 5，获取元素的位置
1，脚本化行内样式
ele.style.backgroundColor()
2，脚本化CSS类
ele.className =”box”;
ele.className = “”;
3，查询计算出的样式
标准浏览器：window.getComputedStyle
IE浏览器：ele.currentStyle[“width”]
4，获取元素的尺寸
offsetWidht = border+padding+widht
offsetHeight = border+padding+height
5，获取滚动条滚动的距离
scrollTop 滚动条在垂直方向上滚动的距离
scrollLeft 滚动条在水平方向上滚动的距离
5，获取元素的位置
offsetLeft
offsetTop
它们都是获取到相对于父定位元素的位置
11，事件的三要素？
事件模型的三要素：
• 事件源 事件发生的地方
• 事件 具体的一个事件
• 监听器 事件发生后，做了什么事
12，为什么需要事件绑定，以及都有哪些绑定方式？
一个事件发生是需要载体的，就是在哪个元素上发生，那么就需要将事件绑定到这个元素上，让这个元素去监听这个事件是否发生，所以需要进行事件绑定。
方式：
• 1，DOM0级的事件绑定
• 2，HTML方式的事件绑定
• 3，DOM2级的事件绑定
• 4，IE的事件绑定
1，DOM0级的事件绑定
JS: ele.onclick = function(){}
jQ: $(“ele”).click(function()({});
2，HTML方式的事件绑定
<h2 oncllick=”alert(‘点我干啥’)” > HTML方式事件绑定</h2>
3，DOM2级的事件绑定
绑定：
事件源.addEventListenner(事件， 监听器);
解绑：
事件源.removeEventListenner(事件， 监听器);
4，IE的事件绑定
绑定：
事件源.attachEvent(事件，监听器);
解绑：
事件源.detachEvent(事件，监听器);
13，封装一个跨浏览器的事件绑定函数？
14，什么是事件流？ 事件流的传播方式都有哪些？
当一个元素发生了某个事件，那么它的父元素也可能引发这个事件，一层一层的，形成一个流，这就是事件流。
事件流有两种传播方式：
• 1，冒泡型 h2 -- > div ---> body --> html --> document
• 2，捕获型 document -- > html -- > body -- > div -- > h2
15，DOM中都有哪些事件类型？
• 焦点事件
• 鼠标事件
• 键盘事件
• UI事件
• 表单事件
焦点事件
focus
blur
鼠标事件
click
mouseover
muoseout
muosedown
mouseup
mousemove
键盘事件
keyup
keydown
keypress
UI事件
load
unload
beforeunload
select
resize
scroll
表单事件
submit
reset
change
16，什么是事件对象？ 事件对象从什么地方来？
js中提供事件对象的作用是为我们提供事件触发时的一些详细参数，我们可以利用这些参数来实现各种需求。
事件对象从什么地方来？
• 在标准浏览器，事件对象是作为监听器的一个参数，参数名没有要求。
• 在IE浏览器中，事件对象是作为window的一个属性event. 这个名称是固定的
17，事件中的this是什么玩意？
在DOM0级方式绑定方式中：
ele.onclick = funciton(){ console.log(this) } // ele 事件源
在DOM2级方式绑定方式中：
ele.addEventListener(‘click”, function(){ console.log(this) }) // ele 事件源
HTML事件绑定方式中：
<h2 onclick = “f1()”>HTML事件绑定</h2>
<script>
function f1(){ console.log(this) } // window
</script>
在DOM0级以及DOM2级中，this是指事件源， 在HTML级中，this并不总是指向事件源，有时候，它每指向window. 使用下面的方式，可以让this指向事件源：
<h2 onclick = “f1(this)”>HTML事件绑定</h2>
18，如何阻止默认事件？
有下面两种方式：
• 在监听器中使用 return false; 这种是针对DOM0 和 HTML方式
• 事件对象中有个preventDefault（DOM2）和returnValue（IE）属性， 针对DOM2和IE
19，JS中实现动画是利用什么东西？ 它们有什么区别？ 使用时，需要注意什么问题？
利用定时器：
setTimeout() 一次性
setInterval() 连续不继
注意问题：
使用前和使用后最好清除定时器。
setTimeout() ---> clearTimeout()
setInterval() ---> clearInterval()
五，HTML5部分
01，什么是HTML5，你是如何理解HTML5的?
1，从狭义的角度，HTML5就是HTML4的一个升级版，增加了一些内部，删除了一些内容。
2，广义的角度，html5 = html4升级版+css升级版+js的升级版， 或者说它是一个平台，在这个平台上，衍生出了各种技术。
3，从行业角度，html5就是一个标准，一个规范。
02，什么是标签的语义化？ 你是如何理解标签的语义化的？
什么样的标签做什么事，赋予标签意义，用合适标签去描述WEB结构。
03，HTML5中又增加了哪些新的标签？
• header
• footer
• nav
• section
• artical
• aside
• fieldset
• legend
• time
• figure
• figurecation
• progress
• meter
• mark
• output
04，对于不支持HTML5中新标签的浏览器，怎么做兼容？
最简单是使用插件，把插件引到我们项目中。 html5shiv.js
还可以把h5中用到标签创建出来，设置为块级元素。
05，HTML5中新增的表单元素类型有哪些？
• number
• url
• color
• time
• datetime
• week
• month
• tel
• range
06，HTML5中新增的表单元素有哪些？
• datalist 数据列表
• output 输出
07，HTML5中新增的表单属性有哪些？
• autofocus
• required
• placehorder
• pattern
• multiple
• autocomplete
• autocomplete = “off”
• form
08，HTML5中音频和视频？
视频：
video src controls poster preload loop autoplay
兼容性：video
source src
source src
API:
方法： play(), pause()
属性：paused, duration, volume, muted, currentTime
音频：
audio src controls loop autoplay preload
兼容性：audio
source src
source src
09，HTML5中新增加的获取元素的方式有哪些？
1, querySelector(“选择器”); // 选择满足条件第一个
2, querySelectorAll(“选择器”); // 选择满足条件所有，返回一个数组
3, getElementByClassName(“类名”); // 选择满足条件所有，返回一个数组， 有兼容性问题
10，HTML5中新增加的类操作是什么？
classList中有几个方法：
1，去掉一个类 ele.classList.remove(“class”);
2，增加一个类 ele.classList.add(“class”);
3，开关 ele.classList.toggle(“class”);
4，判断是否有这个类 ele.classList.contains(“class”)
11，如何访问HTML5中的自定义属性？
自定义属性：
以data-打头, 假如： data-her-Name
访问：
ele.dataset.herName
12，使用自定义属性完成tab选项卡的思路？
13，HTML5中新的事件拖拽事件有哪些？
拖拽元素：
• ondrap 拖拽时触发
• ondrapstrrt 拖拽刚开始就触发
• ondrapsend 拖拽结束就触发
目标元素：
• ondrapenter 拖拽元素进入目标元素时触发
• ondrapleave 拖拽元素离开目标元素时触发
• ondrapover 拖拽元素在目标元素上拖拽时触发
• ondrop 拖拽元素在目标元素上扔下时触发
六，CSS3部分
01，CSS中都有哪些选择器？
c2中有如下选择器(8个)：
p
id
class
div span
div, span
*
:hover
div.box
c3中有如下选择器：
属性选择器：
• input[title]
• input[title=”haha”]
• input[title *=”haha”]
• input[title ^=”haha”]
• input[title $=”haha”]
• input[title ~=”haha”]
• input[title |=”haha”]
关系选择器
• div p
• div>p
• div+p
• div~p
伪类选择器
• :nth-child(n)
• :first-child
• :last-child
• :nth-last-child(n)
• :only-child
• :nth-child(2n) :nth-child(even)
• :nth-child(2n+1) :nth-child(odd)
• :nth-child(-n+5)
• :nth-of-type(n)
• :first-of-type
• :last-of-type
• :nth-of-type(2n) :nth-of-type(even)
• :nth-of-type(2n+1) :nth-of-type(odd)
• :nth-of-type(-n+5)
• :only0-of-type
• :nth-last-of-type(n)
• :hover
• :active
• :focus
• :checked
• :disabled
• :enabled
• :lang()
• :empty
• :not()
• :root
伪元素选择器
• :before
• :after
• :first-letter
• :first-line
• ::selection
02，CSS3中增加了哪些新属性？
03，CSS3中的三大核心是什么？
• 过渡动画
• 变形
• 自定义动画
过渡动画
transition 属性名 动画时长 缓冲曲线 等待时间
步骤：
1，产生突变
2，transition
变形
transform
自定义动画
animation
04，CSS3中都有哪些二维变型？
• 旋转变形
• 斜切变形
• 绽放变形
• 位移变形
旋转变形(z轴)
transform:rotate(deg)
斜切变形
transform:skew(y轴和x轴靠拢的度数，x轴向y轴靠拢的度数)
绽放变形
transform:scale(x轴的缩放， y轴的缩放)
位移变形
transform:translate(x轴正方向位移， y轴的正方向位移)
05，CSS3中都有哪些三维变型？
旋转变形
transform:rotateX(deg)
transform:rotateY(deg)
transform:rotateZ(deg)
位移变形
transform:translateX(deg)
transform:translateY(deg)
transform:translateZ(deg)
06，在C3中如何自定义动画？
1, 定义关键帧 @keyframes
2, animation
07，什么是响应式？
一套代码在不同端都可以合理显示。 根据媒体查询实现。
08，说一下rem单位？
root 表示是根标签文字大小的多少倍。
09，什么时间用到视口？
做手机站时，需要使用视口。
10，说一下你认识的百分比？
width:50%; 相对于父元素的宽度的
heigth:20%; 相对于父元素的高度的
padding-left:10%; 相对于父元素的宽度的
margin: 15%; 相对于父元素的宽度的
border-widht:12%; 不能这么写，border不可以设置百分比
11，什么是弹性布局？弹性布局中的四大概念是什么？
弹性布局是C3中提出一个新的布局模型， 与之前的流动布局，浮动布局，层布局完全不一样。
• 容器：只要给一个盒子加上display:flex, 那么这个盒子就是容器。
• 项目：容器的直接子元素就是项目
• 主轴：项目默认的排列顺序就是主轴
• 交叉轴：与主轴垂直的那么轴就是交叉轴
12，容器中都有哪些属性？ 项目中都有哪些属性？
容器：
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
• flex-flow
项目：
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self
13，什么是媒体查询？
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
七，JQ部分
01，JQ的入口函数和JS的入口函数有什么区别？
1, js: window.onload = function(){} jq: $(function(){});
2，js的需要等所有的资源加载后之后才执行， jq只需要DOM元素加载完就执行。
3，js中的入口函数只能写一个，jq可以写多个。
02，JQ如何控制HTML，如何控制CSS，如何控制标签性？
控制HTML:
.html(“<h1>123</h1>”) 没有参数，表示访问， 如果有一个参数，表示修改
控制CSS：
.css() 一个参数表示访问 两个参数表示修改
控制属性：
.attr() 一个参数表示访问，两个参数表示修改， 对于表单元素有个bug, 针对这个bug，jq提供了一个prop(); 一个参数表示访问 两个参数表示修改
03，说一下JQ中的选择器都有哪些？
• 基本选择器：
• 过滤选择器：
• 筛选选择器：
基本选择器：
• p
• id
• class
• div.box
• ul li
• div, span
• *
• >
• +
• ~
过滤选择器：
• 基本过滤选择器
• 子元素过滤选择器
• 内容过滤选择器
• 可见性过滤选择器
• 属性过滤选择器
• 表单元素属性过滤选择器
筛选选择器：
• 过滤筛选选择器
• 查找筛选选择器
• 串联筛选器
04，JQ中都有哪些动画，是怎么实现的？
1, 显示，隐藏动画 .show() .hide() .toggle()
2，滑动动画， .slideUp() .slideDown() .slideToggle()
3，透明度动画 .fadeOut() .fadeIn() .fadeTo()
4，自定义动画 .animate({}, time) 也叫动画版的 .css({})
5，停止动画 .stop();
05，JQ操作元素节点？
查找元素： 选择器选择
增加元素：
在父元素内部增加
.append() .appendTo() .prepend() .prependTo()
作为兄弟元素增加
.brfore() .insertBefore() .after() .insertAfter()
包裹元素
.wrap .wrapAll .wrapInner
删除元素：
.remove() .empty() .detach
修改元素：
.replaceWith() .replaceAll()
复制元素：
.clone()
06，JQ操作属性节点？
• .attr()
• .removeAttr()
• .addClass()
• .removeClass()
• .hasClass()
• .toggleClass()
• .prop()
• .val()
07，JQ操作文本节点？
• .html()
• .text()
08，JQ操作样式？
• .css()
• .widht()
• .height()
• .innerWidht()
• .innerHeight()
• outerWidht()
• outerHeight()
• outerWidht(true)
• outerHeight(true)
09，JQ都有哪些事件？
1，标准的DOM事件
和原生的是一样
• UI事件
• 鼠标事件
• 键盘事件
• 焦点事件
• 表单事件
2，自定义事件
• 页面载入事件
• 鼠标事件中又增加了两个：mouseenter mouseleave
• 焦点事件中又增加了两个：focusin focusout
3，事件绑定
• bind
• unbind
• one
• error
4，事件委托
• delegate()
• undelegate()
• on()
• off()
5，事件触发
• 事件名（）
• triggger(事件名)
10，如何获取事件发生的位置？
使用事件对象event中pageX, pageY
11，JQ中如何阻止事件冒泡？
有三种方式：
1，给事件加判断
2，stopPropagation()
3, return false
12，JQ如何阻止默认事件？
有两种方式：
1，return false
2，event.preventDefault()
13，JQ对象如何转化成JS对象？JS对象如何转化成JQ对象？
jq -- > js : 加下标[0] .get(0)
js -- > jq : $()包括起来就可以
1
扫一扫
876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
