IE: trident內核 php
Firefox:gecko內核 css
Safari:webkit內核html
Opera:之前是presto內核,Opera現已改用Google Chrome的Blink內核前端
Chrome:Blink(基於webkit,Google與Opera Software共同開發) web
<!DOCTYPE> 聲明位於文檔最前面的位置,處於<html>標籤以前。此標籤可告知瀏覽器文檔使用哪一種HTML規範。(重點:告訴瀏覽器按照何種規範解析頁面)面試
答案:從IE6開始,引入了Standards模式,標準模式中,瀏覽器嘗試給符合標準的文檔在規範上的正確處理達到在指定瀏覽器中的程度。數據庫
在IE6以前CSS還不夠成熟,因此IE5等以前的瀏覽器對CSS的支持不好,IE6將對CSS提供更好的支持,然而這時的問題就來了,由於有不少頁面是基於舊的佈局方式寫的,而若是IE6支持CSS則將令這些頁面顯示不正常,如何在即保證不破壞現有頁面,又提供新的渲染機制呢?跨域
在寫程序時咱們也會常常遇到這樣的問題,如何保證原來的接口不變,又提供更強大的功能,尤爲是新功能不兼容舊功能時。遇到這種問題時的一個常見作法是增長參數和分支,即當某個參數爲真時,咱們就使用新功能,而若是這個參數不爲真時,就使用舊功能,這樣就能不破壞原有的程序,又提供新功能。IE6也是相似這樣作的,它將DTD當成了這個「參數」,由於之前的頁面你們都不會去寫DTD,因此IE6就假定 若是寫了DTD,就意味着這個頁面將採用對CSS支持更好的佈局,而若是沒有,則採用兼容以前的佈局方式。這就是Quirks模式(怪癖模式,詭異模式,怪異模式)。瀏覽器
區別:整體會有佈局、樣式解析和腳本執行三個方面的區別。緩存
盒模型:在W3C標準中,若是設置一個元素的寬度和高度,指的是元素內容的寬度和高度,而在Quirks 模式下,IE的寬度和高度還包含了padding和border。
設置行內元素的高寬:在Standards模式下,給<span>等行內元素設置wdith和height都不會生效,而在quirks模式下,則會生效。
設置百分比的高度:在standards模式下,一個元素的高度是由其包含的內容來決定的,若是父元素沒有設置百分比的高度,子元素設置一個百分比的高度是無效的用margin:0 auto設置水平居中:使用margin:0 auto在standards模式下可使元素水平居中,但在quirks模式下卻會失效。
改版的時候更方便 只要改css文件。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易於優化(seo)搜索引擎更友好,排名更容易靠前。
alt:爲不能顯示圖像時顯示出來的提示文本。title:鼠標移入時顯示的提示文本
strong:粗體強調標籤,強調,表示內容的重要性,em:斜體強調標籤,更強烈強調,表示內容的強調點
漸進加強:針對低版本瀏覽器進行構建頁面,保證最基本的功能,而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級:一開始就構建完整的功能,而後再針對低版本瀏覽器進行兼容。
區別:優雅降級是從複雜的現狀開始,並試圖減小用戶體驗的供給,而漸進加強則是從一個很是基礎的,可以起做用的版本開始,並不斷擴充,以適應將來環境的須要。
「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段,並把測試對象限定爲主流瀏覽器(如 IE、Mozilla 等)的前一個版本。在這種設計範例下,舊版的瀏覽器被認爲僅能提供「簡陋卻無妨」的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點,所以除了修復較大的錯誤以外,其它的差別將被直接忽略。
「漸進加強」觀點則認爲應關注於內容自己。內容是咱們創建網站的誘因。有的網站展現它,有的則收集它,有的尋求,有的操做,還有的網站甚至會包含以上的種種,但相同點是它們全都涉及到內容。這使得「漸進加強」成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持」策略的緣由所在。
(無標準答案)網頁標準和標準制定機構都是爲了能讓web發展的更‘健康’,開發者遵循統一的標準,下降開發難度,開發成本,SEO也會更好作,也不會由於濫用代碼致使各類BUG、安全問題,最終提升網站易用性。
sessionStorage用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲,除非主動刪除數據,不然數據是永遠不會過時的。
Web Storage的概念和cookie類似,區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的,而且每次你請求一個新的頁面的時候Cookie都會被髮送過去,這樣無形中浪費了帶寬,另外cookie還須要指定做用域,不能夠跨域調用。除此以外,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie須要前端開發者本身封裝setCookie,getCookie。可是Cookie也是不能夠或缺的:cookie的做用是與服務器進行交互,做爲HTTP規範的一部分而存在 ,而Web Storage僅僅是爲了在本地「存儲」數據而生。
src用於替換當前元素,href用於在當前文檔和引用資源之間確立聯繫。
src是source的縮寫,指向外部資源的位置,指向的內容將會嵌入到文檔中當前標籤所在位置;在請求src資源時會將其指向的資源下載並應用到文檔內,例如js腳本,img圖片和frame等元素。當瀏覽器解析到該元素時,會暫停其餘資源的下載和處理,直到將該資源加載、編譯、執行完畢,圖片和框架等元素也如此,相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。
href是Hypertext Reference的縮寫,指向網絡資源所在位置,創建和當前元素(錨點)或當前文檔(連接)之間的連接,若是咱們在文檔中添加
<link href="common.css" rel="stylesheet"/>那麼瀏覽器會識別該文檔爲css文件,就會並行下載資源而且不會中止對當前文檔的處理。這也是爲何建議使用link方式來加載css,而不是使用@import方式。
png-8,png-24,jpeg,gif,svg。
可是上面的那些都不是面試官想要的最後答案。面試官但願聽到是Webp,Apng。(是否有關注新技術,新鮮事物)
科普一下Webp:WebP格式,谷歌(google)開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3,並能節省大量的服務器帶寬資源和數據空間。Facebook Ebay等知名網站已經開始測試並使用WebP格式。在質量相同的狀況下,WebP格式圖像的體積要比JPEG格式圖像小40%。
Apng:全稱是「Animated Portable Network Graphics」, 是PNG的位圖動畫擴展,能夠實現png格式的動態圖片效果。04年誕生,但一直得不到各大瀏覽器廠商的支持,直到日前獲得 iOS safari 8的支持,有望代替GIF成爲下一代動態圖標準。
微格式是一種讓機器可讀的語義化XHTML詞彙的集合,是結構化數據的開放標準。是爲特殊應用而制定的特殊格式。
優勢:將智能數據添加到網頁上,讓網站內容在搜索引擎結果界面能夠顯示額外的提示。
答案:dns緩存,cdn緩存,瀏覽器緩存,服務器緩存。
圖片懶加載,在頁面上的未可視區域能夠添加一個滾動條事件,判斷圖片位置與瀏覽器頂端的距離與頁面的距離,若是前者小於後者,優先加載。
若是爲幻燈片、相冊等,可使用圖片預加載技術,將當前展現圖片的前一張和後一張優先下載。
若是圖片爲css圖片,可使用CSSsprite,SVGsprite,Iconfont、Base64等技術。
若是圖片過大,可使用特殊編碼的圖片,加載時會先加載一張壓縮的特別厲害的縮略圖,以提升用戶體驗。
若是圖片展現區域小於圖片的真實大小,則因在服務器端根據業務須要先行進行圖片壓縮,圖片壓縮後大小與展現一致。
去掉或樣式丟失的時候能讓頁面呈現清晰的結構:
html自己是沒有表現的,咱們看到例如<h1>是粗體,字體大小2em,加粗;<strong>是加粗的,不要認爲這是html的表現,這些其實html默認的css樣式在起做用,因此去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是語義化的HTML結構的優勢,可是瀏覽器都有有默認樣式,默認樣式的目的也是爲了更好的表達html的語義,能夠說瀏覽器的默認樣式和語義化的HTML結構是不可分割的。
屏幕閱讀器(若是訪客有視障)會徹底根據你的標記來「讀」你的網頁.
例如,若是你使用的含語義的標記,屏幕閱讀器就會「逐個拼出」你的單詞,而不是試着去對它完整發音.
PDA、手機等設備可能沒法像普通電腦的瀏覽器同樣來渲染網頁(一般是由於這些設備對CSS的支持較弱),使用語義標記能夠確保這些設備以一種有意義的方式來渲染網頁.理想狀況下,觀看設備的任務是符合設備自己的條件來渲染網頁.
語義標記爲設備提供了所需的相關信息,就省去了你本身去考慮全部可能的顯示狀況(包括現有的或者未來新的設備).例如,一部手機能夠選擇使一段標記了標題的文字以粗體顯示.而掌上電腦可能會以比較大的字體來顯示.不管哪一種方式一旦你對文本標記爲標題,您就能夠確信讀取設備將根據其自身的條件來合適地顯示頁面.
搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重,過去你可能尚未考慮搜索引擎的爬蟲也是網站的「訪客」,但如今它們他們其實是極其寶貴的用戶.沒有他們的話,搜索引擎將沒法索引你的網站,而後通常用戶將很難過來訪問.
你的頁面是否對爬蟲容易理解很是重要,由於爬蟲很大程度上會忽略用於表現的標記,而只注重語義標記.
所以,若是頁面文件的標題被標記,而不是,那麼這個頁面在搜索結果的位置可能會比較靠後.除了提高易用性外,語義標記有利於正確使用CSS和JavaScript,由於其自己提供了許多「鉤鉤」來應用頁面的樣式與行爲.
SEO主要仍是靠你網站的內容和外部連接的。
便於團隊開發和維護
W3C給咱們定了一個很好的標準,在團隊中你們都遵循這個標準,能夠減小不少差別化的東西,方便開發和維護,提升開發效率,甚至實現模塊化開發。
瞭解搜索引擎如何抓取網頁和如何索引網頁:你須要知道一些搜索引擎的基本工做原理,各個搜索引擎之間的區別,搜索機器人(SE robot 或叫 web crawler)如何進行工做,搜索引擎如何對搜索結果進行排序等等。
Meta標籤優化:主要包括主題(Title),網站描述(Description),和關鍵詞(Keywords)。還有一些其它的隱藏文字好比Author(做者),Category(目錄),Language(編碼語種)等。
如何選取關鍵詞並在網頁中放置關鍵詞:搜索就得用關鍵詞。關鍵詞分析和選擇是SEO最重要的工做之一。首先要給網站肯定主關鍵詞(通常在5個上下),而後針對這些關鍵詞進行優化,包括關鍵詞密度(Density),相關度(Relavancy),突出性(Prominency)等等。
瞭解主要的搜索引擎:雖然搜索引擎有不少,可是對網站流量起決定做用的就那麼幾個。好比英文的主要有Google,Yahoo,Bing等;中文的有百度,搜狗,有道等。不一樣的搜索引擎對頁面的抓取和索引、排序的規則都不同。還要了解各搜索門戶和搜索引擎之間的關係,好比AOL網頁搜索用的是Google的搜索技術,MSN用的是Bing的技術。
主要的互聯網目錄:Open Directory自身不是搜索引擎,而是一個大型的網站目錄,他和搜索引擎的主要區別是網站內容的收集方式不一樣。目錄是人工編輯的,主要收錄網站主頁;搜索引擎是自動收集的,除了主頁外還抓取大量的內容頁面。
按點擊付費的搜索引擎:搜索引擎也須要生存,隨着互聯網商務的愈來愈成熟,收費的搜索引擎也開始大行其道。最典型的有Overture和百度,固然也包括Google的廣告項目Google Adwords。愈來愈多的人經過搜索引擎的點擊廣告來定位商業網站,這裏面也大有優化和排名的學問,你得學會用最少的廣告投入得到最多的點擊。
搜索引擎登陸:網站作完了之後,別躺在那裏等着客人從天而降。要讓別人找到你,最簡單的辦法就是將網站提交(submit)到搜索引擎。若是你的是商業網站,主要的搜索引擎和目錄都會要求你付費來得到收錄(好比Yahoo要299美圓),可是好消息是(至少到目前爲止)最大的搜索引擎Google目前仍是免費,並且它主宰着60%以上的搜索市場。
連接交換和連接普遍度(Link Popularity):網頁內容都是以超文本(Hypertext)的方式來互相連接的,網站之間也是如此。除了搜索引擎之外,人們也天天經過不一樣網站之間的連接來Surfing(「衝浪」)。其它網站到你的網站的連接越多,你也就會得到更多的訪問量。更重要的是,你的網站的外部連接數越多,會被搜索引擎認爲它的重要性越大,從而給你更高的排名。
合理的標籤使用
(1)給父元素添加高度height,防止父元素沒法獲取高度的問題(防止父元素高度變爲0),只建議高度固定的佈局
(2)結尾處加空div標籤給 clear:both
(3)父級div定義 僞類 :after 和 zoom
div:after{
content:"";
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}
div{
zoom:1;
}複製代碼
(4) 父級div定義 overflow:hidden或auto
(5)(只作瞭解,不推薦使用)父級div 也一塊兒浮動
(6)(只作瞭解,不推薦使用)父級div定義 display:table
儘量少的使用無語義的標籤div和span;
在語義不明顯時,既可使用div或者p時,儘可能用p, 由於p在默認狀況下有上下間距,對兼容特殊終端有利;
不要使用純樣式標籤,如:b、font、u等,改用css設置。
須要強調的文本,能夠包含在strong或者em標籤中(瀏覽器預設樣式,能用CSS指定就不用他們),strong默認樣式是加粗(不要用b),em是斜體(不用i);
使用表格時,標題要用caption,表頭用thead,主體部分用tbody包圍,尾部用tfoot包圍。表頭和通常單元格要區分開,表頭用th,單元格用td;
表單域要用fieldset標籤包起來,並用legend標籤說明表單的用途;
每一個input標籤對應的說明文本都須要使用label標籤,而且經過爲input設置id屬性,在lable標籤中設置for來讓說明文本和相對應的input關聯起來。
<!DOCTYPE> 聲明位於文檔中的最前面的位置,處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。
嚴格模式:又稱標準模式,是指瀏覽器按照 W3C 標準解析代碼。
混雜模式:又稱怪異模式或兼容模式,是指瀏覽器用本身的方式解析代碼。
如何區分:瀏覽器解析時到底使用嚴格模式仍是混雜模式,與網頁中的 DTD 直接相關。
一、若是文檔包含嚴格的 DOCTYPE ,那麼它通常以嚴格模式呈現。
二、包含過渡 DTD 和 URI 的 DOCTYPE ,也以嚴格模式呈現,但有過渡 DTD 而沒有 URI (統一資源標識符,就是聲明最後的地址)會致使頁面以混雜模式呈現。
三、DOCTYPE 不存在或形式不正確會致使文檔以混雜模式呈現。
四、HTML5 沒有 DTD ,所以也就沒有嚴格模式與混雜模式的區別,HTML5 有相對寬鬆的語法,實現時,已經儘量大的實現了向後兼容。( HTML5 沒有嚴格和混雜之分)
<!DOCTYPE> 聲明不是 HTML 標籤;它是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令。
在 HTML 4.01 中,<!DOCTYPE> 聲明引用 DTD,由於 HTML 4.01 基於 SGML。DTD 規定了標記語言的規則,這樣瀏覽器才能正確地呈現內容。
HTML5 不基於 SGML,因此不須要引用 DTD。
經常使用的塊狀元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
經常使用的內聯元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
經常使用的內聯塊狀元素有:
<img>、<input>
知名的空元素: <br/> <hr/> <img/> <input/> <link/> <meta/>
不爲人知的是: <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
iframe是一種框架,也是一種很常見的網頁嵌入方式
iframe的優勢:
1.iframe可以原封不動的把嵌入的網頁展示出來。
2.若是有多個網頁引用iframe,那麼你只須要修改iframe的內容,就能夠實現調用的每個頁面內容的更改,方便快捷。
3.網頁若是爲了統一風格,頭部和版本都是同樣的,就能夠寫成一個頁面,用iframe來嵌套,能夠增長代碼的可重用。
4.若是遇到加載緩慢的第三方內容如圖標和廣告,這些問題能夠由iframe來解決。
iframe的缺點:
1.會產生不少頁面,不容易管理。
2.iframe框架結構有時會讓人感到迷惑,若是框架個數多的話,可能會出現上下、左右滾動條,會分散訪問者的注意力,用戶體驗度差。
3.代碼複雜,沒法被一些搜索引擎索引到,這一點很關鍵,如今的搜索引擎爬蟲還不能很好的處理iframe中的內容,因此使用iframe會不利於搜索引擎優化。
4.不少的移動設備(PDA 手機)沒法徹底顯示框架,設備兼容性差。
5.iframe框架頁面會增長服務器的http請求,對於大型網站是不可取的。
如今基本上都是用Ajax來代替iframe,因此iframe已經漸漸的退出了前端開發。
例子1: 點擊" 用戶名:" 就能夠定位光標到輸入框
<form><label for="myid "> 用戶名:</label>
<input type="text" id="myid" /></form>複製代碼
例子2: 點擊" 用戶名:" 或按鍵alt+1, 均可以定位光標到輸入框
<form>
<label for="myid" accesskey="1"> 用戶名:</label>
<input type="text" id="myid" tabindex="1" />
</form>複製代碼
總結:
FOR 屬性
功能:表示Label 標籤要綁定的HTML 元素,你點擊這個標籤的時候,所綁定的元素將獲取焦點。
用法:<Label FOR="InputBox"> 姓名</Label><input ID="InputBox" type="text"/>
ACCESSKEY 屬性
功能:表示訪問Label 標籤所綁定的元素的熱鍵,當您按下熱鍵,所綁定的元素將獲取焦點。
用法:<Label FOR="InputBox" ACCESSKEY="N"> 姓名</Label><input ID="InputBox" tabindex="N" type="text"/>
侷限性:accessKey 屬性所設置的快捷鍵不能與瀏覽器的快捷鍵衝突,不然將優先激活瀏覽器的快捷鍵。
HTML的輸入框能夠擁有自動完成的功能,當你往輸入框輸入內容的時候,瀏覽器會從你之前的同名輸入框的歷史記錄中查找出相似的內容並列在輸入框下面,這樣就不用所有輸入進去了,直接選擇列表中的項目就能夠了。但有時候咱們但願關閉輸入框的自動完成功能,例如當用戶輸入內容的時候,咱們但願使用AJAX技術從數據庫搜索並列舉而不是在用戶的歷史記錄中搜索。
關閉輸入框的自動完成功能有3種方法:
一、在IE的Internet選項菜單裏的內容--自動完成裏面設置
二、設置form的autocomplete爲"on"或者"off"來開啓或者關閉自動完成功能
三、設置輸入框的autocomplete爲"on"或者"off"來開啓或者關閉該輸入框的自動完成功能
<div style="height:1px;overflow:hidden;background:red"></div>複製代碼
1. b和strong的區別
盲人朋友使用閱讀設備閱讀網絡時:<strong>會重讀,<b>不會
二者雖然在網頁中顯示效果同樣,但實際目的不一樣。
<b>這個標籤對應 bold,即文本加粗,其目的僅僅是爲了加粗顯示文本,是一種樣式/風格需求;
<strong>這個標籤意思是增強字符的語氣,表示該文本比較重要,提醒讀者/終端注意。爲了達到這個目的,瀏覽器等終端將其加粗顯示;
總結:<b>爲了加粗而加粗,<strong>爲了標明重點而加粗,也能夠用其它方式來強調,好比下劃線,好比字體加大,好比紅色,等等,能夠經過css來改變strong的具體表現。
2. i和em的區別
一樣,I是Italic(斜體),而em是emphasize(強調)。
3. title與h1的聯繫:
從網站角度看,title 更重於網站信息。title 能夠直接告訴搜索引擎和用戶這個網站是關於什麼主題和內容的。
從文章角度看,h1則是用於歸納文章主題。用戶進入內容頁,想看到的固然就是文章的內容,h1文章標題就是最重要的。文章標題最好只有一個,多個h1會致使搜索引擎不知道這個頁面哪一個標題內容最重要,致使淡化這個頁面的標題和關鍵詞,起不到突出主題的效果。
區別:h1突出文章主題,面對用戶,更突出其視覺效果,突出網站標題或關鍵字用title。一篇文章,一個頁面最好只用一個h1,多個h1會稀釋主題。一個網站能夠有多個title,最好一個單頁用一個title,以便突出網站頁面主體信息,從seo看,title權重比h1高,適用性比h1廣。標記了h1的文字頁面給予的權重會比頁面內其餘權重高不少。一個好的網站是h1和title並存,既突出h1文章主題,又突出網站主題和關鍵字。達到雙重優化網站的效果。
<div contenteditable="true">
</div>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 400px;
min-height: 100px;
max-height: 300px;
_height: 100px; /* IE6 */
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;/* 超過最大的高度就出現滾動條 */
_overflow-y: visible;
}
</style>複製代碼
HTML 5 全局 contenteditable 屬性
<element contenteditable="value">複製代碼
值 | 描述 |
---|---|
true | 規定能夠編輯元素內容。 |
false | 規定沒法編輯元素內容。 |
classname | 繼承父元素的 contenteditable 屬性。 |