前端面試題 -- HTML+CSS

doctype 是一種標準通用標記語言的文檔類型聲明，目的是告訴標準通用標記語言解析器要使用什麼樣的文檔類型定義 DTD來解析文檔. <!DOCTYPE>聲明必須是HTML文檔的第一行，位於html標籤以前
HTML5 不基於 SGML，因此不須要引用 DTD。在 HTML5 中 <!DOCTYPE> 只有一種

SGML: 標準通用標記語言,是現時經常使用的超文本格式的最高層次標準

<h5 id='l2'>2. 行內元素有哪些，塊級元素有哪些，空(void)元素有那些</h5>

行內元素：a span i img input select b 等

塊級元素：div ul ol li h1~h6 p table 等

空元素：br hr link 等

<h5 id='l3'>3. 簡述一下你對HTML語義化的理解</h5>

簡單來講，就是合適的標籤作合適的事情，這樣具備如下好處：

有助於構架良好的HTML結構，有利於搜索引擎的創建索引、抓取，利於SEO
有利於不一樣設備的解析
有利於構建清晰的機構，有利於團隊的開發、維護

<h5 id='l4'>4. 常見的瀏覽器內核有哪些，介紹一下你對瀏覽器內核的理解</h5>

Trident 內核： IE
Gecko 內核：NETSCAPE6 及以上版本，火狐

Presto 內核：Opera7 及以上。[Opera 內核原爲：Presto，現爲：Blink;]

Webkit內核：Safari，Chrome等。[Chrome的：Blink（WebKit的分支）]

瀏覽器內核又能夠分紅兩部分：渲染引擎和JS引擎。 渲染引擎主要負責取得網頁的內容、整理訊息、計算網頁的顯示方式等，JS引擎則是解析 Javascript 語言，執行 javascript 語言來實現網頁的動態效果。

<h5 id='l5'>5. html5有哪些新特性</h5>

語義化標籤: header footer nav section article aside 等
加強型表單：date(從一個日期選擇器選擇一個日期) email(包含 e-mail 地址的輸入域) number(數值的輸入域) range(必定範圍內數字值的輸入域) search(用於搜索域) tel(定義輸入電話號碼字段) 等
視頻和音頻：audio video
Canvas繪圖 SVG繪圖
地理定位：Geolocation
拖放API：drag
web worker：是運行在後臺的 JavaScript，獨立於其餘腳本，不會影響頁面的性能
web storage: localStorage sessionStorage
WebSocket: HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議

<h5 id='l6'>6. 描述一下 cookie，sessionStorage 和 localStorage 的區別</h5>

特性	Cookie	localStorage	sessionStorage
生命週期	可設置失效時間，沒有設置的話，默認是關閉瀏覽器後失效	除非被手動清除，不然將會永久保存	僅在當前網頁會話下有效，關閉頁面或瀏覽器後就會被清除
存放數據大小	4KB左右	能夠保存5MB的信息
http請求	每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊

<h5 id='l7'>7. 如何實現瀏覽器內多個標籤頁之間的通訊</h5>

使用 localStorage: localStorage.setItem(key,value)、localStorage.getItem(key)
websocket協議
webworker

多個標籤頁之間的通訊

<h5 id='l8'>8. HTML5的離線存儲怎麼使用，解釋一下工做原理</h5>

HTML5的離線存儲

<h5 id='l9'>9. src與href的區別</h5>

區別：src 用於替代這個元素，而 href 用於創建這個標籤與外部資源之間的關係

<link href="style.css" rel="stylesheet" />瀏覽器加載到這裏的時候，html 的渲染和解析不會暫停，css 文件的加載是同時進行的

<script src="script.js"></script>當瀏覽器解析到這句代碼時，頁面的加載和解析都會暫停直到瀏覽器拿到並執行完這個js文件

<h5 id='l10'>10. 表單提交中Get和Post方式的區別</h5>

Get 通常用於從服務器上獲取數據，Post 向服務器傳送數據
Get 傳輸的數據是拼接在Url以後的，對用戶是可見的；Post 的傳輸數據對用戶是不可見的
Get 傳送的數據量較小，不能大於 2KB。Post 傳送的數據量較大，通常被默認爲不受限制
Get 安全性很是低，Post 安全性較高
在 FORM 提交的時候，若是不指定 Method，則默認爲 Get 請求

CSS

<h5 id='c1'>1. css盒子模型，box-sizing屬性的理解</h5>

