前端面試———HTML
1、常用那幾種瀏覽器測試？有哪些核心(Layout Engine)?
答：
(1) 瀏覽器：IE，Chrome，FireFox，Safari，Opera。
(2) 核心：Trident，Gecko，Presto，Webkit。
2、 說下行內元素和塊級元素的區別？行內塊元素的相容性使用？（IE8 以下）
答：
(1) 行內元素：會在水平方向排列，不能包含塊級元素，設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效。
塊級元素：各佔據一行，垂直方向排列。從新行開始結束接著一個斷行。
(2) 相容性：display:inline-block;*display:inline;*zoom:1;
- 談談浮動和清除浮動，清除浮動有哪些方式？比較好的方式是哪一種？
浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文件普通流的塊框上。
答：
(一)
（1）父級div定義height。
（2）結尾處加空div標籤clear:both。
（3）父級div定義偽類:after和zoom。
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto。
（6）父級div也浮動，需要定義寬度。
（7）父級div定義display:table。
（8）結尾處加br標籤clear:both。
(二) 比較好的是第3種方式，好多網站都這麼用。
4、box-sizing常用的屬性有哪些？分別有什麼作用？
答：
(1)box-sizing: content-box|border-box|inherit;
(2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素預設效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
5、Doctype作用？標準模式與相容模式各有什麼區別?
答：
(1) 告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。
(2) 標準模式的排版和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
6、HTML5 為什麼只需要寫<!DOCTYPE html> ？
答：
HTML5不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）。
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。
7、 頁面匯入樣式時，使用link和@import有什麼區別？
答：
（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，只能用於載入CSS;
（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題。
引入方式3種：行內新增定義style屬性值，頁面頭部內內嵌呼叫和外鏈呼叫，
區別：
1.link是xhtml標籤，除了載入css外，還可以定義RSS等其他事務，@import只能載入CSS
2.link引用CSS時候，頁面載入的時候同時載入，@import需要頁面網頁完全載入後加載
3.link是XHTML標籤，沒有相容問題，@import是在CSS2.1提出的，低版本的瀏覽器不支援。
4.link支援使用javascript控制DOM去改變樣式，但是@import不支援。
8、介紹一下你對瀏覽器核心的理解？
答：
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。
JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎。
9、html5有哪些新特性？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
答：
(一)
HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
(4)sessionStorage 的資料在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控制元件，calendar、date、time、email、url、search;
(7)新的技術webworker, websocket, Geolocation;
(二)
IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
瀏覽器支援新標籤後，還需要新增標籤預設的樣式。
當然也可以直接使用成熟的框架、比如html5shim，
支援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宣告\新增的結構元素\功能元素
10、簡述一下你對HTML語義化的理解？
答：
用正確的標籤做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
即使在沒有樣式CSS情況下也以一種文件格式顯示，並且是容易閱讀的;
搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
11、position的值， relative和absolute分別是相對於誰進行定位的？
absolute :生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。
fixed （老IE不支援）生成絕對定位的元素，通常相對於瀏覽器視窗或 frame 進行定位。
relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。
static 預設值。沒有定位，元素出現在正常的流中
sticky 生成粘性定位的元素，容器的位置根據正常文件流計算得出
12、 什麼叫優雅降級和漸進增強？
答：
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果使用者使用的是老式瀏覽器，則程式碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型佈局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支援功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效。
漸進增強：從被所有瀏覽器支援的基本功能開始，逐步地新增那些只有新式瀏覽器才支援的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支援時，它們會自動地呈現出來併發揮作用。
13、display:none和visibility:hidden的區別？
display:none隱藏對應的元素，在文件佈局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在。
visibility:hidden隱藏對應的元素，但是在文件佈局中仍保留原來的空間。
CSS中link 和@import的區別是？
(1) link屬於HTML標籤，而@import是CSS提供的;
(2)頁面被載入的時，link會同時被載入，而@import被引用的CSS會等到引用它的CSS檔案被載入完再載入;
(3) import只在IE5以上才能識別，而link是HTML標籤，無相容問題;
(4) link方式的樣式的權重 高於@import的權重.
14、position:absolute和float屬性的異同
共同點：對內聯元素設定float和absolute屬性，可以讓元素脫離文件流，並且可以設定其寬高。
不同點：float仍會佔據位置，absolute會覆蓋文件流中的其他元素。
15、介紹一下box-sizing屬性？
box-sizing屬性主要用來控制元素的盒模型的解析模式。預設值是content-box。
content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設定width/height屬性指的是content部分的寬/高
border-box：讓元素維持IE傳統盒模型（IE6以下版本和IE6~7的怪異模式）。設定width/height屬性指的是border + padding + content
標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的佈局。
16、CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3新增偽類有那些？
1.id選擇器（ #myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div,h1,p）
4.相鄰選擇器（h1+p）
5.子選擇器（ul>li）
6.後代選擇器（lia）
7.萬用字元選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a:hover,li:nth-child）
17、CSS3有哪些新特性？
CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba在CSS3中唯一引入的偽元素是::selection.媒體查詢，多欄佈局border-imageCSS3中新增了一種盒模型計算方式：box-sizing。盒模型預設的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的區別如下：
佈局所佔寬度Width：
Width = width + padding-left + padding-right + border-left + border-right
佈局所佔高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
佈局所佔寬度Width：
Width=width(包含padding-left+padding-right) +border-top+border-bottom
佈局所佔高度Height:
Height=height(包含padding-top+padding-bottom) +border-top+border-bottom
border-box
佈局所佔寬度Width：
Width=width(包含padding-left+padding-right+border-left+border-right)
佈局所佔高度Height:
Height=height(包含padding-top+padding-bottom+border-top+border-bottom)
18、對BFC規範的理解？
BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裡面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的margin會發生摺疊。
（W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其他元素的關係和相互作用。（1）去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構（2）有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；（3）方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；（4）便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。20、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
（1）<!DOCTYPE> 宣告位於文件中的最前面，處於 <html> 標籤之前。告知瀏覽器以何種模式來渲染文件。
（2）嚴格模式的排版和 JS 運作模式是 以該瀏覽器支援的最高標準執行。
（3）在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。
該標籤可宣告三種 DTD 型別，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文件。
HTML 4.01規定了三種文件型別：Strict、Transitional 以及 Frameset。
XHTML 1.0規定了三種 XML 文件型別：Strict、Transitional 以及 Frameset。
Standards（標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks
（包容）模式（也就是鬆散呈現模式或者相容模式）用於呈現為傳統瀏覽器而設計的網頁。
區別：（1）所有的標記都必須要有一個相應的結束標記（2）所有標籤的元素和屬性的名字都必須使用小寫（3）所有的XML標記都必須合理巢狀（4）所有的屬性必須用引號""括起來（5）把所有<和&特殊符號用編碼表示（6）給所有屬性賦一個值（7）不要在註釋內容中使“--”圖片必須有說明文字
png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段指令碼處理.
瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一。IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。
浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設定了浮動，同時又設定了margin-left或margin-right，margin值會加倍。）#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識別*/
}怪異模式問題：漏寫DTD宣告，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。為避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD宣告的好習慣。現在可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的程式碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。
24、ie各版本和chrome可以並行下載多少個資源
IE6 兩個併發，iE7升級之後的6個併發，之後版本也是6個
Firefox，chrome也是6個
25、談談你對重構的理解
網站重構：在不改變外部行為的前提下，簡化結構、新增可讀性，而在網站前端保持一致的行為。也就是說是在不改變UI的情況下，對網站進行優化，
在擴充套件的同時保持一致的UI。
對於傳統的網站來說重構通常是：表格(table)佈局改為DIV+CSS使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)對於移動平臺的優化針對於SEO進行優化深層次的網站重構應該考慮的方面減少程式碼間的耦合讓程式碼保持彈性嚴格按規範編寫程式碼設計可擴充套件的API代替舊有的框架、語言(如VB)增強使用者體驗通常來說對於速度的優化也包含在重構中壓縮JS、CSS、image等前端資源(通常是由伺服器來解決)程式的效能優化(如資料讀寫)採用CDN來加速資源載入對於JS DOM的優化
26、什麼樣的前端程式碼是好的
高複用低耦合，這樣檔案小，好維護，而且好擴充套件。
27、對web標準以及w3c的理解和認識
答:標籤閉合，標籤小寫，不亂巢狀，提高搜尋機器人搜尋機率。使用外鏈css和js指令碼，結構行為表現分離，內容能被更多廣泛的裝置所訪問,更少的程式碼和元件，容易維護，改版方便，不需要變動頁面內容。
28、.Html和xhtml有什麼區別?
html是一種基本的web網頁設計語言，xhtml是一個基於XML的置標語言。
最主要的不同:
XHTML元素必須正確的被巢狀，元素必須關閉，標籤必須小寫，必須有根元素。
29、.嚴格模式和混雜模式的區分，以及如何觸發這2種模式?
嚴格模式就是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD，不允許使用任何表現層的語法，如
混雜模式是一種向後相容的解析方法。
觸發標準模式或者說嚴格模式很簡單，就是Html前申明正確的DTD，出發混雜模式可以在html文件開始不宣告DTD，或者在DOCTYPE前加入XML宣告
30、.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:br、meta、hr、link、input、img
31、CSS選擇符有哪些?優先順序演算法如何計算?內聯和Important哪個優先順序高
回答：CSS選擇符有類選擇符，屬性選擇符，ID選擇符，優先順序演算法是基於特殊性值進行計算的。分別如下：ID屬性 0.1.0.0
類屬性選擇器，屬性選擇器，偽類 0.0.1.0 元素選擇符，偽元素選擇符 0.0.0.1
通配選擇器對特殊性沒有任何貢獻值。
important優先順序高
32.前端頁面有哪三層構成，分別是什麼，作用是什麼?
結構層：html 表示層:css 行為層：js
8.頁面的哪些瀏覽器你測試過，分別核心是什麼?
IE(IE核心)，火狐(Gecko),谷歌(webkit),opera(presto)
9.img標籤上的title和alt屬性區別是什麼?
alt是當圖片不能正常顯示的時候，用文字代替
title該屬性提供資訊
GET：一般用於資訊獲取，使用URL傳遞引數，對所傳送資訊的數量也有限制，一般在2000個字元
POST：一般用於修改伺服器上的資源，對所傳送的資訊沒有限制。
GET方式需要使用Request.QueryString來取得變數的值，而POST方式通過Request.Form來獲取變數的值，
也就是說Get是通過位址列來傳值，而Post是通過提交表單來傳值。
然而，在以下情況中，請使用 POST 請求：無法使用快取檔案（更新伺服器上的檔案或資料庫）向伺服器傳送大量資料（POST 沒有資料量限制）傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠- HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
在使用者沒有與因特網連線時，可以正常訪問站點或應用，在使用者與因特網連線時，更新使用者機器上的快取檔案。
原理：HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術)，通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示。
如何使用：
（1）頁面頭部像下面一樣加入一個manifest的屬性；
（2）在cache.manifest檔案的編寫離線儲存的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
（3）在離線狀態時，操作window.applicationCache進行需求實現。
- 瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的
線上的情況下，瀏覽器發現Html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問APP，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過APP並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。 離線的情況下，瀏覽器就直接使用離線儲存的資源。
- xhtml和html有什麼區別
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：①XHTML 元素必須被正確地巢狀；②XHTML元素必須被關閉；③標籤名必須用小寫字母；④XHTML 文件必須擁有根元素。
- css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
38、寫出幾種IE6 BUG的解決方法
①雙邊距BUG float引起的 使用display
②3畫素問題 使用float引起的 使用dislpay:inline -3px
③超連結hover 點選後失效 使用正確的書寫順序 link visited hover active
④Ie z-index問題 給父級新增position:relative
⑤Png 透明 使用js程式碼 改
⑥Min-height 最小高度 ！Important 解決’
⑦select 在ie6下遮蓋 使用iframe巢狀
⑧為什麼沒有辦法定義1px左右的寬度容器（IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
39、標籤上title與alt屬性的區別是什麼?
Alt當圖片不顯示時用文字代表。Title為該屬性提供資訊。
40、描述css reset的作用和用途。
Reset重置瀏覽器的CSS預設屬性瀏覽器的品種不同，樣式不同，然後重置，讓他們統一。
41、解釋css sprites，如何使用。
CSS精靈把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量。
42、瀏覽器標準模式和怪異模式之間的區別是什麼?
盒子模型，渲染模式的不同；
使用 window.top.document.compatMode 可顯示為什麼模式。
43、你如何對網站的檔案和資源進行優化?期待的解決方案包括：
檔案合併、檔案最小化/檔案壓縮、使用CDN託管，快取的使用。
44、什麼是語義化的HTML?
直觀的認識標籤，對於搜尋引擎的抓取有好處。
45、清除浮動的幾種方式，各自的優缺點
①使用空標籤清除浮動 clear:both（理論上能清楚任何標籤，增加無意義的標籤）；
②使用overflow:auto（空標籤元素清除浮動而不得不增加無意程式碼的弊端,,使用zoom:1用於相容IE）；
③是用afert偽元素清除浮動(用於非IE瀏覽器)。
- iframe有那些缺點？
- 頁面樣式除錯麻煩，出現多個滾動條；
（2）瀏覽器的後退按鈕失效；
（3）過多會增加伺服器的HTTP請求；
（4）小型的移動裝置無法完全顯示框架；
（5）產生多個頁面，不易管理；
（6）不容易列印；
（7）程式碼複雜，無法被一些搜尋引擎解讀。
- HTML5的form如何關閉自動完成功能
HTML的輸入框可以擁有自動完成的功能，當你往輸入框輸入內容的時候，瀏覽器會從你以前的同名輸入框的歷史記錄中查找出類似的內容並列在輸入框下面，這樣就不用全部輸入進去了，直接選擇列表中的專案就可以了。
但有時候我們希望關閉輸入框的自動完成功能，例如當用戶輸入內容的時候，我們希望使用AJAX技術從資料庫搜尋並列舉而不是在使用者的歷史記錄中搜索。
關閉輸入框的自動完成功能有3種方法：
（1）在IE的Internet選項選單裡的內容--自動完成裡面設定
（2）設定Form的autocomplete為"on"或者"off"來開啟或者關閉自動完成功能
（3）設定輸入框的autocomplete為"on"或者"off"來開啟或者關閉該輸入框的自動完成功能
測試程式碼：（在每個form輸入文字然後提交，然後再回來看看能否自動完成，注意要提交後才能有歷史記錄，才可能自動完成；提交後頁面可能出錯，不用管它，後退回去即可）
xml 程式碼
開啟自動完成功能的Form<br>
<form name="form1" autocomplete="on">
開啟自動完成功能的輸入框
<input type="text" autocomplete="on" name="txtOff1"><br>
關閉自動完成功能的輸入框
<input type="text" autocomplete="off" name="txtOn1"><br>
<input type="submit" value="提交"><br>
</form>
關閉自動完成功能的Form<br>
<form name="form1" autocomplete="off">
開啟自動完成功能的輸入框
<input type="text" autocomplete="on" name="txtOff1"><br>
關閉自動完成功能的輸入框
<input type="text" autocomplete="off" name="txtOn1"><br>
<input type="submit" value="提交"><br>
</form>
- 如何在頁面上實現一個圓形的可點選區域？
使用Dreamweaver製作熱點
49、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。
<div style="height:1px;overflow:hidden;background:black"></div>
50、tite與h1的區別、b與strong的區別、i與em的區別？
（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文章主題，又突出網站主題和關鍵字。達到雙重優化網站的效果。
1、常用那幾種瀏覽器測試？有哪些核心(Layout Engine)?
答：
(1) 瀏覽器：IE，Chrome，FireFox，Safari，Opera。
(2) 核心：Trident，Gecko，Presto，Webkit。
2、 說下行內元素和塊級元素的區別？行內塊元素的相容性使用？（IE8 以下）
答：
(1) 行內元素：會在水平方向排列，不能包含塊級元素，設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效。
塊級元素：各佔據一行，垂直方向排列。從新行開始結束接著一個斷行。
(2) 相容性：display:inline-block;*display:inline;*zoom:1;
- 談談浮動和清除浮動，清除浮動有哪些方式？比較好的方式是哪一種？
浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文件普通流的塊框上。
答：
(一)
（1）父級div定義height。
（2）結尾處加空div標籤clear:both。
（3）父級div定義偽類:after和zoom。
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto。
（6）父級div也浮動，需要定義寬度。
（7）父級div定義display:table。
（8）結尾處加br標籤clear:both。
(二) 比較好的是第3種方式，好多網站都這麼用。
4、box-sizing常用的屬性有哪些？分別有什麼作用？
答：
(1)box-sizing: content-box|border-box|inherit;
(2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框(元素預設效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
5、Doctype作用？標準模式與相容模式各有什麼區別?
答：
(1) 告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。
(2) 標準模式的排版和JS運作模式都是以該瀏覽器支援的最高標準執行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。
6、HTML5 為什麼只需要寫<!DOCTYPE html> ？
答：
HTML5不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）。
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。
7、 頁面匯入樣式時，使用link和@import有什麼區別？
答：
（1）link屬於XHTML標籤，除了載