用哪幾個(gè)瀏覽器做測(cè)試

• IE -trident
• 谷歌 -webkit
• 歐朋 -presto
• 蘋果 -webkit
• 火狐 -gecko

Doctype是什么

• 一個(gè)聲明
• 告訴瀏覽器按照何種規(guī)范解析頁(yè)面

div+css 布局優(yōu)點(diǎn)

改版方便，只用修改CSS文件

結(jié)構(gòu)與表現(xiàn)分離

頁(yè)面加載更快，顯示更簡(jiǎn)潔，結(jié)構(gòu)更清晰

易于SEO優(yōu)化

img 中 alt title區(qū)別

alt:當(dāng)無(wú)法加載圖片的時(shí)候，會(huì)使用alt里面的文字代替

title:當(dāng)鼠標(biāo)放在上面有一些建議性信息

strong&em

strong：粗體 強(qiáng)調(diào) 內(nèi)容的重要性

em:斜體 強(qiáng)烈強(qiáng)調(diào) 內(nèi)容的強(qiáng)調(diào)點(diǎn)

漸進(jìn)增強(qiáng)&優(yōu)雅降級(jí)

漸進(jìn)增強(qiáng)：

針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本功能，然后對(duì)高級(jí)瀏覽器追加新的功能

優(yōu)雅降級(jí)：

一開(kāi)始就構(gòu)建完整功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容

區(qū)別：

一個(gè)從簡(jiǎn)單到復(fù)雜，一個(gè)從復(fù)雜到簡(jiǎn)單

為什么利用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)站資源更有效

CDN緩存更方便

突破瀏覽器并發(fā)限制

節(jié)約cookie帶寬

節(jié)約主域名的連接數(shù)，優(yōu)化頁(yè)面響應(yīng)速度

防止不必要的安全問(wèn)題

網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)的重要性

為了讓W(xué)EB發(fā)展更健康，開(kāi)發(fā)者遵循同一的標(biāo)準(zhǔn)，降低了開(kāi)發(fā)的難度和成本，SEO也會(huì)更好做，提高網(wǎng)站的易用性

cookies, sessionStorage,localStorage，webStorage

sessionStorage:不是一種持久化的本地儲(chǔ)存，當(dāng)會(huì)話結(jié)束，數(shù)據(jù)銷毀

localStorage:用于持久化的本地儲(chǔ)存，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)不過(guò)期

webStorage:它是為了更大容量?jī)?chǔ)存設(shè)計(jì)，作用是在本地“儲(chǔ)存”數(shù)據(jù)

cookie：

src&href

src:

? 替換當(dāng)前元素

? 是source的縮寫，指向外部資源的位置，在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到當(dāng)前文檔中

? 當(dāng)瀏覽器解析該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載，編譯執(zhí)行完畢

href:在當(dāng)前文檔和引用資源之間確立聯(lián)系，建立和當(dāng)前元素之間的連接

圖片格式

png-8

png-24

jpeg

gif

svg

webp

一次JS請(qǐng)求一般那些地方有緩存處理

dns緩存

cdn緩存

瀏覽器緩存

服務(wù)器緩存

圖片加載慢的情況如何優(yōu)化

圖片預(yù)加載

CSS圖片可用：CSSsprite、SVGsprite（圖片）

優(yōu)先加載一張壓縮圖片

HTML語(yǔ)義化

含義：用相對(duì)應(yīng)的有一定語(yǔ)義的英文字母的標(biāo)簽來(lái)表示，在去掉CSS樣式表之后，依然能很好的呈現(xiàn)內(nèi)容的結(jié)構(gòu)，代碼結(jié)構(gòu)

優(yōu)點(diǎn)：

? 代碼結(jié)構(gòu)化

? 用戶體驗(yàn)好

? 利于SEO

? 方便其他設(shè)備解析

? 提高可讀性和代碼的可維護(hù)性

前端做好SEO

優(yōu)化html標(biāo)簽——語(yǔ)義化

