前言
題目來自ConardLi的blog
寫的是自己的題解曹质，水平有限，所以僅供參考
代碼會整合在github，覺得有幫助就給個star吧~
正文
二半抱、HTML和CSS
HTML
1胯杭、從規(guī)范的角度理解HTML驯杜，從分類和語義的角度使用標(biāo)簽
語義化
html5的主要進(jìn)步之一就是引入了語義化：
- header
- footer
- section
- aside
- main
- nav
- address
它通常在主頁<footer>中用于標(biāo)記企業(yè)的郵寄地址，電話號碼做个，客戶服務(wù)郵箱地址等等
block鸽心，inline和inlinke-block
display:block
- block元素會獨占一行，多個block元素會各自新起一行居暖。默認(rèn)情況下顽频，block元素寬度自動填滿其父元素寬度。
- block元素可以設(shè)置width,height屬性太闺。塊級元素即使設(shè)置了寬度,仍然是獨占一行糯景。
- block元素可以設(shè)置margin和padding屬性。
display:inline
- inline元素不會獨占一行省骂，多個相鄰的行內(nèi)元素會排列在同一行里蟀淮，直到一行排列不下，才會新?lián)Q一行钞澳，其寬度隨元素的內(nèi)容而變化怠惶。
- inline元素設(shè)置width,height屬性無效。
- inline元素的margin和padding屬性略贮，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果甚疟；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果仗岖。
display:inline-block
- 簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)览妖。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)轧拄。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性讽膏。
inline-block的缺陷
- 兩個inline-block元素中間有空白間隔
原因：我們的代碼中的換行和空格等都會產(chǎn)生這樣的間隔檩电，除非我們把代碼首尾相連寫在一起，但是這樣的代碼并不容易閱讀府树。
還有一個解決辦法是設(shè)置父元素font-size：0俐末；因為空白字符也是一個字符，只要設(shè)置為0奄侠，則間隔就消失了卓箫。
- 左邊inline-block元素和右邊inline-block元素中的文字始終處于底端對齊的狀態(tài)
解決方法：
給兩個元素各加上，overflow: hidden和vertical-align：middle
2垄潮、常用頁面標(biāo)簽的默認(rèn)樣式烹卒、自帶屬性、不同瀏覽器的差異弯洗、處理瀏覽器兼容問題的方式
3旅急、元信息類標(biāo)簽(head、title牡整、meta)的使用目的和配置方法
元信息：描述自身信息
head：
1藐吮、head 標(biāo)簽規(guī)定了自身必須是 html 標(biāo)簽中的第一個標(biāo)簽，它的內(nèi)容必須包含一個 title逃贝，并且最多只能包含一個 base谣辞。
2、如果文檔作為 iframe秋泳，或者有其他方式指定了文檔標(biāo)題時潦闲，可以允許不包含 title 標(biāo)簽攒菠。title：
網(wǎng)頁標(biāo)題base ：
base 標(biāo)簽作用是給頁面上所有的 URL 相對地址提供一個基礎(chǔ)迫皱。mate:
表示的是一個鍵值對，是一種通用的元信息表示符
1辖众、指定字符集
<meta charset="UTF-8">
2卓起、http-equiv
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
3、viewport
移動端適配的頁面凹炸，應(yīng)該把用戶縮放功能禁止掉戏阅，寬度設(shè)為設(shè)備寬度
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
4、HTML5離線緩存原理
HTML5的離線存儲是基于一個manifest文件(緩存清單文件啤它，后綴為.appcache)的緩存機制(不是存儲技術(shù))奕筐，通過這個文件上的清單解析離線存儲資源舱痘，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)時离赫，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示芭逝。
5、可以使用Canvas API渊胸、SVG等繪制高性能的動畫
暫時不會
