yongheng2016 / blog Goto Github PK

View Code? Open in Web Editor NEW

58.0 58.0 5.0 14 KB

HTML 100.00%

notebooks

blog's People

Contributors

Stargazers

Watchers

Forkers

reacoulchen indingpig wangyangfe wanghuipeng sunzitong

blog's Issues

兼容

补充

预编译器
- less
- sass
后编译器（postCss）
合适的框架
- Bootstrap (>=ie8)
- jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
- Vue (>= ie9)
IE条件注释（只使用于6-9）
场景IE兼容
- inline-block: >=ie8
- min-width/min-height: >=ie8
- :before,:after: >=ie8
- div:hover: >=ie7
- inline-block: >=ie8
- background-size: >=ie9
- 圆角: >= ie9
- 阴影: >= ie9
- 动画/渐变: >= ie10

 .clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效 */
}

.target{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>    <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->

1.什么是 CSS hack

所谓的【css hack】指的是能够解决浏览器问题的特殊技巧，也就是俗称的【秘技】。

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。

css的三种写法(实际项目中大部分都是针对IE不同版本下的hack)：

1-1. css属性前缀法（类内部hack）：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
1-2. 选择器前缀法（选择器hack）：
1-3. IE条件注释（HTML头部引用if IE）:针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

例：

.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

常见属性的兼容情况
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10

2. 浏览器兼容思路

2-1. 要不要做
- 产品角度（产品的受众、受众浏览器比例、效果优先还是功能优先）
- 成本角度（有没有必要做）
2-2. 做到什么程度
- 兼顾到哪些浏览器？做到哪个版本？
2-3. 如何做
- 根据兼容需求选择合适的框架/库
- 根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、normalize.css、modernizr）
- post css
- 条件注释、css hack、js能力检测做一些修补

方向：

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

3.列举5种以上浏览器兼容的写法

3-1 条件注释
是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。

<!--[if IE 6]>
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->
    <!--[if !IE]><!-->
    <script>alert(1);</script>
    <!--<![endif]-->
    <!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->

使用了条件注释的页面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中无法正常工作。 IE10不再支持条件注释

条件注释：

项目	范例	说明
！	[if !IE]	非IE
lt	[if lt IE 5.5]	小于IE 5.5
lte	[if lte IE 6]	小于等于IE6
gt	[if gt IE 5]	大于 IE5
gte	[if gte IE 7]	大于等于IE7
\|	[if (IE 6)\|(IE 7)]	IE6或者IE7

3-2 css hack
- 1.属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识

.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}

2.选择器前缀法(即选择器Hack)
3.IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

   <!--[if IE 6]>
    <p>You are using Internet Explorer 6.</p>
    <![endif]-->
    <!--[if !IE]><!-->
    <script>alert(1);</script>
    <!--<![endif]-->
    <!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet">
    <![endif]-->

3-3. normalise.css

添加完Modernizr引用以后，它就立即生效了。运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例如:canvas,websockets），不支持的特性显示的class是“no-特性名称”（例如：no-flexbox）。

用法参考：
https://segmentfault.com/a/1190000003820989

4. 以下工具/名词是做什么的

4-1. 条件注释：
是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
4-2. IE Hack：

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。
4-3. js 能力检测
能力检测（又称特性检测）目标是识别浏览器的能力（能不能用？能or不能）而不是识别到底是哪个浏览器。只需根据浏览器支持的功能给出解决方案。（js的兼容性）

参考：
https://segmentfault.com/a/1190000004076674
http://www.cnblogs.com/egger/archive/2013/04/26/3045285.html

4-4. html5shiv.js

通过头部调用html5shiv.js可以让 lt IE 9的版本也可以支持html5标签。

源码：
https://github.com/aFarkas/html5shiv

4.5. respond.js

Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持媒体查询。

参考：
http://caibaojian.com/respondjs.html

源码：
https://github.com/scottjehl/Respond

4-6. css reset（注意和normalise.css的区别）

reset 的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。（暴力清0）

参考：
https://segmentfault.com/a/1190000003021766

4-6. normalize.css(注意和css reset的区别)

Normalize.css是一种CSS reset的替代方案。
Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

参考：
http://jerryzou.com/posts/aboutNormalizeCss/（详细介绍了normalize.css的特性）
https://segmentfault.com/a/1190000003021766

源码：
https://github.com/necolas/normalize.css

4-7. Modernizr

Modernizr.js既能给老版本浏览器打补丁，又能保证新浏览器渐进增强的用户体验。它主要做的就是浏览器‘功能检测’。

官网：
https://modernizr.com/

参考：
https://segmentfault.com/a/1190000003820989

源码：
https://github.com/Modernizr/Modernizr

4-8. postcss

PostCSS是一种软件开发工具，它使用基于JavaScript的插件来自动执行常规的CSS操作。

源码：
https://github.com/postcss/postcss#articles

5. 兼容性查询（网站）

http://caniuse.com/

6. hack查询

http://browserhacks.com/

函数提升、变量提升

函数名称解析顺序：

在JavaScript中，一个作用域(scope)中的名称(name)有以下四种：

语言自身定义(Language-defined): 所有的作用域默认都会包含this和arguments。
函数形参(Formal parameters): 函数有名字的形参会进入到函数体的作用域中。
函数声明(Function decalrations): 通过function foo() {}的形式。
变量声明(Variable declarations): 通过var foo;的形式。

https://dancon.gitbooks.io/git-books/content/js/essay/function_hoisting.html

http://www.cnblogs.com/betarabbit/archive/2012/01/28/2330446.html

http://www.jianshu.com/p/28ede2f4f30f

先提升作用域的变量声明，再看代码，所以条件语句中的变量不管怎样都会提升

事件应用 ->tab切换、模态框

题目1：实现如下图Tab切换的功能

代码：http://js.jirengu.com/hucop/2/edit

题目2：实现下图的模态框功能，点击模态框不隐藏，点击关闭以及模态框以外的区域模态框隐藏

代码：http://js.jirengu.com/qidir/1/edit

Math数组Date

Math任务

1.写一个函数，返回从min到max之间的随机整数，包括min不包括max

function random(min,max){
	return min+Math.floor(Math.random()*(max-min));
}
var ran=random(3,8);
console.log(ran);

2.写一个函数，返回从min都max之间的随机整数，包括min包括max

function random(min,max){
	return min+Math.floor(Math.random()*(max-min+1));
}
var ran=random(3,8);
console.log(ran);

3.写一个函数，生成一个长度为 n 的随机字符串，字符串字符的取值范围包括0到9，a到 z，A到Z。

function getRandStr(len){
  //补全函数
}
var str = getRandStr(10); // 0a3iJiRZap

代码：

function getRandStr(len){
	var words=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
	var str='';
	var random;
	for (var i=0; i<len; i++){
		random=Math.floor(Math.random()*62);
		str+=words[random];
	}
	return str;
}
console.log(getRandStr(9));

4.写一个函数，生成一个随机 IP 地址，一个合法的 IP 地址为 0.0.0.0~255.255.255.255

function getRandIP(){
  //补全
}
var ip = getRandIP()
console.log(ip) // 10.234.121.45

代码：

function getRandIp(){
	var arr=[];
	var str='';
	var random;
	for (var i=0; i<4; i++){
		random = Math.floor(Math.random()*256);
		arr.push(random)
	}
	str=arr.join('.');
	console.log(str);
	return;
}
getRandIp()

数组任务

1.数组方法里push、pop、shift、unshift、join、splice分别是什么作用？用 splice函数分别实现push、pop、shift、unshift方法

push：在数组末尾添加新值；返回值为新数组的长度；此方法会改变原数组；
unshift：在数组首部添加新值；返回值为新数组的长度；此方法会改变原数组；
shift：删除第0位置的值，返回删除的字符,没有返回空数组；此方法会改变原数组；
pop；删除最后一位的值；返回删除的字符，没有返回空数组；此方法会改变原数组；

arr.splice(arr.length,0,'新值') --> push
arr.splice(0,0,'新值') -->unshift
arr.splice(0,1) -->shift
arr.splice(-1,1) -->pop

2.写一个函数，操作数组，数组中的每一项变为原来的平方，在原数组上操作

function squareArr(arr){
}
var arr = [2, 4, 6]
squareArr(arr)
console.log(arr) // [4, 16, 36]

代码：

function squareArr(arr){
	for (var i=0; i<arr.length; i++){
		arr[i]=arr[i]*arr[i]
	}
}
var arr = [2, 4, 6]
squareArr(arr)
console.log(arr)

3.写一个函数，操作数组，返回一个新数组，新数组中只包含正数，原数组不变

function filterPositive(arr){
}
var arr = [3, -1,  2,  '饥人谷', true]
var newArr = filterPositive(arr)
console.log(newArr) //[3, 2]
console.log(arr) //[3, -1,  2,  '饥人谷', true]

代码：

function filterPositive(arr){
	var arr1=[];
	for (var i=0; i<arr.length; i++){
		if (typeof arr[i]=='number' && arr[i]>0){
			arr1.push(arr[i])
		}
	}
	return arr1;
}

Date 任务

1. 写一个函数getChIntv，获取从当前时间到指定日期的间隔时间

var str = getChIntv("2017-02-08");
console.log(str);  // 距除夕还有 20 天 15 小时 20 分 10 秒

代码：

function getChIntv(t){
	var currentTime = new Date();
	var targetTime = Date.parse(t);
	var time = Math.abs(currentTime-targetTime);
	var totalSeconds = Math.floor(time/1000);
	var second = totalSeconds%60;
	var totalMinutes = Math.floor(totalSeconds/60);
	var minute = totalMinutes%60;
	var totalHours = Math.floor(totalMinutes/60);
	var hour = totalHours%24;
	var day = Math.floor(totalHours/24);
	return '距离时间还有'+day+'天'+hour+'小时'+minute+'分'+second+'秒';
		
}
var str=getChIntv("2017-06-20");
console.log(str);

2.把hh-mm-dd格式数字日期改成中文日期

var str = getChsDate('2015-01-08');
console.log(str);  // 二零一五年一月八日

function getChsDate(t){
	var timeArr = ['零','一','二','三','四','五','六','七','八','九','十'];
	var time;
	var yearStr='';
	var monthStr='';
	var dayStr='';
	var arr=t.split('-')
	for (var i=0; i<arr[0].length; i++){
		yearStr+=timeArr[arr[0][i]]
	}
	if (arr[1][0]==='0'){
		monthStr=timeArr[parseInt(arr[1])];
	}else{
		monthStr='十'+timeArr[arr[1][1]]
	}
	if (arr[2][0]==='0'){
		dayStr=timeArr[parseInt(arr[2])]
	}else{
		if (arr[2][0]==='1'){
			dayStr='十'+timeArr[arr[2][1]]
		}else{
			dayStr=timeArr[arr[2][0]]+'十'+timeArr[arr[2][1]]
		}
	}
	return 	time=yearStr+'年'+monthStr+'月'+dayStr+'日';
}

var str = getChsDate('2015-12-14');
console.log(str);

3.写一个函数，参数为时间对象毫秒数的字符串格式，返回值为字符串。假设参数为时间对象毫秒数t，根据t的时间分别返回如下字符串:

刚刚（ t 距当前时间不到1分钟时间间隔）
3分钟前 (t距当前时间大于等于1分钟，小于1小时)
8小时前 (t 距离当前时间大于等于1小时，小于24小时)
3天前 (t 距离当前时间大于等于24小时，小于30天)
2个月前 (t 距离当前时间大于等于30天小于12个月)
8年前 (t 距离当前时间大于等于12个月)

function friendlyDate(time){
}
var str = friendlyDate( '1484286699422' ) //  1分钟前
var str2 = friendlyDate('1483941245793') //4天前

代码：

function friendlyDate(time){
	timeNum = parseInt(time);
	console.log(timeNum)
	if (timeNum<60*1000){
		console.log('刚刚')
		return '刚刚';
	}else if ( timeNum<60*60*1000){
		console.log('3分钟前')
		return '3分钟前';
	}else if ( timeNum<24*60*60*1000){
		console.log('8小时前')
		return '8小时前';
	}else if (timeNum<30*24*60*60*1000){
		console.log('3天前')
		return '3天前';
	}else if (timeNum<12*30*24*60*60*1000){
		console.log('2个月前')
		return '2个月前';
	}else{
		console.log('8年前')
		return '8年前';
	}
}

var str = friendlyDate( '1484286699422' )
var str2 = friendlyDate('14353535345')

居中

垂直居中：

可变内容居中（上下padding相等）

网页中有一部分内容大小可变的垂直居中，直接用上下padding相等即可；

代码：
http://js.jirengu.com/rudut/1/edit?html,css,output

http://js.jirengu.com/zusebelili/2/edit?html,css,output

行内元素居中（line-height）
- tip:注意line-height只能写在块级元素內，作用于行内元素

当网页中有一部分不易变动的简短的内容需要居中，且其父元素有固定height；可以用line-height，但只适用于单行内容。

多行文字垂直居中(line-height)

原理是根据height的来源以及line-height的本质；
line-height的高度是由inline-box中line-height值最大的那个决定的；也就是line-box的高；这个值是撑起整个box高度的来源；根据这个原理，只要设置一个不占空间的字符，让它的line-height达到我们想要的高度就行了；（注意标签用inline-block分隔一下，并让他们并排显示）

http://js.jirengu.com/cenapojuka/7/edit
代码：
http://js.jirengu.com/vupuw/1/edit?html,css,output

根据基线居中（vertical-align）

文字、图片还有？都存在基线的概念，通过基线可以使这些元素达到垂直居中的效果。

代码：
http://js.jirengu.com/zifi/1/edit?html,css,output

绝对垂直居中（position、translate或margin）
- tip: translate: 50%是自身容器的 border+padding+content

但父元素宽高都固定的时候，子元素可以设置相对于父元素的绝对定位，设置水平竖直绝对居中；

代码：
http://js.jirengu.com/yayem/3/edit

原型、原型链

https://zhuanlan.zhihu.com/p/22473059

https://zhuanlan.zhihu.com/p/22189387

浏览器渲染问题

CSS和JS在网页中的放置顺序是怎样的？

根据各个浏览器对页面的处理机制不同，实际网页呈现考虑因素不同，其放置的顺序也存在差异：
一. Chrome和Safari看到css会立即停止渲染，去加载css；所以放置位置要求不高；（白屏问题）

二. Firefox

css放置在head中的处理机制和Chrome/Safari完全一致；（白屏问题）
css放置在body中和IE/Edge的处理机制一样，尽量靠后放；（闪烁问题）

三. IE/Edge中css会阻塞后面样式的显示，尽量靠后放；（闪烁问题）

四. js加载会阻塞后面的内容；所以存在白屏问题；尽量放置在后面；

综上结合各个浏览器，如果要避免闪烁，css放在head头部，如果要避免白屏，css尽量放置在后面；

解释白屏和FOUC

白屏或闪烁是无法避免的，只能二选一；(1.化好妆,才出门 2.先出门,中途化妆)

根据各个浏览器的侧重点不同，白屏和闪烁的处理机制也不同：

Chrome和Safari。当发现后即停止渲染，在所有css加载完成之前，页面上不会显示任何东西。
Firefox。head标签中的行为与Chrome/Safari中完全一致，这些link标签全部加载完成之前，页面上不显示内容；而body标签中的则不阻塞任何内容显示。
IE/Edge。未加载完成的标签只阻塞其后面的HTML内容显示，而对其前面的HTML内容则不阻塞。

