1.標簽三大類及區別：
塊級元素 <div> 默認占元素整行 ，可設寬高
行內塊元素 <img> 默認不占整行 ，可設寬高 內容寬
行內元素 <a>默認不占整行 不可設寬高 內容寬
2.css引入方式有幾種：
內嵌式 ： 通過<style></style>來書寫CSS代碼。（一般放在<head>。）
外聯式：<link>引入 （<link>標記只能放在<head>中）
行內樣式：通過style的屬性來書寫CSS代碼 舉例：<p style=“font-size:24px;”></p>
3.css樣式優先級：
權重！
行內樣式>內部樣式
行內樣式>外部樣式
一級一級往下找它會逐個+1
4.前端三大模塊及作用：
html 標簽 css 樣式 js行為
5.html語意化：
根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
6.H5和html有什么區別：
h5是html的升級 去其糟粕 取其精華
7.為什么寫！doctype：
聲明文件類型為html
css盒模型有幾種，區別是什么：
標准盒模型，一個塊的總寬度 = width（content的寬度） + margin（左右）+ padding（左右）+ border（左右）
怪異盒模型，一個塊的總寬度 = width（content + border + padding）+ margin(左右)
8.水平垂直居中的方法：
1.margin和width實現水平居中 2.inline-block實現水平居中方法 3.浮動實現水平居中的方法
4.絕對定位實現水平居中 5.CSS3的flex實現水平居中方法 6.CSS3的fit-content實現水平居中方法
7.最外層轉table 內層轉table-cell 設置text-align:center; vertical-align:middle;
9.常見五大瀏覽器及其內核：
-webkit) //谷歌 Safari（蘋果）
-moz- // Firefox
-ms- // IE
-o- // Opera
10.css3有哪些新增的屬性
-
RGBA和透明度
-
background-image background-origin(content-box/padding-box/border-box) background-size background-repeat
-
word-wrap（對長的不可分割單詞換行）word-wrap：break-word
-
文字陰影：text-shadow： 5px 5px 5px #FF0000;（水平陰影，垂直陰影，模糊距離，陰影顏色）
-
font-face屬性：定義自己的字體
-
圓角（邊框半徑）：border-radius 屬性用於創建圓角
-
邊框圖片：border-image: url(border.png) 30 30 round
-
盒陰影：box-shadow: 10px 10px 5px #888888
-
媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會采用不同的屬性
- transition過渡
- @keyframes定義動畫 animation 使用動畫
- transform：
- translate()平移
- rotate()旋轉
- scale()縮放
- skew()翻轉
- matrix()把2d方法組合到一起
11.什么是響應式設計
響應式網站設計(Responsive Web design)是一個網站能夠兼容多個終端，而不是為每一個終端做一個特定的版本。
基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理。
頁面頭部必須有meta聲明的viewport。
12.css3新增的偽類
p:first-of-type 選擇屬於其父元素的首個元素
p:last-of-type 選擇屬於其父元素的最后元素
p:only-of-type 選擇屬於其父元素唯一的元素
p:only-child 選擇屬於其父元素的唯一子元素
p:nth-child(2) 選擇屬於其父元素的第二個子元素
:enabled :disabled 表單控件的禁用狀態。
:checked 單選框或復選框被選中。
13.css3的動畫實現
animation（使用動畫）: myfirst 5s;
@keyframes 中創建動畫，把它捆綁到某個選擇器，myfirst選擇器
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
14.元素隱藏方法
display:none; 不占位
visibility:hidden占位
opacity：0元素透明
height：0
15.優化網站
1. 減少HTTP請求數。
2. 減小被請求文件的大小，減少請求數據占用的網絡帶寬。
3. 通過版本化控制客戶端緩存。
5. 刪除頁面中一些可有可無的內容。
6. 刪除網頁代碼中的空語句。
7. 刪除HTML的默認屬性。
8. 優化CSS。
9. Visibility快於Display。
10. 保持同一URL的大小寫一致性。
11. 讓標記有始有終。
12. 不要將整個頁面內容塞到一個Table中。
13. 使用iframe嵌套另一個頁面。
14. 把JavaScript移到HTMl文件末尾。
15. 友情鏈接的學問。
16. 圖片優化。
17. 網址后加斜杠。
18. 標明高度和寬度。
16.優雅降級和間隙增強
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：
一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：
a. 優雅降級是從復雜的現狀開始，並試圖減少用戶體驗的供給
b. 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要
c. 降級（功能衰減）意味着往回看；而漸進增強則意味着朝前看，同時保證其根基處於安全地帶
17.cookie 和session 的區別：
1、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。
2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙
考慮到安全應當使用session。
3、session會在一定時間內保存在服務器上。當訪問增多，會比較占用你服務器的性能
考慮到減輕服務器性能方面，應當使用COOKIE。
4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。
5、所以個人建議：
將登陸信息等重要信息存放為SESSION
其他信息如果需要保留，可以放在COOKIE中