面试-前期技术总结
管理工具
- git： 版本管理控制工具
- ** webpack：** 打包工具
- SVN：
- grount：
- 禅道：项目管理
- 码云：管理工具
单行文本超出不显示(隐藏)：
.over{
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp:1;
-webkit-box-orient:vertical;
}
或者直接加上：
text-overflow ：ellipsis;
white-space : nowrap;
overflow: hidden;
定位position
- **static ： ** 静态定位(默认)
- **relative ： ** 相对定位，不脱离文档流，如果没有定位偏移量，对元素本身没有影响；相对于其本身位置定位
- **absolute ： ** 绝对定位，完全脱离文档流，使内嵌支持宽高；若有定位父级，相对于定位父级发生偏移，如果没有定位父级相对于整个文档发生偏移
浏览器的内核
浏览器内核既是浏览渲染引擎，正因为每个浏览器的内核不一样，所以兼容性问题才出现
-
**Webkit内核 ： ** Chrome，Safari，Opera
-
**Gecko内核 ： **代表作品是Firefox，即火狐浏览器。因火狐是最多的用户，故常被称为firefox内核它是开源的，最大优势是跨平台，在Microsoft Windows、Linux、MacOs X等主 要操作系统中使用
-
**Trident内核 ： ** IE，因IE捆绑在Windows中，所以占有极高的份额，又称为IE内核或MSHTML，此内核只能用于Windows平台，且不是开源的。代表作品还有腾讯、Maxthon（遨游）、360浏览器等。但由于市场份额比较大，曾经出现脱离了W3C标准的时候，同时IE版本比较多，存在很多的兼容性问题
-
**Blink内核： **由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了
-
**Presto内核 ： **代表作品是Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了Presto
rem布局
d8219ee08c098540a8e0c60d480558d0.png
XHTML 与 HTML 的区别
| strict html 4.01 标准 | xhtml 1.0 标准 |
|---|---|
| <html> 必须是root元素 | html元素需要有xml相关属性 |
| <head>和<body> 是 <html>中一定有且只有的元素 | 元素名必须是小写字母 |
| <head> 必须有 <title> | 元素属性用"包围,不能为空值 |
| <meta>和<style>可选, 他们只能在<head>里 | 在内容里不能有&, 需要转义，包括其他特殊字符<> |
| <body> 里只能有 block元素 | 空元素以 />结尾 |
| block元素不能放在inline元素里 | 标签必须成双成对 |
| block元素不能放在p标签里 | 标签顺序必须正确 |
| ul和ol中只能有li元素,但li里可以放其他，包括block元素 | 所有属性都必须使用双引号 |
| blockquote标签中只能放block元素 | 不允许使用target="_blank" |
http中的三次握手，四次挥手
单页web应用（SPA）的简单介绍
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内（采用的是div切换显示和隐藏），从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。得益于ajax，我们可以实现无跳转刷新，又多亏了浏览器的histroy机制，我们用hash的变化从而可以实现推动界面变化。
angularJS,是目前中最流行的mvvm框架，非常适合做SPA；与之类似的还有vueJS，backbone，extjs等。
hash值
即url中#号后面的部分。
<a href="target">go target</a>
......
<div id="target">i am target place</div>
点击a链接，文档会滚动到id为target的div的可视区域上面去。hash除了这个功能还有另一一种含义：指导浏览器的行为但不上传到服务器。大家都知道，改变url中的任何一个字符都会导致浏览器重新请求服务器，除了#号后面那段字符之外。所以，简而言之我们可以这样理解：改变#后面的值不触发网页重载，但会记录到浏览器history中去。
驱动div显示隐藏的方式有很多种，比较好的选择为以下两种：
- 监听地址栏中hash变化驱动界面变化
- 用pushsate记录浏览器的历史，驱动界面发送变化
如何搭建一个基础的SPA
首先，我们画出三个div，它们实际上是作为三个界面存在界面上的，body作为界面外框容器，限制着它们的大小。为了给每个界面配对一个hash地址，我们给每个div配一个id，将hash地址与对应的选择器（id、class）建立链接关系，从而可以从hash变化值中操作界面。
<body>
<div id="A" class="a">A</div>
<div id="B" class="b" style="display:none;">B</div>
<div id="C" class="c" style="display:none;">C</div>
</body>
Hash的改变不会引起界面的刷新，但是会出发onhashchange事件，我们要做的就是监听这个事件：
目前，只需要以上的代码，我们便可以完成一个最简单的SPA，通过地址栏的变化，界面会相应地变化。当然，除了手动在地址栏里面改变hash的变化，我们也可以用代码改变它的变化,从而推动界面变化，
window.localtion.hash="A";
下面是一个利用$.ajax实现的单页面切换的例子：
window.onhashchange = function(){ //监听hash值变化，实现页面变换
var hash=window.location.hash;
changePage(hash);
}
function changePage(hash){
switch (hash)
{
case '#index':
url='partials/list.html';
break;
case '#newpage':
url='partials/newpage.html';
break;
case '#edit':
url='partials/edit.html';
break;
case '#view':
url='partials/view.html';
break;
}
$.ajax({ //根据hash值选择页面
type:'GET',
url:url,
//async:false,
success:function(data){
main.innerHTML=data;
}
});
}