参考：http://blog.shaochuancs.com/new-css-loading-method/

async和defer的作用是什么？有什么区别

作用：可以让后续文档和js并行加载；
区别：差别在于脚本下载完成后何时执行；

defer：在js加载完成后，它的执行要在所有元素解析完成后才能执行；（有先后顺序）
async：加载和渲染后续文档的过程和js的加载、执行并行进行；（没有顺序可言）

蓝色代表网络读取，红色代表执行时间，绿色代表HTML解析；

参考：https://segmentfault.com/q/1010000000640869

简述网页的渲染机制（下载->解析->渲染->执行->预下载）

解析：

浏览器会解析以下三种：

一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
CSS，解析CSS会产生CSS规则树。
Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

DOM解析

CSS解析

渲染：

渲染的流程基本上如下（黄色的四个步骤）：

计算CSS样式
构建Render Tree
Layout – 定位坐标和大小，是否换行，各种position, overflow, z-index属性 ……
正式开画

参考：

HTML渲染规则-层级关系（之前pozition的再更新版本）-3

哈哈，又要啪啪啪打脸了，自从昨天遇到position的问题后，一步步查找资料；终于从一个小小的定位找到源头了；把这里搞明白才算是弄懂之前的position问题；但还是那句话；后面很可能继续打脸。。。

正文

浏览器布局解析：（首先声明：IE5，6，7没有按规范解析，可能会跟你的布局显示有出入）

浏览器根据css的规则进行顺序解析，哪个元素排在前面，哪个在后面，包括如果用了float，position（非static），z-index谁在上，谁在下（不要想歪）都有规则；浏览器就是根据这个规则进行解析；最后呈现出一幅网页平面的；（其实网页是个三维，只是显示出来人眼视觉上是平面的。）

什么规则：

首先是正常文档流的规则，我们把网页分成若干层，除非你设置了index，position（非static），float...，所有的元素默认的都是0层。
在这层的规则是：**从左到右，从上到下。**但要注意的是，他们其实也并不是都是肩并肩排的，如果你是我后面的元素，你要挪动，肯定你在我上面显示；

表单

post 和 get 方式的区别：

get通过url传递，post通过request body传递。
首先在url大小上有所限制，因为get和post传输规则不同，导致浏览器和服务器对这两种方式的大小进行了规定：get方法限制一定的大小，超过规定大小有可能截断不处理；
get传输过程发送一个数据包，post发送两个；网络通畅时，两者传输性能差不多；网络较差的情况下，post两次包在TCP的验证数据包完整性上，有非常大的优点
在语义化程度上，尽量结合需求针对性的选用。

方法	GET	POST
后退按钮/刷新	无害	数据会被重新提交（浏览器应该告知用户数据会被重新提交）。
书签	可收藏为书签	不可收藏为书签
缓存	能被缓存	不能缓存
编码类型	application/x-www-form-urlencoded	application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史	参数保留在浏览器历史中。	参数不会保存在浏览器历史中。
对数据长度的限制	是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。	无限制。
对数据类型的限制	只允许 ASCII 字符。	没有限制。也允许二进制数据。
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性	数据在 URL 中对所有人都是可见的。	数据不会显示在 URL 中。

参考：

www.oschina.net/news/77354/http-get-post-different

https://sunshinevvv.com/2017/02/09/HttpGETv.s.POST

在input里，name 有什么作用？

表单如果要正确地被提交，每个输入字段必须设置一个 name 属性；name作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button等。我们可以在服务器端根据其Name通过Request.Params取得元素提交的值。
参考：
http://www.cnblogs.com/birdshome/archive/2005/01/31/99562.html

radio 如何分组?

radio通过name来达到分组的目的；同一组别的name相同，不同组别通过name名称的不同来区分；

placeholder 属性有什么作用?

在输入框中灰度显示需要输入的内容类型，以此来提醒用户；但不存在实际值。

type=hidden隐藏域有什么作用? 举例说明

可以有效校验用户的合法性，防止恶意向数据接口传输数据；比如用户在提交信息时，通过服务端随机生成一个校验数字附带在hidden中，用户点击提交时会把这个随机数字提交上去，以便服务端验证用户的合法性；

定时器

参考：
https://segmentfault.com/a/1190000000517177

js offset image font-size 加载顺序

这张实例里面涉及了img font 的关系，浏览器渲染机制等问题；

demo：http://js.jirengu.com/samoz/1/edit

HTML表单

HTML 表单用于搜集不同类型的用户输入。

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
H5新增：http://www.jianshu.com/p/1995e00865d1
表单使用表单标签<form>来设置:

名称

<label for="关联id获取焦点">点击</label>

创建文本

<input type="text" name="name" placeholder="xxx">

创建密码

<input type="password" name="password">

单选按钮

<input type="radio" name="" value="" checked>

复选框

<input type="checkbox" name="" value="" checked>

提交按钮

<input type="submit" name="">

创建按钮

<input type="button" value="">

隐藏域

<input type="hidden" value="">

下拉框

<select><option selected></option></select>

文本域

<textarea name=""></textarea>

HTML5新标签

选择日期

<input type="date" name="birth">

星期

<input type="week" name="" id="">

时间

<input type="time" name="clock" id="">

范围（range）

<input type="range" name="age" min="18" max="60">
``

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist>New	指定一个预先定义的输入控件选项列表
<keygen>New	定义了表单的密钥对生成器字段
<output>New	定义一个计算结果

当focus时去除输入框中的highlight

input.middle:focus {
    outline-width: 0;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

*:focus {
    outline: none;
}

参考：http://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element

str.replace(reg,function ( ){ } )--关于function的一些

可以通过修改replace方法的第二个参数，使replace更加强大，在前面的介绍中，只能把所有匹配替换为固定内容，但如果我希望把一个字符串中所有数字，都用小括号包起来该怎么弄

'2398rufdjg9w45hgiuerhg83ghvif'.replace(/\d+/g,function(r){
    return '('+r+')';
}); //"(2398)rufdjg(9)w(45)hgiuerhg(83)ghvif"

把replace方法的第二个参数传入一个function，这个function会在每次匹配替换的时候调用，算是个每次替换的回调函数，我们使用了回调函数的第一个参数，也就是匹配内容，其实回调函数一共有四个参数

第一个参数很简单，是匹配字符串
第二个参数是正则表达式分组内容，没有分组则没有该参数
第三个参数是匹配项在字符串中的index
第四个参数则是原字符串

看个例子

'2398rufdjg9w45hgiuerhg83ghvif'.replace(/\d+/g,function(a,b,c){
    console.log(a+'\t'+b+'\t'+c);
    return '('+a+')';
});

结果是：

2398    0    2398rufdjg9w45hgiuerhg83ghvif
9    10    2398rufdjg9w45hgiuerhg83ghvif
45    12    2398rufdjg9w45hgiuerhg83ghvif
83    22    2398rufdjg9w45hgiuerhg83ghvif

这是没有分组的情况，打印出来的分别是匹配内容、匹配项index和原字符串，看个有分组的例子，如果我们希望把一个字符串的<%%>外壳去掉，<%1%><%2%><%3%> 变成123

'<%1%><%2%><%3%>'.replace(/<%([^%>]+)%>/g,function(a,b,c,d){
    console.log(a+'\t'+b+'\t'+c+'\t'+d);
    return b;
}) //123

结果是：

<%1%>    1    0    <%1%><%2%><%3%>
<%2%>    2    5    <%1%><%2%><%3%>
<%3%>    3    10    <%1%><%2%><%3%>

根据这种参数replace可以实现很多强大的功能，尤其是在复杂的字符串替换语句中经常使用

引用类型对象拷贝

1.引用类型有哪些？非引用类型有哪些2.如下代码输出什么？为什么

基本类型：number、boolean、string、null、undefined

引用类型：object、function、regexp、array

var obj1 = {a:1, b:2}; 
var obj2 = {a:1, b:2};
console.log(obj1 == obj2);   //false   地址不相等
console.log(obj1 = obj2);   //{a:1,b:2}   浅拷贝，obj1拷贝obj2的地址
console.log(obj1 == obj2);   //ture 两个对象相等

3.如下代码输出什么? 为什么

var a = 1
var b = 2
var c = { name: '饥人谷', age: 2 }
var d = [a, b, c]

var aa = a
var bb = b
var cc = c
var dd = d

a = 11
b = 22
c.name = 'hello'
d[2]['age'] = 3

console.log(aa)    //1  基本类型   值的拷贝
console.log(bb)    //2   基本类型   值的拷贝
console.log(cc)   //{name:'hello'，age:3}    引用类型   浅拷贝    `c.name`改变了堆中对象的内容,`d[2]['age']=3`改变了堆对象中age的值
console.log(dd)  //[1,2,{name:'hello',age:3}]   数组中的c记录的是地址，浅拷贝，所以里面内容的改变都影响到最终数组的内容  ；

4.如下代码输出什么? 为什么

var a = 1
var c = { name: 'jirengu', age: 2 }

function f1(n){
  ++n
}
function f2(obj){
  ++obj.age
}

f1(a)    
f2(c) 
f1(c.age) 
console.log(a)    //1     f1(a)-->function f1(n){var n=a; ++n}
console.log(c)   //{name:'jirengu',age:3}    同上

5.过滤如下数组，只保留正数，直接在原数组上操作

var arr = [3,1,0,-1,-3,2,-5]
function filter(arr){
}
filter(arr)
console.log(arr) // [3,1,2]

var arr = [3,1,0,-1,-3,2,-5];
	function change(arr){
		for (var i=0; i<arr.length; i++){
		if (arr[i]<=0){
			arr.splice(i,1);
			i-=1;
		}
	}
}
change(arr);
console.log(arr);

6.过滤如下数组，只保留正数，原数组不变，生成新数组

var arr = [3,1,0,-1,-3,2,-5]
function filter(arr){
}
var arr2 = filter(arr)
console.log(arr2) // [3,1,2]
console.log(arr)  // [3,1,0,-1,-2,2,-5]

function change(arr){
	var arr1=[];
	for (var i=0; i<arr.length; i++){
		if (arr[i]>0){
			arr1.push(arr[i]);
		}
	}
	return arr1;
}

7.写一个深拷贝函数，用两种方式实现

深拷贝思路：

jscode
- 1.分类，每个类型分情况讨论
- 2.实现递归（能够进行多层嵌套的拷贝）
- 3.注意死循环，防止栈溢出（a.self = a /自己的子属性指向自己）（如果属性是对象，记录此属性的地址放入数组或对象中，下次遍历如果又出现了这个地址就停止遍历，直接返回）

var a={self: a}
//a对象的属性当中引用了a对象的地址，此时对a进行递归拷贝会无限循环

js的深拷贝(进适用于对象)：

 function deepCopy(oldObj) {
        var newObj = {};
        for(var key in oldObj) {
            if(typeof oldObj[key] === 'object') {
                newObj[key] = deepCopy(oldObj[key]);
            }else{
                newObj[key] = oldObj[key];
            }
        }
        return newObj;
    }

借助JSON全局对象的深拷贝：
针对纯 JSON 数据对象的深复制，使用 JSON 全局对象的 parse 和 stringify 方法来实现；但它只能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。
- 1.没有引入
- 2.没有函数（json无法表示函数）

JSON格式深拷贝：

function jsonClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
var clone = jsonClone({ a:1 });

参考：
https://zhuanlan.zhihu.com/p/23251162
http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/

正则表达式

题目1： \d，\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^,$分别是什么?

\d：匹配拉丁字母表中的一个数字字符。等价于[0-9]
\w：匹配拉丁字母表中的字母、数字字符，还包括下划线。等价于[A-Za-z0-9_]
\s：匹配一个空格字符，包括空格、制表符、换页符、换行符、其它Unicode空格
[a-zA-Z0-9]：匹配集合中的任意字符
\b：匹配一个零宽单词边界，如一个字母与一个空格（小心与[\b]混淆）

例如，/\bno/ 匹配 "at noon" 中的 "no"，/ly\b/ 匹配 "possibly yesterday." 中的 "ly"。

.：匹配任意单个字符，但回车\r、换行\n符除外
*：匹配前面模式的0次或多次
+：匹配前面模式的1次或多次。等价与{1,}
?:匹配前面模式的0次或1次；

如果在数量词 *、+、? 或 {}, 任意一个后面紧跟该符号（?），会使数量词变为非贪婪（ non-greedy），即匹配次数最小化。反之，默认情况下，是贪婪的（greedy），即匹配次数最大化。

x{3}：前面模式x连续出现3次后匹配
^：匹配输入开始；

如果多行（multiline）标志被设为 true，该字符也会匹配一个断行（line break）符后的开始处。

$：匹配输入结尾；

如果多行（multiline）标志被设为 true，该字符也会匹配一个断行（line break）符的前的结尾处。

题目2：写一个函数trim(str)，去除字符串两边的空白字符

function trim(str){
	str=str.replace(/^\s+|\s+$/g,'')
        console.log(str)
	return str;
}
var str = '   fjsld   '
trim(str)

题目3：写一个函数isEmail(str)，判断用户输入的是不是邮箱

function isEmail(str){
	var reg = /^\w+@\.+\w$/
	 if (reg.test(str)){
	 	alert('是邮箱')
	 }else{
	 	alert('不是邮箱')
	 }
}
var str1 = '[email protected]'
var str2 = '[email protected]'
isEmail(str1)
isEmail(str2)

题目4：写一个函数isPhoneNum(str)，判断用户输入的是不是手机号

function isPhoneNum(str){
	var reg = /1\d{10}$/
	if (reg.test(str)){
		alert('是手机')
	}else{
		alert('不是手机')	
	}
}
var str = '1378924w9867'
isPhoneNum(str)

题目5：写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）

function isValidUsername(str){
	var reg = /^\w{6,20}$/
	if(reg.test(str)){
		alert('是合法用户名')
	}else{
		alert('不是合法用户名')
	}
}
var str = 'ffffffffffffffffffff'
isValidUsername(str)

题目6：写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，只包括大写字母、小写字母、数字、下划线，且至少至少包括两种）

function isValidPassword(str){
       if( /^\w{6,20}$/.test(str)) return false
	if(/^\d{6,19}$/.test(str)) return false
	if(/^[A-Z]{6,19}$/.test(str)) return false
	if( /^[a-z]{6,19}$/.test(str)) return false
	if( /^\_{6,19}^/.test(str)) return false
}
str = 'aaaaaaaaaaaaaaaaa'
isValidPassword(str)

题目7：写一个正则表达式，得到如下字符串里所有的颜色

var re = /*正则...*/
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee "
console.log( subj.match(re) )  // ['#121212', '#AA00ef']

代码：

var reg = /#[A-Fa-f0-9]{6}|#[A-Fa-f0-9]{3}(?=;)/g
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee "
console.log(subj.match(reg))

题目8：下面代码输出什么? 为什么? 改写代码，让其输出[""hunger"", ""world""].

var str = 'hello  "hunger" , hello "world"';
var pat =  /".*"/g;
str.match(pat);

代码：

var str = 'hello  "hunger" , hello "world"';
var pat =  /".*"/g;  
str.match(pat);    //["hunger" , hello "world"]  因为是贪婪模式，所以匹配从第一个双引号到最后一个双引号
//改写：
var changePat = /"[a-zA-Z]+"/g
console.log(str.match(changePat))

字符串与JSON

1.使用数组拼接出如下字符串

var prod = {
    name: '女装',
    styles: ['短款', '冬季', '春装']
};
function getTpl(data){
//todo...
};
var result = getTplStr(prod);  //result为下面的字符串

<dl class="product">
    <dt>女装</dt>
    <dd>短款</dd>
    <dd>冬季</dd>
    <dd>春装</dd>
</dl>

代码：

function getTpl(obj){
	var arr=[];
	var str='';
	var str1='';
	var str2='';
	for (var key in obj){
		arr.push(obj[key])
	}
	str1='<dt>'+arr[0]+'</dt>'
	for (var i=1; i<arr.length; i++){
		for (var j=0; j<arr[i].length; j++){
			str2+='<dd>'+arr[i][j]+'</dd>'
		}
	}

	str='<dl class="product">'+str1+str2+'</dl>';
	return str;
}
console.log(getTpl(prod))

2、写出两种以上声明多行字符串的方法

例如：

var str = 'abcdeabcdeabcdeancdeabcdeabcdeabcdeancdeabcdeabcdeabcdeancdeabcdeabcdeabcdeancde'

这段字符串很长，如何多行优雅的显示

方法1：(注意，反斜杠的后面必须是换行符，而不能有其他字符（比如空格），否则会报错。)

var str = 
'abcdeabcdeabcdeancde\
abcdeabcdeabcdeancde\
abcdeabcdeabcdeancdea\
bcdeabcdeabcdeancde';
console.log(str)

方法2：

var str = 
'abcdeabcdeabcdeancde'
+'abcdeabcdeabcdeancde'
+'abcdeabcdeabcdeancdea'
+'bcdeabcdeabcdeancde';
console.log(str)

方法3：

var str=(function () { /*
abcdeabcdeabcdeancde
abcdeabcdeabcdeancde
abcdeabcdeabcdeancdea
bcdeabcdeabcdeancde
*/}).toString().split('\n').slice(1,-1).join('')  //注意这里的join('');
console.log(str)

3、补全如下代码,让输出结果为字符串: hello\饥人谷

var str = //补全代码
console.log(str)

代码：

var str='hello\\\\饥人谷';
console.log(str)

4、以下代码输出什么?为什么

var str = 'jirengu\nruoyu'
console.log(str.length)     //输出：13   字符串中的\n是转义字符，表示换行,代表一个字符长度；

5、写一个函数，判断一个字符串是回文字符串，如 abcdcba是回文字符串, abcdcbb不是

function huiwen(str){
	if(str===str.split('').reverse().join('')){
		console.log('是回文字符串')
	}else{
		console.log('不是回文字符串')
	}	
}

var str1='abcdcba'
var str2='jfsljfsd'
huiwen(str1)
huiwen(str2)

6、写一个函数，统计字符串里出现出现频率最多的字符

function maxWord(str){
	var obj={};
	var maxNum=0;
	var maxNames='';
	var maxName='';
	for (var i=0; i<str.length; i++){
		if (obj[str[i]]){
			++obj[str[i]]
		}else{
			obj[str[i]]=1
		}
	}
	for (var key in obj){
		if (obj[key]>maxNum){
			maxNum = obj[key]
			maxName = key
		}
	}
	for (var i in obj){
		if (obj[i]===obj[maxName]){
			maxNames+='"'+i+'"'
		}
	}
	return '频率最多的字符：'+maxNames+'\n'+'出现次数：'+maxNum;
}


var str1='fffaaaccc'
console.log(maxWord(str1))

7、写一个camelize函数，把my-short-string形式的字符串转化成myShortString形式的字符串，如

camelize("background-color") == 'backgroundColor'
camelize("list-style-image") == 'listStyleImage'

代码：

function camelize(str){
	var arr;
	var upp;
	arr=str.split('');
	for (var i=0; i<arr.length; i++){
		if (arr[i]==='-'){
			upp=arr[i+1].toUpperCase();
			arr.splice(i,2,upp);
		}
	}
	str=arr.join('');
	console.log(str)
	return str;
}

8、写一个 ucFirst函数，返回第一个字母为大写的字符（***）

ucFirst("hunger") == "Hunger"

代码：

function ucFirst(str){
	var arrStr=str.split('');
	arrStr[0]=arrStr[0].toUpperCase();
	str = arrStr.join('');
	console.log(str)
	return str;
}

var str='hunger'	
ucFirst(str)

9、写一个函数truncate(str, maxlength), 如果str的长度大于maxlength，会把str截断到maxlength长，并加上...，如

truncate("hello, this is hunger valley,", 10) == "hello, thi...";
truncate("hello world", 20) == "hello world"

代码：

function truncate(str, maxlength){
	if (str.length<=maxlength){
		return str;
	}else{
		str=str.slice(0,maxlength)+'...';
		return str;
	}
}

var str='fjsldjfowejf'
console.log(truncate(str, 5));
console.log(truncate(str, 30));

10、什么是 JSON格式数据？JSON格式数据如何表示对象？window.JSON 是什么？

JSON 语法是 JavaScript 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组

JSON 数据的书写格式是：名称/值对，名称/值对组合中的名称写在前面（在双引号中），值对写在后面(同样在双引号中)，中间用冒号隔开：

JSON中的值可以是：字符，数字，布尔，true，false，null，对象，数组

例：

var json1 = {"name": "Byron", "age": "24"}

var json2 = [
    {"name": "Byron", "age": "24"}, 
    {"name": "Byron2", "age": "25"}
]

window.JSON:

用于判断浏览器是否兼容JSON的用法，例如IE8版本以上才内置支持JSON.parse方法，对此常见这样的写法：

if(window.JOSN){
   jsonObj2 = JSON.parse(json);
}else{
}

可以通过对原生对象的模仿使那些没有原生支持 JSON 对象的浏览器（比如IE6）中使用 JSON 对象。

模仿源码：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON

11、如何把JSON 格式的字符串转换为 JS 对象？如何把 JS对象转换为 JSON 格式的字符串?

原生支持

IE以上浏览器都支持了一个对象JSON，JSON对象主要有两个『静态』函数

parse：把字符串转化为JSON对象
stringify：把JSON对象转化为字符串（出人意料的不叫toString，因为不是实例方法）

var json = {
  "name": "Byron",
  "age": 24
};

var json_str = JSON.stringify(json);
console.log(json_str);
console.log(JSON.parse(json_str));

eval

邪恶的eval出现了，以前很多人图省事用eval把字符串转为json(少用)

var json_str = '{"name": "Byron", "age": 24}';
var json = eval('(' + json_str + ')');
console.log(json);

layout布局

布局？

布局是个啥：html文档流，浮动，定位可以让我们简单的按照自己的方式去改变一下页面的呈现方式；但有时候这些简单的方式还是不能满足我们的一些特定需求，这时候我们可以通过把一些属性进行组合来完成这些复杂的页面呈现方式；

常见布局类型：

固定宽度布局

    优点：简单易维护
    缺点：屏幕小于设定宽度时，会出现滚动条

弹性（fluid）布局（适应屏幕宽度，百分比）

    优点：页面美观
    缺点：设计、实现上较复杂（额外考虑屏幕较大或较小时的不同情况）

响应式布局--多终端（pc、pad、phone）

常见布局方式：

单列布局

1.单列定宽布局（这里要注意一下width和max-width的区别）

    ！max-width:800px; ：宽度上封顶（最大800px），下不封底（宽度由屏幕大小决定），不会出现滚动条。
    ！min-width:800px：宽度上不封顶，下封底（最小宽度800px），

<style>
  .layout{
  /*   width: 960px; */
    max-width: 960px;
    margin: 0 auto;
  }
  #header{
    height: 60px;
    background: red;
  }
  #content{
    height: 400px;
    background: blue;
  }
  #footer{
    height: 50px;
    background: yellow;
  }
