摘要：控制表單控件的禁用狀態(tài)。這個(gè)符號只有會識別漸進(jìn)識別的方式，從總體中逐漸排除局部。接著，再次使用將和分離開來，這樣已經(jīng)獨(dú)立識別。生成相對定位的元素，相對于其正常位置進(jìn)行定位。元素不能用作語義用途以外的其他目的。

要點(diǎn)：對Web標(biāo)準(zhǔn)的理解、瀏覽器差異、CSS基本功：布局、盒子模型、選擇器優(yōu)先級及使用、HTML5、CSS3、移動端開發(fā) 技術(shù)等

1.Doctype作用? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?

（1）、 聲明位于文檔中的最前面，處于  標(biāo)簽之前。告知瀏覽器的解析器，用什么文檔類型 規(guī)范來解析這個(gè)文檔。 

（2）、嚴(yán)格模式的排版和 JS 運(yùn)作模式是  以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。

（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。

（4）、DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。

2.行內(nèi)元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

（1）CSS規(guī)范規(guī)定，每個(gè)元素都有display屬性，確定該元素的類型，每個(gè)元素都有默認(rèn)的display值，比如div默認(rèn)display屬性值為“block”，成為“塊級”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。

（2）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣） 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）知名的空元素：

 鮮為人知的是：          

3.CSS的盒子模型？

（1）兩種， IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型；IE 的content部分包含了 border 和 pading;

（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).

4.link 和@import 的區(qū)別是?

（1）、link屬于XHTML標(biāo)簽，而@import是CSS提供的;

（2）、頁面被加載的時(shí)，link會同時(shí)被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）、import只在IE5以上才能識別，而link是XHTML標(biāo)簽，無兼容問題;

（4）、link方式的樣式的權(quán)重 高于@import的權(quán)重.

5.CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計(jì)算？ CSS3新增偽類有那些？

1.id選擇器（ # myid）

2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul < li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a: hover, li: nth - child）

可繼承： font-size font-family color, UL LI DL DD DT;

不可繼承 ：border padding margin width height ;

優(yōu)先級就近原則，樣式定義最近者為準(zhǔn);

載入樣式以最后載入的定位為準(zhǔn);

優(yōu)先級為:

   !important >  id > class > tag  

   important 比 內(nèi)聯(lián)優(yōu)先級高

CSS3新增偽類舉例：

p:first-of-type 選擇屬于其父元素的首個(gè) 
 元素的每個(gè) 
 元素。
p:last-of-type  選擇屬于其父元素的最后 
 元素的每個(gè) 
 元素。
p:only-of-type  選擇屬于其父元素唯一的 
 元素的每個(gè) 
 元素。
p:only-child    選擇屬于其父元素的唯一子元素的每個(gè) 
 元素。
p:nth-child(2)  選擇屬于其父元素的第二個(gè)子元素的每個(gè) 
 元素。
:enabled、:disabled 控制表單控件的禁用狀態(tài)。
:checked，單選框或復(fù)選框被選中。

6.如何居中div,如何居中一個(gè)浮動元素?

給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性

    div{
        width:200px;
        margin:0 auto;
     }  

居中一個(gè)浮動元素

      確定容器的寬高 寬500 高 300 的層
      設(shè)置層的外邊距

     .div { 
      Width:500px ; height:300px;//高度可以不設(shè)
      Margin: -150px 0 0 -250px;
      position:relative;相對定位
      background-color:pink;//方便看效果
      left:50%;
      top:50%;
    } 

7.瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？

IE瀏覽器的內(nèi)核Trident、 Mozilla的Gecko、google的WebKit、Opera內(nèi)核Presto；

png24為的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.

瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一。

IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。

浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號只有ie6會識別)

漸進(jìn)識別的方式，從總體中逐漸排除局部。

首先，巧妙的使用“9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別。

css

  .bb{
   background-color:#f1ee18;/*所有識別*/
  .background-color:#00deff9; /*IE6、7、8識別*/
  +background-color:#a200ff;/*IE6、7識別*/
  _background-color:#1e0bd1;/*IE6識別*/

  } 

IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.

IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。

Chrome 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

8.html5CSS3有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，地理定位等功能的增加。

繪畫 canvas 元素

用于媒介回放的 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除

語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

CSS3實(shí)現(xiàn)圓角，陰影，對文字加特效，增加了更多的CSS選擇器 多背景 rgba

新的技術(shù)webworker, websockt, Geolocation

移除的元素

純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；

是IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，

瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：

當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

9.你怎么來實(shí)現(xiàn)頁面設(shè)計(jì)圖，你認(rèn)為前端應(yīng)該如何高質(zhì)量完成工作? 一個(gè)滿屏 品 字布局 如何設(shè)計(jì)?

首先劃分成頭部、body、腳部；。。。。。

實(shí)現(xiàn)效果圖是最基本的工作，精確到2px；

與設(shè)計(jì)師，產(chǎn)品經(jīng)理的溝通和項(xiàng)目的參與

做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗(yàn)

處理hack，兼容、寫出優(yōu)美的代碼格式

針對服務(wù)器的優(yōu)化、擁抱 HTML5。

10.常使用的庫有哪些？常用的前端開發(fā)工具？開發(fā)過什么應(yīng)用或組件？

使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超過91%。

輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
（理解這些框架的功能、性能、設(shè)計(jì)原理）

Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。

城市選擇插件，汽車型號選擇插件、幻燈片插件。彈出層。（寫過開源程序，加載器，js引擎更好）

JavaScript原型，原型鏈 ? 有什么特點(diǎn)？

原型對象也是普通的對象，是對象一個(gè)自帶隱式的 proto 屬性，原型也有可能有自己的原型，如果一個(gè)原型對象的原型不為null的話，我們就稱之為原型鏈。

原型鏈?zhǔn)怯梢恍┯脕砝^承和共享屬性的對象組成的（有限的）對象鏈。

JavaScript的數(shù)據(jù)對象有那些屬性值？

　　writable：這個(gè)屬性的值是否可以改。

　　configurable：這個(gè)屬性的配置是否可以刪除，修改。

　　enumerable：這個(gè)屬性是否能在for…in循環(huán)中遍歷出來或在Object.keys中列舉出來。

　　value：屬性值。

當(dāng)我們需要一個(gè)屬性的時(shí)，Javascript引擎會先看當(dāng)前對象中是否有這個(gè)屬性， 如果沒有的話，就會查找他的Prototype對象是否有這個(gè)屬性。

function clone(proto) {

　　function Dummy() { }

　　Dummy.prototype = proto;

　　Dummy.prototype.constructor = Dummy;

　　return new Dummy(); //等價(jià)于Object.create(Person);

} 

       function object(old) {
        function F() {};
        F.prototype = old;
        return new F();
       }
   var newObj = object(oldObject);

12.列出display的值，說明他們的作用。position的值， relative和absolute定位原點(diǎn)是？

block 象塊類型元素一樣顯示。

缺省值。向行內(nèi)元素類型一樣顯示。

inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。

*absolute

  生成絕對定位的元素，相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位。 

*fixed （老IE不支持）

    生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。 

*relative

    生成相對定位的元素，相對于其正常位置進(jìn)行定位。 

static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中
*（忽略 top, bottom, left, right z-index 聲明）。

inherit 規(guī)定從父元素繼承 position 屬性的值。

13.頁面重構(gòu)怎么操作？

編寫 CSS、讓頁面結(jié)構(gòu)更合理化，提升用戶體驗(yàn)，實(shí)現(xiàn)良好的頁面效果和提升性能。

14.語義化的理解？

html語義化就是讓頁面的內(nèi)容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析；
在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。
搜索引擎的爬蟲依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO。
使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

15.HTML5的離線儲存？

localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除。

16.為什么要初始化CSS樣式。

因?yàn)闉g覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。

當(dāng)然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

最簡單的初始化方法就是： {padding: 0; margin: 0;} （不建議）

淘寶的樣式初始化： 
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; } 

17.(寫)描述一段語義的html代碼吧。

（HTML5中新增加的很多標(biāo)簽（如：
、

*iframe會阻塞主頁面的Onload事件；

*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過javascript
動態(tài)給iframe添加src屬性值，這樣可以可以繞開以上兩個(gè)問題。

// 頁面加載完成后
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方式 來綁定事件
// 參數(shù)： 操作的元素,事件名稱 ,事件處理程序
addEvent : function(element, type, handler) {
    if (element.addEventListener) {
        //事件類型、需要執(zhí)行的函數(shù)、是否捕捉
        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.removeEnentListener) {
        element.removeEnentListener(type, handler, false);
    } else if (element.datachEvent) {
        element.detachEvent("on" + type, handler);
    } else {
        element["on" + type] = null;
    }
}, 
// 阻止事件 (主要是事件冒泡，因?yàn)镮E不支持事件捕獲)
stopPropagation : function(ev) {
    if (ev.stopPropagation) {
        ev.stopPropagation();
    } else {
        ev.cancelBubble = true;
    }
},
// 取消事件的默認(rèn)行為
preventDefault : function(event) {
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
},
// 獲取事件目標(biāo)
getTarget : function(event) {
    return event.target || event.srcElement;
},
// 獲取event對象的引用，取到事件的所有信息，確保隨時(shí)能使用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;
}

html5 websoket
WebSocket通過Flash
XHR長時(shí)間連接
XHR Multipart Streaming
不可見的Iframe