定義meta標(biāo)簽（關(guān)鍵詞、網(wǎng)站描述）

<img>添加alt屬性 title屬性 定義寬高（width、hieght）——提高頁(yè)面加載速度的

<a>標(biāo)簽適當(dāng)添加 rel=‘’nofollow‘

內(nèi)鏈采用絕對(duì)路徑，減少服務(wù)器的響應(yīng)時(shí)間

導(dǎo)航欄的層級(jí)數(shù)不宜太深

提高頁(yè)面加載速度，壓縮圖片，雪碧圖

結(jié)構(gòu)、表現(xiàn)、行為分離

使用瀏覽器緩存

嵌入方式

行間

<script>（<link>）標(biāo)簽嵌入

外部引用

css選擇器

id

類

派生

屬性

群組

偽類及偽元素

選擇器越特殊越高級(jí)

css屬性使一個(gè)DOM元素不顯示

display：none

visibility:hidden

width:0 height:0

opacity:0

z-index:-1000

超鏈接訪問(wèn)后hover樣式不出現(xiàn)的問(wèn)題

被訪問(wèn)后不再具有hover和active 通過(guò)改變css屬性解決（linked visited hover active）

什么是Css Hack?

行內(nèi)元素和塊級(jí)元素的區(qū)別：

塊元素：<div>|<p>|<ul>|<li>|<h1-6>|<dd>|<dt>|<dl>

? 獨(dú)占一行，即使設(shè)置了寬度

? 支持全部樣式

? 如果沒(méi)設(shè)置寬度，寬度為父級(jí)寬度的100%

內(nèi)聯(lián)元素：<a>|<span>|<b>|<strong>|<em>|<i>

? 支持部分樣式（不支持寬高，margin上下，padding上下）

? 盒子并在一行

? 寬高由內(nèi)容決定

? 產(chǎn)生間距

內(nèi)聯(lián)塊元素：<input>|<img>|<button>|<textarea>|<label>

? 支持全部樣式

? 如果沒(méi)設(shè)置寬高，由內(nèi)容決定

? 盒子自占一行

? 有間距

解釋外邊距重疊

即margin-collapse

相鄰兩個(gè)盒子的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距這種合并外邊距的方式稱為折疊

兩個(gè)相鄰?fù)膺吘喽际钦麛?shù)，折疊結(jié)果是兩者較大值

兩個(gè)相鄰?fù)膺吘喽际秦?fù)數(shù)，折疊結(jié)果是兩者絕對(duì)值得較大值

兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者相加的和

rgba()&opacity

兩者都能實(shí)現(xiàn)透明效果

opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度

rgba()只作用于元素的顏色或背景色（子元素不繼承）

文字垂直||水平居中

垂直：line-height

水平：letter-spacing (可用于消除inline-block元素間的換行符空格間隙問(wèn)題)

如何垂直居中一個(gè)浮動(dòng)元素

px&em

都是長(zhǎng)度單位

px:固定值

em：不是固定值，繼承父元素字體大小

reset.css

用于樣式重置，兼容各瀏覽器

normalize.css提供一套合理的默認(rèn)樣式值

SASS & LESS

css預(yù)處理器

用一種特殊的語(yǔ)法編譯成css

好處：清晰結(jié)構(gòu)，易于擴(kuò)展 實(shí)現(xiàn)多重繼承

display:none & visibility:hidden

display：隱藏對(duì)應(yīng)的元素?cái)D占該元素原來(lái)的空間，寬高等屬性消失

visibility：隱藏對(duì)應(yīng)元素但不擠占改元素原來(lái)的空間，僅僅是視覺(jué)上看不見(jiàn)，瀏覽器繼續(xù)解析

css的link & @import

link屬于html標(biāo)簽，頁(yè)面加載時(shí)同時(shí)加載,權(quán)重更大

@import是css提供的，頁(yè)面加載完成后才會(huì)加載引用的css，ie5以上可用