</style>
<div class="layout">
  <div id="header">头部</div>
  <div id="content">内容</div>
  <div id="footer">尾部</div>
</div>

NOTE：有时为了省标签，同时也方便局部控制，会将layout以class的方式出现在布局块当中；

<style>
  .layout{
    width: 960px;
    margin: 0 auto;
  }
  #header{
    height: 60px;
    background: red;
  }
  #content{
    height: 400px;
    background: blue;
  }
  #footer{
    height: 50px;
    background: yellow;
  }
</style>
<div id="header">头部</div>
<div id="content" class="layout">内容</div>
<div id="footer" class="layout">尾部</div>

2.单列定宽（通栏优化）：

 通栏布局如不进行优化会当页面缩小的时候，上下栏出现镂空；加上min-width来限制它的宽度；

<style>
  .layout{
    width: 960px;
    margin: 0 auto;
  }
  body{
    min-width: 960px;
  }
  #header{
    height: 60px;
    background: red;
  }
  #content{
    height: 400px;
    background: blue;
  }
  #footer{
    height: 50px;
    background: yellow;
  }
</style>
<div id="header">
  <div class="layout">头部</div>
</div>
<div id="content" class="layout">内容</div>
<div id="footer">
  <div class="layout">尾部</div>
</div>

一个单栏通栏布局范例：
http://js.jirengu.com/buyu/1/edit

双列布局（浮动元素 + 普通元素margin ）

<style>
    #content:after{
      content: '';
      display: block;
      clear: both;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: left;
    }
    .main{
      margin-left: 210px;
      height: 400px;
      background: red;
    }
    
    #footer{
      background: #ccc;
    }
  
  </style>
  <div id="content">
    <div class="aside">aside</div>
    <div class="main">content</div>
  </div>
  <div id="footer">footer</div>

双列布局范例：
http://js.jirengu.com/gedor/1/edit

三列布局（注意侧边栏和中间栏在HTML上的书写顺序）

#content:after{
     content: '';
     display: block;
     clear: both;
   }
   .menu{
     width: 100px;
     height: 500px;
     background: pink;
     float: left;
   }
   .aside{
     width: 200px;
     height: 500px;
     background: yellow;
     float: right;
   }
   .main{
     margin-left: 110px; /*为什么要加margin-left*/
     margin-right: 210px;
     height: 400px;
     background: red;
   }
   
   #footer{
     background: #ccc;
   }

 <div id="content">
   <!-- 为什么不是main在前面 -->
   <div class="menu">aside</div>
   <div class="aside">aside</div>
   <div class="main">content</div>
 </div>
 <div id="footer">footer</div>

三列布局范例：
http://js.jirengu.com/qegux/1/edit?html,css,output

三列---圣杯布局（三列布局一般main放在最后的正常流元素，可如果主要内容非要放在前面）
NOTE：aside是根据margin:-100%;而main:100%;他们都是用到父容器的content宽度，所以当屏幕缩小到main=aside的时候，aside的左移距离小于自身距离，所以上不去。

<style>
    #content:after{
      content: '';        /*8*/
      display: block;     /*8*/
      clear: both;        /*8*/
    }
    #content{
      padding-left: 100px;  /*5*/
      padding-right: 150px; /*5*/
    }
    .aside, .main, .extra{
      float: left;         /*2*/
    }
    
    .aside{
      width: 100px;        /*1*/
      height: 300px;       /*1*/
      background: red;     /*1*/
      
      margin-left: -100%;  /*4*/
      position: relative;  /*6*/
      left: -100px;        /*6*/
    }
    .extra{
      width: 150px;        /*1*/
      height: 300px;       /*1*/
      background: yellow;  /*1*/
      
      margin-left: -150px; /*5*/
      position: relative;  /*7*/
      left: 150px;         /*7*/
      
    }
    .main{
      height: 350px;       /*1*/
      background: blue;    /*1*/
      
      width: 100%;         /*3*/
    }
  
  </style>

  <div id="content">
    <div class="main">main</div>
    <div class="aside">aside</div>
    <div class="extra">extra</div>
  </div>

圣杯布局范例：
http://js.jirengu.com/kanof/1/edit?html,css,output

双飞翼布局（有效解决圣杯布局缩小窗口带来的问题）：
NOTE：通过在main內添加一个div子元素，有效的避免了因宽度的减小导致aside左margin移动距离不够的情况

<style>
    
    #content:after{
      content: '';        /*8*/
      display: block;     /*8*/
      clear: both;        /*8*/
    }
    #content{
  
    }
    .aside, .main, .extra{
      float: left;         /*2*/
    }
    
    .aside{
      width: 100px;        /*1*/
      height: 300px;       /*1*/
      background: red;     /*1*/
      
      margin-left: -100%;  /*4*/

    }
    .extra{
      width: 150px;        /*1*/
      height: 300px;       /*1*/
      background: yellow;  /*1*/
      
      margin-left: -150px; /*5*/

      
    }
    .main{
      /* background: blue;  */   /*第1步添加，第7步注释掉*/
      /* height: 350px;  */      /*第1步添加，第7步注释掉*/
      
      width: 100%;         /*3*/
    }
    
    .wrap{
      margin-left: 100px;  /*6*/
      margin-right: 150px; /*6*/
      background: blue;    /*7*/
      height: 350px;       /*7*/
 
    }
  
  </style>
  
  <div id="content">
    <div class="main">
      <div class="wrap">main</div>
    </div>
    <div class="aside">aside</div>
    <div class="extra">extra</div>
  </div>

双飞翼布局范例：
http://js.jirengu.com/zopuw/1/edit?html,css,output

scroll(函数封装)

用法： scroll().top / scroll().left

function scroll (){
	if (window.pageXoffset !=null){
		return {
			left: window.pageXOffset,
			top: window.pageYOffset
 //firefox
		}
	}else if (document.compateMode == 'CSS1Compat'){    
		return {
			left: document.documentElement.scrollLeft,
			top: document.documentElement.scrollTop
 //ie    dtd声明 
		}
	}else {
		return {
			left: document.body.scrollLeft,
			top: document.body.scrollTop
//chrome
		}
		
	}
}

首先，这个事件属于 UIEvent
这个事件是异步的
大多数情况下没有冒泡阶段（只有在document的触发时才会冒泡到window）

http://www.liyaoli.com/2015-08-17/about-scroll.html
http://w3help.org/zh-cn/causes/SD9013

事件(Event)

题目1： DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

DOM0：行内样式或js标签中直接写事件以及所对应的处理函数，它是一种表达式的写法；所以点遇到同名函数的时候会发生重置；

<button onclick=console.log('a')></button>

DOM2：是一种方法，所以可以重复调用这种方法而不冲突；

标准浏览器：
- 监听事件：addEventListener( )
- 删除事件：removeEventListener( )
  事件中的this指的是触发事件的元素
老式IE浏览器（IE8及以下）：
- 监听事件：attachEvent( )
- 删除事件：detachEvent( )
  事件中的this指向的是window

题目2： attachEvent与addEventListener的区别？

参数不同：
- attachEvent 只有两个参数（’onclick‘，handler）
- addEventListener 有三个参数（‘click’，handler，false/true）
第一个参数意义不同：
- attachEvent 第一个参数是事件处理函数名称，如（onclick , onload）
- addEventListener 第一个参数是事件类型，如（click ，load）
事件处理的作用域不同：
- attachEvent 事件处理程序在全局变量內运行，this是window
- addEventListener 作用域是元素本身，this指的是触发元素
为一个事件添加多个事件处理程序时，执行顺序不同
- attachEvent 添加处理程序少的时候，反顺序执行；添加处理程序多的时候，乱序执行（有顺序要求的时候要注意了）
- addEventListener 按照添加顺序执行

题目3：解释IE事件冒泡和DOM2事件传播机制？

