自己總結的html+css試題
1.Doctype作用? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
（1）<!DOCTYPE> 宣告位於文件中的最前面，處於 <html> 標籤之前。告知瀏覽器的解析器，用什麼文件型別 規範來解析這個文件。
（2）嚴格模式的排版和 JS 運作模式是以該瀏覽器支援的最高標準執行。
（3）在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。
2.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
（1）CSS規範規定，每個元素都有display屬性，確定該元素的型別，每個元素都有預設的display值，
比如div預設display屬性值為“block”，成為“塊級”元素；
span預設display屬性值為“inline”，是“行內”元素。
（2）行內元素有：a b span input select strong（強調的語氣）
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：
<br><hr><img><link><meta><embed>
3.CSS的盒子模型有幾種？各有什麼特點？
（1）兩種，IE 盒子模型、標準 W3C 盒子模型；
（2）標準盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).
IE盒模型：content部分包含了 border 和 pading;
4.link 和@import 的區別是?
（1）link屬於HTML標籤，而@import是CSS提供的;
（2）頁面被載入的時，link會同時被載入，而@import會等CSS被載入完再載入;
（3）import只在IE5以上才能識別，而link是HTML標籤，無相容問題;
（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> 元素的每個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
:enabled、:disabled 控制表單控制元件的禁用狀態。
:checked，單選框或複選框被選中。
6.如何居中div,如何居中一個浮動元素?
給div設定一個寬度，然後新增margin:0 auto屬性
div{width:200px;margin:0 auto;}
居中一個浮動元素
.div {
Width:500px ; height:300px;//高度可以不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
7.瀏覽器的核心分別是什麼? 經常遇到的瀏覽器的相容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？
1. IE瀏覽器的核心Trident、 Mozilla的Gecko、google的WebKit、Opera核心Presto；
2.瀏覽器預設的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會識別)漸進識別的方式，從總體中逐漸排除區域性。
3.首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
4.IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
解決方法:統一通過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.css屬性那些有繼承性？哪些沒有？
有繼承性的屬性：color ,font-size,font-weight
沒有繼承性的屬性：border,width,height
9.如果孩子都為浮動，父類會沒有高度，如何解決
解決方法：(1)給父類設定相應的高度
(2)建立一個孩子物件，設定清除浮動
(3) 設定父類為overflow：hidden
(4)用before和after動態新增
10.visibility和display 的隱藏有什麼區別？
display隱藏物件，會清空面積；visibility隱藏物件還會佔有以前的面積
11.偽類的寫作順序？
hover必須在link、visited之後，active必須在hover之後
Link,visited,hover,active
12.border和outline的區別
1.outlinte顯示在border之外
2.border會佔畫素，outline沒有面積
3.outline低版本瀏覽器不支援
13.iframe的缺點？如何解決？
1.iframe會影響頁面的onload（載入）事件
2.iframe和主頁共享連線池，而瀏覽器對相同域的連結有限制，所以影響頁面的並行載入
解決：使用時通過js動態呼叫給iframe新增src路徑，可以避免以上兩個問題
14.html5\CSS3有哪些新特性、移除了那些元素？
1.語意化更好的內容元素，比如 article、footer、header、nav
表單控制元件，date、time、email、url
CSS3實現圓角，陰影，對文字加特效，增加了更多的CSS選擇器， 多背景
2.center，font,u，frame，frameset
15.你怎麼來實現頁面設計圖，你認為前端應該如何高質量完成工作? 一個滿屏 品 字佈局 如何設計？
1.首先劃分成頭部、body、腳部.......
實現效果圖是最基本的工作，精確到2px；
與設計師，產品經理的溝通和專案的參與
做好的頁面結構，頁面重構和使用者體驗
處理hack，相容、寫出優美的程式碼格式
針對伺服器的優化、支援 HTML5標籤。
2.
<style>
*{padding: 0;margin: 0;}
.header{width: 100%;height: 300px;background-color: red;}
.left,.right{width: 50%;float: left;height: 300px;}
.left{background-color: green;}
.right{background-color: yellow;}
</style>
<div class="header">上</div>
<div class="left">左</div>
<div class="right">右</div>
16.常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或元件？
1.使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超過91%。
輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
（理解這些框架的功能、效能、設計原理）
2. WebStorm 、Eclipse、IETester、Photoshop、PhpStorm、MySQL。
3。 城市選擇外掛，汽車型號選擇外掛、幻燈片外掛。彈出層。（寫過開源程式，載入器，js引擎更好）
17.列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？
1.block 象塊型別元素一樣顯示。
none 預設值。向行內元素型別一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊型別元素一樣顯示。
list-item 象塊型別元素一樣顯示，並新增樣式列表標記。
2.absolute生成絕對定位的元素，相對於static以外的父元素進行定位。
fixed 生成絕對定位的元素，相對於瀏覽器視窗進行定位。
relative生成相對定位的元素，相對於其正常位置進行定位。
static 預設值。沒有定位，忽略top, bottom, left, right宣告。
inherit 規定從父元素繼承 position 屬性的值。
18.頁面重構怎麼操作？
編寫 CSS、讓頁面結構更合理化，提升使用者體驗，實現良好的頁面效果和提升效能。
19.如何理解語義化？
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜尋引擎解析；
在沒有樣式CCS情況下也以一種文件格式顯示，並且是容易閱讀的。
搜尋引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利於 SEO。
使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
20.為什麼要初始化CSS樣式？如何初始化？
1.因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
2.最簡單的初始化方法就是： * {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, \5b8b\4f53; }
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; }
Img{border:none}
21.描述一段語義的html程式碼吧
HTML5中新增加的很多標籤（如：<article>、<nav>、<header>和<footer>等）就是基於語義化設計原則
例如：<div id="header">
<h1>標題< /h1>
<h2>專注Web前端技術< /h2>
</div>
22.語義 HTML 具有哪些特性？
文字包裹在元素中，用以反映內容。例如：
段落包含在 <p> 元素中。
順序表包含在<ol>元素中。
從其他來源引用的大型文字塊包含在<blockquote>元素中。
HTML 元素不能用作語義用途以外的其他目的。例如：
<h1>包含標題，但並非用於放大文字。
<blockquote>包含大段引述，但並非用於文字縮排。
空白段落元素 ( <p></p> ) 並非用於跳行。
文字並不直接包含任何樣式資訊。例如：
不使用 <font> 或 <center> 等格式標記。
類或 ID 中不引用顏色或位置。
23.什麼叫優雅降級和漸進增強？
優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果使用者使用的是老式瀏覽器，則程式碼會檢查以確認它們是否能正常工作。由於IE獨特的盒模型佈局問題，針對不同版本的IE的hack實踐過優雅降級了,為那些無法支援功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於完全失效.
漸進增強：從被所有瀏覽器支援的基本功能開始，逐步地新增那些只有新式瀏覽器才支援的功能,向頁面增加無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支援時，它們會自動地呈現出來併發揮作用。
24.web標準網站有那些優點？
（1） Web標準網站結構和佈局分離，使網站的訪問和維護更加容易
（2） Web標準網站結構，佈局以及頁面訪問都標準化，使網站能在更多的web標準裝置中訪問，相容性更好
（3） Web標準網站語義化更好，語義化的XHTML不僅對使用者友好，對搜尋引擎也友好。
25.<img>中alt和tittle的區別?
alt：圖片顯示不出來了就提示alt
title：滑鼠劃過圖片顯示的提示
26.你是如何優化網頁的？
1.在書寫HTML程式碼的時候，遵循標籤語義化的要求，根據標籤的語義性進行選擇，如佈局使用div、標題使用h系列標籤、段落使用p標籤等。
2.HTML程式碼要合理巢狀，一般情況下，行元素當中不能包含塊元素，除了段落、標題型別的塊元素當中，既能夠包含塊元素，也能夠包含行元素，而段落或標題類的塊元素只能夠包含文字或行元素。table元素只能夠直接包含thead、tbody、tfoot、caption等元素；ul/ol元素只能直接包含li元素；dl元素當中只能直接包含dt和dd元素；form表單當中只能直接包含filedset和legend，不能直接包含input元素。
3.使用外部引入樣式表和JS行為程式碼，實現結構、樣式和行為的相分離，降低模組間的耦合度。
4.CSS規則命名中，一律採用小寫加中劃線的方式，不使用下劃線或大寫字母，命名採用更簡明有語義的英文單詞進行組合，進行合理的縮寫
5.CSS程式碼的書寫順序遵循CSS樣式的渲染順序：顯示屬性-自身屬性-文字屬性-其他
6.在上線之前進行CSS檔案壓縮
7.在CSS程式碼當中，儘量的規避掉不同瀏覽器的相容問題，如果實在避免不了，也需要進行合理解決，同時儘可能的少使用hack
8.儘量不在程式碼中出現沒有意義的空標籤，對於可以採用空標籤清除浮動的程式碼，可以用其他方法解決，如after偽元素
9.使用背景圖合併技術，將多張背景圖合併到一張圖片上，從而降低頁面與伺服器之間的請求次數。
10.權衡巢狀層級以及擴充套件性等多個方面後，在適當位置使用三層巢狀技術。
11.合理的填寫html檔案中的title、meta等內容，合理書寫a標籤的title、img標籤的title和alt，提升網站的SEO
12.製作網站中的404頁面
13.合理控制JS檔案的引入位置，提升網站的載入速度。
14.避免class與id重名，對於id名遵循小駝峰命名法。
15.利用物件名稱空間、匿名函式、協同命名等方法，儘量避免團隊合作時產生的命名衝突。
16.合理利用window.onload或jquery中的$(document).ready，儘量避免全域性作用域被汙染。
17.合理書寫程式碼註釋
18.對於功能類似的程式碼，進行函式的封裝，可以使用面向物件的書寫方法，提升程式碼的複用性和擴充套件性。
19.合理利用圖片預載入和圖片懶載入。
20.在DOM節點相關操作上進行優化，如利用變數儲存查詢到的元素，從而防止每次查詢時進行頁面重繪、利用文件碎片等。
21.jQuery等外掛的合理引用，處理常見的瀏覽器相容問題，在標籤查詢方式上，採用更快的查詢方法，如id>標籤名>類名的查詢。
22.對於AJAX的非同步載入，提供載入的相關提醒。
23.在js程式碼上線之前，後臺人員進行相應的JS程式碼壓縮。
27.除了前端以外還了解什麼其它技術麼？你最最厲害的技能是什麼？
C，c++，java，php，asp等
28.平時如何管理你的專案，如何設計突發大規模併發架構
先期團隊必須確定好全域性樣式（globe.css），編碼模式(utf-8) 等
編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；
標註樣式編寫人，各模組都及時標註（標註關鍵樣式呼叫的地方）；
頁面進行標註（例如 頁面 模組 開始和結束）；
CSS跟HTML 分資料夾並行存放，命名都得統一（例如style.css）
JS 分資料夾存放 命民以該JS 功能為準英文翻譯；
圖片採用整合的 images.png png8 格式檔案使用 儘量整合在一起使用方便將來的管理
29.你說你熱愛前端，那麼應該WEB行業的發展很關注吧？ 說說最近最流行的一些東西吧
Node.js、Mongodb、npmM、MVVM、MEAN
30.移動端（比如：Android IOS）怎麼做好使用者體驗？
提高瀏覽器訪問速度，做響應式佈局，內容要簡單明瞭，做網頁語義化和優化等
31.xhtml和html有什麼區別？
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地巢狀。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文件必須擁有根元素。
32.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量
33.清除浮動的幾種方式，各自的優缺點
1.使用空標籤清除浮動 clear:both，會增加無意義的標籤
2.使用overflow:auto，空標籤元素清除浮動,使用zoom:1用於相容IE
3.是用afert偽元素清除浮動(用於非IE瀏覽器)
4.使用overflow:hidden，IE低版本不相容
34.一個網站製作完成之後，在釋出之前，我們會對頁面進行測試，測試內容主要包括哪幾個方面?
頁面效果是否美觀
連結是否完好
頁面功能（如驗證、互動等）是否正確
測試不同瀏覽器的相容性
35.你都有用過什麼佈局？瀑布流佈局或者流式佈局是否有瞭解？
定寬佈局：浮動法，定位法，轉化表格法
變寬佈局：等比變寬，單列固定，優化浮動
瀑布流：多列布局流佈局：伸縮盒子舊（彈性盒模型），伸縮盒子新（流佈局）
36.是否有接你使用那些版本管理系統，比如Git，SVN等？
用過，svn是版本控制器，可以管理程式碼，不讓程式碼錯誤覆蓋
37.你常用的開發環境是怎樣的？比如作業系統，文字編輯器，瀏覽器，及其他工具等
作業系統：xp，window7，window8，window10
硬體環境：4G記憶體，500G硬碟，i5cpu
文字編輯器：WebStorm，PhpStorm，myeclipse
瀏覽器：IE，火狐，谷歌，蘋果，歐朋
其他工具:Photoshop，IETester，MySQL，截圖工具
38.你能描述一下你製作一個網頁的工作流程嗎？
1.美工做圖片
2.收集資料（文字、圖片、音訊、視屏）
3.網上搜集調查
4.色彩搭配，版塊佈局，風格主題
5.定尺寸，畫版塊，填充主要內容
6.定義頁面內容
7.使用者的體驗性，動畫的製作
8.使用者稽核
39.你更喜歡在哪個瀏覽器下進行開發？
IE：屬於傻瓜式相容
谷歌：兼用css3屬性比較多
40.你對前端介面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？
說出前端的工作內容，暢想未來工作
41.談談你認為怎樣做能是專案做的更好？
例如：
瞭解客戶需求
有很好的設計流程
掌握web前端知識
調整頁面相容性，或者設定響應式頁面
優化網頁，提高載入速度
設定友好的客戶體驗性等
42.如何提高使用者的體驗性？
提高瀏覽器載入速度
能讓使用者點選的，就不要設計敲鍵盤
設定友情連結，可以訪問外部網站
設定站內搜尋，可以關鍵字查詢
頁面之間有很好的關聯性
可以設定論壇或線上交流問使用者解答等
1、在視覺上：設計風格符合目標客戶的審美習慣，保持整個站點的視覺一致性，針對目標客戶的審美 喜好，進行分析，從而確定網站的總體設計風格。可以從網站LOGO、頁面佈局、頁面色彩、頁面大小 、圖示使用、廣告位、動畫效果等方面呈現給使用者視聽上的體驗與舒適性。
2、在操作上：表單提交、按鈕設定、點選提示、錯誤提示、意見反饋、線上搜尋、新開視窗、等方面 呈現給使用者操作上的體驗，強調易用/可用性。
3、在體驗上：會員交流、售後反饋、郵件/簡訊問候、網站地圖等方面呈現給使用者心理上的體驗，強調 友好性
4、在信任感上：聯絡方式準確有效的地址、電話等聯絡方式，便於查詢。從服務熱線、法律宣告、幫 助中心、公司介紹、服務保障等方面呈現給使用者的信任體驗，強調可靠性。
做好使用者體驗照顧目標受眾的需要，分析他們的需要和行業特徵。使用者體驗做好了，客戶的粘性就增加了，也會給企業帶來利益。
43.一個頁面上有大量的圖片，載入很慢，你有哪些方法優化這些圖片的載入
1、使用Sprites圖片技術
它將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，然後利用CSS技術展現出來。這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了，可以減少了整個網頁的圖片大小，並且利用CSSSprites能很好地減少網頁的http請求，從而大大的提高頁面的效能。
2、壓縮文字和圖片
壓縮技術如gzip可以有效減少頁面載入的時間。壓縮率都可以在大小70%左右。雖然文字壓縮用得比較多，但圖片的壓縮就比較隨意，很多都是直接上傳，其實還有很大的壓縮空間。
3、延遲顯示可見區域外的內容
為了確保使用者可以更快地看見可見區域的網頁可以延遲載入或展現可見區域外的內容，為了避免頁面變形，可以使用佔位符標籤制定正確的高度和寬度。比如WP的jQueryImage LazyLoad外掛就可以在使用者停留在第一屏的時候，不載入任何第一屏以下的圖片資訊，只有當用戶把滑鼠往下滾動的時候，這些圖片才開始載入。這樣很明顯提升可見區域的載入速度，提高使用者體驗。
4、確保功能圖片優先載入
先載入圖片再載入其它，會使使用者體驗感好。但速度不會提升
5、圖片格式優化
不恰當的影象格式是一種極為常見的減慢載入速度的罪魁禍首。正確的圖片格式可以讓圖片縮小數倍，如果儲存為最佳格式。可以節省大量頻寬，減少處理時間時間，大大加快頁面載入速。
6、使用 Progressive JPEGs
ProgressiveJPEGs圖片是JPEG格式的一個特殊變種，名為“高階JPEG”。在建立高階JPEG檔案時，資料是這樣安排的：在裝入影象時，開始只顯示一個模糊的影象，隨著資料的裝入，影象逐步變得清晰。它相當於交織的GIF格式的圖片。
44.get和post的區別？
get:會在位址列裡顯示傳值資訊，不安全；針對中文亂碼解決能力較差;傳值數量有限
post:相對安全,針對中文亂碼解決較強，傳值數量較多
45.Src和href的區別？
href表示超文字引用，表示與頁面有關聯的，在link和a等元素使用，src便是來源地址，是頁面上必不可少的一部分，是引入，在img，iframe上引用