前端HTML+CSS筆試題面試題

前言

前端的面試和學習都是不可或缺的事情，在這裏收集一些高頻面試題，供本身如今和之後查閱和查缺補漏的同時，也但願對小夥伴有所幫助。

HTML

一、HTML語義化的理解

一、用正確的標籤作正確的事情！

二、HTML語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；

三、在沒有樣式CSS狀況下也以一種文檔格式顯示，而且是容易閱讀的。

四、搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。

五、使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解

二、HTML5有哪些新特性、移除了那些元素？

HTML5如今已經不是SGML的子集，主要是關於圖像，位置，存儲，多任務等功能的增長

• 繪畫 canvas
• 用於媒介回放的 video和audio 元素
• 本地離線存儲localStorage長期存儲數據，瀏覽器關閉後數據不丟失
• <sessionStorage的數據在瀏覽器關閉後自動刪除
• 語意化更好的內容元素，好比article、footer、header、nav、section
• 表單控件，calendar、date、time、email、url、search
• 新的技術<webworker、 websocket、 Geolocation

  移除的元素：

• 純表現的元素：basefont、big、center、font、 s、strike、tt、u
• 對可用性產生負面影響的元素：frame、frameset、noframes

支持HTML5新標籤：

• IE8/IE7/IE6支持經過document.createElement方法產生的標籤
• 能夠利用這一特性讓這些瀏覽器支持HTML5新標籤
• 瀏覽器支持新標籤後，還須要添加標籤默認的樣式
• 固然也能夠直接使用成熟的框架、好比html5shim

三、<img>的title和alt有什麼區別

• alt 是圖片加載失敗時，顯示在網頁上的替代文字；
• title 是鼠標放上面時顯示的文字。
• alt是img必要的屬性，而title不是。

四、從瀏覽器地址欄輸入url到顯示頁面的步驟

• 瀏覽器根據請求的URL交給DNS域名解析，找到真實IP，向服務器發起請求；
• 服務器交給後臺處理完成後返回數據，瀏覽器接收文件（HTML、JS、CSS、圖象等）；
• 瀏覽器對加載到的資源（HTML、JS、CSS等）進行語法解析，創建相應的內部數據結構（如HTML的DOM）；
• 載入解析到的資源文件，渲染頁面，完成。

五、HTML全局屬性(global attribute)有哪些

• class:爲元素設置類標識
• data-*: 爲元素增長自定義屬性
• draggable: 設置元素是否可拖拽
• id: 元素id，文檔內惟一
• lang: 元素內容的的語言
• style: 行內css樣式
• title: 元素相關的建議信息

六、介紹一下你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核

JS引擎則：解析和執行javascript來實現網頁的動態效果

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎

七、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）

cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞

sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

存儲大小：

cookie數據大小不能超過4k
sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大
有期時間：

localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除
cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

八、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？行內元素和塊級元素有什麼區別？

• 行內元素有：a b span img input select strong
• 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4… p
• 空元素：<br> <hr> <img> <input> <link> <meta>
• 行內元素不能夠設置寬高，不獨佔一行
• 塊級元素能夠設置寬高，獨佔一行

九、如何在頁面上實現一個圓形的可點擊區域？

• svg
• border-radius
• 純js實現 須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

十、HTTP狀態碼及其含義

• 1XX：信息狀態碼
• 2XX：成功狀態碼
• 3XX：重定向
• 4XX：客戶端錯誤
• 5XX: 服務器錯誤

十一、你能描述一下漸進加強和優雅降級之間的不一樣嗎

漸進加強：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

十二、渲染優化

一、使用CSS3代碼代替JS動畫（儘量避免重繪重排以及迴流）

二、頁面中空的 href 和 src 會阻塞頁面其餘資源的加載 (阻塞下載進程)

三、用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能

四、當須要設置的樣式不少時設置className而不是直接操做style

五、少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做

六、圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳

1三、如何進行網站性能優化

一、減小HTTP請求：合併文件、CSS精靈、inline Image

二、將樣式表放到頁面頂部

三、不使用CSS表達式

四、使用<link>不使用@import

五、將腳本放到頁面底部

六、將javascript和css從外部引入

七、壓縮javascript和css

CSS

一、盒子模型

盒模型分爲兩類: IE盒模型和標準盒模型。 二者的區別在於:

• IE盒模型的width/height = content + border + padding
• 標準盒模型的width/height = content

二、CSS優先級算法如何計算？

• 優先級就近原則，同權重狀況下樣式定義最近者爲準
• 載入樣式以最後載入的定位爲準
• 優先級爲: !important > id > class > tag; !important 比 內聯優先級高

三、CSS3有哪些新特性

• 新增各類css選擇器
• 圓角 border-radius
• 多列布局
• 陰影和反射
• 文字特效text-shadow
• 線性漸變
• 旋轉transform

CSS3新增僞類有那些？

• :after 在元素以前添加內容,也能夠用來作清除浮動。
• :before 在元素以後添加內容。
• :enabled 已啓用的表單元素。
• :disabled 已禁用的表單元素。
• :checked 單選框或複選框被選中。

四、CSS經常使用選擇器