IE事件冒泡：
事件由开始时由最具体的元素接受，并逐级向上传递到祖先元素

DOM2事件流
三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段

题目4：如何阻止事件冒泡？如何阻止默认事件？

IE8及以下浏览器：
- 阻止事件冒泡：cancelBubble(Boolean) //默认为false，设置为true后可以取消事件冒泡
- 阻止默认事件：returnValue(boolean) //默认为true，设为false可以取消事件默认行为

IE中所有的事件都包含以下属性方法:

属性/方法	类型	读/写	说明
cancelBubble	Boolean	读/写	默认为false，设置为true后可以取消事件冒泡
returnValue	Boolean	读/写	默认为true，设为false可以取消事件默认行为
srcElement	Element	只读	事件的目标元素
type	String	只读	被触发的事件类型

标准浏览器：
- 阻止事件冒泡：stopPropagation( Function)
  例：通过此方法可以阻止事件继续冒泡到祖先元素

var handler = function (e) {
    alert(e.type);
    e.stopPropagation();
}

阻止默认事件：preventDefault(Function) //前提是cancelable值为true

例：阻止链接导航：

document.querySelector('#btn').onclick = function (e){
    e.preventDefault( );
}

DOM事件对象中属性和方法：

属性/方法	类型	读/写	说明
bubbles	Boolean	只读	事件是否冒泡
cancelable	Boolean	只读	是否可以取消事件的默认行为
currentTarget	Element	只读	事件处理程序当前处理元素
detail	Integer	只读	与事件相关细节信息
eventPhase	Integer	只读	事件处理程序阶段：1 捕获阶段，2 处于目标阶段，3 冒泡阶段
preventDefault()	Function	只读	取消事件默认行为
stopPropagation()	Function	只读	取消事件进一步捕获或冒泡
target	Element	只读	事件的目标元素
type	String	只读	被触发的事件类型
view	AbstractView	只读	与事件关联的抽象视图，等同于发生事件的window对象

题目5：有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

方法1：

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
var ct = document.querySelector('.ct')
ct.addEventListener('click',outputText)
function outputText(e){
	var e = e || window.event;
	var target = e.target;
	if (target.tagName.toLowerCase()=='li'){
		console.log(e.target.innerText);
	}
}
</script>

方法2：

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
var lis = document.querySelector('.ct').querySelectorAll('li')
lis.forEach(function (node){
	node.addEventListener('click',outputText)
})
function outputText(){
	console.log(this.innerText)
}
</script>

方法3：

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
var lis = document.querySelector('.ct').querySelectorAll('li')
for (var i=0; i<lis.length; i++){
	lis[i].addEventListener('click',outputText)
}
function outputText(){
	console.log(this.innerText)
}
</script>

题目6：补全代码，要求：

当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
</script>

代码：

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>

<script>

	var ct = document.querySelector('.ct')
	var btnAddStart = document.querySelector('#btn-add-start')
	var btnAddEnd = document.querySelector('#btn-add-end')
	var input = document.querySelector('.ipt-add-content')

	btnAddStart.addEventListener('click',addStart)
	btnAddEnd.addEventListener('click',addEnd)
	ct.addEventListener('click',outputText)

	function addStart(){
		var newNode = document.createElement('li')
		var inputValue = input.value
		if (inputValue){
			newNode.innerText = inputValue
			ct.insertBefore(newNode,ct.firstElementChild)
			input.value = ''
		}
	}
	function addEnd(){
		var newNode = document.createElement('li')
		var inputValue = input.value
		if (inputValue){
			newNode.innerText = inputValue
			ct.appendChild(newNode,ct.lastElementChild)
			input.value = ''
		}
	}

	function outputText(e){
		var e = e || window.event
		var target = e.target
		if (target.tagName.toLowerCase()=='li'){
			console.log(target.innerText)
		}
	}

</script>

题目7：补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
</script>

方法1：

<ul class="ct">
    <li data-img="http://wx2.sinaimg.cn/mw690/b9d0abb5ly1fgita9h88oj211e0hd44r.jpg">鼠标放置查看图片1</li>
    <li data-img="http://wx4.sinaimg.cn/mw690/b9d0abb5ly1fgita94hdbj211c0h87bz.jpg">鼠标放置查看图片2</li>
    <li data-img="http://wx1.sinaimg.cn/mw690/b9d0abb5ly1fgita8jq7lj211c0h8jxq.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>

	var divPreview = document.querySelector('.img-preview')
	console.log(divPreview)
	var lis = document.querySelectorAll('li')
	console.log(lis)
	lis.forEach(function (li){
		li.addEventListener('mouseenter',preViewImage)
	})
	function preViewImage(){
		divPreview.innerHTML = ''
		var newNode = document.createElement('img')
		var dataImg = this.getAttribute('data-img')
		newNode.setAttribute('src',dataImg)
		divPreview.append(newNode)
	}

</script>

方法2：

<ul class="ct">
    <li data-img="http://wx2.sinaimg.cn/mw690/b9d0abb5ly1fgita9h88oj211e0hd44r.jpg">鼠标放置查看图片1</li>
    <li data-img="http://wx4.sinaimg.cn/mw690/b9d0abb5ly1fgita94hdbj211c0h87bz.jpg">鼠标放置查看图片2</li>
    <li data-img="http://wx1.sinaimg.cn/mw690/b9d0abb5ly1fgita8jq7lj211c0h8jxq.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>

var ct = document.querySelector('.ct')
var divPreview = document.querySelector('.img-preview')
ct.addEventListener('mouseover',preViewImage)
function preViewImage(e){
	divPreview.innerHTML = ''
	var e = e || window.event
	var target = e.target
	var newNode = document.createElement('img')
	var dataImg = target.getAttribute('data-img')
	newNode.setAttribute('src',dataImg)
	divPreview.append(newNode)
}

</script>

方法3：

<ul class="ct">
    <li data-img="http://wx2.sinaimg.cn/mw690/b9d0abb5ly1fgita9h88oj211e0hd44r.jpg">鼠标放置查看图片1</li>
    <li data-img="http://wx4.sinaimg.cn/mw690/b9d0abb5ly1fgita94hdbj211c0h87bz.jpg">鼠标放置查看图片2</li>
    <li data-img="http://wx1.sinaimg.cn/mw690/b9d0abb5ly1fgita8jq7lj211c0h8jxq.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>

	var lis = document.querySelectorAll('li')
	var divPreview = document.querySelector('.img-preview')
	for (var i=0; i<lis.length; i++){
		lis[i].addEventListener('mouseenter',preViewImage)
	}
	function preViewImage(){
		divPreview.innerHTML = ''
		var newNode = document.createElement('img')
		var dataImg = this.getAttribute('data-img')
		newNode.setAttribute('src',dataImg)
		divPreview.append(newNode)
	}

</script>

深拷贝

深拷贝思路：

jscode
- 1.分类，每个类型分情况讨论
- 2.实现递归（能够进行多层嵌套的拷贝）
- 3.注意死循环，防止栈溢出（a.self = a /自己的子属性指向自己）（如果属性是对象，记录此属性的地址放入数组或对象中，下次遍历如果又出现了这个地址就停止遍历，直接返回）
  - 例：

var a={self: a}
//a对象的属性当中引用了a对象的地址，此时对a进行递归拷贝会无限循环

借助JSON全局对象的深拷贝：
针对纯 JSON 数据对象的深复制，使用 JSON 全局对象的 parse 和 stringify 方法来实现；但它只能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。
- 1.没有引入
- 2.没有函数（json无法表示函数）

例：

function jsonClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}
var clone = jsonClone({ a:1 });

参考：
https://zhuanlan.zhihu.com/p/23251162
http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/

函数与作用域

1.函数声明和函数表达式有什么区别

函数声明：

函数声明必须写函数名，否则无法调用；
函数声明的位置可以放在函数调用的前面或者后面，都可以成功调用；（函数声明方式是整体提升到头部）

函数表达式：

函数表达式中，function后面的函数名可以不写，如果写了也只能在函数内部识别；
函数的调用必须放置在函数表达式后面才能成功调用，否则会报错；（函数表达式的提升知识提升了变量名）

F( )
var F = function ( ){
    console.log('a');
}

等同于：

var F；
F( );     //  报错  F is not a function  无法调用
F=function ( ){
console.log('a')
}

2.什么是变量的声明前置？什么是函数的声明前置

变量声明前置：在一个作用域块当中，以var声明的变量提升到代码作用域的头部；
函数声明前置：在一个作用域块当中，以函数声明的方式声明的函数会在js解析的时候被放置于头部优先解析；
- 函数名称解析顺序：
  - 语言自身定义(Language-defined): 所有的作用域默认都会包含this和arguments。
  - 函数形参(Formal parameters): 函数有名字的形参会进入到函数体的作用域中。
  - 函数声明(Function decalrations): 通过function foo() {}的形式。
  - 变量声明(Variable declarations): 通过var foo;的形式。

3.arguments 是什么

argumnets是一个类似数组对象，对应传递给函数的参数；
arguments对象是所有函数中可用的局部变量；
arguments对象不是一个 Array 。它类似于数组，但除了长度之外没有任何数组属性。

4.函数的"重载"怎样实现

有多个同名函数，但参数不同；调用者可以通过调用函数参数的差异来匹配需要调用的函数；
js的同名函数要进行覆盖；但可以通过areguments的length值来模拟‘重载’功能；

5.立即执行函数表达式是什么？有什么作用

立即调用函数：

首先声明一个匿名函数
然后马上调用这个函数

作用：

创建一个独立的作用域
外面访问不到这个作用域里面的变量，避免变量污染全局；

参考：https://zhuanlan.zhihu.com/p/22465092

6.求n!，用递归来实现

function fac(num){
    if(num ===1){
		return num;
    }
    if (num===0){
                return 0;
    }
    if (num===-1){
    	return num;
    }
    if (num<0){
        return num*fac(num+1);
    }
	return num*fac(num-1);
}

7.以下代码输出什么？

function getInfo(name, age, sex){
	console.log('name:',name);
	console.log('age:', age);
	console.log('sex:', sex);
	console.log(arguments);
	arguments[0] = 'valley';
	console.log('name', name);
}
getInfo('饥人谷', 2, '男');  
   name: 饥人谷
   age: 2
   sex: 男
   ['饥人谷',2,'男']
   name valley

getInfo('小谷', 3);
   name: 小谷
   age: 3
   sex: undefined
   ['小谷'，3]
   name valley

getInfo('男');
   name: 男
   age: undefined
   sex: unundefined
   ['男']
   name valley

8. 写一个函数，返回参数的平方和？

 function someOfSquares(){
    var result = 0;
    for (var i=0; i<arguments.length; i++){
    result+=Math.pow(arguments[i],2);
    }
    console.log(result);
    return result;		
 }

9. 如下代码的输出？为什么

console.log(a);      //undefined                                       
var a = 1;
console.log(b);     // 报错，b is not definted

以上代码等价于：

     var a;
     console.log(a);
     a = 1;
     console.log(b);

10. 如下代码的输出？为什么

sayName('world');
sayAge(10);
function sayName(name){
	console.log('hello ', name);
}
var sayAge = function(age){
	console.log(age);
};
    // hello world
   // 报错 sayAge is not a function

以上代码等价于：

function sayName(name){
	console.log('hello ', name);
}
var sayAge；
sayName('world');
sayAge(10);
sayAge = function(age){
	console.log(age);
};

11. 如下代码输出什么? 写出作用域链查找过程伪代码

 var x = 10
 bar() 
function foo() {
 console.log(x)
 }
 function bar(){
 var x = 30
 foo()
 }

//10

伪代码：

globalContex = {
AO: {
x:10
foo: function
bar: function
}
}
foo.[[Scope]] = globalContext.AO
bar.[[Scope]] = globalContext.AO
barContext = {
AO: {
x: 30
foo:function
}
Scope: globalContext.AO
}
fooContext = {
AO: {  }
Scope: globalContext.AO
}

12. 如下代码输出什么? 写出作用域链查找过程伪代码

var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x)  
  }
  foo();
}

//输出：30

伪代码：

gloabaContext = {
	AO: {
		x:10
		bar: function
	}
	scope: null
}
bar[[Scope]]:globalContext.AO
barContext = {
	AO: {
	x:30
	foo: function
	}
	scope:globalContext.AO
}
foo[[Scope]]:barContext.AO
foo = {
	AO: {}
	Scope: barContext.AO
}

13. 以下代码输出什么? 写出作用域链的查找过程伪代码

var x = 10;
bar() 
function bar(){
  var x = 30;
  (function (){
    console.log(x)
  })()
}

//输出：30

伪代码：

  globalContext = {
  AO: {
    x:10
    bar:function
  }
  Scope:null
}

bar[[Scope]]=globalContext.AO

barContext = {
  AO:{
    x:30
    立即调用函数：function
  }
  Scope:globalContext
}
立即调用函数Context={
  AO:{ }
  Scope:barContext.AO
}

14. 以下代码输出什么？写出作用域链查找过程伪代码

var a = 1;

function fn(){
  console.log(a)
  var a = 5
  console.log(a)
  a++
  var a
  fn3()
  fn2()
  console.log(a)

  function fn2(){
    console.log(a)
    a = 20
  }
}

function fn3(){
  console.log(a)
  a = 200
}

fn()
console.log(a)

//输出：undifined 5 1 6 20 200

伪代码：

globalContext = {
  AO: {
    a:1 ->200
    fn:function
    fn3:function
  }
  Scope:null
}

fn[[Scope]]=globlaContext.AO
fn3[[Scope]]=globlaContext.AO

fnContext = {
  AO:{
    a:undefined ->5 ->6 ->20
    fn2:function
  }
  Scope:globlaContext.AO
}

fn2[[Scope]]:fnContext.AO
fn2Context = {
  AO: {}
  Scope: fnContext.AO
}
fn3Context = {
  AO: {}
  Scope:globlaContext.AO
}

浮动定位与BFC边距合并

文档流顺序

层叠上下文

脱离文档流：

float
position: absolute
position: fixed

1.浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

浮动元素的特征：首先脱离文档正常流，根据设置的浮动方式向左或向右浮动，直到遇所处容器的的边框或其它浮动元素。
对父容器的影响：会使父容器高度塌陷；
对其它浮动元素的影响：会阻止其它浮动元素继续移动；
对普通元素的影响：普通元素就像感知不到浮动元素的存在，浮动元素会覆盖住普通元素；
对文字的影响：文字能够感知到浮动元素，会环绕浮动元素按顺序显示；

2. 清除浮动指什么? 如何清除浮动? 两种以上方法

清除浮动：浮动会造成的父容器塌陷，造成页面布局破坏；因此通过清除浮动来解决；
清除浮动方法：

给浮动元素最下方增加一个空元素或利用伪对象通过clear来清除浮动

http://js.jirengu.com/yaqixuvavu/1/edit?html,css,output

让父容器形成BFC(Block Formatting Context)，创建一个新的格式化上下文来清除浮动

3.有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

`static`

释义：默认值，没有定位；元素处于正常文档流中（忽视top,right,bottom,left和z-index的声明）
参考点：自己所处文档流中的位置；
定位规则：按照html文档布局规则排序；
使用场景：默认值；在不进行更改的情况下默认为static；

`relative`

释义：相对定位的元素。
参考点：元素本身正常位置。
定位方式：通过top,right,bottom,left实现定位；
使用场景：层叠的卡片，微调icon位置

