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); //
// 覆盖prototype中的age属性
zhang.age = 19;
console.log(zhang.age); //
delete zhang.age;
// 在删除实例属性age后，此属性值又从prototype中获取
console.log(zhang.age); //

这种在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