整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java(100G) Python(80G) 大數據 區塊鏈 測試 PPT JS(40g+300教程) HTML 簡歷 領取相關學習資料！
一、HTML
1、<image>標簽上title屬性與alt屬性的區別是什么？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。
這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》
2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體
加粗：<b>、<strong>
下標：<sub>
居中：<center>
字體：<font>、<basefont>、參考《HTML標簽列表》
3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景
section：定義文檔中的一個章節
nav：定義只包含導航鏈接的章節
header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。
footer：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。
參考《HTML5 標簽列表》
4、請說說你對標簽語義化的理解？
a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構
b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器以何種模式來渲染文檔。
嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。
在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
6、你知道多少種Doctype文檔類型？
標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，
Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。
7、HTML與XHTML——二者有什么區別
a. XHTML 元素必須被正確地嵌套。
b. XHTML 元素必須被關閉。
c. 標簽名必須用小寫字母。
d. XHTML 文檔必須擁有根元素。
參考《XHTML 與 HTML 之間的差異》
8、html5有哪些新特性、移除了那些元素？
a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
b. 拖拽釋放(Drag and drop) API
c. 語義化更好的內容標簽（header,nav,footer,aside,article,section）
d. 音頻、視頻API(audio,video)
e. 畫布(Canvas) API
f. 地理(Geolocation) API
g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失
h. sessionStorage 的數據在頁面會話結束時會被清除
i. 表單控件，calendar、date、time、email、url、search
j. 新的技術webworker, websocket等
移除的元素：
a. 純表現的元素：basefont，big，center, s，strike，tt，u；
b. 對可用性產生負面影響的元素：frame，frameset，noframes；
9、iframe的優缺點？
優點：
a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題
b. iframe無刷新文件上傳
c. iframe跨域通信
缺點：
a. iframe會阻塞主頁面的Onload事件
b. 無法被一些搜索引擎索引到
c. 頁面會增加服務器的http請求
d. 會產生很多頁面，不容易管理。
參考《iframe的一些記錄》
10、Quirks模式是什么？它和Standards模式有什么區別？
在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：總體會有布局、樣式解析和腳本執行三個方面的區別。
a. 盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。
b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用
d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
11、請闡述table的缺點
a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。
b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td
c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂
d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。
e. 不夠語義
參考《為什么說table表格布局不好？》
12、簡述一下src與href的區別
src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置
href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接
公眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java Python 大數據 區塊鏈 測試 PPT JS HTML 簡歷 領取相關學習資料！
瀏覽器大戰
第一次瀏覽器大戰發生在上個世紀90年代，微軟發布了它的IE瀏覽器，和網景公司的Netscape Navigator瀏覽器大打出手。 ?
第二次瀏覽器大戰發生在20世紀。 ?
戰爭產物：Internet Explorer 9
元老級內核之一，由微軟開發，并于1997年10月首次在ie 4.0中使用，憑借其windows壟斷優勢，Trident市場占有率一直很高。然而壟斷并非，沒有競爭就沒有進步，長期以往，Trident內核一度停滯不前，更新緩慢，甚至一度與W3C標準脫節。2011年，從ie 9開始，Trident開始支持HTML5和CSS 3，因此我們也經常會看到有些網站在瀏覽時會提示用戶（在Internet Explorer 9.0+以上瀏覽效果最佳）。前端程序員做瀏覽器兼容一般也不再會考慮ie 8之前的瀏覽器了。
元老級內核之一，由Netscape公司Mozilla組織開發。1998年，Netscape在于IE瀏覽器競爭失利之后，成立了非正式組織Mozilla，由其開發新一代內核，后命名為“Gecko”。FireFox也是這班人開發出來了，因此這也就是Mozilla一直使用的內核。 Gecko的特點是代碼完全公開，因此其開發程度很高，全世界的程序員都可以為其編寫代碼，增加功能。
這是蘋果公司開發的內核，也是其旗下產品Ssfari瀏覽器使用的內核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎，分別是從KDE的KHTML和KJS衍生而來，它們都是自由軟件，在GPL條約下授權，同時支持BSD系統開發。 Chrome、360極速瀏覽器以及搜狗高速瀏覽器也使用Webkit作為內核（在腳本理解方面，Chorome使用自己研發的V8引擎）。
這是由Google和Opera Software開發的瀏覽器排版引擎，Google計算將這個渲染引擎作為Chromium計劃的一部分，并且在2013年4月公布了這一消息。這一渲染引擎是開源引擎Webkit中WebCore組件的一個分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用
由于各大主流瀏覽器由不同的廠家開發，所用的核心架構和代碼也很難重和，這就為各種莫名其妙的Bug(代碼錯誤）提供了溫床。再加上各大廠商出于自身利益考慮而設置的種種技術壁壘，都讓CSS應用起來比想象得要麻煩。瀏覽器的兼容問題是我們必須去克服的。
1)圖片有邊框BUG
當圖片加<a href=“#”></a>在IE上會出現邊框
Hack:給圖片加border:0;或者border:0 none;
2)圖片間隙
div中的圖片間隙BUG
描述：在div中插入圖片時，圖片會將div下方撐大大約三像素。
hack1:將</div>與<img>寫在一行上；
hack2:將<img>轉為塊狀元素，給<img>添加聲明：display:block;
3) 雙倍浮向（雙倍邊距）（只有IE6出現）
描述：當Ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界（margin）加倍顯示。
hack:給浮動元素添加聲明：display:inline;
4)默認高度（IE6、IE7）
描述：在IE6及以下版本中，部分塊元素擁有默認高度（在16px左右；）
hack1:給元素添加聲明：font-size:0;
hack2：給元素添加聲明：overflow:hidden;
5)表單元素對齊不一致
描述：表單元素行高對齊方式不一致
hack:給表單元素添加聲明：float:left;
6)按鈕元素默認大小不一
描述：各瀏覽器中按鈕元素大小不一致
hack1： 統一大小/（用a標記模擬）
hack2:input外邊套一個標簽，在這個標簽里寫按鈕的樣式，把input的邊框去掉。
hack3:如果這個按鈕是一個圖片，直接把圖片作為按鈕的背景圖即可。
7)鼠標指針bug
描述：cursor屬性的hand屬性值只有IE9以下瀏覽器識別，其它瀏覽器不識別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內核瀏覽器都識別該聲明。
hack: 如統一某元素鼠標指針形狀為手型，
應添加聲明：cursor:pointer cursor: ;
auto默認
crosshair加號
text文本
wait等待
help幫助
progress過程
inherit繼承
move移動
ne-resize向上或向右移動
pointer手形
8)透明屬性
兼容其他瀏覽器寫法：opacity:value;(value的取值范圍0-1; 例：opacity:0.5;)
IE瀏覽器寫法：filter:alpha(opacity=value);取值范圍 1-100(整數)
1.下劃線屬性過濾器
當在一個屬性前面增加了一個下劃線后，由于符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個聲明，但是在IE6及更低版本瀏覽器中會繼續解析這個規則。
語法：選擇符{_屬性：屬性值；}
2. !important
關鍵字過濾器 它表示所附加的聲明具有最高優先級的意思。但由于IE6及更低版本不能識別它， 我們可以利用IE6的這個Bug作為過濾器來兼容ＩＥ６和其它標準瀏覽器。
語法：選擇符{屬性：屬性值!important;}
3. *屬性過濾器
當在一個屬性前面增加了*后，該屬性只能被IE7瀏覽器識別，其它瀏覽器混略該屬 性的作用。
語法：選擇符{*屬性：屬性值；}
4. ：IE版本識別；其它瀏覽器都不識別
語法：選擇符{屬性：屬性值;}
5. >5. \0 : IE8 及以上版本識別；其它瀏覽器都不識別
瀏覽器
瀏覽器大戰
第一次瀏覽器大戰發生在上個世紀90年代，微軟發布了它的IE瀏覽器，和網景公司的Netscape Navigator瀏覽器大打出手。
第二次瀏覽器大戰發生在20世紀。
戰爭產物：Internet Explorer 9
13年市場比重
14年市場比重
15年市場比重
17年市場比重
19年市場比重
Trident 代表作：IE
元老級內核之一，由微軟開發，并于1997年10月首次在ie 4.0中使用，憑借其windows壟斷優勢，Trident市場占有率一直很高。然而壟斷并非，沒有競爭就沒有進步，長期以往，Trident內核一度停滯不前，更新緩慢，甚至一度與W3C標準脫節。2011年，從ie 9開始，Trident開始支持HTML5和CSS 3，因此我們也經常會看到有些網站在瀏覽時會提示用戶（在Internet Explorer 9.0+以上瀏覽效果最佳）。前端程序員做瀏覽器兼容一般也不再會考慮ie 8之前的瀏覽器了。
Gecko 代表作：Mozilla
元老級內核之一，由Netscape公司Mozilla組織開發。1998年，Netscape在于IE瀏覽器競爭失利之后，成立了非正式組織Mozilla，由其開發新一代內核，后命名為“Gecko”。FireFox也是這班人開發出來了，因此這也就是Mozilla一直使用的內核。
Gecko的特點是代碼完全公開，因此其開發程度很高，全世界的程序員都可以為其編寫代碼，增加功能。
WebKit : 蘋果 & 谷歌舊版本
這是蘋果公司開發的內核，也是其旗下產品Ssfari瀏覽器使用的內核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎，分別是從KDE的KHTML和KJS衍生而來，它們都是自由軟件，在GPL條約下授權，同時支持BSD系統開發。Chrome、360極速瀏覽器以及搜狗高速瀏覽器也使用Webkit作為內核（在腳本理解方面，Chorome使用自己研發的V8引擎）。
Blink : 代表作：谷歌 & 歐鵬
這是由Google和Opera Software開發的瀏覽器排版引擎，Google計算將這個渲染引擎作為Chromium計劃的一部分，并且在2013年4月公布了這一消息。這一渲染引擎是開源引擎Webkit中WebCore組件的一個分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用
Presto ( Opera前內核 已經廢棄 )
為什么會出現瀏覽器兼容問題？
由于各大主流瀏覽器由不同的廠家開發，所用的核心架構和代碼也很難重和，這就為各種莫名其妙的Bug(代碼錯誤）提供了溫床。再加上各大廠商出于自身利益考慮而設置的種種技術壁壘，都讓CSS應用起來比想象得要麻煩。瀏覽器的兼容問題是我們必須去克服的。
CSS Bug、CSS Hack和Filter
CSS Bug: CSS樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug.
CSS Hack: CSS中，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因為它們都屬于個人對CSS代碼的非官方的修改，或非官方的補丁。有些人更喜歡使用patch(補丁)來描述這種行為。
Filter:表示過濾器的意思，它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法。本質上講，Filter是一種用來過濾不同瀏覽器的Hack類型。
IE低版本常見CSS解析Bug及hack
1)、圖片有邊框BUG
當圖片加在IE上會出現邊框
Hack:給圖片加border:0;或者border:0 none;
2)、圖片間隙
div中的圖片間隙BUG
描述：在div中插入圖片時，圖片會將div下方撐大大約三像素。
hack1:將與寫在一行上；
hack2:將轉為塊狀元素，給添加聲明：display:block;
3)、雙倍浮向（雙倍邊距）（只有IE6出現）
描述：當Ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界（margin）加倍顯示。
hack:給浮動元素添加聲明：display:inline;
4)、默認高度（IE6、IE7）
描述：在IE6及以下版本中，部分塊元素擁有默認高度（在16px左右；）
hack1:給元素添加聲明：font-size:0;
hack2：給元素添加聲明：overflow:hidden;
非IE BUG
5)、表單元素對齊不一致
描述：表單元素行高對齊方式不一致
hack:給表單元素添加聲明：float:left;
6)、按鈕元素默認大小不一
描述：各瀏覽器中按鈕元素大小不一致
hack1：統一大小/（用a標記模擬）
hack2:input外邊套一個標簽，在這個標簽里寫按鈕的樣式，把input的邊框去掉。
hack3:如果這個按鈕是一個圖片，直接把圖片作為按鈕的背景圖即可。
7)、鼠標指針bug
描述：cursor屬性的hand屬性值只有IE9以下瀏覽器識別，其它瀏覽器不識別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內核瀏覽器都識別該聲明。
hack: 如統一某元素鼠標指針形狀為手型， 應添加聲明：cursor:pointer cursor: ;
auto默認
crosshair加號
text文本
wait等待
help幫助
progress過程
inherit繼承
move移動
ne-resize向上或向右移動
pointer手形
8)、透明屬性
兼容其他瀏覽器寫法：opacity:value;(value的取值范圍0-1;
例：opacity:0.5;)
IE瀏覽器寫法：filter:alpha(opacity=value);取值范圍 1-100(整數)
過濾器
1.下劃線屬性過濾器 當在一個屬性前面增加了一個下劃線后，由于符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個聲明，但是在IE6及更低版本瀏覽器中會繼續解析這個規則。
語法：選擇符{_屬性：屬性值；}
2.!important關鍵字過濾器
它表示所附加的聲明具有最高優先級的意思。但由于IE6及更低版本不能識別它， 我們可以利用IE6的這個Bug作為過濾器來兼容ＩＥ６和其它標準瀏覽器。
語法：選擇符{屬性：屬性值!important;}
3.*屬性過濾器
當在一個屬性前面增加了*后，該屬性只能被IE7瀏覽器識別，其它瀏覽器混略該屬 性的作用。
語法：選擇符{*屬性：屬性值；}
4. ：IE版本識別；其它瀏覽器都不識 語法：選擇符{屬性：屬性值;}
5.>5.\0 : IE8 及以上版本識別；其它瀏覽器都不識別< : IE8 及以上版本識別；其它瀏覽器都不識別
- End -
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