通配符：*
ID選擇器：#ID
類選擇器：.class
元素選擇器：p、a    等
後代選擇器：p span、div a   等
僞類選擇器：a:hover 等
屬性選擇器：input[type="text"]  等

五、link與@import的區別

• link是HTML方式， @import是CSS方式
• link最大限度支持並行下載，@import過多嵌套致使串行下載，出現FOUC(文檔樣式短暫失效)
• link能夠經過rel="alternate stylesheet"指定候選樣式
• 瀏覽器對link支持早於@import，可使用@import對老瀏覽器隱藏樣式
• @import必須在樣式規則以前，能夠在css文件中引用其餘文件
• 整體來講：link優於@import

六、如何建立塊級格式化上下文(block formatting context),BFC有什麼用

什麼是BFC?

• BFC格式化上下文，它是一個獨立的渲染區域，讓處於 BFC 內部的元素和外部的元素相互隔離，使內外元素的定位不會相互影響

如何產生BFC?

• display: inline-block
• position: absolute/fixed

BFC做用

• BFC最大的一個做用就是：在頁面上有一個獨立隔離容器，容器內的元素和容器外的元素佈局不會相互影響

解決上外邊距重疊;重疊的兩個box都開啓bfc;
解決浮動引發高度塌陷;容器盒子開啓bfc
解決文字環繞圖片;左邊圖片div,右邊文字容器p,將p容器開啓bfc

七、絕對定位和相對定位的區別

position: absolute

絕對定位：是相對於元素最近的已定位的祖先元素

position: relative

相對定位：相對定位是相對於元素在文檔中的初始位置

八、display:inline-block 何時不會顯示間隙？

• 移除空格
• 使用margin負值
• 使用font-size:0
• letter-spacing
• word-spacing

九、清除浮動的幾種方式，各自的優缺點

• 父級div定義height
• 結尾處加空div標籤clear:both
• 父級div定義僞類:after和zoom
• 父級div定義overflow:hidden
• 父級div也浮動，須要定義寬度
• 結尾處加br標籤clear:both
• 比較好的是第3種方式，好多網站都這麼用

十、爲何要初始化CSS樣式?

• 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。
• 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化

十一、自適應佈局

思路：

• 左側浮動或者絕對定位，而後右側margin撐開
• 使<div>包含，而後靠負margin造成bfc
• 使用flex

十二、position有哪些值？有什麼做用？

• static。默認值，不脫離文檔流，top，right，bottom，left等屬性不生效。
• relative。不脫離文檔流，依據自身位置進行偏離，當子元素設置absolute，將依據它進行偏離。
• absolute。脫離文檔流，依據top，right，bottom，left等屬性在正常文檔流中偏移位置。
• fixed。經過瀏覽器窗口進行定位，出現滾動條的時候，不會隨之滾動。

1三、垂直居中有哪些方法？

• 單行文本的話可使用height和line-height設置同一高度。
• position+margin：設置父元素:position: relative;，子元素height: 100px;
• position:absolute;top: 50%; margin: -50px 0 0 0;（定高）
• position+transform：設置父元素position:relative,子元素：position: *
• absolute;top: 50%;transform: translate(0, -50%);（不定高）
• 百搭flex佈局(ie10+)，設置父元素display:flex;align-items: center;（不定高）

1四、水平居中的方法

• 元素爲行內元素，設置父元素text-align:center
• 若是元素寬度固定，能夠設置左右margin爲auto;
• 若是元素爲絕對定位，設置父元素position爲relative，元素設left:0;right:0;margin:auto;
• 使用flex-box佈局，指定justify-content屬性爲center
• display設置爲tabel-ceil

1五、Flex佈局

display: flex  //設置Flex模式
flex-direction: column  //決定元素是橫排仍是豎着排
flex-wrap: wrap     //決定元素換行格式
justify-content: space-between  //同一排下對齊方式，空格如何隔開各個元素
align-items: center     //同一排下元素如何對齊
align-content: space-between    //多行對齊方式

1六、stylus/sass/less區別

• 均具備「變量」、「混合」、「嵌套」、「繼承」、「顏色混合」五大基本特性
• Scss和LESS語法較爲嚴謹，LESS要求必定要使用大括號「{}」，Scss和Stylus能夠經過縮進表示層次與嵌套關係
• Scss無全局變量的概念，LESS和Stylus有相似於其它語言的做用域概念
• Sass是基於Ruby語言的，而LESS和Stylus能夠基於NodeJS NPM下載相應庫後進行編譯；

20、知道css有個content屬性嗎？有什麼做用？有什麼應用？

css的content屬性專門應用在 before/after僞元素上，用於來插入生成內容。最多見的應用是利用僞類清除浮動。

2一、CSS在性能優化方面的實踐

• css壓縮與合併、Gzip壓縮
• css文件放在head裏、不要用@import
• 儘可能用縮寫、避免用濾鏡、合理使用選擇器

2二、CSS3動畫（簡單動畫的實現，如旋轉等）

• 依靠CSS3中提出的三個屬性：transition、transform、animation
• transition：定義了元素在變化過程當中是怎麼樣的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
• transform：定義元素的變化結果，包含rotate、scale、skew、translate。
• animation：動畫定義了動做的每一幀（@keyframes）有什麼效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction