css+js+html基础知识总结
css+js+html基础知识总结
一、CSS相关
1、css的盒子模型：IE盒子模型、标准W3C盒子模型；
2、CSS优先级机制:
选择器的优先权：!important>style(内联样式)>[id>class>tag]（选择器）
样式的优先级：（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
3、继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。
4、盒模型包括内容（content）、填充（padding）、边界（margin）和边框（border）四个方面的内容；
5、CSS hack：由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack。
二、JavaScript相关
1、作用域
变量的作用域：全局变量和局部变量;
变量没有在函数内声明或者声明的时候没有带var就是全局变量，拥有全局作用域，window对象的所有属性拥有全局作用域；在代码任何地方都可以访问，函数内部声明并且以var修饰的变量就是局部变量，只能在函数体内使用，函数的参数虽然没有使用var但仍然是局部变量。
2、js闭包
闭包就是能够读取其他函数局部变量的函数，并让这些变量的值始终保持在内存中存在。
3、数据类型
js的基本数据类型：number、string、Boolean、object、undefined；
（1）值类型：数值、布尔值、null、undefined。
（2）引用类型：对象、数组、函数。4、继承
js是通过原型和构造器实现继承的。
// 构造函数 function Person(name, sex) { this.name = name; this.sex = sex; } // 定义Person的原型，原型中的属性可以被自定义对象引用 Person.prototype = { getName: function() { return this.name; }, getSex: function() { return this.sex; } }
这里我们把函数Person称为构造函数，也就是创建自定义对象的函数。可以看出，JavaScript通过构造函数和原型的方式模拟实现了类的功能。
为了证明prototype模版并不是被拷贝到实例化的对象中，而是一种链接的方式，请看如下代码：
function Person(name, sex) { this.name = name; this.sex = sex; } Person.prototype.age = 20; var zhang = new Person("ZhangSan", "man"); console.log(zhang.age); // 20 // 覆盖prototype中的age属性 zhang.age = 19; console.log(zhang.age); // 19 delete zhang.age; // 在删除实例属性age后，此属性值又从prototype中获取 console.log(zhang.age); // 20
这种在JavaScript内部实现的隐藏的prototype链接，是JavaScript赖以生存的温润土壤， 也是模拟实现继承的基础。
5、原型
每个函数在创建的时候都自动添加了一个prototype属性，这就是函数的原型，原型本身就是一个Object对象，原型本身就是一个Object对象，其实质是对一个对象的引用；
function A() { this.width = 10; this.data = [1,2,3]; this.key = "this is A"; } A._objectNum = 0;//定义A的属性 A.prototype.say = function(){//给A的原型对象添加属性 alert("hello world") }
6、cookie的属性
在JavaScript里，一个cookie就是一个字符串属性，cookie有六个属性，分别是name，value，expires（过期时间）,path（路径），domain（域）和secure（安全）；
Cookie对象的属性：
1、Name：获取或设置Cookie的名称。
2、Value：获取或设置Cookie的Value。
3、Expires：获取或设置Cookie的过期的日期和事件。
4、Version：获取或设置Cookie的符合HTTP维护状态的版本。
Cookie对象的方法：
1、Add：增加Cookie变量。
2、Clear：清除Cookie集合内的变量。
3、Get：通过变量名称或索引得到Cookie的变量值。
4、Remove：通过Cookie变量名称或索引删除Cookie对象。
cookie的获取方式：
<script language="JavaScript" type="text/javascript"> <!-- //设置两个cookie document.cookie="userId=828"; document.cookie="userName=hulk"; //获取cookie字符串 var strCookie=document.cookie; //将多cookie切割为多个名/值对 var arrCookie=strCookie.split("; "); var userId; //遍历cookie数组，处理每个cookie对 for(var i=0;i<arrCookie.length;i++){ var arr=arrCookie[i].split("="); //找到名称为userId的cookie，并返回它的值 if("userId"==arr[0]){ userId=arr[1]; break; } } alert(userId); //--> </script>
7、node.js适应的场景
高并发，聊天，实时消息推送；
8、事件侦听器
写一个通用的事件侦听器函数。
// event(事件)工具集，来源：github.com/markyun markyun.Event = { // 页面加载完成后 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; } else { window.onload = function() { oldonload(); fn(); }; } }, // 视能力分别使用dom0||dom2||IE方式 来绑定事件 // 参数： 操作的元素,事件名称 ,事件处理程序 addEvent : function(element, type, handler) { if (element.addEventListener) { //事件类型、需要执行的函数、是否捕捉 element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent('on' + type, function() { handler.call(element); }); } else { element['on' + type] = handler; } }, // 移除事件 removeEvent : function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.datachEvent) { element.detachEvent('on' + type, handler); } else { element['on' + type] = null; } }, // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获) stopPropagation : function(ev) { if (ev.stopPropagation) { ev.stopPropagation(); } else { ev.cancelBubble = true; } }, // 取消事件的默认行为 preventDefault : function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, // 获取事件目标 getTarget : function(event) { return event.target || event.srcElement; }, // 获取event对象的引用，取到事件的所有信息，确保随时能使用event； getEvent : function(e) { var ev = e || window.event; if (!ev) { var c = this.getEvent.caller; while (c) { ev = c.arguments[0]; if (ev && Event == ev.constructor) { break; } c = c.caller; } } return ev; } };
9、内存泄露
javascript具有自动垃圾回收机制，一旦数据不再使用，可以将其设为"null"来释放引用
堆内存存放引用值，栈内存存放固定类型值。“引用”是一个指向对象实际位置的指针。
在这里需注意的是，引用指向的是具体的对象，而不是另一个引用。
循环引用
一个很简单的例子：一个DOM对象被一个Javascript对象引用，与此同时又引用同一个或其它的Javascript对象，这个DOM对象可能会引发内存泄露。这个DOM对象的引用将不会在脚本停止的时候被垃圾回收器回收。要想破坏循环引用，引用DOM元素的对象或DOM对象的引用需要被赋值为null。
闭包
在闭包中引入闭包外部的变量时，当闭包结束时此对象无法被垃圾回收（GC）。
var a = function() { var largeStr = new Array(1000000).join('x'); return function() { return largeStr; } }();
DOM泄露
当原有的COM被移除时，子结点引用没有被移除则无法回收。
var select = document.querySelector; var treeRef = select('#tree'); //在COM树中leafRef是treeFre的一个子结点 var leafRef = select('#leaf'); var body = select('body'); body.removeChild(treeRef); //#tree不能被回收入，因为treeRef还在 //解决方法: treeRef = null; //tree还不能被回收，因为叶子结果leafRef还在 leafRef = null; //现在#tree可以被释放了。
Timers计（定）时器泄露
定时器也是常见产生内存泄露的地方：
for (var i = 0; i < 90000; i++) { var buggyObject = { callAgain: function() { var ref = this; var val = setTimeout(function() { ref.callAgain(); }, 90000); } } buggyObject.callAgain(); //虽然你想回收但是timer还在 buggyObject = null; }
调试内存
Chrome自带的内存调试工具可以很方便地查看内存使用情况和内存泄露：
在 Timeline -> Memory 点击record即可。
三、HTML
-
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档。 （2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。 （3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 （4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 -
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。 （2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p （3）知名的空元素： <br> <hr> <img> <input> <link> <meta> 鲜为人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr> -
link 和@import 的区别是？
（1）link属于XHTML标签，而@import是CSS提供的; （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; （3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题; （4）link方式的样式的权重 高于@import的权重. -
浏览器的内核分别是什么?
* IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink； -
常见兼容性问题？
* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8. * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。 * IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;} 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别) 渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。 css .bb{ background-color:#f1ee18;/*所有识别*/ .background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1;/*IE6识别*/ } * IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一通过getAttribute()获取自定义属性. * IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. * 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。 * Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决. 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序: L-V-H-A : a:link {} a:visited {} a:hover {} a:active {} -
html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 * 绘画 canvas 用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search 新的技术webworker, websockt, Geolocation * 移除的元素 纯表现的元素：basefont，big，center，font, s，strike，tt，u； 对可用性产生负面影响的元素：frame，frameset，noframes； 支持HTML5新标签： * IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式： * 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架 <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> 如何区分： DOCTYPE声明\新增的结构元素\功能元素 -
语义化的理解？
用正确的标签做正确的事情！ html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。 -
HTML5的离线储存？
localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。 -
(写)描述一段语义的html代码吧。
（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等） 就是基于语义化设计原则） < div id="header"> < h1>标题< /h1> < h2>专注Web前端技术< /h2> < /div> -
iframe有那些缺点？
*iframe会阻塞主页面的Onload事件； *iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript 动态给iframe添加src属性值，这样可以可以绕开以上两个问题。 -
HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或下某个input 设置为 autocomplete=off。 -
请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会 sessionStorage和localStorage的存储空间更大； sessionStorage和localStorage有更多丰富易用的接口； sessionStorage和localStorage各自独立的存储空间； -
如何实现浏览器内多个标签页之间的通信? (阿里)
调用localstorge、cookies等本地存储方式 -
webSocket如何兼容低浏览器？(阿里)
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