`absolute`

释义：绝对定位元素。
参考点： 1.top,right,bottom,left属性值为auto时：默认位置为最近的非static祖先元素的padding内侧；
2.设置top,right,bottom,left属性值后，参考的是非static祖先元素的border内侧；

定位方式：通过top,right,bottom,left实现定位；
使用场景：弹窗卡片（固定宽高）的水平竖直居中。

`fixed`

释义：绝对定位元素；
参考点：浏览器窗口；
定位方式：top,left,bottom,left;
使用场景：网页的回到顶部图标、页面固定显示的菜单栏。

`inherit`

规定从父容器那里继承position属性；定位方式由继承来的定位方式决定；

`sticky`

css3新属性，表现为position:absolute和position:fixed的合体；兼容性较差；
sticky不生效原因有：

父元素设置了overflow:hidden或者overflow:auto

未指定top、right、bottom、left4个值中的任意一个

父元素高度小于sticky定位的元素高度

sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

sticky属性仅在以下几个条件都满足时有效：

父元素不能overflow:hidden或者overflow:auto属性

必须指定top、bottom、left、right4个值之一，否则只会处于相对定位

父元素的高度不能低于sticky元素的高度

另：<table>中的<thead> <tr>无法设置sticky，但<th>可以详情

4.z-index 有什么作用? 如何使用?

z-index 属性:指定了一个元素及其子元素的 z-order。当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。通常来说 z-index 较大的元素会覆盖较小的一个。
用法：元素必须定位为非static元素后，才能正常使用z-index属性；
1.默认情况属性值为auto，此时不会创建新的本地堆叠上下文；堆叠层级和父元素堆叠层级相同；
2.当为其赋值为整数后；整型数字是生成的元素在当前堆叠上下文中的堆叠层级。元素会立即创建一个堆叠层级为0的本地堆叠层级上下文；此时子元素不会与父元素外边的元素进行层级对比。

(和定位相似，先找祖先元素的层叠上下文；这是判断他们是否在同一个层叠上下文的依据；不是根据是父元素还是子元素来判断
Note: 值得记住的是，通常HTML的层次结构和层叠上下文的层次结构是不同的。在层叠上下文的层次结构中，没有创建层叠上下文的元素同其父级处于同一个层叠上下文（类似于同一个级别）。)

参考：（文档下方是这个系列的顺序链接）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

5.position:relative和负margin都可以使元素位置发生偏移?二者有什么区别

position:relative：移动后本身占据的位置还存在，也就是说对整个文档流的排序没有影响；
margin：本质上就是挪动自己在文档流中的位置布局，其后面所有的元素也会因此而改变布局；

6.BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明

BFC：全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。

BFC的生成：

  1.根元素或其它包含它的元素
  2.浮动 (元素的 float 不是 none)
  3.绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
  4.内联块 inline-blocks (元素具有 display: inline-block)
  5.表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
  6.表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  7.块元素具有overflow ，且值不是 visible
     display: flow-root
  8.弹性盒 flex boxes (元素的display: flex或inline-flex)；
     但其中，最常见的就是overflow:hidden、float:left/right、position:absolute

但其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素已经创建了一个BFC了。

作用效果：

  1.内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
  2.处于同一个BFC中的元素相互影响，可能会发生margin collapse；
  3.每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
  4.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；（使元素不会与浮动元素发生重叠）
  5.计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；（BFC可以闭合浮动）
  6.一个行内元素形成BFC后会有块级元素的特性（例：IE6、7居中，`{*display:inlien; *zoom:1;}`）

参考：http://www.cnblogs.com/Candybunny/p/6222939.html

举例：

1.解决margin重叠

代码：http://js.jirengu.com/duci/1/edit?html,css,output

2.BFC不重叠浮动（隔离一个独立容器，相互不影响）

代码：http://js.jirengu.com/foqa/1/edit?html,css,output

7.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

外边距合并条件：

按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直垂直垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。

合并方式：

当发生外边距合并时，无论无论是兄弟元素或父元素，外边距只取他们中margin值较大的一方。
NOTE：maring为负值时，有相减的效果。

消除外边就合并的方法：

1.元素之间设置阻挡（边框、非空内容、padding等）。
2.创建一个BFC，消除两者之间的影响。

父子外边就合并范例(注意margin为负值的时候)：

代码：http://js.jirengu.com/pali/2/edit

代码1：http://js.jirengu.com/qerab/6/edit?html,css,output

代码2：http://js.jirengu.com/satogijapa/1/edit?html,css,output

代码3：http://js.jirengu.com/lavih/2/edit?html,css,output

代码4：http://js.jirengu.com/kihum/4/edit

css

CSS的全称是什么?

cascading style sheets 层叠样式表

CSS有几种引入方式? link 和@import 有什么区别?

内联样式，元素标签内直接添加

2.内部样式， style标签内添加样式

3.外部样式， link标签引入

外部样式，style标签内@improtant引入

页面中使用CSS的方式主要有3种：行内添加定义style属性值，页面头部内嵌调用和外面链接调用，其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：

XML/HTML代码

XML/HTML代码 <style type="text/css" media="screen"> @import url("CSS文件"); </style>

两者都是外部引用CSS的方式，但是存在一定的区别：

　　区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

补充：@import最优写法
@import的写法一般有下列几种：

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。
参考:
http://www.cnblogs.com/zbo/archive/2010/11/17/1879590.html

以下这几种文件路径分别用在什么地方，代表什么意思?

css/a.css
相对路径，同级目录下css文件夹下的a.css文件

./css/a.css
相对路径，同级目录下css文件夹下的a.css文件

b.css
相对路径，同一目录下的b.css文件

../imgs/a.png
相对路径，上一层目录下，imgs文件夹下的a.png文件

/Users/hunger/project/css/a.css
绝对路径，根目录下User/hunger/project/css下a.css文件

/static/css/a.css
绝对路径，根目录下static/css下a.css文件

http://cdn.jirengu.com/kejian1/8-1.png
网站路径，cdn.jirengu.com域名下，kejian1下的8-1.png图片

参考：http://www.divcss5.com/html/h317.shtml

如果我想在js.jirengu.com上展示一个图片，需要怎么操作?

把图片上传到服务器生成一个网络链接地址直接引用

列出5条以上html和 css 的书写规范

全部小写
对应标签对齐
命名具有一定意义，较长的名称用-连接
属性名称后面冒号后加空格
属性值为零的单位不写
不适用内联style属性定义样式
属性定义另起一行
尽量试用属性缩写
参考https://github.com/fex-team/styleguide/blob/master/css.md

width:100%宽度继承

demo：http://js.jirengu.com/nadef/1/edit

列表`ol`、`ul`有如下默认设置：`padding:16px 0; margin-left: 40px;` (IE、FirfoxF、Chrome都一样)

块级元素和行内元素汇总

块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别

块级元素：

<address>	定义地址
<caption>	定义表格标题
<dd>	定义列表中定义条目
<div>	定义文档中的分区或节
<dl>	定义列表
<dt>	定义列表中的项目
<fieldset>	定义一个框架集
<form>	创建 HTML 表单
<h1>	定义最大的标题
<h2>	定义副标题
<h3>	定义标题
<h4>	定义标题
<h5>	定义标题
<h6>	定义最小的标题
<hr>	创建一条水平线
<legend>	元素为 fieldset 元素定义标题
<li>	标签定义列表项目
<noframes>	为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>	定义在脚本未被执行时的替代内容
<ol>	定义有序列表
<ul>	定义无序列表
<p>	标签定义段落
<pre>	定义预格式化的文本
<table>	标签定义 HTML 表格
<tbody>	标签表格主体（正文）
<td>	表格中的标准单元格
<tfoot>	定义表格的页脚（脚注或表注）
<th>	定义表头单元格
<thead>	标签定义表格的表头
<tr>	定义表格中的行

行内元素：

<a>	标签可定义锚
<abbr>	表示一个缩写形式
<acronym>	定义只取首字母缩写
<b>	字体加粗
<bdo>	可覆盖默认的文本方向
<big>	大号字体加粗
<br>	换行
<cite>	引用进行定义
<code>	定义计算机代码文本
<dfn>	定义一个定义项目
<em>	定义为强调的内容
<i>	斜体文本效果
<img>	向网页中嵌入一幅图像
<input>	输入框
<kbd>	定义键盘文本
<label>	标签为 input 元素定义标注（标记）
<q>	定义短的引用
<samp>	定义样本文本
<select>	创建单选或多选菜单
<small>	呈现小号字体效果
<span>	组合文档中的行内元素
<strong>	语气更强的强调的内容
<sub>	定义下标文本
<sup>	定义上标文本
<textarea>	多行的文本输入控件
<tt>	打字机或者等宽的文本效果
<var>	定义变量

可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素

<button>	按钮
<del>	定义文档中已被删除的文本
<iframe>	创建包含另外一个文档的内联框架（即行内框架）
<ins>	标签定义已经被插入文档中的文本
<map>	客户端图像映射（即热区）
<object>	object对象
<script>	客户端脚本

参考：http://www.w3cwhy.com/css-html/html-hkmarka.html

各元素链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements

区别：

1.块级元素可以包含块级元素、行内元素、文字，行内样式只能包含行内元素、文字。
2.块级元素可以设置width、height，但对行内元素设置无效。
3.块级元素总是独占一行，而行内元素会依次排列。
4.块级元素各个边距可以设置，如:margin、padding，而行内元素不可更改。

常见样式

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

text-align:center:作用是定义行内内容（例如文字）如何相对于它的块父元素对齐，text-align并不控制块元素自己的对齐，只控制它的_行内内容_的对齐。
作用在块级元素上。
可以让块级元素中的行内元素水平居中。

IE 盒模型和W3C盒模型有什么区别?

IE盒模型定义width和height后，包括border和padding的；而W3C的盒模型在定义过width和height时，是不包含border和padding的；也就是说IE盒模型在增加border或padding值时是向盒內挤占空间，而W3C盒模型是向外扩张。

*{ box-sizing: border-box;}的作用是什么？

width 和 height 属性包括content，padding和border，但不包括margin。

line-height: 2和line-height: 200%有什么区别?

line-height: 2 数字乘以font-size计算出数值，但其子元素只会继承这个数字；其子元素的字体大小是用继承下来的这个数值2乘以自身的font-size。
line-height:200% 行高计算值也是font-size乘以2，但其子元素将会继承这个计算值，子元素自身的font-size将不会起作用。
参考：http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html

inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

即呈现行内元素的特性：不独占一行，宽度由内容宽度决定；
有呈现块状元素的特性：可以设置宽高和margin，padding；

去处缝隙：由于缝隙是由元素之间的空格、字符、回车等原因造成的。
1.直接在元素中删除元素之间的字符；
2.在父元素中将font-size设为零；占位就不会显示；子元素內字体大小在设置回来即可；

用vertical:top;顶端对齐；但要注意，这个属性是在行内元素、列表的场景下使用的；取值：top、bottom、middle；

CSS sprite 是什么?

是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

让一个元素"看不见"有几种方式？有什么区别?

display:none; 相当于整个元素消失不见了，也不占用空间；
visibility:hidden; 视觉是让整个元素隐藏，但是空间占用的空间还在；
opacity:0; 视觉上让元素完全透明，但空间占用也同样存在；
rgba( x,x,x,0) 只能让元素背景色透明；

伪类link,hover,active,visited,focus的区别

CSS伪类用于向某些选择器添加特殊的效果。

`:link` 向未被访问的链接添加样式。

`:visited` 向已被访问的链接添加样式。

`:hover` 当鼠标悬浮在元素上方时，向元素添加样式。

`:active` 向被激活的元素添加样式。

`:focus` 向拥有键盘输入焦点的元素添加样式。

`:checked` 点击选择的元素

从url到页面展现

url输入到页面展现的过程

地址栏中输入网址

我们一般输入的网址如："www.baidu.com"称为域名，目的是为了方便记忆。但计算机只识别IP；所以就需要有一个IP和你所输入的域名相对应，以便计算机识别，这就需要域名解析。

域名解析

域名解析通俗的讲就是查找你输入的网址所对应的IP地址；通常会按以下条件依次查找：

通过浏览器缓存：之前浏览过的网址会被记录下来，所以当再次进入时首先从这个查找有没有记录，有的话直接用就ok。
host文件中的系统缓存：（被谁记录下的？）host文件会有一些域名的IP地址的记录，当浏览器缓存没有查找到的话，会在这里进行再次查找。
路由器缓存：路由器也会有一些记录，当前两次未查找到，会在这里找找看。
ISP运营商DNS缓存：ISP是互联网服务提供商，如：电信，联通...，他们的服务器中有大量的域名-IP记录；首次登陆一个网站也应该是从他们那里拿到网站对应的ip。

有时我们上不了网了，有人会建议你修改DNS里的值，如8.8.8.8 /114.114.114.114 就是换个地方找；电信的找不到，我换阿里的试试。

DNS劫持，原理就是把网址所对应的正确的IP换成一个错的。

如果连运营商那里都没有怎么办？会向根域名查找，一层一层查看，直到找到位置，但前提是你输入的网址是真的。

向服务器发送请求
web服务器接受、处理请求

通过上面的跋山涉水终于找到了域名对应的ip，到这里可以向web发送请求给我资源了；
其中的处理过程简化为MVC（以后再写）；之后web服务器网页所呈现的资源发送到浏览器当中

服务器发回数据到页面（html、css、js、image...）

服务器送来了一堆东西（html、css、js、image...），浏览器通过解析、渲染...最终在页面上呈现出一张页面。

编码规范

命名规范

语义化：
- 1. 语义化标签优先
- 1. 基于功能命名、基于表现命名，尽量不要不要通过外观命名
- 1. 简略、明了、无后患

书写规范