css 的盒模型由 content(內容)、padding(內邊距)、border(邊框)、margin(外邊距)組成。但盒子的大小由content+padding+border這幾部分決定

box-sizing是一個CSS3屬性，與盒子模型有着密切聯繫。即決定元素的寬高如何計算，box-sizing有三個屬性：

box-sizing: content-box|border-box|inherit:

content-box 使得元素的寬高即爲內容區的寬高(默認模式)
border-box: 計算方式content + padding + border = 自己元素大小，即縮小了content大小
inherit 指定 box-sizing 屬性的值，應該從父元素繼承

<h5 id='c2'>2. 清除浮動，何時須要清除浮動，清除浮動都有哪些方法</h5>

浮動的元素是脫離文檔標準流的，若是咱們不清楚浮動，那麼就會形成父元素高度塌陷，影響頁面佈局。

清除浮動的方式：

爲父元素設置高度
爲父元素添加overflow:hidden
僞元素

.fix::after { 
     content:""; 
     display:block; 
     clear:both;
}

使用僞元素的好處：不增長冗餘的 DOM 節點，符合語義化

overflow: hidden 能夠觸發 BFC 機制。
BFC：塊級格式化上下文，建立了 BFC 的元素就是一個獨立的盒子，它規定了內部如何佈局，而且與這個獨立盒子裏的佈局不受外部影響，固然它也不會影響到外面的元素，計算BFC的高度時，浮動元素也參與計算

<h5 id='c3'>3. 如何讓一個不定寬高的盒子水平垂直居中</h5>

定位的方式

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

css3屬性

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

flex佈局

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

<h5 id='c4'>4. px和em和rem的區別</h5>

px: 像素，相對長度單位。像素 px是相對於顯示器屏幕分辨率而言的
em的值並非固定的，會繼承父級元素的字體大小，表明倍數

rem的值並非固定的，始終是基於根元素 <html> 的，也表明倍數

<h5 id='c5'>5. position的值有哪些</h5>

static：默認值。沒有定位，元素出如今正常的流中
relative（相對定位）：生成相對定位的元素,相對於其正常（原先自己）位置進行定位

absolute（絕對定位）：生成絕對定位的元素，相對於static定位之外的第一個父元素進行定位

fixed（固定定位）：生成絕對定位的元素，相對於瀏覽器窗口進行定位

<h5 id='c6'>6. display:none與visibility：hidden的區別</h5>

區別	display:none	visibility：hidden的
是否佔據空間	不佔據任何空間，在文檔渲染時，該元素如同不存在（但依然存在文檔對象模型樹中）	該元素空間依舊存在
是否渲染	會觸發reflow（迴流），進行渲染	只會觸發repaint（重繪），由於沒有發現位置變化，不進行渲染
是不是繼承屬性	不是繼承屬性，元素及其子元素都會消失	是繼承屬性，若子元素使用了visibility:visible，則不繼承，這個子孫元素又會顯現出

<h5 id='c7'>7. CSS中link 和@import的區別</h5>

link屬於 XHTML標籤， @import徹底是 CSS提供的一種方式,只能加載 CSS
加載順序的差異，當一個頁面被加載的時候，link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面所有被下載完再被加載

兼容性的差異。因爲@import是CSS2.1提出的因此老的瀏覽器不支持，而link標籤無此問題

當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的

<h5 id='c8'>8. 什麼是響應式設計，響應式設計的基本原理是什麼</h5>

響應式網站設計是一個網站可以兼容多個終端，而不是爲每個終端作一個特定的版本。基本原理是經過媒體查詢檢測不一樣的設備屏幕尺寸作處理

<h5 id='c9'>9. 爲何要初始化CSS樣式</h5>

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對 CSS 初始化每每會出現瀏覽器之間的頁面顯示差別
初始化樣式會對 SEO 有必定的影響

<h5 id='c10'>10. CSS3有哪些新特性</h5>

實現圓角border-radius，陰影box-shadow，邊框圖片border-image
對文字加特效text-shadow，強制文本換行word-wrap，線性漸變linear-gradient
實現旋轉transform:rotate(90deg),縮放scale(0.85,0.90),translate(0px,-30px)定位,傾斜skew(-9deg,0deg);
增長了更多的CSS選擇器、多背景、rgba()
惟一引入的僞元素是::selection；
實現媒體查詢@media，多欄佈局flex
過渡transition 動畫animation