Web前端开发面试题---HTML+CSS
一、HTML+CSS
? ?1.對WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識
? ? ? ?答：標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外 鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁面速度更快、內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件，容易維 護(hù)、改版方便，不需要變動頁面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性
?
??2.xhtml和html有什么區(qū)別
? ?答：HTML是一種基本的WEB網(wǎng)頁設(shè)計語言，XHTML是一個基于XML的置標(biāo)語言
? ? ? ? ?最主要的不同：
? ? ? ? ? 1、XHTML 元素必須被正確地嵌套。
? ? ? ? ? 2、XHTML 元素必須被關(guān)閉。
? ? ? ? ? 3、標(biāo)簽名必須用小寫字母。
? ? ? ? ? 4、XHTML 文檔必須擁有根元素。
?
?? 3.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義??
? ? 答： 用于聲明文檔使用那種規(guī)范（html/Xhtml）一般為 嚴(yán)格 過度 基于框架的html文檔加入XMl聲明可觸發(fā)，解析方式更改為IE5.5 擁有IE5.5的bug
?
??4.行內(nèi)元素有哪些?塊級元素有哪些?CSS的盒模型?
? ? 答：塊級元素：div p h1 h2 h3 h4 form ul
? ? ? ? ? ?行內(nèi)元素: a b br i span input select
? ? ? ? ? ?Css盒模型:內(nèi)容，border ,margin，padding
?
??5.CSS引入的方式有哪些? link和@import的區(qū)別是?
? ? 答：內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入
? ? ? ? ? 區(qū)別 ：同時加載
? ? ? ? ? ? ? ? ? ? 前者無兼容性，后者CSS2.1以下瀏覽器不支持?Link 支持使用javascript改變樣式，后者不可
?
??6.CSS選擇符有哪些?哪些屬性可以繼承?優(yōu)先級算法如何計算?內(nèi)聯(lián)和important哪個優(yōu)先級高?
? ? 答：標(biāo)簽選擇符 類選擇符 id選擇符
? ? ? ? ? 繼承不如指定 Id>class>標(biāo)簽選擇
? ? ? ? ? 后者優(yōu)先級高
?
?
??7.前端頁面有哪三層構(gòu)成，分別是什么?作用是什么?
? ? ?答：結(jié)構(gòu)層 Html?? 表示層 CSS 行為層 js
? ? ? ? ??網(wǎng)頁的結(jié)構(gòu)層（structural layer）由 HTML 或 XHTML 之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號里的單詞，對網(wǎng)頁內(nèi)容的語義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P ? ? ? ? ? ? ? ? ? 標(biāo)簽表達(dá)了這樣一種語義：“這是一個文本段?！?/p>
? ? ? ? ? ? 網(wǎng)頁的表示層（presentation layer）?由 CSS 負(fù)責(zé)創(chuàng)建。 CSS 對“如何顯示有關(guān)內(nèi)容”的問題做出了回答。
? ? ? ? ? ?網(wǎng)頁的行為層（behavior layer）負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對事件做出反應(yīng)”這一問題。這是 Javascript 語言和 DOM 主宰的領(lǐng)域。
?
? 8.你做的頁面在哪些流覽器測試過?這些瀏覽器的內(nèi)核分別是什么?
? ? ? ?答：Ie(Ie內(nèi)核) 火狐（Gecko） 谷歌（webkit） opear(Presto)
?
? ?9.寫出幾種IE6 BUG的解決方法
? ? ?答：1).雙邊距BUG float引起的 使用display
? ? ? ? ? 2).3像素問題 使用float引起的 使用dislpay:inline -3px
? ? ? ? ? 3).超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active
? ? ? ? ? 4).Ie z-index問題 給父級添加position:relative
? ? ? ? ? 5).Png 透明 使用js代碼 改
? ? ? ? ? 6).Min-height 最小高度 ！Important 解決’
? ? ? ? ? 7).select 在ie6下遮蓋 使用iframe嵌套
? ? ? ? ? 8).為什么沒有辦法定義1px左右的寬度容器（IE6默認(rèn)的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
?
??11.標(biāo)簽上title與alt屬性的區(qū)別是什么?
? ? ? 答：Alt 當(dāng)圖片不顯示是 用文字代表。
? ? ? ? ? ?Title 為該屬性提供信息
? ?
? ?12.描述css reset的作用和用途。
? ? ? 答：Reset重置瀏覽器的css默認(rèn)屬性 瀏覽器的品種不同，樣式不同，然后重置，讓他們統(tǒng)一
? ?13.解釋css sprites，如何使用。
? ? ? 答：Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務(wù)器對圖片的請求數(shù)量
?
? ?14.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么?
? ? ? ?答：盒子模型 渲染模式的不同
? ? ? ? ? ? 使用 window.top.document.compatMode 可顯示為什么模式
?
? ?15.你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化?期待的解決方案包括：
? ? ? ?答：文件合并
? ? ? ? ? ? ?文件最小化/文件壓縮
? ? ? ? ? ? ?使用CDN托管
? ? ? ? ? ? ?緩存的使用
?
? ?16.什么是語義化的HTML?
? ? ? 答：直觀的認(rèn)識標(biāo)簽 對于搜索引擎的抓取有好處
?
? 17.清除浮動的幾種方式，各自的優(yōu)缺點
? ? ? 答：1.使用空標(biāo)簽清除浮動 clear:both（理論上能清楚任何標(biāo)簽，，，增加無意義的標(biāo)簽）
? ? ? ? ? ? 2.使用overflow:auto（空標(biāo)簽元素清除浮動而不得不增加無意代碼的弊端,,使用zoom:1用于兼容IE）
? ? ? ? ? ? 3.是用afert偽元素清除浮動(用于非IE瀏覽器)
?
? 18、HTML5的離線儲存有幾種方式？
?
? ? ? ? ? 答： localStorag長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
?
? ? ? ? ? ?sessionStorage ?數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除。
?
? 19、請描述一下 cookies，sessionStorage和localStorage的區(qū)別？ ? ?
? ? ? ? ? ?答：cookie在瀏覽器和服務(wù)器間來回傳遞。
? ? ? ? ? ? ? ? ? sessionStorage和localStorage不會sessionStorage和localStorage的存儲空間更大；
? ? ? ? ? ? ? ? ? sessionStorage和 localStorage有更多豐富易用的接口；
? ? ? ? ? ? ? ? ? sessionStorage和localStorage各自獨(dú)立的存儲空間
?
?
?
?
?
? ? ? ? ? ? ? ? ??
轉(zhuǎn)載于:https://www.cnblogs.com/zqm1/p/6430664.html
總結(jié)
以上是生活随笔為你收集整理的Web前端开发面试题---HTML+CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Angular2组件与指令的小实践——实
- 下一篇： 建议大家使用Java 8 的日期、时间，