# HTML+CSS常見面試題 ## HTML ### 1、HTML語義化的理解 1、用正確的標簽做正確的事情！ 2、`HTML`語義化就是讓頁面的內容結構化，便于對瀏覽器、搜索引擎解析； 3、在沒有樣式`CSS`情況下也以一種文檔格式顯示，并且是容易閱讀的。 4、搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重，利于 `SEO`。 5、使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解 ### 2、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` ### 3、的title和alt有什么區別 * `alt`是圖片加載失敗時，顯示在網頁上的替代文字； * `title`是鼠標放上面時顯示的文字。 * `alt`是`img`必要的屬性，而`title`不是。 ### 4、從瀏覽器地址欄輸入`url`到顯示頁面的步驟 * 瀏覽器根據請求的`URL`交給`DNS`域名解析，找到真實`IP`，向服務器發起請求； * 服務器交給后臺處理完成后返回數據，瀏覽器接收文件（`HTML`、`JS`、`CSS`、圖象等）； * 瀏覽器對加載到的資源（`HTML`、`JS`、`CSS`等）進行語法解析，建立相應的內部數據結構（如`HTML`的`DOM`）； * 載入解析到的資源文件，渲染頁面，完成。 ### 5、HTML全局屬性(global attribute)有哪些 * `class`:為元素設置類標識 * `data-*`: 為元素增加自定義屬性 * `draggable`: 設置元素是否可拖拽 * `id`: 元素id，文檔內唯一 * `lang`: 元素內容的的語言 * `style`: 行內css樣式 * `title`: 元素相關的建議信息 ### 6、介紹一下你對瀏覽器內核的理解？ 主要分成兩部分：渲染引擎(`layout engineer`或`Rendering Engine`)和`JS`引擎 渲染引擎：負責取得網頁的內容（`HTML`、`XML`、圖像等等）、整理訊息（例如加入`CSS`等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核 `JS`引擎則：解析和執行`javascript`來實現網頁的動態效果 最開始渲染引擎和`JS`引擎并沒有區分的很明確，后來`JS`引擎越來越獨立，內核就傾向于只指渲染引擎 ### 7、請描述一下 `cookies`，`sessionStorage`和 `localStorage`的區別？ `cookie`是網站為了標示用戶身份而儲存在用戶本地終端（`Client Side`）上的數據（通常經過加密） `cookie`數據始終在同源的`http`請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞 `sessionStorage`和`localStorage`不會自動把數據發給服務器，僅在本地保存 存儲大小： `cookie`數據大小不能超過`4k` `sessionStorage`和`localStorage`雖然也有存儲大小的限制，但比`cookie`大得多，可以達到`5M`或更大 有期時間： `localStorage`存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據 `sessionStorage`數據在當前瀏覽器窗口關閉后自動刪除 `cookie`設置的`cookie`過期時間之前一直有效，即使窗口或瀏覽器關閉 ### 8、行內元素有哪些？塊級元素有哪些？空(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>` * 行內元素不可以設置寬高，不獨占一行 * 塊級元素可以設置寬高，獨占一行 ### 9、如何在頁面上實現一個圓形的可點擊區域？ * `svg` * `border-radius` * 純`js`實現 需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等 ### 10、HTTP狀態碼及其含義 * `1XX`：信息狀態碼 * `2XX`：成功狀態碼 * `3XX`：重定向 * `4XX`：客戶端錯誤 * `5XX`: 服務器錯誤 ### 11、你能描述一下漸進增強和優雅降級之間的不同嗎 **漸進增強**：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。 **優雅降級**：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。 ### 12、渲染優化 1、使用`CSS3`代碼代替`JS`動畫（盡可能避免重繪重排以及回流） 2、頁面中空的`href`和 `src`會阻塞頁面其他資源的加載 (阻塞下載進程) 3、用`innerHTML`代替`DOM`操作，減少`DOM`操作次數，優化`javascript`性能 4、當需要設置的樣式很多時設置`className`而不是直接操作`style` 5、少用全局變量、緩存`DOM`節點查找的結果。減少`IO`讀取操作 6、圖片預加載，將樣式表放在頂部，將腳本放在底部 加上時間戳 ### 13、如何進行網站性能優化 1、減少`HTTP`請求：合并文件、`CSS`精靈、`inline Image` 2、將樣式表放到頁面頂部 3、不使用`CSS`表達式 4、使用`<link>`不使用`@import` 5、將腳本放到頁面底部 6、將`javascript`和`css`從外部引入 7、壓縮`javascript`和`css` ## CSS ### 1、盒子模型 盒模型分為兩類: IE盒模型和標準盒模型。 兩者的區別在于: * `IE`盒模型的`width/height = content + border + padding` * 標準盒模型的`width/height = content` ### 2、CSS優先級算法如何計算？ * 優先級就近原則，同權重情況下樣式定義最近者為準 * 載入樣式以最后載入的定位為準 * 優先級為: `!important > id > class > tag; !important`比 內聯優先級高 ### 3、CSS3有哪些新特性 * 新增各種`css`選擇器 * 圓角 `border-radius` * 多列布局 * 陰影和反射 * 文字特效`text-shadow` * 線性漸變 * 旋轉`transform` **CSS3新增偽類有那些？** * `:after`在元素之前添加內容,也可以用來做清除浮動。 * `:before`在元素之后添加內容。 * `:enabled`已啟用的表單元素。 * `:disabled`已禁用的表單元素。 * `:checked`單選框或復選框被選中。 ### 4、CSS常用選擇器 ~~~ 通配符：* ID選擇器：#ID 類選擇器：.class 元素選擇器：p、a 等 后代選擇器：p span、div a 等 偽類選擇器：a:hover 等 屬性選擇器：input[type="text"] 等 ~~~ ### 5、link與@import的區別 * `link`是`HTML`方式，`@import`是`CSS`方式 * `link`最大限度支持并行下載，`@import`過多嵌套導致串行下載，出現`FOUC`(文檔樣式短暫失效) * `link`可以通過`rel="alternate stylesheet"`指定候選樣式 * 瀏覽器對link支持早于`@import`，可以使用`@import`對老瀏覽器隱藏樣式 * `@import`必須在樣式規則之前，可以在`css`文件中引用其他文件 * 總體來說：`link`優于`@import` ### 6、如何創建塊級格式化上下文(block formatting context),`BFC`有什么用 **什么是`BFC`**? * `BFC`格式化上下文，它是一個獨立的渲染區域，讓處于 `BFC`內部的元素和外部的元素相互隔離，使內外元素的定位不會相互影響 **如何產生`BFC`**? * `display: inline-block` * `position: absolute/fixed` **BFC作用** * BFC最大的一個作用就是：在頁面上有一個獨立隔離容器，容器內的元素和容器外的元素布局不會相互影響 ~~~ 解決上外邊距重疊;重疊的兩個box都開啟bfc; 解決浮動引起高度塌陷;容器盒子開啟bfc 解決文字環繞圖片;左邊圖片div,右邊文字容器p,將p容器開啟bfc ~~~ ### 7、絕對定位和相對定位的區別 **`position: absolute`** 絕對定位：是相對于元素最近的已定位的祖先元素 **`position: relative`** 相對定位：相對定位是相對于元素在文檔中的初始位置 ### 8、`display:inline-block`什么時候不會顯示間隙？ * 移除空格 * 使用`margin`負值 * 使用`font-size:0` * `letter-spacing` * `word-spacing` ### 9、清除浮動的幾種方式，各自的優缺點 * 父級`div`定義`height` * 結尾處加空`div`標簽`clear:both` * 父級`div`定義偽類`:after`和`zoom` * 父級`div`定義`overflow:hidden` * 父級`div`也浮動，需要定義寬度 * 結尾處加`br`標簽`clear:both` * 比較好的是第3種方式，好多網站都這么用 ### 10、為什么要初始化CSS樣式? * 因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對`CSS`初始化往往會出現瀏覽器之間的頁面顯示差異。 * 當然，初始化樣式會對`SEO`有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化 ### 11、自適應布局 思路： * 左側浮動或者絕對定位，然后右側`margin`撐開 * 使`<div>`包含，然后靠負`margin`形成`bfc` * 使用`flex` ### 12、`position`有哪些值？有什么作用？ * `static`。默認值，不脫離文檔流，`top`，`right`，`bottom`，`left`等屬性不生效。 * `relative`。不脫離文檔流，依據自身位置進行偏離，當子元素設置`absolute`，將依據它進行偏離。 * `absolute`。脫離文檔流，依據`top，right，bottom，left`等屬性在正常文檔流中偏移位置。 * `fixed`。通過瀏覽器窗口進行定位，出現滾動條的時候，不會隨之滾動。 ### 13、垂直居中有哪些方法？ * 單行文本的話可以使用`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;`（不定高） ### 14、水平居中的方法 * 元素為行內元素，設置父元素`text-align:center` * 如果元素寬度固定，可以設置左右`margin`為`auto`; * 如果元素為絕對定位，設置父元素`position`為`relative`，元素設`left:0;right:0;margin:auto;` * 使用`flex-box`布局，指定`justify-content`屬性為`center` `display`設置為`tabel-ceil` ### 15、Flex布局 ~~~ display: flex //設置Flex模式 flex-direction: column //決定元素是橫排還是豎著排 flex-wrap: wrap //決定元素換行格式 justify-content: space-between //同一排下對齊方式，空格如何隔開各個元素 align-items: center //同一排下元素如何對齊 align-content: space-between //多行對齊方式 ~~~ ### 16、`stylus/sass/less`區別 * 均具有“變量”、“混合”、“嵌套”、“繼承”、“顏色混合”五大基本特性 * `Scss`和`LESS`語法較為嚴謹，`LESS`要求一定要使用大括號`“{}”，Scss`和`Stylus`可以通過縮進表示層次與嵌套關系 * `Scss`無全局變量的概念，`LESS`和`Stylus`有類似于其它語言的作用域概念 * `Sass`是基于`Ruby`語言的，而`LESS`和`Stylus`可以基于`NodeJS NPM`下載相應庫后進行編譯； ### 20、知道css有個content屬性嗎？有什么作用？有什么應用？ `css`的`content`屬性專門應用在 `before/after`偽元素上，用于來插入生成內容。最常見的應用是利用偽類清除浮動。 ### 21、CSS在性能優化方面的實踐 * `css`壓縮與合并、`Gzip`壓縮 * `css`文件放在`head`里、不要用`@import` * 盡量用縮寫、避免用濾鏡、合理使用選擇器 ### 22、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`