摘要:控制表單控件的禁用狀態。這個符號只有會識別漸進識別的方式,從總體中逐漸排除局部。接著,再次使用將和分離開來,這樣已經獨立識別。生成相對定位的元素,相對于其正常位置進行定位。元素不能用作語義用途以外的其他目的。
HTML、CSS部分
要點:對Web標準的理解、瀏覽器差異、CSS基本功:布局、盒子模型、選擇器優先級及使用、HTML5、CSS3、移動端開發 技術等
1.Doctype作用? 嚴格模式與混雜模式-如何觸發這兩種模式,區分它們有何意義?
(1)、 聲明位于文檔中的最前面,處于 標簽之前。告知瀏覽器的解析器,用什么文檔類型 規范來解析這個文檔。 (2)、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。 (3)、在混雜模式中,頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。 (4)、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
2.行內元素有哪些?塊級元素有哪些? 空(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)知名的空元素:
鮮為人知的是:
3.CSS的盒子模型?
(1)兩種, IE 盒子模型、標準 W3C 盒子模型;IE 的content部分包含了 border 和 pading;
(2)盒模型: 內容(content)、填充(padding)、邊界(margin)、 邊框(border).
4.link 和@import 的區別是?
(1)、link屬于XHTML標簽,而@import是CSS提供的; (2)、頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載; (3)、import只在IE5以上才能識別,而link是XHTML標簽,無兼容問題; (4)、link方式的樣式的權重 高于@import的權重.
5.CSS 選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算? CSS3新增偽類有那些?
1.id選擇器( # myid)
2.類選擇器(.myclassname) 3.標簽選擇器(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 ;
優先級就近原則,樣式定義最近者為準;
載入樣式以最后載入的定位為準;
優先級為:
!important > id > class > tag important 比 內聯優先級高
CSS3新增偽類舉例:
p:first-of-type 選擇屬于其父元素的首個元素的每個
元素。 p:last-of-type 選擇屬于其父元素的最后
元素的每個
元素。 p:only-of-type 選擇屬于其父元素唯一的
元素的每個
元素。 p:only-child 選擇屬于其父元素的唯一子元素的每個
元素。 p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個
元素。 :enabled、:disabled 控制表單控件的禁用狀態。 :checked,單選框或復選框被選中。
6.如何居中div,如何居中一個浮動元素?
給div設置一個寬度,然后添加margin:0 auto屬性 div{ width:200px; margin:0 auto; } 居中一個浮動元素 確定容器的寬高 寬500 高 300 的層 設置層的外邊距 .div { Width:500px ; height:300px;//高度可以不設 Margin: -150px 0 0 -250px; position:relative;相對定位 background-color:pink;//方便看效果 left:50%; top:50%; }
7.瀏覽器的內核分別是什么?經常遇到的瀏覽器的兼容性有哪些?原因,解決方法是什么,常用hack的技巧 ?
IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto;
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:#00deff9; /*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 {}
8.html5CSS3有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?
HTML5 現在已經不是 SGML 的子集,主要是關于圖像,位置,存儲,地理定位等功能的增加。
繪畫 canvas 元素
用于媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉后數據不丟失;
sessionStorage 的數據在瀏覽器關閉后自動刪除
語意化更好的內容元素,比如 article、footer、header、nav、section
表單控件,calendar、date、time、email、url、search
CSS3實現圓角,陰影,對文字加特效,增加了更多的CSS選擇器 多背景 rgba
新的技術webworker, websockt, Geolocation
移除的元素
純表現的元素:basefont,big,center,font, s,strike,tt,u;
對可用性產生負面影響的元素:frame,frameset,noframes;
是IE8/IE7/IE6支持通過document.createElement方法產生的標簽,
可以利用這一特性讓這些瀏覽器支持HTML5新標簽,
瀏覽器支持新標簽后,還需要添加標簽默認的樣式:
當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
9.你怎么來實現頁面設計圖,你認為前端應該如何高質量完成工作? 一個滿屏 品 字布局 如何設計?
首先劃分成頭部、body、腳部;。。。。。
實現效果圖是最基本的工作,精確到2px;
與設計師,產品經理的溝通和項目的參與
做好的頁面結構,頁面重構和用戶體驗
處理hack,兼容、寫出優美的代碼格式
針對服務器的優化、擁抱 HTML5。
10.常使用的庫有哪些?常用的前端開發工具?開發過什么應用或組件?
使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery,超過91%。
輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
(理解這些框架的功能、性能、設計原理)
Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
城市選擇插件,汽車型號選擇插件、幻燈片插件。彈出層。(寫過開源程序,加載器,js引擎更好)
JavaScript原型,原型鏈 ? 有什么特點?
原型對象也是普通的對象,是對象一個自帶隱式的 proto 屬性,原型也有可能有自己的原型,如果一個原型對象的原型不為null的話,我們就稱之為原型鏈。
原型鏈是由一些用來繼承和共享屬性的對象組成的(有限的)對象鏈。
JavaScript的數據對象有那些屬性值?
writable:這個屬性的值是否可以改。
configurable:這個屬性的配置是否可以刪除,修改。
enumerable:這個屬性是否能在for…in循環中遍歷出來或在Object.keys中列舉出來。
value:屬性值。
當我們需要一個屬性的時,Javascript引擎會先看當前對象中是否有這個屬性, 如果沒有的話,就會查找他的Prototype對象是否有這個屬性。
function clone(proto) {
function Dummy() { }
Dummy.prototype = proto;
Dummy.prototype.constructor = Dummy;
return new Dummy(); //等價于Object.create(Person);
} function object(old) { function F() {}; F.prototype = old; return new F(); } var newObj = object(oldObject);
12.列出display的值,說明他們的作用。position的值, relative和absolute定位原點是?
block 象塊類型元素一樣顯示。
缺省值。向行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示,但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示,并添加樣式列表標記。
*absolute
生成絕對定位的元素,相對于 static 定位以外的第一個父元素進行定位。
*fixed (老IE不支持)
生成絕對定位的元素,相對于瀏覽器窗口進行定位。
*relative
生成相對定位的元素,相對于其正常位置進行定位。
static 默認值。沒有定位,元素出現在正常的流中
*(忽略 top, bottom, left, right z-index 聲明)。
inherit 規定從父元素繼承 position 屬性的值。
13.頁面重構怎么操作?
編寫 CSS、讓頁面結構更合理化,提升用戶體驗,實現良好的頁面效果和提升性能。
14.語義化的理解?
html語義化就是讓頁面的內容結構化,便于對瀏覽器、搜索引擎解析;
在沒有樣式CCS情況下也以一種文檔格式顯示,并且是容易閱讀的。
搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重,利于 SEO。
使閱讀源代碼的人對網站更容易將網站分塊,便于閱讀維護理解。
15.HTML5的離線儲存?
localStorage 長期存儲數據,瀏覽器關閉后數據不丟失;
sessionStorage 數據在瀏覽器關閉后自動刪除。
16.為什么要初始化CSS樣式。
因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。 當然,初始化樣式會對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中新增加的很多標簽(如:、
18.absolute的containing block計算方式跟正常流有什么不同?
19.position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣?
20.對BFC規范的理解?(W3C CSS 2.1 規范中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關 系和相互作用。)
21.iframe有那些缺點?
*iframe會阻塞主頁面的Onload事件; *iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的并行加載。 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是通過javascript 動態給iframe添加src屬性值,這樣可以可以繞開以上兩個問題。
22.css定義的權重
以下是權重的規則:標簽的權重為1,class的權重為10,id的權重為100,以下例子是演示各種定義的權重值:
/權重為1/
div{
}
/權重為10/
.class1{
}
/權重為100/
}
/權重為100+1=101/
}
/權重為10+1=11/
.class1 div{
}
/權重為10+10+1=21/
.class1 .class2 div{
}
如果權重相同,則最后定義的樣式會起作用,但是應該避免這種情況出現
23.eval是做什么的?
它的功能是把對應的字符串解析成JS代碼并運行;
避免使用eval,不安全,非常耗性能(2次,一次解析成js語句,一次執行)。
23.寫一個通用的事件偵聽器函數
`// event(事件)工具集,來源:https://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.removeEnentListener) { element.removeEnentListener(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; }
};
24.99%的網站都需要被重構是那本書上寫的?
網站重構:應用web標準進行設計(第2版)
25.什么叫優雅降級和漸進增強?
優雅降級:Web站點在所有新式瀏覽器中都能正常工作,如果用戶使用的是老式瀏覽器,則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題,針對不同版本的IE的hack實踐過優雅降級了,為那些無法支持功能的瀏覽器增加候選方案,使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效.
漸進增強:從被所有瀏覽器支持的基本功能開始,逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時,它們會自動地呈現出來并發揮作用。
26.Node.js的適用場景
高并發、聊天、實時消息推送
27.WEB應用從服務器主動推送Data到客戶端有那些方式?
html5 websoket WebSocket通過Flash XHR長時間連接 XHR Multipart Streaming 不可見的Iframe