tab 用两个空格表示
css的 :后加个空格， {前加个空格
每条声明后都加上分号
换行，而不是放到一行
颜色用小写，用缩写, #fff
小数不用写前缀, 0.5s -> .5s；0不用加单位
尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px

垂直居中：

可变内容居中（上下padding相等）

网页中有一部分内容大小可变的垂直居中，直接用上下padding相等即可；

代码：
http://js.jirengu.com/rudut/1/edit?html,css,output

行内元素居中（line-height）
- tip:注意line-height只能写在块级元素內，作用于行内元素

当网页中有一部分不易变动的简短的内容需要居中，且其父元素有固定height；可以用line-height，但只适用于单行内容。

代码：
http://js.jirengu.com/vupuw/1/edit?html,css,output

根据基线居中（vertical-align）

文字、图片还有？都存在基线的概念，通过基线可以使这些元素达到垂直居中的效果。

代码：
http://js.jirengu.com/zifi/1/edit?html,css,output

绝对垂直居中（position、translate或margin）
- tip: translate: 50%是自身容器的 border+padding+content

但父元素宽高都固定的时候，子元素可以设置相对于父元素的绝对定位，设置水平竖直绝对居中；

代码：
http://js.jirengu.com/yayem/3/edit

效果代码：

http://js.jirengu.com/veyov/1/edit?html,css,output

http://js.jirengu.com/ticuf/1/edit?html,css,output

http://js.jirengu.com/vivez/1/edit?html,css,output

css选择器

class 和 id 的使用场景?

claa选择器多用于复选，多选；
id选择器具有针对性，单一性。

CSS选择器常见的有几种?

基础选择器：

* 通用元素选择器，匹配页面的任何元素；
#id id选择器，匹配特定id的元素
. class 类选择器，匹配class包含（不是等于）特定类选择器
element 标签选择器

组合选择器

E,F 多元素选择器，用，分隔，同时匹配元素E或元素F
E F 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素，子元素向下递归）元素F
E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素（http://js.jirengu.com/nazob/11/edit）
E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2 id和class选择器和选择器连写的时候中间没有分隔符, .和#本身充当分隔符的元素
element#id id和class选择器和选择器连写的时候中间没有分隔符， .和#本身充当分隔符的元素

属性选择器

E[attr] 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
E[attr=value] 匹配属性attr值位value的元素，div[id=test],匹配id=test的div
E[attr~=value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[$=value] 匹配属性attr的值以value开头的元素
E[attr*=value] 匹配属性attr的值包含value的元素

伪类选择器

E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)与nth-child()作用类似，但是仅仅匹配使用同种标签
E:nth-last-of-type(n) 与nth-last-child()作用类似，但是仅匹配使用同种标签的元素
E:last-child匹配父元素的最后一个子元素，等同于nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于：nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于first-child:last-childhuo nth-child(1);nth-last-child(1)
n的取值
1，2，3，4，5，
2n+1,2n,4n-1
odd,even

选择器的优先级是怎样的?对于复杂场景如何计算优先级？

简单场景下css优先级：

1.在属性后面使用!important 会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义

复杂场景下选择器的优先级计算：

行内样式<div style="xxx"></div>==>a
ID 选择器 ==>b
类，属性选择器和伪类选择器==>c
标签选择器、伪元素 ==>d
依照各个选择器中的对应字母分别计算个数，按照a>b>c>d的原则依次比较；

a:link, a:hover, a:active, a:visited 的顺序是怎样的？为什么？

顺序：a:link>a:viseted>a:hover>a:active
由于这是个伪类选择器属于同一级，优先级别相同；所有后面的会覆盖前面的；
鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；

鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

a:active是鼠标点击与释放之间发生的事件，并拥有鼠标悬停a:hover属性；

由于伪类的选择器优先级一致，后面的a链接样式会覆盖前面的。

所以说，
a:hover定义一定要放在a:link、a:visited的后面，才能在鼠标悬停时，a:hover样式不被a:link和a:visited样式覆盖；

a:visited一定要放在a:link的后面，因为这样能保证访问过的链接具有a:visited样式，并能覆盖a:link默认样式；

a:active一定要放在a:hover后面。假如a:active放在a:hover前面，由于a:active拥有鼠标悬停a:hover属性，当鼠标按下时，首先会触发a:hover事件，然后触发a:active，但是a:ctive已被a:hover的样式所覆盖，因此无法看到a:active的样式。所以，a:active一定要放在a:hover后面。

综上所述，a伪类的顺序为：a:link > a:visited > a:hover > a:active。

a伪类的顺序为：a:link > a:visited > a:hover > a:active

也有人这么记a伪类的顺序：
L-V-H-A
即love & hate；
参考：
http://www.dengzhr.com/frontend/css/344

以下选择器分别是什么意思

#header { } id为header的元素
.header { } class为header的元素
.header .logo { } class为header的元素下，class为logo的后代元素
.header.mobile { } class既有header又有mobile的元素
.header p, .header h3 { } class为header的元素，其后代所有的p标签元素和h3标签元素
#header .nav>li { } id为header的元素，其厚后代元素中class为nav的子元素是li标签
#header a:hover { } id为header的元素，其后代所有a元素设置鼠标悬停属性
# header .logo~p { } id为header的元素，其后代元素class为logo元素的同级元素（可以不相邻）
#header input[type="text"] { } id为header的元素，其后代标签为input且type属性值为text的元素

列出你知道的伪类选择器

E:first-child 匹配作为长子（第一个子女）的元素E
E：link 匹配所有未被点击的链接
E:visited匹配所有已被点击的链接
E:active匹配鼠标已经其上按下、还没有释放的E元素
E：hover 匹配鼠标悬停其上的E元素
E：focus 匹配获得当前焦点的E元素
E:lang(c)匹配lang属性等于c的E元素
E:enabled匹配表单中可用的元素
E：disabled 匹配表单中禁用的元素
E：checked 匹配表单中被选中的radio或checkbox元素
E：selection 匹配用户当前选中的元素
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)与nth-child()作用类似，但是仅仅匹配使用同种标签
E:nth-last-of-type(n) 与nth-last-child()作用类似，但是仅匹配使用同种标签的元素
E:last-child匹配父元素的最后一个子元素，等同于nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于：nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于first-child:last-childhuo nth-child(1);nth-last-child(1)

div:first-child和div:first-of-type的作用和区别

div:first-child div父元素下的第一个元素，且此元素必须是div才能生效；
div:first-of-type div父元素下的第一个div元素（无论此div是否是第一个）

css3 transition和animation的区别和使用场景

C3有很多中动画效果可以实现；最近也在学习关于c3动画效果的实现；发现自己对transition和animation的理解有偏差，这篇文章先占位，以便后面修改。

正文

transition和animation不管时使用场景还是具体用法是有很大区别的；

1.触发机制不同：

（transition:all可以同时设置多个属性，当不建议使用；这样浏览器要骂街了；
transition: all .5s ease-in）
transition：需要触发才能实现动画效果：如:hover, foucus, removing class value ;
animation:不需要任何触发机制，直接执行效果。

2.loop

transition：只能循环一次，设计机理上就没打算让它无限循环，相当于一个过度过程；中间过程的动画效果不可以随意控制，一次完成。

animation：可以无限循环，而且可以设置关键帧（keyframes）来改变动画过程中的变化效果。

总结：假如你想让一个小球在方块沿着四个边转，用animation很容易实现；而transition中间状态无法改变，你咋让它转弯啊，就是这个道理。

3.js调用控制

transition：容易被js调用设置
animation：不能；

简单总结：

1.如果你想要的是通过拥有多个关键帧提供的灵活性和容易的循环，那么将会用animation。

2.如果你只是想实现一个简单的一步到位的动画，用transition。

3.如果你想用js操纵这些动画的属性值，用transition。

### 属性设置(这个说法有问题；试了一下其它属性值也可以啊，可能我道行还不够，后面再改吧!)
transition：你设置的是什么属性，动画效果只能设置改变这个属性的值；比如你设置了color属性，那就只改变color属性的值，改变其它的也不会有变化；因为浏览器只会识别你所设置的属性的值。
例子： http://js.jirengu.com/teco/3/edit

参考：（感觉这个人的视频不错欸）
https://www.kirupa.com/html5/css3_animations_vs_transitions.htm

阮一峰的文章：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

DOM操作

题目1： dom对象的innerText和innerHTML有什么区别？

区别：

innerHTML获取的是包括标签在内的所有字符，且它是w3c的标准属性
innerText只能获取text节点，不包括标签，不是w3c的标准属性；
兼容性：
- innerHTML所有浏览器兼容；innerText与outerHTML虽然主流浏览器，如谷歌，火狐，IE7-IE11，QQ等都已支持（这里提到的谷歌火狐等都是最新浏览器的版本），但是W3C的标准属性就是innerHTML,因此，尽可能地去使用innerHTML，而少用innerText与outerHTML。
html代码示例：

<div class="test">我是内容<span>嘿嘿</span></div>

参考：
https://segmentfault.com/a/1190000000410375
https://stackoverflow.com/questions/19030742/difference-between-innertext-and-innerhtml-in-javascript

题目2： elem.children和elem.childNodes的区别？

区别：

elem.children 匹配的是elem下的Element类型节点
elem.childNodes 匹配的是elem下的所有类型节点
关于节点

节点类型	NodeType
元素节点（Element）	1
文本节点（Text）	3
注释（comments）	8
文档（document）	9

参考（更多节点类型）：
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType#节点类型常量

题目3：查询元素有几种常见的方法？ES5的元素选择方法是什么?

getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法

document.getElementById('id')

getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

document.getElementsByClassName('className')

getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

document.getElementsByTagName('tagName')  //注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。

getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

document.getElementsByName('name')

ES 5：

querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

document.querySelector('css选择器方式')  //如有多个只能选择一个

querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

document.querySelectorAll('css选择器方式')

题目4：如何创建一个元素？如何给元素设置属性？如何删除属性

创建元素：

创建HTML元素节点：

document.createElement('tagName')

创建文本节点：

document.createTextNode('string')

创建DocumentFragment对象

document.createDocumentFragment( )

设置属性：

获取属性：

node.getAttribute('attrName')

创建新属性：

document.createAttribute('attrName')

设置元素属性：

node.setAttribute(my_attr,attr_value)

删除元素属性：

node.removeAttribute('attr')

note：上面的方法可以通过类操作数组属性node.attributes来实现

题目5：如何给页面元素添加子元素？如何删除页面元素下的子元素?

添加子元素：

element.appendChild(newNode)   //在元素末尾添加

element.insetBefore(newNode,参考节点)   //在某个元素之前添加

删除子元素

parentNode.removeChild(childNode)

题目6： element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?

add(string[,String])
添加指定类，如果已经存在，则忽略；

element.classList.add('class_name')

remove(string[,String])
删除指定类

element.classList.remove('class_name')

toggle(string[,force])

当只有一个参数时：切换 class value; 即如果类存在，则删除它并返回false，如果不存在，则添加它并返回true。

element.classList.toggle('class_name')  //一个参数时：如果已存在就删除，如果不存在则添加

当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它

element.classList.toggle('class_name',i<10)   //当`i<10`添加类；否则：若已存在就删除；不存在则不添加；

contains(string)
检查类属性中是否存在指定类值

elemnet.classList.contains('class_name')   //返回ture或false

item(number)
返回指定位置的类值

<div class="item0 item1 item2"> </div>
document.querySelector('div').classList.item(1)   //  返回：item1

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList

题目7：如何选中如下代码所有的li元素？如何选中btn元素？

<div class="mod-tabs">
   <ul>
       <li>list1</li>
       <li>list2</li>
       <li>list3</li>
   </ul>
   <button class="btn">点我</button>
</div>

代码：

var lis1 = document.querySelectorAll('li')
var lis2 = document.getElementsByTagName('li')

var btn1 = document.querySelector('.btn')
var btn2 = document.getElementsByClassName('btn')[0]

Array 对象/ String对象

数组浅拷贝：

Array.from(arr, mapFn)  //后面可执行一个map回调函数
arr.slice()  
+ 字符串、数字和布尔直接复制值，
+ 对象：拷贝对象的引用，则如果被引用的对象发生改变，则型数组和原来数组也发生改变
[].concat(arr)
arr.concat([])

生成特定长度数组

Array(21).fill(0).map((item, index) => item + index * 5)

map | filter | reduce 区分：

Array对象：

以下都更改了原数组：

push增 ：返回添加新元素后的数组长度；（不添加则返回原数组长度）
unshift增 ：返回添加新元素后的数组长度；（不添加则返回原数组长度）
pop删 ：返回删除的元素；
shift 删 ：返回删除的元素；
reverse ：返回倒叙后的数组；
sort ：返回排序后的数组；
splice ：返回删除的元素；没有返回空（[ ]）；
array.splice(start, deleteCount, item1, item2, ...)

以下没有更改原数组

toString ：返回变换后的字符串；
join ：以参数作为分隔符，返回变换后的字符串；【通过 call 可以方法可以用于字符串和类似数组的对象】
concat 👍 ：返回添加后的新数组；【通过 call 可以方法可以将对象合并为数组】
slice 👍 ：返回抽取出的新数组；【通过 call 可以方法可以将类似数组的对象转为真正的数组】
map查 ：【通过 call 可以方法可以用于字符串】
forEach查 ：【通过 call 可以方法可以用于字符串】

ES5新增数组扩展（存在兼容问题，IE8以上支持）

Array.isArray(arr)：判断是否是数组；

考虑兼容的写法：

typeof arr   //object
arr instanceof Array //ture

indexOf 和 lastIndexOf 查 👍 ：返回所检索对象的位置，如果不存在返回-1；（检索用的===，所以无法检索NAN）
.forEach

var arr=[4,5,6]
arr.forEach(function (a,b,c){
    console.log(a,b,c)
})

// 4 0 (3) [4, 5, 6]
// 5 1 (3) [4, 5, 6]
// 6 2 (3) [4, 5, 6]

考虑兼容用for循环遍历数组

.every：遍历数组，每一个都符合条件返回ture，否则返回false

var arr=[3,6,7,-2,-4,9]
var isPositive=arr.every(function(a){
    return a>0;
})

//false  有两个不满足a>0

.some：只要有满足条件的值就返回ture，都不满足返回false（对比 .every）
.map：与forEach类似，遍历数组，回调函数返回值根据条件组成一个新数组返回，新数组索引结构和原数组一致；

var arr=[3,5,6]
var toSquare=arr.map(function(a){
    return a*a
})
console.log(toSquare)
//   [9, 25, 36]    返回每个数的平方

.filter：过滤
.reduce：reduce() 方法对累加器和数组中的每个元素 (从左到右)应用一个函数，将其减少为单个值。
有四个参数

var total = [0, 1, 2, 3].reduce(function(sum, value) {
  return sum + value;  //每一次的return值都是下一次函数执行的返回值，第一次若不给定就是第一个值
}, 0);  
total   //6

String 对象

length：返回字符串长度；
charAt：返回指定位置的字符，从0开始；可以用数组下标代替；
charCodeAt：返回指定位置字符的Unicode编码；
concat 👍 ：连接两个字符串，返回新字符串，不改变原字符串；
slice 👍 ：抽取字符串；不改变原字符串；'JavaScript'.slice(0, 4) // "Java"
substring：与slice作用相同；但有一些奇怪规则，不建议用；
substr：抽取字符串；不改变原字符串；
indexOf 和 lastIndexOf 👍 ：检索字符串位置；返回整数；
trim：去除两端的空格（），返回新字符串，不改变原字符串；' hello world '.trim() // "hello world"
该方法去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）。
toUpperCase 和 toLowerCase：将字符串全部转为大小写，返回新字符串，不改变原字符串；【通过 call 可以方法可以用于布尔值和数组】
localeCompare：比较两个字符串，返回一个整数负，0，正；（受自然语言的影响）；
match：确定某字符串是否匹配原字符串；返回匹配的第一个字符串；没有匹配返回null；规则可以用正则【返回数组还有index属性和input属性，分别表示匹配字符串开始的位置和原始字符串。】
search：同match，但返回的是匹配的第一个位置；没有匹配返回-1；规则可以用正则；
replace：替换字符串；一般匹配1个，除非用正则g；规则可以用正则；
split：按规则分隔数组，返回数组；规则可以用正则；

div:first-child，div:first-type， .item1.item1 .item1 .item1

.item1.item2
class标签同时拥有item1和item2如：
<div class="item1 item2">
.item1 .item2
class为item1的元素下拥有class为item2的后代元素如：

<div class="item1">
<div class="item2"></div>
<div>
<div class="item2"></div>
</div>
</div>

E：first-child
1.先找到E元素（注意：要找全啊！基本绕晕就是因为没有找全，后面翻书，查资料来解释不对的答案）
2.把找到的E元素列出来，从第一个开始重复以下步骤：
找到E元素的父元素(找到的不同的E元素，其父元素不同啊)，父元素的第一个子元素就是你要找的东西了。
以下重复找到的其它E元素

