【web】要点归纳

【综述】

1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。

4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。

6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型

7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。

10、JSON —— 作用、用途、设计结构。

【HTML&CSS】

引言：对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 

【JavaScript】 

引言：数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

【其他】

引言：HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯 

【HTML&CSS】

1.清除浮动

clear：both

overflow:auto

:after

2.选择符优先级

id>class>标签

3.浏览器内核

chrome webkit

ie ie

firefox geoko

opear presto

4.web规范和w3c

5.css reset

6.sprites

7.浏览器的怪异模式和标准模式的区别

盒子模型，渲染模式不同

8.网站文件优化

js、css文件合并、压缩

使用cdn托管

使用缓存

9.为什么使用html+css布局

结构与样式分离，结构清晰

一次设计，多次使用

减少页面代码，提高浏览器速度

10.html5和css3

增加许多语义话的标签，如：button、textarea、address、section等。

画图canvas、video

拖动和放下等。

11.块级元素和行内元素

块级：address、caption、form、div、h1、ul、li、table

行内：a、cite、code、span、textarea、img、input(img、input可以设置高度)

【JavaScript】 

1.数据类型

Object Function Number Boolean Undefind

2.类型转化

parseInt parseFloat Number

== - ===

3.事件绑定和普通事件

冒泡的有与无

4.IE和DOM事件流的区别

IE：直接冒泡，如： button->div->body (IE事件流) 

捕获型事件模型： body->div->button (Netscape事件流) 

DOM事件模型： body->div->button->button->div->body (先捕获后冒泡) 

5.url和uri

uri(uniform resource identify)，统一资源表示符，用来唯一的表示一个资源。一般为相对路径。

url(uniform resource locate)，统一资源定位，它是一种具体的uri，并指明如何locate这个资源。一般为绝对路径。

6.Get和post

Get，参数在url中显示；请求发送数量小

Post，参数在url中不显示；请求发送数量大

7.事件委托

通过事件冒泡原理在父级元素添加事件

8.闭包

定义：闭包就是能够读取其他函数内部变量的函数。

用途：

1.读取函数内部的变量

2.使变量始终存在于内存中。制作私有变量

注意点：

1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2.闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

9.阻止冒泡和默认事件

冒泡事件：

return false；

cancleBubble；

addEventListener("",Function,true/false);

e.stopPropagation()

默认事件:

e.preventDefault()

10.JSONP和AJAX

JSONP：

1.前端创建脚本

2.告诉后台脚本内的方法名

3.后台拼接字符串返回方法调用的javascript代码

4.动态添加<script>，执行后台返回的javascript代码，调用前端已创建的脚本

AJAX：

XMLHttpRequest过程

11.javascript的本地对象、内置对象和宿主对象

本地对象：Array、Object、Regexp等可以new的对象

内置对象：Math、JSON

宿主对象：window、document

12.同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

13.同步和异步,回调

14.节点操作

14.1.查

getElementByID()      

getElementsByTagName()

getElementsByName()

getElementsByClassName()

14.2.插入

parentNode.appendChild(childNode);

parentNode.insertBefore(newNode, targetNode);  

14.3.替换

parentNode.replace(newNode, targetNode);    

14.4.移除

parentNode.removeChild(childNode);  // 移除目标节点

node.parentNode.removeChild(node); 

15.跨域请求

15.1.服务器设置请求头

/**设置响应头允许ajax跨域访问**/

res.setHeader("Access-Control-Allow-Origin","*");

/*星号表示所有的异域请求都可以接受，*/

res.setHeader("Access-Control-Allow-Methods","GET,POST");

15.2.JSONP

详情

【new Date--2016/11/29 16:51:39】function getDate(){var date = new Date();return {year:date.getYear(),//116fullYear:date.getFullYear(),//2016month:date.getMonth()+1,//11date:date.getDate(),//29day:date.getDay(),//2time:date.getTime(),//1480409499674hour:date.getHours(),//16minute:date.getMinutes(),//51second:date.getSeconds(),//39localdate:date.toLocaleDateString()//"2016/11/29"}}【深拷贝】function deepCopy(source) {     var result={};    for (var key in source) {        result[key] = typeof source[key]==="object" ? deepCopy(source[key]): source[key];    }    return result; }【数组去重】var single = {getSingleBySet:function(arr){var set = new Set(arr);return Array.from(set);},getSingByArr:function(arr){//...}}【数组排序】var sort = {getOrderBySort:function(arr){arr = arr.sort(function(a,b){return a>b;})return arr;}}