前端的基础问题：
web前端面试宝典1（https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions）
web前端面试宝典2（https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese）
一.遇到过的问题：
数据类型：字符串，数组，数字，布尔，null，undefined，对象
Bom：浏览器对象模型
Dom（document object model）:文档对象模型(根-元素（属性，文本）)
Html5中Input新类型：email；url； range；number；search
Input:radio，text，password，button，submit，image，file，checkbox
前端框架：angular js, jQuery
css选择器：类，id 标签 派生 群组 属性 相邻
兼容：IE：-ms-;firefox:-moz-;chrome:-webkit-
圆角：border-radius
圆形：border-radius:50%
闭包：一个拥有多个变量，并绑定这些变量的表达式
响应式布局：一个网络能适应多个终端而不是为了某个终端去做特定的网站
媒体查询：針對不同的媒體類型，定義不同的樣式：记得元素之间要加空格不然实现不了
@media screen and （max-width：1000px）{
Body{
Background-color:blue;
}
}
（刚开始设置背景色，等屏幕尺寸小于1000px时背景色改变）
Viewpoint：<meta name=”viewpoint” content=”width=device-width intial-scale=1.0” >
内核：Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)
SEO：搜索引擎优化；通过搜索引擎规则获取相关的自然排名
文档流：从左至右，从上至下
Css的定位机制：正常文档流；float；position
脱离文档流：float；position：absolute；
Fixed:固定定位，元素脱离文档流，可以使层级固定不动。（就是你想固定在哪个位置，通过left top right bottom）通常相对于浏览器窗口
Relative:相对定位，不会失去文档流中的位置，不会被后面的内容填补，会空在哪里。（相对于正常的位置，left top right bottom）相对于其在普通流中的位置进行定位
absolute:绝对定位，失去文档流中的位置，后面的内容会替代它的位置（直接设置left top right bottom；元素可以放置到页面上的任何位置。）相对于最近一级的
Fixed和absolute的区别：
1在没有滚动条的情况下是没有差异的。
2在有滚动条的情况下：fixed定位不会随滚动条移动而移动，而absolute会； Fixed相当于固定在当前的window不动；absolute：会随参照对象元素的高度和宽度变化而变化
闭包：一个函数引用另外一个函数的变量
：当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。
css怎么实现动画：
Id{ animation：name time count 是否逆向运动（alternate）}@keyframes name{form{}to{}} ,具有兼容性
单页面：一种结构布局很简单的静态页面。
网页怎么区分html5还是html：文档类型：html5：<!doctype html>而html则有很长的一段；结构语义：html4.0没有体现结构语义化的标签；html5在语义上却有很大的优势（语义化：直观的认识标签 对于搜索引擎的抓取有好处）。提供了一些新的html5标签（<title><header><small><strong>）。
冒泡：事件发生后开始传播；（从里到外或者从外到里） 阻止冒泡：这是原生js中的（对父辈写一个事件，后辈写一个相同事件；若是后辈不阻止冒泡，就会也触发父辈的相同事件；阻止了冒泡就只会触发它本身的）
var test = document.getElementById("pic-user");
var div = document.getElementById("user-message");
test.onclick = function(e){
//js阻止事件冒泡
e = e || event;
e.cancelBubble = true;
//或者ev.stopPropagation()
div.style.display = "block";
Alert（“里面”）
}
Div．onclick=function(){
Alert(“外面”)}
document.onclick = function(){
div.style.display = "none";
}
var oEvent = ev || event; //js阻止事件冒泡 // oEvent.cancelBubble = true;
对原生js的认识：
是世界上最流行的编程语言；
可插入html页面的编程代码；
插入html页面后，可由所有的现代浏览器执行。
存在问题
在哪里可以查css3的兼容性：Modern.IE
关于ajax：
说说angular js和jQuery：
angular js：前端的框架；谷歌员工2012年开始发布的；四大特性：1MVC：
Model：数据变量；view：数据呈现；controller：数据操作
2双向绑定：model-view：数据变，呈现的就变
3依赖注入：设计模式；
4模块化设计
从连接到网页发生了什么：网络通信；页面渲染
关于a标签：使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释
前端界面工程师：1. 与交互设计师、视觉设计师协作，根据设计图完成页面制作。 2. 维护及优化网站前端性能。
标签上title与alt属性的区别：Alt 当图片不显示是 用文字代表。Title 为该属性提供信息
split() join() 的区别：前者是切割成数组的形式，后者是将数组转换成字符串
事件委托是：
搜索引擎（Search Engine）是指根据一定的策略、运用特定的计算机程序从互联网上搜集信息，在对信息进行组织和处理后，为用户提供检索服务，将用户检索相关的信息展示给用户的系统。
搜索引擎优化方法
返回上一页：onclick="javascript:history.back()"
或进入下一页：onclick="javascript:history.forward()"
打开一个网页： 方法一：window.open(url)；
方法二：location.href=”url?”+参数名+参数值；
方法三：<a href=”url” target=“-blank”></a>
二．总结前端的常见题目：
1.Css盒子模型：
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Css盒子模型：分为两种标准模型（高度只为内容的高度：box-sizing: content-box;
），IE模型（高度为内容，内边距，边框；box-sizing: border-box;）
Js获取dom的宽，高：--查看cssstudy-深入理解css盒子模型
1. dom.style.height/width;//获取内联的宽高
2. dom.currentStyle.width/height://获取页面渲染后的结果，只支持ie
3. dom.getComputedStyle(dom).width/height//通用性好些
4. dom.getBoundingClientRect.width/height:// 根据元素在视窗中的绝对位置来获取宽高的
5． Dom.offsetWidth/offsetHeight//兼容性最好的
5. getBoundingClientRect获取的top和offsetTop获取的top区别 ：前者指元素（比如某个div）距离可视区域顶部的距离，后者包括滚动条卷起的部分。
6. scrollWidth: 元素的全文宽度（如果有滚动条，那么这个宽度还包括滚动条能滚动到的所有区域）(比如如果出现省略号，计算总的长度)
2弹性flex布局：
弹性布局盒：是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。由弹性容器(Flex container)和弹性子元素(Flex item)组成。
具有兼容性：在webkit内核的浏览器中使用时，必须加上-webkit-前缀;
设置flex布局后：子元素的float，clear，vertical-aglin属性将失效。position属性，依然生效。
给父容器添加display：flex；让容器内部打破原有的文档流模式。
父容器的六大属性：
One：flex-direction:row：水平放置；column：垂直放置；row-reverse：起点在右边；column-reverse：起点在下边。
Two：flex-wrap:wrap:换行，第一行在上方；wrap-reverse:换行，第一行在下方；nowrap：不换行。
Three：flex-flow：是上面两个的缩写；
Four：水平轴对齐：justify-content:flex-start:对齐开始的位置；flex-end：对齐结束的位置；center：居中；space-between：两边对齐；项目之间间隔相等；space-around：每个项目两侧的间隔相等
Five：垂直轴对齐：里面只包含一个主轴的（子容器里面同级的只有一个）：align-items:在交叉轴上怎么对齐：flex-start:起点对齐flex-end:终点对齐center:中心对齐；baseline:项目第一行文字的基线对齐；stretch：若没有设置项目的高度，将占满整个容器的高度。
Six：垂直轴对齐：里面只包含多个主轴的（子容器里面同级的有多个）：align-content: flex-start:起点对齐flex-end:终点对齐center:中心对齐；space-between:交叉轴两端对齐；space-around：每根轴线两侧间隔相等；stretch：若没有设置项目的高度，将占满整个容器的高度。
3a未知宽高元素怎么上下左右垂直居中： 将父容器设置为：如html：display: flex;justify-content: center;align-items: center; height: 100%;
B已知宽度高度： 父元素设置宽高并position:relative;子元素：postion：absolute；top：0;bottom:0;left:0;right:0;margin: auto并设置其宽高；
或直接
若是在屏幕中居中直接：
top: 0; left: 0; right: 0; bottom: 0; margin: auto; position: absolute;
4了解http协议。说一下200和304的理解和区别 ：
1xx：临时响应
2xx（成功）：200服务器成功处理了请求
304：自从上次请求后，请求的网页未修改过，服务器返回此响应时，不会返回网页内容。
4xx:请求错误
5xx:服务器错误
5 DOM事件中target和currentTarget的区别
event.target 返回触发事件的元素(<a>) event.currentTarget 返回绑定事件的元素(<div><a href=””></div>)例如：<div><a href=””></div>
6 DOM事件的绑定的几种方式 ：
A:在dom元素中直接绑定：
onclick;ondouble;onmouseover;onmouseout.
B：JavaScript代码中直接绑定：
elementObject.onXXX=function(){
// 事件处理代码
}
C：绑定事件监听函数：
elementObject.addEventListener(eventName,handle,useCapture); 是标准的绑定事件监听函数的方法
// elementObject：dom对象；事件名（事件名称没有on；单击“click”移入“mouseover”） ，事件句柄函数，boolean类型。
elementObject.attachEvent(eventName,handle); IE8.0及其以下版本
7 事件委托：
利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
例如li若是每个人li的事件一样，就可以把事件绑定给父元素。
8 普通的js面试题：
8.1：检验变量类型：typeof();
去掉空格：str.replace(/\s*/p,””);
Split():分割字符串；
indexof()：字符串中一个字符第一次出现的索引；（若是不存在为-1；存在就大于-1）
match() ：方法可在字符串内检索指定的值
splice（）：删除元素
tostring（）：数字转换成字符串
parseInt（）：字符串转换为数组；
toFixed（位数）：保留位数
math.round():四舍五入
Number():判断是否是数字
slice()： 方法可从已有的数组中返回选定的元素；
charAt() ：方法可返回指定位置的字符。
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码eval(2+6)=8;等
8.2$(function(){})//在dom加载就绪时对其进行操作，并调用执行绑定的函数；
Window.onload:网页中所有元素完全加载到浏览器后才执行。
9 :和::的区别：
“：”为伪类：基于文档外的抽象，对元素分类是基于特征；动态，分为状态伪类（：hover，：link，：focus）和结构性伪类有（：first-child,:last-child,nth-child），“：：”为伪元素：基于元素的抽象，并不存在于文档中，对元素中的特定内容进行操作，而不是描述状态有： ::before，::after；* 选择器选取所有元素。
画一条线{width:200px;border-top:1px solid red;content:””}
画分割线.one::before,.one::after{content:’’;width:200px;border-top:1px solid red ;display:inline-block}
10 CSS动画画一个旋转的三角形:首先得画一个三角形：width:0;height:0;border-width:0 30px 30px;border-style:solid;
border-color:transparent transparent grey;positon:relative;
animation:mymove 5s infinite;//移动且具有兼容性
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
@-webkit-keyframes mymove{
from{ -webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to{ -webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
11 Px, rem 和 em区别：
Px实际上就是像素，绝对度量单位
Em:相对度量单位，根据基准来缩放字体的大小
Rem：根据其父元素来设置字体大小
%：根据父元素的来定
12数据的存储方式：
SessionStorage
localStorage:
cookier:
相同点：都保存在浏览器端，同源的
13单页面
SPA:加载单个HTML页面并在用户与应用程序交互时动态更新该页面的web应用程序
14 浏览器如何渲染页面
浏览器渲染页面的时候说明网站资源已经请求成功；
解析html：html-dom树；css-css规则树；根据dom和css来构建render树-布局render—绘制页面
15 css3的新特性怎么实现
选择器；
边框，
渐变色:线性渐变：linear-gradients；径向渐变：radial-gradients
linear-gradients：to left:从 右到左；to right:从左到右；
to top:从下到上； to bottom:从上到下；
to top left:从右下角到左上角；to top right:从左下角到右上角
动画：@keyframe{form（）to（）}
阴影:box-shadow
圆角:border-radius
文本效果：text-shadow
多列：column-count:3
盒子模型;
旋转:transform(具有兼容性)
16 对float属性的了解
定义元素在哪个方向浮动;作用都在同一级
17 Ajax详解
用于创建快速动态网页的技术
与服务器交换数据，在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax跟服务器的使用：
创建xmlhttprequest对象：
variable=new xmlhttprequest（）；
但是老版本使用的是：
Variable =new activeXobject（“Microsoft.xmlhttp”）
所以要先判断：
Var xmlhttp;
If(window.XMLHttpRequest){
Xmlhttp=new XMLHttpRequest();
}
Else{
Xmlhttp=new ActiveObject(“Microsoft.XMLHTTP”)
}
向服务器发送请求：
get请求：
Xmlhttp.open(“get”,url,true);
Xmlhttp.send();
Post请求：
Xmlhttp.open(“post”,url,true);
//发送数据:
xmlhttp.setrequestHeader(“content-type”,”application/x-www-form-urlencoded”);
Xmlhttp.send(“fname=bill&name=gates”);
响应：
Xmlhttp.responeText;
状态：
xmlhttp.readyState==4 && xmlhttp.status==200{}
18 ajax同步异步
同步：一个线程要等待上一个线程完才能开始执行，同步可以看成是一个单线程；FALSE；面向比特的传输，单位是帧，要求接受方和发送方的时钟是保持一致的。
异步：一个线程在执行中，下一个线程不必等待它执行完就可以执行，异步肯定是个多线程的。True；面向字符的传输，单位是字符。
解决跨域问题：
原因：由于安全原因，浏览器不允许XMLHTTPRequest组件请求跨域资源。
解决方案：1.通过修改document.domain(可返回下载当前文档的服务器域名)和隐藏iframe 2.通过请求当前域的代理，由服务器代理去访问另一个域的资源
3.通过html中可以请求跨域资源的标签引用来达到目的：image，script，link
Ajax交互：1填写地址；2返回结果3解析结果4展示数据
ajax的优缺点：
优点：减轻服务器的负担，局部刷新页面，减少时间，带来更好的体验
缺点：使用了大量的js和ajax引擎，这些取决于浏览器的支持，需要考虑浏览器的兼容性，页面的后退按钮是无用的。
19 DOM标准事件的三个阶段
事件一开始从文档的根节点流向目标对象（捕获阶段），然后在目标对向上被触发（目标阶段），之后再回溯到文档的根节点（冒泡阶段）
20闭包
有权访问另一个函数作用域中的变量的函数，建闭包的常见方式，就是在一个函数内部创建另一个函数
闭包会产生的问题，怎么解决：；闭包会导致原始作用域链不释放，造成内存泄漏（占用）；只有立即执行函数（只执行一次，执行完一次之后，会将代码删除，执行完之后将函数立即释放）（function（形参）{代码块}）（实参）能解决这个问题为什么要使用闭包：利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部
21原生js的选择器
Document.getElementById();
Document.getElementsByTagName();
Documnent.getElemtsByClassName();
Document.querySelector();//返回匹配指定选择器的第一个元素
Document.querySelectorAll();//返回匹配指定选择器的所有元素
22页面加载如何优化
1优化图片：合并小图片
2合并压缩js css
3代码优化：避免<img>的src为空，尽量使用css3动画，使用ajax异步加载
4避免延迟加载
5借助自动化工具来实现页面的优化
23优雅降级与渐进增强
渐进增强：一开始针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果，交互，追加功能达到更好的体验。（向上兼容）（.transition { /*渐进增强写法*/-webkit-transition: all .5s; -moz-transition: all .5s;-o-transition: all .5s;transition: all .5s;
}）
优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。（向下兼容）
.transition { /*优雅降级写法*/transition: all .5s;-o-transition: all .5s;-moz-transition: all .5s;
-webkit-transition: all .5s;}
24 js组成部分
1 ECMAScript:是js语言的标准，规定了js的编程语法和基础核心知识。
2 DOM：文档对象模型（document object model），提供给js很多操作页面元素的属性和方法。
3 BOM浏览器对象模型（browser object model），提供了很多操作浏览器的属性方法。
25 outline和border的差别： outline：聚焦时激发的，会出现边框
Border:边框；
Outline不会像border那样影响元素的尺寸或位置
26 css内链和外链的区别
内链：同一网站域名下的内容页面之间的相互链接
外链：从别的网站导入到自己网站的链接
27 MVC
模型(model)－视图(view)－控制器(controller)
28作用域链
作用域：变量和函数的可访问的范围
作用域链：当代码在一个环境中执行时，会创建变量对象的一个作用域链来保证对执行环境有权访问的变量和函数的有序访问。作用域第一对象始终是当前执行代码所在环境的变量对象。
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的
29那些购物网站有那么多图片，怎么保证的加载速度
减小图片的大小：使用photohshop来减小文件大小
30 js原生
删除动节点:obj1.removerChild(obj2); obj1父元素；obj2子元素
替换：创建替换的元素：var rep=cdocument.createElement(“li”);
Rep.innerHTML=”这是替换的元素”
Obj1.replaceChild(rep.obj2)
添加节点：obj1.appendChild（rep）
插入：obj1.insertBefore（old，new）
31 webpack了解吗？用过哪些功能
是一款强大的前端模块管理和打包工具
32 call 和 apply
Call()和apply（）方法都是非继承而来的。
两个方法的作用点一样：（动态改变某个类的某个方法的运行环境（执行上下文））都是在特定的作用域中调用函数，等于设置函数体内的this对象值，以扩充函数赖以运行的作用域。
接收参数的方式不同：apply（）接收两个参数一个是函数运行的作用域this，另一个是参数数组；call():
几种框架的详解：
原生js和jquery入口函数的加载模式不同：
原生js会等到dom元素加载完毕，图片也加载完毕再执行
Jquery会等到dom元素加载完毕，但不会等到图片加载完毕在执行；
Jquery需要使用jquery包；
Angular js是原生js的一个框架，可以双向绑定数据；使用了传统的mvc模式，
33 html5新特性
音频:<audio src=””controls=”controls”></audio>
视频：<video src=””controls=”controls”></video>
画布:<canvas></canvas>
地理
Web存储：localStorage： 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
34 attribute和property的区别： property：属性，是js里的对象：firstChild，childNodes（dom元素在js中作为对象拥有的属性）
attribute：特性，是html的特性，它的值只能是字符串：如id class title；（dom元素在文档中作为html标签拥有的属性）
35 Div+CSS布局比Table布局的优势
1代码少，页面文件小，下载快；
2布局灵活，网页有小的改动不影响搜索引擎收录
3影响搜索排名
36 display:none与visibility:hidden的区别：
Visibility：隐藏对应的元素并挤占该元素原来的空间（原来的位置还存在，只是内容被隐藏）
Display：隐藏对应的元素并不挤占该元素原来的空间（原来的位置不存在）
37 CSS都有哪些布局方式：弹性布局，流式布局，盒子模型
38请用CSS写一个简单的幻灯片效果页面？使用animation动画实现一个简单的幻灯片效果:
（制作幻灯片：一种是通过css动画：animation+@keyframe；一种是使用js或jquery：通过属性src来改变）
写一个div添加样式：关于animation-name：这是关于动画的名字；animation-duration:完成动画需要的时间；animation-iteration-count：播放的次数（n||infinite）<div class=”main”></div>.main{
width:500px;
height: 400px;
margin: 0 auto;
-webkit-animation-name: "name";
border: 1px solid grey;
/*overflow: hidden;*/
/*box-shadow: 0 0 5px rgba(0,0,0,1);*/
/*background-size:100% 100%;*/
background-size: cover;
/*background-position: center;*/
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}
@keyframes name {
0%{background: url("img/img1.jpeg") no-repeat;
background-size:100% 100%;
}
50%{background: url("img/img2.jpeg") no-repeat;
background-size:100% 100%;
}
100%{background: url("img/img3.jpeg") no-repeat;
background-size:100% 100%;
}
}
39 margin: 0 auto的用法：
上下间距为0；左右间距：auto。布局若要水平居中则加入这个。使用了它就不能使用float。40 localStorage、sessionStorage、cookie的区别以及它们的应用场景
Cookie和session都是用来跟踪浏览器用户身份的会话方式。
Cookie保存在浏览器端，session保存在服务端
localStorage的生命周期是永远的
sessionStorage的生命周期是在仅在当前会话下有效。
41引入css和html库：
<script src=”路径”></script>
<link rel="stylesheet" type="text/css" href="路径 ">
42滚动条样式设置
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
43:滚动条回到原来的位置：
if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
// var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
// document.documentElement.scrollTop = parseInt(arr[1]);
// document.body.scrollTop = parseInt(arr[1]);
// }44 回到顶部：
顶部：
直接回到：document.body.scrollTop = document.documentElement.scrollTop = 0;
有动画：$("html,body").animate({scrollTop:0},500)底部： 直接回到：document.body.scrollTop = document.documentElement.scrollTop = document.body.scrollHeight
有动画：$("html, body").animate({ scrollTop: $(document).height() }, 1000);45 JS有哪些内置对象:
内置对象的属性和方法：
1Math：
Math.abs(x):用来返回数的绝对值；
Math.min(x，y,z,…):返回括号内的最小值
Math.random(x):返回0到1之间的随机数。等
2 Date：
Date.getDate():返回一个月中的某一天；
Date.getDay（）：返回一个星期中的某一天。等
3 Array：
Var arr=new array();
Arr.join():分割数组；
Arr:push():向数组中添加元素；
Arr.reverse():颠倒数组中元素的顺序；
Arr.sort():对数组进行排序；
Arr.tostring():数组转换为字符串；等
4字符串对象：
var str=new string();
Str.indexof():用于返回指定内容在原字符中的位置，如果没有则返回-1；
Str.trim():去除字符串前后的空白；
Str.concat():用于拼接字符串；
Str.substring(start,end):截取字符串；
Str.replace();替换字符串的某个元素，并返回替换后的字符串；
Str.split():把字符串分割成数组的形式
三．深入学习html，和css，也得多记：
1 Css关于兼容性的东西的整理：
1.1动画animation，及通过的@keyframe规则，这两个都需要兼容性：
animation：名字，时间，次数（infinite|n）;
@keyframe 名字{0%{} 50%{} 100%{}}或@keyframe名字{from{}to{}}
2 关于js的innerHtml和innerText,outerHtml,value
(inner相关的必须是标签对中的不然什么也输出出来；value就不是标签对中的，若是标签对的话，就输出undefined；而html和text的差别要使用alert弹出来才看得到html有标签，text只是里面的文本)
innerHtml:必须是标签对的形式，也就是input啥也输不出来；
outerHtml:标签对，input输出它本身；
innerText:文本，标签对，input啥也输不出来；
value：就是input的值，若是标签对啥也输不出来。
Document.write():如果您在文档加载后使用该方法，会覆盖整个文档。
3 Angular js 的依赖：
若是一个网页的div的ng-app=”myApp” ng-controller=”myCtrl”
另一个网页的div的ng-app=”newApp” ng-controller=”myCtrl”;
第二个网页引用第一个网页的内容：var app= angular.module(“newApp”,[“myApp”]);
4 textarea的使用:
基本：<textarea></textarea>；
只读<textarea readonly=” readonly”></textarea> ;
禁止拉伸：<textarea style=”resize :none”></textarea>
5获取本地IP：直接引用就可以了：https://blog.csdn.net/yuang12345/article/details/79678677
<script type="text/javascript">
function getUserIP(onNewIP) { // onNewIp - your listener function for new IPs
//compatibility for firefox and chrome
var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
var pc = new myPeerConnection({
iceServers: []
}),
noop = function() {},
localIPs = {},
ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
key;
function iterateIP(ip) {
if (!localIPs[ip]) onNewIP(ip);
localIPs[ip] = true;
}
//create a bogus data channel
pc.createDataChannel("");
// create offer and set local description
pc.createOffer().then(function(sdp) {
sdp.sdp.split('\n').forEach(function(line) {
if (line.indexOf('candidate') < 0) return;
line.match(ipRegex).forEach(iterateIP);
});
pc.setLocalDescription(sdp, noop, noop);
}).catch(function(reason) {
// An error occurred, so handle the failure to connect
});
//sten for candidate events
pc.onicecandidate = function(ice) {
if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
ice.candidate.candidate.match(ipRegex).forEach(iterateIP);
};
}
// Usage
getUserIP(function(ip){
alert("Got IP! :" + ip);
});
</script>
6关于index：
index()方法：返回指定元素相对于其他指定元素的index的位置
注意：若未找到元素则返回-1。
通常使用：$(this).index();
7angular js的筛选属性：
filter:{名字：绑定的数据}：fillter:{name:reach}
8关于a标签的详用：
Target属性：规格了在何处打开链接文档
target="_blank"：就会打开一个新的网页加载，而不是在覆盖原来的网页
9获取日期与时间：
Var myDate=new Date();
myDate.toLocaleString();
10:before和：after：
在元素前或后添加内容（样式）
添加内容：id:before{content:”新加内容”}
11制作椭圆：
width的宽度大于height的高度；border-radius：50%；
12关于animation的使用：
与display冲突，可以使用opacity代替；
有兼容性
Animation：名字 时间 是否循环（是infinite） 是否逆向（是alternate）
12 css3上下跳动：
id{animation:move 5s infinite alternate};
@keyframe move{form{}to{}};或@keyframe move{0% {}100% {}};
13 transform和transition的使用
Jquery中的Animate支持他。
transform: rotate(0deg)
transition：tansfrom 时间（2s）
transition:<过渡属性名称（color，background-color）><过渡时间（5 s）>：有兼容性
关于暂停：animation-play-state:paused
14 关于let var const的区别
简单的说let是修复了var的作用域的一些bug，是更好的var；
Const定义的变量不可以修改，而且必须初始化。
Var定义的变量可以修改，如果不初始化会输出undefined，不会报错；
Let是块级作用域，函数内部使用，对函数外部无影响。
15 css3中的filter：滤镜
Filter：blur(px):迷糊度
16关于display详解：
Display：none；元素隐藏
Display：block；元素显示，但是带有换行符；
Display：inline；元素为内联元素，没有换行符；
Display：inline-block: 行内块元素；
父元素中设置font-size：0；（也可以把元素写成一行
）可以避免莫名的间距问题
(关于水平布局：1可以使用父元素display：flex；
2可以使用子元素display:inline-block;或float:left)
17制作三角形：
#san1{
width: 0px;
border:15px solid red ;
border-color:red transparent transparent transparent;
}18阴影：box-shadow:水平 垂直 模糊距离 尺寸 颜色 外部（内部） 四周阴影：box-shadow:0px 0px 10px grey;
上左阴影：box-shadow:-10px -10px 10px grey;
右下阴影：box-shadow:10px 10px 10px grey; 19渐变色：
线性渐变色：background:-webkit-linear-gradient（（不填：上到下；top：上到下；left：左到右），渐变颜色）
径向渐变色：-radial-gradient（circle, #f00, #ff0, #080）：
20检查一个元素是否含有某一个类：hasclass(“”);
检查一个是否有某一个id：if($("#id").length>0){}else{}或者if($("#id")[0]){} else {}21jquery获取属性值或给属性赋值：获取：$(this).attr("title") 修改：$(this).attr("title","修改");
js获取属性值或给属性赋值： 获取：this.title；
修改：this.title="修改"22获取表格第一列：$(“#id tbody tr ”). each(function (e) {$(this).find(“td”).eq(0).css({})}
获取表格第一行: $(“#id tbody tr ”).eq(0).css({})23省略号：
1 overflow: hidden;
2 text-overflow: ellipsis;
3 white-space: nowrap;
4 overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；
24刷新：
window.location.reload()刷新当前页面.
parent.location.reload()刷新父亲对象（用于框架）
opener.location.reload()刷新父窗口对象（用于单开窗口）
top.location.reload()刷新最顶端对象（用于多开窗口）
关于angular js的网页刷新： $window.location.reload();
若是一个父元素设置为position：relative；子元素设置为position：absolute；则就是子元素相对于父元素位置来说的。
有些居中显示：margin：0 auto
/transform：转换：skewX:沿着X轴的2D倾斜转换；skewY:沿着Y轴的2D倾斜转换; rotate：旋转
Perspective：设置元素被查看位置的视图（屏幕带元素的位置）
perspective-origin：设置一个3D元素的基数位置：x-axis（x轴位置）y-axis（y轴位置）（50% 50% 浏览器的正中心）
：transform：translate（translateX Y Z） rotate（rotateX Y Z）
transform-origin：旋转的中心
26制作3D效果：
父元素：设置宽度，高度等属性再加上position:relative;-webkit-perpective：（屏幕离元素的位置）
子元素：position:absolute;-webkit-transform-style:preserve-3d;transform:rotate();transform-origin:bottom等
27详解关于动画的属性： transition：过渡属性（例如宽度从100到200）；在元素上写出原有的宽度100，并添加transiton：（属性）宽度 时间；再在触发事件上写出触发后的宽度。具有兼容性。多个属性用逗号隔开
Transform：：具有兼容性；translate（移动(x轴位置， y轴位置)，必须加逗号隔开） rotate（旋转（deg）） scale（缩放（0到1））；skew（弧度deg ，弧度deg）：扭曲
Animate：动画；具有兼容性；动画的名称 事件 播放的次数（n||infinite） 是否反向播放（alternate）
27三角形的制作：
Width：0；height：0；
Boreder-left:10px solid transparent
Boreder-top:10px solid transparent
Boreder-right:10px solid transparent
Boreder-bottom:10px solid red
关于元素js怎么使用添加和移出类：
移出：dom.classList.remove();
添加：dom.classList.add ();
绘制四条杠或三条杠的效果：
width: 200px; height: 20px; border-top: 60px double;
//四条杠 border-bottom: 60px double;
//三条杠
border-bottom: 60px solid;
css选择器：
nth-of-type（下标）：选择元素中的第几个：下标从1开始。
定位属性：fixed（固定）；absolute（绝对）；relative（相对） ；inherit：位置继承父元素的
Inherit关键字：（指定一个属性（color:inherit）应从父元素继承它的值）;
定位的元素都会有层级，所以需要使用到z-index:值大的覆盖小的，为负的会被普通的给覆盖
Html中：<：表示小于<;>:表示大于>.
事件流：描述的是从页面中接受事件的顺序。
事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）；
//阻止冒泡 // e.stopPropagation(); // e.cancelBubble=true;
事件捕获：不打具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
事件处理程序：
1.Html事件：直接放在html元素中；<input type="button" value="按钮" onclick="alert('Hello')">2.Demo0级事件：把一个函数赋值给一个事件的处理程序的属性---事件需要on事件(onclick)
删除事件：元素。事件=null;(清空事件)
3.Dom2级事件：用于处理指定和删除事件处理程序的操作：----事件无需on只需要（click） addEventListener()和removeEven.
elementObject.addEventListener(eventName,handle,useCapture);
elementObject:元素；eventName：事件（不需要前缀on）；handle：函数；useCapture：事件是否在捕获或冒泡阶段执行；
删除事件：elementObject.remove EventListener(eventName,handle,useCapture);里面的参数必须跟addEventListener的参数相同才能删除。
4.IE事件处理程序：但是显示的报错，可能是浏览器版本太高的问题，它只适合ie的低版本 attachEvent（eventName，handle）：添加事件
DetachEvent(eventName，handle):删除事件
接收相同的两个参数：事件名称和函数
5跨浏览器的事件处理程序：
事件对象：
在触发Dom上的事件时都会产生一个对象。
Dom中的事件对象：
1.Event.type:获取时间的事件类型属性
2.Target：获取事件目标：
事件目标名称：e.target.nodeName
3.stopPropagation:用于阻止事件冒泡（或cancelbubble）:
用法： e.stopPropagation(); e.cancelBubble=true;
4preventDefault()：阻止事件的默认行为。: e.preventDefault();比如a标签的跳转问题
IE中的事件对象： 非ie：event；其他的要window。Event------event=event || window。Event
1.Event.type:获取时间的事件类型属性
2.srcElement：获取事件目标：
3cancelBubble:阻止事件冒泡 false，true
4returnValue：阻止事件默认行为，false，true--- e.returnValue=false;阻止事件的默认行为
//跨浏览器的事件处理程序：
var EventUtil={
//添加句柄：element：元素；type：事件名；handler：函数
//type:参数不要有on
addHandler:function (element,type,handler) {
if(element.addEventListener){
element.addEventListener(type,handler)
}
// else if(element.attachEvent){
// element.attachEvent('on'+type,handler)
// }
else{
element['on'+type]=handler;
}
},
//删除句柄
removeHandler:function (element,type,handler) {
if(element.removeEventListener){
element.removeEventListener(type,handler)
}
// else if(element.detachEvent){
// element.detachEvent('on'+type,handler)
// }
else{
element['on'+type]=null;
}
},
//得到事件
getEvent:function (event) {
return event?event:window.event;
},
//阻止事件的默认行为
preventDefault :function(event) {
if(event.preventDefault){
event.preventDefault();
}
else{
event.returnValue=false;
}
},
//阻止事件冒泡
stopPropagation:function (event) {
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble=true;
}
}
}
}
//添加
EventUtil.addHandler(btn5,'click',GetInfo);
EventUtil.addHandler(a[0],'click',function (e) {
e=EventUtil.getEvent(e);
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
});
鼠标事件：
Function (e){var x=e. client;
var y=e. clientY
}
键盘事件： keyDown：当用户按下键盘上的任意键时触发，且如果按住不放的话，会重复触发此事件。
KeyPress: 当用户按下键盘上的字符键时触发，且如果按住不放的话，会重复触发此事件。
KeyUP：用户释放键盘上的键时触发。
对于获取随机数:
设置多久执行一次：var id=setInterval（function（）{}，1000）
停止执行：.clearInterval（id）:这里面的id必须是setInterval的返回值获取每个键盘的每个键码：e.keyCode---与key事件连用
若是要同时按下Ctrl键：
(e.==49){
(e.){}
}
判断是第几次按下 先定义var flag=0；if（flag==0）{alert（“第一次按下”） flag =1}else{ alert（“第二次按下”）， flag=0}Angular js怎么动态的给title赋值：<td title="{{x.title}}" ng-bind="x.status"></td>Js获取网页屏幕：
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
关于dl标签：制作导航栏的时候会用到：
<dl>
<dt>项目名称</dt>
<dd>项目描述</dd>
</dl>
data-id只是行内存放数据的一个标签，跟input里面的value作用是一样的
获取ele.attr(“data-id”)
mouseover与mouseenter，mouseout和mouseleave的区别:
mouseover 和 mouseout 在鼠标移入移出时会触发其父级元素的 mouseover，mouseout 方
而 mouseenter，mouseleave 只会触发当前鼠标移入和移出元素的方法。换句话说，后两者是不冒泡的
件，前两者是会冒泡的事件。
mouseover：鼠标移动到子元素中，即便没有触发父元素，也会触发父元素的mouseout
mouseenter:如果鼠标没有离开父元素，在子元素上任意移动，也并不会触发mouseleave事件
debounce去抖技术：clearTimeout(timer)---清除延时 var timer=settimerout(function(){})jquery中的on（）方法：
$(“元素”).on(“click”,function(){}):使用这个就不需要再使用for循环去遍历（在想li这种常使用）实例：
var timer=null;
$("li").on("mouseenter",function () {
if(timer){
clearTimeout(timer)//清除延时
}
var value=$(this).attr("data-id");
timer= setTimeout(function () {
timer=null;
},300)
})
rgba(R,G,B,A)：R,G,B三个参数都是0-255中的，A为透明度参数，取值0-1之间，不=不可为负数，半透明：0.5
溢出文字用省略号显示：
text-overflow:ellipsis; //隐藏用省略号
overflow:hidden; //超出隐藏
white-space:nowrap;//不换行
制作的一个水泡：
.bubble{
position: fixed;
display: inline-block;
left: 600px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 5px solid white;
transform: scale(0.1);
transition: all 5s;
animation:my 2s infinite;
}
@keyframes my {
from{
transform: scale(0.1);
}
to{
transform: scale(1);
}
}
原生js修改样式： //方式1：直接改變 // squre.style.width="200px"; //方式2：通過添加類的形式 squre.className="Cwidth";
关于css动画过渡：transition: all 2s;
Argument的用法： Javascript并没有重载函数的功能，但是Arguments对象能够模拟重载；
每个函数都会有一个Arguments对象实例arguments；就是写函数时的参数，是一个数组，要遍历才能得到。
例：var i = iResult = 0
function sum()
{
for (var i = 0; i < arguments.length; i++)
{
iResult += arguments[i];
}
return iResult
}
//应用
alert(sum(1,2,3,4,5,6,7,8,9,10)) //输出55整理第二波：
Cellpadding与cellspacing的区别：
都是table的属性：<table Cellpadding=”8 ” Cellspacing=”0” >
若是让表格边框单一（表格与单元格及单元格间的边框是否融合在一起。）：border-collapse：collapse Cellpadding：表格单元格与内容之间的距离
Cellspacing：用来指定表格各单元格之间的空隙
Table-layout:设置表格是否自动调整宽高；常用的是fixed属性：列宽由表格宽度和列宽度设定。
Display和visibility的区别：
Display有很多值，visibility只有两个：visible，hidden。
但是在隐藏元素时会有差距display会隐藏掉元素空间，visibility会保留元素的空间
链接标记：target的属性：
值为_blank:重新打开一个页面，不覆盖原有的。
_top:将会清除所有被包含的框架并将文档载入整个浏览器窗口
_self: 目标文档载入并显示在相同的框架或者窗口中作为源文档
_parent: 使得文档载入父窗口或者包含来超链接引用的框架的框架集
浏览器兼容：链接：https://www.jianshu.com/p/f971aae86f4d
1.不同浏览器的标签默认的外补丁和内补丁不同：
解决：{margin：0；padding：0}2图片默认有间距：使用float属性。
3光标手型：cursor：pointer；
4：不同浏览器对small标签的字体大小不同
Get和post的区别：
Get：用于信息获取，使用url传递参数，对所发生信息的数量也有限制，一般在2000个字符；
Post：一般用于修改服务器上的资源，对所发送的信息没有限制。
Xhtml和html的区别：
Html是一种基于web网页设计语言，xhtml：是一个基于xml的置标语言
最主要的不同：xhtml元素必须被正确地嵌套，xhtml元素必须被关闭，标签名必须用小写字母，xhtml文档必须拥有根元素。
浏览器：
IE :IE核；
火狐：Gecko
谷歌：webkit
Opera：blink；
对内核的理解：1渲染引擎：负责取得网页的内容，整理讯息，以及计算网页的显示方式，然后输出至显示器或打印机，内核的不同对网页语法解释会有不同，所有渲染的效果不同。所有网页浏览器，电子邮件客户端以及其他需要编辑，显示网页内容的应用程序都需要内核。
2 js引擎：解析和执行js来实现网页的动态效果
Doctype：《！doctype》：告知浏览器的解析器用什么文档标准解析这个文档
Css3的新特性：
圆角：border-radius
阴影：box-shadow
渐变：gradient
旋转：transform
前端初學者，小白白一枚，都是靠自己學習的，若有問題，請多指教
Undefined：一个表示无的原始值，转为数值NAN：被声明了，但是没有被赋值
Null:表示无的对象，转为数值为0：作为对象原型链的终点。
= =和= = =的区别：
相同点：都是判定两个值是否相等
不同点：= =：不会判断类型；= = =会判断类型。
判断一个变量的值是否为数值：
Typeof（变量）
IsNAN(变量)：判断变量是否是非数值的，FALSE：数值。
instanceof ：用于判断一个变量是否某个对象的实例
BOM：浏览器对象模型；操作浏览器的一个中介。
Window对象是BOM中所有对象的核心，是BOM中所有对象的父对象。BOM操作的是对象是浏览器窗口window。
DoM：文档对象模型，通过创建节点树来表示文档。树节点：元素节点，文本节点，属性节点。
Array的join，push，splice,c;
Join:将数组连接成字符串：数组.join(“连接符”)；查看的是新的数组
Push：在数组的末尾添加新的项，改变数组。Arr.push(3); 查看的是原来的数组;
Unshift: 数组的前面添加新的项，改变数组
Splice :删除或添加数组中的元素：splice(开始位置，删除的个数，添加的新元素):查看的是原来的数组
Slice:从已有的数组显示选取的元素，查看的是新元素
Split():分割字符串；
数组排序：数组，sort（）；
数组。indexOf（值）：值第一次出现在数组中的位置。
innerHTML，outerHTML和innerText的区别：
对于一般的标签
innerHTML代表一个元素节点内由所有子节点，不包括当前节点组成的html代码；（内容，包括html标签）；
outerHTML代表一个元素节点内由所有子节点和当前节点组成的html代码（包含整个html）；
innerText代表一个元素节点内由所有子文本节点内容组成的文本（只包含文本）；
强制转换：parseint parseFloat
Angular js 中：清除timeout =$interval :使用$interval.cancel(timeout_upd);
对于jquery的解释：
原生js会面临很多问题，如浏览器兼容性，ajax数据解析，dom，事件注册操作等都非常烦琐，而jquery解决了这些问题。有很好用的特性：dom对象绑定数据，动画，juqery也非常容易扩展，在它的基础上开发非常灵活。与原生js的区别：juqery是对js的扩展，封装，让js更好用，更简单。
关于angular js的数据缓存：
angular.module('a7_5', []) .controller('c7_5', function ($scope, $http, $cacheFactory,$timeout,$q) {var url = 'http://10.142.252.143:5566/api/server/services?host=10.142.252.187';
//先定义
var cache = $cacheFactory.get("$http");nh()
function nh(){//判断是否已经有缓存的数据了
if( cache.get("cacheData") ){ alert("2") var huanc=cache.get("cacheData")// console.log(huanc[2].ProcessIds )
}
else{ alert("1") $http({method: 'GET',
url: url,
cache: true
}).success(function (data) { cache.put("cacheData", data); console.log( cache.get("cacheData"))// $scope.result = data;
var arrResp = cache.get(url);
$scope.cache = arrResp[1];
var huanc=cache.get("cacheData")console.log(huanc.length )
// var mm = JSON.parse($scope.cache);
// console.log(mm);
})
}
//清除缓存
cache.remove('http://10.142.252.143:5566/api/server/services?host=10.142.252.187');//清除所有缓存
cache.removeAll（）；
}
});
关于ajax获取数据：
var url="http://10.142.252.143:5566/api/server/services?host=10.142.252.187";
xmlhttp=null;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = "OK"
console.log(xmlhttp.responseText);
}
else
{
alert("Problem retrieving XML data:" + xmlhttp.statusText);
}
}
}
上传文件：<input type="file" value="选择文件">
获取文件的属性：name：本地文件系统中的文件名。
size：文件的字节数。
type：文件的MIME类型。
lastModifiedDate：文件上一次被修改的时间。
关于遮盖文字特效：
background: url(html/img/img.jpg) no-repeat center center;
background-size: cover;
color: #fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
描边文字： -webkit-text-stroke: 1px black;
text-stroke: 1px black;
color: white;
背景设置透明度：background-color: rgba(0,0,0,0.1);最后一个参数就是透明度，越大越不透明
伪元素before和after意思是在被选元素的内容前或后 插入内容
网页到div中间会有很多空白：body{margin：0}文字描边：text-stroke：1px black:具有兼容性。
兼容性整理表：
text-stroke：描边—ie和火狐不支持；只有谷歌支持-wekit-text-stroke
<a href="javascript:void(0)" id="close">×</a>:死链接
在原生的js中无hover事件使用onmouseover和onmouseout代替；但是在jquery中就可以直接使用hover（function（）{//鼠标移入时触发的事件}，function（）{//鼠标移出时触发的事件}）overflow:scroll; /*任何时候都强制显示*/ overflow:auto; /*需要的时候会出现滚动条*/ overflow-x:auto; /*控制X方向的滚动条*/ overflow-y:auto; /*控制Y方向的滚动条*/
跳转到本页的某个位置<a href=”#id”>
关于修改：input中的placeholder的属性：
input::-webkit-input-placeholder {color：red}获取当前页面到顶端的距离(包含被滚动条隐藏的高度)：document.documentElement.scrollTop
若是要阻止hover事件中的一闪而过的事件：需要移入使用settimeout事件，移出使用clearTimeout（）事件，常用在菜单中；
关于一个删除表格中的数据，若是有用到angular js就可是删除数据的方式删除：$scope.data.splice(开始位置，个数)；但是怎么判定是哪一行呢，通过传入的值与表格中的所有值对比。最后进行删除：
例：for (let i = 0; i < $(".delete").length; i++) {
if($scope.data[i].name==name)
{
$scope.data.splice(i,1);
break;
}
}关于break和return的区别：break是用来跳出循环的，例如for，while，do-while都可以跳出，但不跳出函数 return是使整个函数返回的，后面的不管是循环里面还是循环外面的都不执行
关于css3的圆角问题：圆角的宽度是可以变化的
画一个鹰嘴：width: 100px; height: 100px; border-top:30px solid greenyellow; border-left: 0px solid transparent; border-bottom:0px solid transparent; border-right: 0px solid transparent; border-radius: 100px 0 0 0;
画圆形：border-radius：50%；椭圆形：border-radius：50%但是宽高不同；
画半圆：border-radius：左上，右上，右下，左下；其大小值为高
画一个爱心：
.heart{width:160px;height:200px;position:relative}
.heart:after{
content:" ";
width: 30px;
height: 60px;
background-color: #9e54bd;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin: 10px;
transform: rotate(45deg);
position: absolute;
left: 20px;
}
.heart:before{
content:" ";
width: 30px;
height: 60px;
background-color: #9e54bd;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin: 10px;
transform: rotate(-45deg);
position: absolute;
}
制作内凹圆角：就是巧用圆形渐变：
background: -webkit-radial-gradient( #fff 50px, #4169E1 50px);颜色+位置就是渐变的范围；200px at 100px 0px这个200px是内圆的半径，100px 0px是内圆的圆心的位置。
.box{
width: 100px;
height: 100px;
margin: 50px auto;
background-image: radial-gradient(200px at 100px 0px, #fff 100px, #000 100px);
}
企业网站：头部logo区，导航区，内容展示区，底部版权区
将页面通常分为：上：头部/导航区 中:信息展示区 下:页脚区
首页的制作：
第一行顶部区 | 第一行顶部区 | 第一行顶部区 | 第一行顶部区 |
空白 | Logo区 | Logo区 | 空白 |
空白 | 导航区 | 导航区 | 空白 |
空白 | 大图广告区 | 大图广告区 | 空白 |
空白 | 新闻中心 | 课程中心 | 空白 |
底部版权区 | 底部版权区 | 底部版权区 | 底部版权区 |
页面头部：
首先先将所有的外边距及内边距设为0：*{margin:0;padding:0}
Ul li若是将图片该改为样式list-style-image：url(“”);
图片：alt：图片不能显示时出现的文字：title：鼠标移上去时提示的文字
让文字与图片的中间对齐：将图片设为vertical-align: middle;
导航部分制作：关于background属性设置
Background:背景色 url() no-repeat right center
Background-position:水平位置 （right，left）垂直位置（center）
background-color：背景色：图片没有的地方的颜色。
焦点图：主要用在首页：<div id=”Box”><div class=”pic”></div></div>
使用插件; myFocus.set({
id:"picBox"
})
1这个id必须与图片列表最外层的ID一致
2图片列表的外面包裹一个class为pic的div
记住尖括号>>要用转义符：>；<<:<
电商网站开发：
准备工作：将{
: 0;
: 0;
}设置。关于文字的处理： 描边：-webkit-text-stroke:2px grey
文字阴影：text-shadow:3px 3px 3px grey
斜体：font-style:oblique
文字倒影：
-webkit-box-reflect: direction,offset,mask-box-image
direction:above:上边，below：下边，left：左边；right：右边；
offset：定义倒影与对象之间的距离可正可负；
-webkit-box-reflect:below -20px -webkit-linear-gradient(top,orange,white);
获取元素高度：
Demo.offsetHeight：获取的是元素内容加上边框的高度;
Demo.client：获取的是元素内容不加上边框的高度;
清除浮动：clear：left:在左侧不允许浮动元素；
Right：:在右侧不允许浮动元素；
Both：在左右两侧不允许浮动元素；
none：在两侧允许浮动元素；
inherit:规定应该从父元素继承clear属性
一个父元素包含了浮动元素，它将塌陷具有零高度：处理：将父元素也设置为浮动。
面试的重点：
一个未知宽高或已知宽高的div垂直水平居中：
将父元素设为：display:flex;justify-content:center;align-items;center;并设置其宽高
已知宽高：父元素设为：position：relative；并设置宽高；
Div设为：position：absolute；left：0；right：0；top：0；bottom：0；margin：auto。
Href 和src的区别：
Href:指向网络资源的位置，建立和当前文档的链接常用于：<a>标签；
Src：指向外部文档，指向的内容将会嵌入到当前标签所在的位置常用于：<img>标签。
Px,rem,em有什么区别：
Px是绝对尺寸单位；em和rem是字体相对尺寸；em会继承父元素的字体大小；rem相对于html根元素确定的。
优雅降级：针对浏览器版本高到低；
渐进增强：针对浏览器版本低到高；
浏览器内核：
内核：Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)
Safari：webkit内核
火狐：gecko内核
Opera：presto改为了blink内核；
谷歌：webkit内核
消除数组中重复的数字：
var array=[1,2,2,3,3,4,5,6];
var brray=[];
for(let i=0;i<array.length;i++){
if( brray.indexOf(array[i])<0){
brray.push(array[i]);
}
}
js关于节点的添加：删除：移动：复制；创建；查找：
操作：
//創建元素
var main=document.createElement("p");
//創建文本節點
var node=document.createTextNode("這是一個文本節點");
//在元素中追加節點：
main.appendChild(node);
//最後向一個已有的元素中追加，會添加在已有元素後面
// box.appendChild(main);
//将新元素添加在已有元素前面
box.insertBefore(main,p1);
//刪除節點
// box.removeChild(main);
//替換：把原來的元素p1用新的main元素替換掉。
box.replaceChild(main,p1) ;
//关于拖拽对象：
元素。Onmousedown =function(){
//找到鼠标位置与元素边框的位置
Document.onmousemove=function(){
得到元素边框的位置距离窗口的距离；再设置属性
}
Document.onmouseup=function(){
//取消事件
document.onmousemove = null;
document.onmouseup = null;
}
}
//阻止鼠标右键默认事件：
box.oncontextmenu=function (e) {
e.preventDefault();
}
list-style-type:要改变它的颜色---ul{color:}即可
水平居中(常用的)：
1. 最常見的是：margin：0 auto;記住要指定寬度。
2. 將父元素：text-align:center;子元素：display：inline-block;記住要指定寬度。
3. 將父元素：display：flex;justify-content:center;
垂直居中(常用的)：
1.將父元素：display:flex;align-items:center;
2..將父元素：display:table-cell;vertical-align:middle;
多列佈局：
1. 左：float:left;設置寬高； 右：float:left;設置寬高；
2. 將父元素設置為：display:flex;即可
3. 將父元素，子元素全部設置為：display：table-cell;
響應式佈局：
设置布局宽度等于设备宽度，布局viewport等于度量viewport
<meta name="viewport" content="width=device-width,initial-scale=1">
localStorage：问题
首先判断浏览器是否支持：
if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... } else { // 抱歉! 不支持 web 存储。 }
//清除緩存
// localStorage.clear();
//顯示緩存
if(!localStorage.getItem("log")) //先判断是否存在 这个对象
localStorage.setItem("log",""); //做空白存储，否则返回 NULL 显示出来体验不好，这里的if大括号省去了
//得到存储的数据，记得存储的数据是string类型
localStorage.text=localStorage.getItem("log");
$("textarea").html(localStorage.text); //显示
问题处理的：若是a标签失灵，而项目中又有index；就把body的index改为-999；
若是要實現點擊屏幕除了某個元素外，另一個元素關閉，而某個元素實現打開另一個元素。
詳解banckground:
Banckground-color:背景顏色；
Banckground-image:背景圖片；
background-repeat：背景是否重複：是repeat否no-repeat；
background-size：背景圖片的大小：100% 100%：這種就是圖片完全適應div；cover：是圖片足夠大，鋪滿背景區域，但是有些部分在區域外；
contain：圖片足夠大，適應區域，但是但是可能只適應了寬或高。
background-position：放置背景圖片的位置。
以上是很常用的。
關於html添加地圖：
打開網頁：http://api.map.baidu.com/lbsapi/creatmap/index.html
在定位中心：找到你需要的位置；
在設置地圖：在裡面根據自己需要的設置樣式；
在添加標註處：添加標記
3．獲取代碼，將代碼保存在：Map.html中；4.引用：<iframe class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="Map.html" width="600" height="300" frameborder="0" scrolling="no"></iframe>
製作一個3D水泡：
.bubble {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow:
inset -30px -30px 75px rgba(0, 0, 0, .2),
/*淡灰色渐变背景，光源位于左上方 */
inset 0px 0px 5px rgba(0, 0, 0, .5),
/* 泡沫内部深灰色边界 */
inset 0px 0px 55px rgba(255, 255, 255, .5),
/* 泡沫内部白色渐变效果 */
inset -3px -3px 5px rgba(0, 0, 0, .5),
/* 颜色稍深的右下边缘阴影效果 */
0 0 50px rgba(255, 255, 255, .75);
/* 泡沫周围的白色发光效果，以更好地突显边缘 */
}
行内元素不可以设置外边距和内边距的上下，而可以设置外边距和内边距的左右。
总结关于通过http获取数据的：
Ajax：
Angular js：
Jquery：
绑定事件监听
Git是项目版本管理。
原生js获取<select></select>所选的值；
<select id=”box”>
<option value=”cx”>cx</option>
<option value=”cx”>cx</option>
<option value=”cx”>cx</option>
</select>
var box=document.getElementById("box");
box.onchange=function(){
alert(box.value)
}
//angular js通過單選列表來曬出數據
$scope.select = function(){
$scope.all= [];
var val = $scope.Name;
var f = $filter("filter");
$scope.all = f($scope.alls,{"name":val});
}
background: -webkit-linear-gradient(#c18e21,#62390d);若是在body中是一条一条的像3D效果，若是在div中就是线性渐变。
将一个图片用作边框：
width:80%;
height:210px;
border:70px solid #ddd;
border-image:url("img/pig1.jpg") 70 repeat
共同学习，写下你的评论
评论加载中...
作者其他优质文章