E:first-of-type（注意这个和上面的不一样！！！）
1.先找到E元素（注意：要找全啊！基本绕晕就是因为没有找全，后面翻书，查资料来解释不对的答案）
2.把找到的E元素列出来，从第一个开始重复以下步骤：
找到E元素的父元素，在E元素的子元素中，从上往下按顺序找，看到的第一个和E元素同级的就是了

字符类型转换

转换原则

在+运算符下，大部分转换成string类型（String()），其它运算符（包括==）都转换成number类型

对象转换：obj.valueOf() 返回到是否是基本类型(一般返回是自身)，若不是再用toString()

Date类型是先用toString() ,依据返回值是否是基本类型在使用valueOf()
转换为数值：

部分值转换
parseInt(string,radix); radix取值2到36之间的数值;
parseFloat()；不同于parseInt的是必须以十进制转换，没有基模式；
整个值转换
Number(string)：既可转整，又可转浮点；
隐式转换，

参考：

css编码规范

命名规范

语义化：
- 1. 语义化标签优先
- 1. 基于功能命名、基于表现命名，尽量不要不要通过外观命名
- 1. 简略、明了、无后患

范例：

1.所有命名都使用英文小写

推荐：`<div class="main"></div> `

不推荐： `<div class="Main"></div> `

2.命名用引号包裹

推荐：`<div id="header"></div> `

不推荐： `<div id=header></div> `

3.用中横线连接

推荐：`<div class="mod-modal"></div> `

不推荐： `<div class="modModal"></div> `

4.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)

推荐：`<div class="text-lesser"></div>`

不推荐： `<div class="light-grey"></div>`

常见命名：

.wrap或.wrapper -- 用于外侧包裹
.container或 .ct -- 包裹容器
.header -- 用于头部
.body -- 页面 body
.footer -- 页面尾部
aside、sidebar -- 用于侧边栏
.content -- 和header footer 对应，用于主要内容
.navigation -- 导航元素
.pagination -- 分页

.tabs > .tab -- tab 切换
.breadcrumbs -- 导航列表、面包屑
.dropdown -- 下拉菜单
.article -- 文章
.main -- 用于主体
.thumbnail -- 头像，小图像
.media -- 媒体资源
.panel -- 面板
.tooltip -- 鼠标放置上去的提示
.popup -- 鼠标点击弹出的提示

.button、.btn -- 按钮
.ad -- 广告
.subnav -- 二级导航
.menu -- 菜单
.tag -- 标签
.message或者.notice -- 提示消息
.summary -- 摘要
.logo -- logo
.search -- 搜索框
.login -- 登录

.register -- 注册
.username -- 用户名
.password -- 密码
.banner -- 广告条
.copyright -- 版权
.modal或者 .dialog -- 弹窗

var 名字 = {
状态: [
'inverse',
'toggled',
'switched',
'original',
'initial',
'identified',
'disabled',
'loading',
'pending',
'syncing',
'default'
],
修饰: [
'dark',
'light',
'shaded',
'flat',
'ghost',
'maroon',
'pale',
'intense',
'twisted',
'narrow',
'wide',
'smooth',
'separate',
'clean',
'sharp',
'aligned'
],
元素: [
'pagination',
'modal',
'popup',
'article',
'story',
'flash',
'status',
'state',
'media',
'block',
'card',
'teaser',
'badge',
'label',
'sheet',
'poster',
'notice',
'record',
'entry',
'item',
'figure',
'square',
'module',
'bar',
'button',
'action',
'knob'
],
布局: [
'navigation',
'wrapper',
'inner',
'header',
'footer',
'aside',
'section',
'divider',
'content',
'container',
'panel',
'pane',
'construct',
'composition',
'spacing',
'frame'
]
}

书写规范

tab 用两个空格表示
css的 :后加个空格， {前加个空格
每条声明后都加上分号
换行，而不是放到一行
颜色用小写，用缩写, #fff
小数不用写前缀, 0.5s -> .5s；0不用加单位
尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px

参考：
http://codeguide.bootcss.com/

return/ break/ continue 的区别

break：立即终止、跳出循环语句或lable语句（如果不是再循环里面，lable是必写的，如果是标记的是语句块，break必须嵌套在它所引用的语句当中）；

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/break

continue：和break类似，但不同的是；continue不会终止循环的迭代，而是

在while循环中跳回到条件判断；
在for循环中跳转到更新语句；

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/continue

return：会立即终止函数执行，并返回一个你所指定的表达式、函数等： return [[expression]];

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/return

float(x)

float心得

一个元素可以同时具有float和clear效果，两个效果是彼此独立的：即此元素在浮动的同时其上方不允许有float

效果图点击可看：
http://js.jirengu.com/quhevufufe/1/edit?html,output

css引入样式，link和@import的不同

position个人解毒（修改版）-2

扯淡

上篇blog写了一些关于position的理解，只能说是暂时的理解，现在看来有点sb，但学习就是这样，一步一步往上爬，每一步都有一定的分量，可能大牛或将来的自己再来看这篇修改过的文章，依然sb，但没有今天的sb，哪有明天的大牛，哈哈哈哈。。。

正题

正常情况下，刚学position定位的时候能记住子元素（absolute）相对于父元素（relative）脱离正常文档流，进行定位；
这些解释对于做理想状态下的玩具已经够用；但是稍微遇到不太理想的情况我就有点懵b了；所有把这篇自己认为还算是解释的通的规则写下来（方便后面自己拿刀砍自己^_^）
1.当子元素position:absolute 绝对定位，如果你还没有设置top，left.....等几个定位值，而这个时候邮箱看看他们现在在什么位置（我就是想看，咬我啊。。），可以遵循这个规则：元素绝对定位后，第一步要做的是脱离正常文档流，拼命往初始位置移动【正常情况下是左上角（左到右，上到下），其它情况根据个人具体设置，反正原理就是这样】直到遇到正常元素布局才停止；
2.接下要设置top，left...定位了，但我输入定位值后，大家都知道是相对于relative父元素的位置进行左右移动，但之前那些被正常布局元素挡住的子元素是怎么移动呢？当然也是相对于父元素移动了，你能挡我一时，还能挡我一世？
（好像应该是涉及到了浏览器的解析规则，先解析正常布局，在看脱离正常文档流的元素）

js数据类型运算符流程控制语句

js定义了哪几种数据类型？哪些是原始类型？哪些是复杂类型？原始类型和复杂类型的区别？

数据类型：
- 原始类型：字符串（string）、数值（number---整型和浮点型）、布尔（boolean）
- 复杂类型：对象（object）---复杂类型的值；
- 狭义的对象（object）
  - 数组（array）
  - 函数（function）
  - 正则表达式（regexp）
- 特殊形式：null 、undefined
  区别：
  原始类型是最基本的数据类型，无法再细分；
  复杂类型是由多个原始类型合成的；可以把它看作是一个容器；

typeof和instanceof的作用和区别？

作用：都可以确定一个值的数据类型；
typeof：
可以返回原始数据类型、object、function和undefined；实例：可以通过typeof来确定一个变量是否定义；if (v === 'undefined') { }
instanceof：
1.通常是用来判断一个实例是否属于某种类型；
2.更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型
参考(更多instanceof用法)：https://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/

如何判断一个变量是否是数值，字符串，布尔，函数？

通过typeof运算符：
typeof(2); //number
typeof('abc'); //string
typeof('true'); //boolean
function f() { }; typeof(f); //function

JS的一些抽象概念理解

构造函数（4. 面向对象编程/ 4.1 概述）

构造函数就是一个普通的函数；但它的特征和用法和普通函数不同；它用来提供模板，用来生成对象实例；通常首字母大写以区别普通函数；

构造函数有两个特点：
- 1.函数体内部使用了this关键字，代表所要生成的实例对象；
- 2.生成实例对象的时候，必须通过new命令调用构造函数；

模块（4. 面向对象编程/ 4.5 面向对象编程的模式/ 3. 模块）

模块是实现特定功能的一组属性和方法的封装；
只要把不同的函数（以及记录状态的变量）简单的放在一起，就算一个模块；

关于html

HTML、XML、XHTML 的区别

HTML：超文本标记语言，前端的内容部分；特点是比较断送，语言书写不严格。
XML：纯文本，只具有记录和传输数据的功能，不能像HTML一样有显示作用；但书写较为严格。
XHTML：结合了HTML和XML各自的有点所创建；是一个书写有标准格式的显示语言。

怎样理解 HTML 语义化

HTML语义化有两个方面的含义：

HTML的标签、属性、属性值和HTML处理器（浏览器、搜索引擎...）之间的对话：
选用合适的HTML 标签、属性、属性值可以让浏览器、搜索引擎快速、准确、正确的查找显示内容，方便机器和html语言之间的准确对话。由于较大程度的语义化，让浏览器可以做到最大程度的识别开发者所要表达的内容。
HTML的标签、属性、属性值和开发人员之间的对话：
一段代码的书写和维护是非常耗费精力；不论是对于自己还是其它开发者，尽快读懂代码所要表达的**成本非常大，一段语义化较高的代码可以帮助开发者尽快理解代码的**，方便以后的维护。

内容与样式分离的原则

首先从刚开始编写代码的时候，尽量不要同时考虑这两个问题；在写页面内容的时候不要考虑它的样式该如何设定，而是先把内容全部写完，之后根据需要去对照内容修改样式；
其次；内容和样式不要同时修改，在内容做到语义化的情况下，尽量只通过改动样式来修改页面；基本**是让修改动作尽量简单、有条理。

常见的meta标签

name 属性

 <!-- 页面作者 -->
<meta name="author" content="author name" />
<!-- 页面描述 -->
<meta name="description" content="meta元素共有三个可选属性(不超过150字符)" />
<!-- 页面关键词 -->
<meta name="keywords" content="meta标签总结,meta标签" />
<!-- 页面生成器 -->
<meta name="generator" content="hexo" />
<!-- 页面修改信息 -->
<meta name="revised" content="story,2015/07/22" />
<!-- 版权信息 -->
<meta name="copyright" content="All Rights Reserved" />
<!-- 页面爬虫设置 -->
<meta name="robots" content="index,follow" />
<!-- robots的content取值 -->
<!-- all：文件将被检索，且页面上的链接可以被查询 -->
<!-- none：文件将不被检索，且页面上的链接不可以被查询 -->
<!-- index：文件将被检索 -->
<!-- follow：页面上的链接可以被查询 -->
<!-- noindex：文件将不被检索，但页面上的链接可以被查询 -->
<!-- nofollow：文件将被检索，但页面上的链接不可以被查询 -->

http-equiv属性

<!-- 字符编码 -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<!-- 页面到期时间 -->
<meta http-equiv="expire" content="Wed,22Jul201511:11:11GMT" />
<!-- 页面重刷新，0秒后刷新并跳转 -->
<meta http-equiv="refresh" content="0;URL=''" />
<!-- cookie设置 -->
<meta http-equiv="set-cookie" content="cookie value=xxx;expires=Wed,22-Jul-201511:11:11GMT；path=/" />
<!-- 脚本类型 -->
<meta http-equiv="Content-Script-Type"Content="text/javascript">
<!-- 禁止从本地缓存中读取页面 -->
<meta http-equiv="Pragma"content="no-cache">

移动端

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- viewport的content取值 -->
<!-- width：宽度（数值 / device-width）（200~10000，默认为980px） -->
<!-- height：高度（数值 / device-height）（223~10000） -->
<!-- initial-scale：初始缩放比例 （0~10） -->
<!-- minimum-scale：允许用户缩放到的最小比例 -->
<!-- maximum-scale：允许用户缩放到的最大比例 -->
<!-- user-scalable：是否允许用户缩放 (no/yes)  -->
 
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
 
<!-- IOS启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- IOS全屏模式下隐藏状态栏/设置状态栏颜色 content的值为default | black | black-translucent  -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- IOS添加到主屏后的标题 -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- IOS添加智能 App 广告条 Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
 
<!-- 去除iphone 识别数字为号码 -->
<meta name="format-detection" content="telephone=no">
<!-- 不识别邮箱 -->
<meta name="format-detection" content="email=no">
<!-- 禁止跳转至地图 -->
<meta name="format-detection" content="adress=no">
<!-- 可以连写-->
<meta name="format-detection" content="telephone=no,email=no,adress=no">

文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

“<!DOCTYPE>” ；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令，此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
(DTD文档类型定义(Document Type Definition)是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。)
""声明、告知浏览器我使用的是html5编译，以便浏览器能正确解析；
严格模式：浏览器严格按照web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如
。
混杂模式：混杂模式则是一种向后兼容的解析方法，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。
参考：http://blog.csdn.net/binglingnew/article/details/17301433

浏览器乱码的原因是什么？如何解决

网页乱码如何产生的呢？

下面这个流程是我们写入文件到展示文件的简单描述：

我们使用编辑器编写 HTML 文件
保存编写的HTML文件
使用浏览器打开HTML文件
HTML文件在浏览器展示
乱码产生的根源就在与第2步骤和第4步。

在第2步保持文件时会把我们写入的文字使用编辑器默认的编码方式进行保存。如果大家使用的是vscode编辑器，默认的编码方式是utf-8。

在第4步浏览器打开网页时，它并不知道你的这个文件是使用什么编码方式，于是自作主张使用了默认解码方式。如下图所示，文件保存为GBK格式，在Chrome打开时默认使用 ISO -8859的解码方式，导致编码和解码不匹配，产生乱码。

那如何规避这个问题呢？即如何通知浏览器用什么方式解码呢？

首页，在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了，直接用utf-8去解码。同理，如果你的文件保存为gbk格式，一定在文件里添加<meta charset="gbk">。

总结：

乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
乱码一般是英文以外的字符才会出现。

为啥纯粹的英文不会出现乱码问题，即使编码方式和解码方式不一致？那是因为前面讲过了 utf-8、gbk对英文都是采用1个字节的编码方式，并且使用了相同的码字。
参考https://zhuanlan.zhihu.com/p/24465635?refer=study-fe

常见的浏览器及内核

一、Trident内核代表产品Internet Explorer，又称其为IE内核。
Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
二、Gecko内核代表作品Mozilla
FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
三、WebKit内核代表作品Safari、Chromewebkit
是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
四、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。
引用：https://www.zhihu.com/question/41807413/answer/92413711

常用标签

`div`

div标签用于组合其他HTML元素，本身无实在意义。常用于页面的布局，比如一个展开式的广告页面框架

`h1~h6`, `p`, `span`, `strong`, `em`...

此类标签用于设置文本，常见的使用方式是填充段落，比如弹出的legal框文字

`ul`, `li`, `ol`, `dl`, `dt`, `dd`

此类标签用于设置带有列表内容的，比如导航栏的下拉菜单，多视频的缩略图

`form`表单

页面中涉及到表单时候，需要使用到form相关标签

`table`表格

页面中涉及到table结构，需要使用到table相关标签

`img`, `canvas`

用于图像显示。一般不直接操作img,canvas元素，而是在它的外层包裹一层父级元素（可以为div等)，对父级元素进行操作.

`a`

a标签用于打开链接，发送邮件，段落跳转等功能。使用时需要注意阻止掉标签的默认事件。

css常见属性

什么是 CSS 继承? 哪些属性能继承，哪些不能？

当我们参考CSS规范时，就会发现每个属性中都指出了 Inherited的值，即是否可继承。这决定了当你还没有为元素的属性指定值时该如何计算值。

继承属性

当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。

非继承属性

当元素的一个非继承属性没有指定值时，则取属性的初始值。

可继承元素：

所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font- family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、 direction。
块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。

不可继承元素：

display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

特例：
摘自：https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration

如何让块级元素水平居中？如何让行内元素水平居中?

块级元素水平居中： margin: o auto;
行内元素水平居中： text-align：center；

用 CSS 实现一个三角形

http://js.jirengu.com/gazenawofe/2/edit?html,css,output

单行文本溢出加 ...如何实现?

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

代码：http://js.jirengu.com/vugorasuha/1/edit?html,css,output

px, em, rem 有什么区别

px ：固定单位（像素）
em：相对单位，相对于父元素的值的比例；2em即为父元素字体大小的2倍；(注意块元素內文字由匿名元包裹)

<div><p><匿名块>警方联手打击了</匿名块></p></div>

rem：相对单位，和em相似，但相对的是根元素（html）的字体大小；

解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif; }
字体大小：12px
行高：12px*1.5
字体类型：tahoma，Hiragino Sans GB,\5b8b\4f53,无衬线字体（从左至右依次查找各字体，若没找到，使用用户已下载的无无衬线字体）

引号作用：告诉浏览器引号内是一个整体（一般字体由多个字符组成的加引号）。

\5b8b\4f53：是unicode编码，对应一种字体；

代码效果:

1.http://js.jirengu.com/sogalayopi/10/edit

2.http://js.jirengu.com/weposiyata/28/edit

3.http://js.jirengu.com/pequkolufe/14/edit?html,css,output

4.http://js.jirengu.com/cudeyidayo/1/edit?html,css,output

5.http://js.jirengu.com/xoxocoyuru/1/edit?html,css,output

3D动画效果

注意容器的大小设置，不然中心和实体转动时效果不一致；
http://js.jirengu.com/guja/1/edit

注意transform后的属性写在一块，不然要出问题；
http://js.jirengu.com/diyat/1/edit?html,css,output

setInterval 和 setTimeout 的深入理解

阮一峰http://javascript.ruanyifeng.com/advanced/timer.html

http://bonsaiden.github.io/JavaScript-Garden/zh/#other.timeouts

https://segmentfault.com/a/1190000000517177
阮一峰 Even-Loop

用setTimeout回调代替setIterval来控制线程堆积；原因看setInterval释义

 function foo(){
    num++;
    divs.style.marginLeft = num+'px';
    setTimeout(foo,100);
    }
    
foo();

setInterval

本质就是每隔特定时间向任务队列添加回调函数
代码

function fn1(){
  console.log(1)
  setInterval(function (){  //setInterval时每次向任务队列末尾添加任务
    console.log(2)
  },1000)
  console.log(3)
  fn2()

}
function fn2(){
  console.log(11)
  setTimeout(function(){
     console.log(222)
  },1000)
  console.log(333)
}
fn1()  
打印
1
3
11
333
2   //setInterval排在任务队列前面，首先执行一次
222  //此时setTimeout在任务队列中排二，执行
2  //setInterval距离上次执行>=1000ms，执行
2  //同上
2  //同上...
...

http://js.jirengu.com/hero/3/edit

数据类型运算符流程控制语句

1.JavaScript 定义了几种数据类型? 哪些是原始类型?哪些是复杂类型?原始类型和复杂类型的区别是什么?

6种原始类型：
- String
- Number
- Boolean
- Null
- Undefined
- Symbol （ECMAScript6新定义）
复杂类型：
- Object（对象可以分成三个子类型）
  - 狭义的对象
  - 数组
  - 函数
区别：
- 原始类型：它们是最基本的数据类型，不能再细分；
- 复杂类型：就是一种无序的数据集合；一个对象往往是多个原始类型值的合成，可以看作是一个存放各种值的容器。

2.typeof和instanceof的作用和区别?

作用： typeof 和 instanceof 都能用来判断一个变量是否为空或者是什么类型的变量；
区别：
- typeof：
  - 用来获取变量的类型。一般返回如下结果：number、boolean、string、undefined、function、
    object。
  - 判断一个变量是否存在。如：if(typeof a! = 'undefined'){ };不要用if(a){ }因为如果a不存在（未声明）则会出错。
  - 局限性。对于Array、Null等特殊对象使用typeof一律返回object，这个正是它在此的最大局限性。
- instanceof：用来判断一个变量是否是某个对象的实例：如：
  var arr=new Array( ); console.log(arr instanceof Array); 返回ture
  note：这里的instanceof测试的object是指js语法中的object，不是指dom模型对象。

参考：http://www.cnblogs.com/eoiioe/archive/2008/12/31/1366081.html

3.如何判断一个变量是否是数字、字符串、布尔、函数

if (typeof a === 'number'){ alert('ture') } //返回ture，证明数字；否则不是。
if (typeof a === 'string'){ alert('ture') } //返回ture，证明字符串；否则不是。
if (typeof a === 'boolean'){ alert('ture') } //返回ture，证明布尔；否则不是。
if (typeof a === 'function'){ alert('ture') } //返回ture，证明函数；否则不是。

4.NaN是什么? 有什么特别之处?

NAN是一个全局对象的属性；在编码很少使用，通常都是计算失败返回的值；如：

作为Math的某个方法返回值出现 Math.sqrt(-1)
尝试解析一个字符串失败 parseInt("blabla")

等号运算符（==或===）不能判断一个值是否是NAN，必须用 Number.isNAN( ) 或 isNAN( ) 函数；并且NAN不等于它自己；

5.如何把非数值转化为数值?

部分值转换（只转换字符串的数字部分）
- parseInt( ) ;
- parseFloat( ) ;

parseInt 和 parseFloat区别：#29

全值转换(转换全部的字符串，所以字符串內只有全部是数字才会转换成功，否则返回NAN)
- Number( ) ;
- '34' ;
- '34'-0 ;

6.==与===有什么区别

区别：简单说，它们的区别是相等运算符（==）比较两个值是否相等，严格相等运算符（===）比较它们是否为“同一个值”。如果两个值不是同一类型，严格相等运算符（===）直接返回false，而相等运算符（==）会将它们转化成同一个类型，再用严格相等运算符进行比较。

参考：http://javascript.ruanyifeng.com/grammar/operator.html#toc9

严格相等 ===
全等操作符比较两个值是否相等，两个被比较的值在比较前都不进行隐式转换。如果两个比较的值类型不同，这两个值也是不全等的；
如果两个比较的值相等，类型也相同，并且都不是number类型时，两个值全等；
如果两个值都是number类型，当两个值不是NAN时，并且两个数值相等，或两者值分别是+0和-0，也是全等的；
非严格相等 ==
相等操作比较两个值是否相等，比较前会隐式转换成相同类型；

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Equality_comparisons_and_sameness

推荐使用===理由：https://zhuanlan.zhihu.com/p/22745278

7.break与continue有什么区别

break：立即终止、跳出循环语句或lable语句（如果不是再循环里面，lable是必写的，如果是标记的是语句块，break必须嵌套在它所引用的语句当中）；

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/break

continue：和break类似，但不同的是；continue不会终止循环的迭代，而是
- 在while循环中跳回到条件判断；
- 在for循环中跳转到更新语句；

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/continue

8.void 0 和 undefined在使用场景上有什么区别

void：无论void后的表达式是什么，void操作符都会返回undefined

通过采用void 0取undefined比采用字面上的undefined更靠谱更安全，应该优先采用void 0这种方式。
填充的href确保点击时不会产生页面跳转; 填充的src，确保不会向服务器发出垃圾请求。
- 希望点击的链接不会发生任何跳转，而是引发一些交互操作；如果不写url会刷新页面；所以这时用href="javascript:void(0)的方式
- 如果我们要生成一个空的src的image，最好的方式似乎也是src='javascript:void(0)'；

undefined：undefined在javascript中不是保留字。可以赋值为其它值；

参考：https://segmentfault.com/a/1190000000474941

9.以下代码的输出结果是?为什么?

    console.log(1+1);    //2  两数字相加
    console.log("2"+"4");   //24   +加号在字符串中起拼接符作用
    console.log(2+"4");    //24    +加号在字符串中起拼接符作用
    console.log(+"4");   //4    +正号转换字符串为数字

10. 以下代码的输出结果是?

    var a = 1;  
    a+++a;  
    typeof a+2;    //number2

11. 以下代码的输出结果是? 为什么

     var a = 1;
     var b = 3;
     console.log( a+++b );   //4     (a++)+b

12.遍历数组，把数组里的打印数组每一项的平方

     var arr = [3,4,5]
    for (var i=0; i<arr.length; i++){
        console.log( Math.pow( arr[i],2 ) );
    }

13.遍历 JSON, 打印里面的值

    var obj = {
     name: 'hunger', 
     sex: 'male', 
     age: 28 
    }
    for (var k in obj){
        console.log( obj[k] );
    }

14. 以下代码输出结果是? 为什么（选做题目）

    var a = 1, b = 2, c = 3;
    var val = typeof a + b || c >0     //(typeof a)+b 为ture 后面不看
    console.log(val)   //number2

    var d = 5;
    var data = d ==5 && console.log('bb')   //(d==5) && _console.log('bb')_->undefined
    console.log(data)   //undefined

    var data2 = d = 0 || console.log('haha')   0->false 看后面 console.log('haha')-console.log('haha')->undefiend
    console.log(data2)    //undefined

    var x = !!"Hello" + (!"world", !!"from here!!");   //  ture + ( false,ture)  ->  1+1
    console.log(x)

border-三角形

圣诞树：

http://js.jirengu.com/hetobudedi/3/edit?html,css,output

等腰钝角三角形：

http://js.jirengu.com/hetobudedi/3/edit?html,css,output

普通钝角三角形：

http://js.jirengu.com/gazenawofe/2/edit

等腰锐角三角形

http://js.jirengu.com/gazenawofe/2/edit

普通锐角三角形

http://js.jirengu.com/gazenawofe/2/edit

match、exec的区别

`exec`：

exec是regexp的方法；
g对它不生效；
如果没有分组（没有括号括起来的内容），
- 有匹配内容，它只返回第一个匹配的内容，所以返回只包含一个元素的数组；
- 如果没有匹配内容，返回null；
如果有分组（有括号），且找到了匹配；
返回的数组包含多个元素，第一个元素是找到的匹配，之后的元素为各个分组找到的匹配内容；

`match`：

match是string的方法；
g对match生效；
没有匹配内容返回null；
match在以下情况下也会发生和exec类似的匹配分组的情况；
- 首先正则表达式中有分组的情况；
- 其次返回唯一的匹配；

参考：http://www.cnblogs.com/xiehuiqi220/archive/2008/12/01/1327487.html

重载

js的重载是通过判断参数的个数和类型来实现的

关于position的理解-1

##position （absolute的坑）

absolute：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
摘自：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

当我们设置号元素的一些元素之后，下一步设置元素的position:absolute后，在不给他任何top和left的情况下，它迅速脱离文档流，后面的元素会跟上它的位置；此时它的位置相当于浮动的情况，覆盖在后面文档的下面；
2，接下来设置后面的top或left等属性值，浏览器会解析你设置的，而没有设置的还是会默认原始位置

yongheng2016 / blog Goto Github PK

blog's People

Contributors

Stargazers

Watchers

Forkers

blog's Issues

补充

1.什么是 CSS hack

css的三种写法(实际项目中大部分都是针对IE不同版本下的hack)：

2. 浏览器兼容思路

方向：

3.列举5种以上浏览器兼容的写法

4. 以下工具/名词是做什么的

5. 兼容性查询（网站）

6. hack查询

先提升作用域的变量声明，再看代码，所以条件语句中的变量不管怎样都会提升

题目1： 实现如下图Tab切换的功能

题目2：实现下图的模态框功能，点击模态框不隐藏，点击关闭以及模态框以外的区域模态框隐藏

Math任务

1.写一个函数，返回从min到max之间的 随机整数，包括min不包括max

2.写一个函数，返回从min都max之间的 随机整数，包括min包括max

3.写一个函数，生成一个长度为 n 的随机字符串，字符串字符的取值范围包括0到9，a到 z，A到Z。

4.写一个函数，生成一个随机 IP 地址，一个合法的 IP 地址为 0.0.0.0~255.255.255.255

数组任务

1.数组方法里push、pop、shift、unshift、join、splice分别是什么作用？用 splice函数分别实现push、pop、shift、unshift方法

2.写一个函数，操作数组，数组中的每一项变为原来的平方，在原数组上操作

3.写一个函数，操作数组，返回一个新数组，新数组中只包含正数，原数组不变

Date 任务

1. 写一个函数getChIntv，获取从当前时间到指定日期的间隔时间

2.把hh-mm-dd格式数字日期改成中文日期

3.写一个函数，参数为时间对象毫秒数的字符串格式，返回值为字符串。假设参数为时间对象毫秒数t，根据t的时间分别返回如下字符串:

垂直居中：

可变内容居中（上下padding相等）

行内元素居中（line-height）

多行文字垂直居中(line-height)

根据基线居中（vertical-align）

绝对垂直居中（position、translate或margin）

CSS和JS在网页中的放置顺序是怎样的？

综上结合各个浏览器，如果要避免闪烁，css放在head头部，如果要避免白屏，css尽量放置在后面；

解释白屏和FOUC

白屏或闪烁是无法避免的，只能二选一；(1.化好妆,才出门 2.先出门,中途化妆)

async和defer的作用是什么？有什么区别

简述网页的渲染机制（下载->解析->渲染->执行->预下载）

解析：

DOM解析

CSS解析

渲染：

正文

Form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

post 和 get 方式的区别：

在input里，name 有什么作用？

radio 如何 分组?

placeholder 属性有什么作用?

type=hidden隐藏域有什么作用? 举例说明

HTML 表单用于搜集不同类型的用户输入。

名称

创建文本

创建密码

单选按钮

复选框

提交按钮

创建按钮

隐藏域

下拉框

文本域

HTML5新标签

选择日期

星期

时间

范围（range）

1.引用类型有哪些？非引用类型有哪些2.如下代码输出什么？为什么

3.如下代码输出什么? 为什么

4.如下代码输出什么? 为什么

5.过滤如下数组，只保留正数，直接在原数组上操作

6.过滤如下数组，只保留正数，原数组不变，生成新数组

7.写一个深拷贝函数，用两种方式实现

深拷贝思路：

题目1： \d，\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^,$分别是什么?

题目2： 写一个函数trim(str)，去除字符串两边的空白字符

题目1：实现如下图Tab切换的功能

1.写一个函数，返回从min到max之间的随机整数，包括min不包括max

2.写一个函数，返回从min都max之间的随机整数，包括min包括max

radio 如何分组?

题目2：写一个函数trim(str)，去除字符串两边的空白字符

题目3：写一个函数isEmail(str)，判断用户输入的是不是邮箱

题目4：写一个函数isPhoneNum(str)，判断用户输入的是不是手机号

题目5：写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）

题目6：写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，只包括大写字母、小写字母、数字、下划线，且至少至少包括两种）

题目7：写一个正则表达式，得到如下字符串里所有的颜色

题目8：下面代码输出什么? 为什么? 改写代码，让其输出[""hunger"", ""world""].

8、写一个 ucFirst函数，返回第一个字母为大写的字符（***）

1.单列定宽布局（这里要注意一下width和max-width的区别）

题目3：解释IE事件冒泡和DOM2事件传播机制？

题目4：如何阻止事件冒泡？如何阻止默认事件？

题目6：补全代码，要求：

题目7：补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。