摘要：語義化語義化是指通過標(biāo)記表示頁面包含的信息，包含了標(biāo)簽的語義化和命名的語義化。兼容性為，為鼠標(biāo)移入狀態(tài)的元素，兼容性標(biāo)簽，所有元素選擇不符合的元素。解決辦法使用控制間距。

web語義化是指通過HTML標(biāo)記表示頁面包含的信息，包含了HTML標(biāo)簽的語義化和css命名的語義化。
HTML標(biāo)簽的語義化是指：通過使用包含語義的標(biāo)簽（如h1-h6）恰當(dāng)?shù)乇硎疚臋n結(jié)構(gòu)
css命名的語義化是指：為html標(biāo)簽添加有意義的class，id補(bǔ)充未表達(dá)的語義，如Microformat通過添加符合規(guī)則的class描述信息
為什么需要語義化：

去掉樣式后頁面呈現(xiàn)清晰的結(jié)構(gòu)

盲人使用讀屏器更好地閱讀

搜索引擎更好地理解頁面，有利于收錄

便團(tuán)隊(duì)項(xiàng)目的可持續(xù)運(yùn)作及維護(hù)

合理的title、description、keywords：搜索對(duì)著三項(xiàng)的權(quán)重逐個(gè)減小，title值強(qiáng)調(diào)重點(diǎn)即可，重要關(guān)鍵詞出現(xiàn)不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內(nèi)容高度概括，長(zhǎng)度合適，不可過分堆砌關(guān)鍵詞，不同頁面description有所不同；keywords列舉出重要關(guān)鍵詞即可

語義化的HTML代碼，符合W3C規(guī)范：語義化代碼讓搜索引擎容易理解網(wǎng)頁

重要內(nèi)容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對(duì)抓取長(zhǎng)度有限制，保證重要內(nèi)容一定會(huì)被抓取

重要內(nèi)容不要用js輸出：爬蟲不會(huì)執(zhí)行js獲取內(nèi)容

少用iframe：搜索引擎不會(huì)抓取iframe中的內(nèi)容

非裝飾性圖片必須加alt

提高網(wǎng)站速度：網(wǎng)站速度是搜索引擎排序的一個(gè)重要指標(biāo)

cookie

session

url重寫

隱藏input

ip地址

的title和alt有什么區(qū)別

title是global attributes之一，用于為元素提供附加的advisory information。通常當(dāng)鼠標(biāo)滑動(dòng)到元素上的時(shí)候顯示。

alt是的特有屬性，是圖片內(nèi)容的等價(jià)描述，用于圖片無法加載時(shí)顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設(shè)置有意義的值，搜索引擎會(huì)重點(diǎn)分析。

聲明必須處于HTML文檔的頭部，在標(biāo)簽之前，HTML5中不區(qū)分大小寫

聲明不是一個(gè)HTML標(biāo)簽，是一個(gè)用于告訴瀏覽器當(dāng)前HTMl版本的指令

現(xiàn)代瀏覽器的html布局引擎通過檢查doctype決定使用兼容模式還是標(biāo)準(zhǔn)模式對(duì)文檔進(jìn)行渲染，一些瀏覽器有一個(gè)接近標(biāo)準(zhǔn)模型。

在HTML4.01中聲明指向一個(gè)DTD，由于HTML4.01基于SGML，所以DTD指定了標(biāo)記規(guī)則以保證瀏覽器正確渲染內(nèi)容

HTML5不基于SGML，所以不用指定DTD

rfc2616中進(jìn)行了定義：

首行是Request-Line包括：請(qǐng)求方法，請(qǐng)求URI，協(xié)議版本，CRLF

首行之后是若干行請(qǐng)求頭，包括general-header，request-header或者entity-header，每個(gè)一行以CRLF結(jié)束

請(qǐng)求頭和消息實(shí)體之間有一個(gè)CRLF分隔

根據(jù)實(shí)際請(qǐng)求需要可能包含一個(gè)消息實(shí)體

一個(gè)請(qǐng)求報(bào)文例子如下：

GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT

name=qiu&age=25

rfc2616中進(jìn)行了定義：

首行是狀態(tài)行包括：HTTP版本，狀態(tài)碼，狀態(tài)描述，后面跟一個(gè)CRLF

首行之后是若干行響應(yīng)頭，包括：通用頭部，響應(yīng)頭部，實(shí)體頭部

響應(yīng)頭部和響應(yīng)實(shí)體之間用一個(gè)CRLF空行分隔

最后是一個(gè)可能的消息實(shí)體

響應(yīng)報(bào)文例子如下：

HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"
Content-Type: text/html; charset=iso-8859-1

{"name": "qiu", "age": 25}

*通用選擇器：選擇所有元素，不參與計(jì)算優(yōu)先級(jí)，兼容性IE6+

#X id選擇器：選擇id值為X的元素，兼容性：IE6+

.X 類選擇器： 選擇class包含X的元素，兼容性：IE6+

X Y后代選擇器： 選擇滿足X選擇器的后代節(jié)點(diǎn)中滿足Y選擇器的元素，兼容性：IE6+

X 元素選擇器： 選擇標(biāo)所有簽為X的元素，兼容性：IE6+

:link，：visited，：focus，：hover，：active鏈接狀態(tài)： 選擇特定狀態(tài)的鏈接元素，順序LoVe HAte，兼容性: IE4+

X + Y直接兄弟選擇器：在X之后第一個(gè)兄弟節(jié)點(diǎn)中選擇滿足Y選擇器的元素，兼容性： IE7+

X > Y子選擇器： 選擇X的子元素中滿足Y選擇器的元素，兼容性： IE7+

X ~ Y兄弟： 選擇X之后所有兄弟節(jié)點(diǎn)中滿足Y選擇器的元素，兼容性： IE7+

[attr]：選擇所有設(shè)置了attr屬性的元素，兼容性IE7+

[attr=value]：選擇屬性值剛好為value的元素

[attr~=value]：選擇屬性值為空白符分隔，其中一個(gè)的值剛好是value的元素

[attr|=value]：選擇屬性值剛好為value或者value-開頭的元素

[attr^=value]：選擇屬性值以value開頭的元素

[attr$=value]：選擇屬性值以value結(jié)尾的元素

[attr*=value]：選擇屬性值中包含value的元素

[:checked]：選擇單選框，復(fù)選框，下拉框中選中狀態(tài)下的元素，兼容性：IE9+

X:after, X::after：after偽元素，選擇元素虛擬子元素（元素的最后一個(gè)子元素），CSS3中::表示偽元素。兼容性:after為IE8+，::after為IE9+

:hover：鼠標(biāo)移入狀態(tài)的元素，兼容性a標(biāo)簽IE4+， 所有元素IE7+

:not(selector)：選擇不符合selector的元素。不參與計(jì)算優(yōu)先級(jí)，兼容性：IE9+

::first-letter：偽元素，選擇塊元素第一行的第一個(gè)字母，兼容性IE5.5+

::first-line：偽元素，選擇塊元素的第一行，兼容性IE5.5+

:nth-child(an + b)：偽類，選擇前面有an + b - 1個(gè)兄弟節(jié)點(diǎn)的元素，其中n

>= 0， 兼容性IE9+

:nth-last-child(an + b)：偽類，選擇后面有an + b - 1個(gè)兄弟節(jié)點(diǎn)的元素

其中n >= 0，兼容性IE9+

X:nth-of-type(an+b)：偽類，X為選擇器，解析得到元素標(biāo)簽，選擇前面有an + b - 1個(gè)相同標(biāo)簽兄弟節(jié)點(diǎn)的元素。兼容性IE9+

X:nth-last-of-type(an+b)：偽類，X為選擇器，解析得到元素標(biāo)簽，選擇后面有an+b-1個(gè)相同標(biāo)簽兄弟節(jié)點(diǎn)的元素。兼容性IE9+

X:first-child：偽類，選擇滿足X選擇器的元素，且這個(gè)元素是其父節(jié)點(diǎn)的第一個(gè)子元素。兼容性IE7+

X:last-child：偽類，選擇滿足X選擇器的元素，且這個(gè)元素是其父節(jié)點(diǎn)的最后一個(gè)子元素。兼容性IE9+

X:only-child：偽類，選擇滿足X選擇器的元素，且這個(gè)元素是其父元素的唯一子元素。兼容性IE9+

X:only-of-type：偽類，選擇X選擇的元素，解析得到元素標(biāo)簽，如果該元素沒有相同類型的兄弟節(jié)點(diǎn)時(shí)選中它。兼容性IE9+

X:first-of-type：偽類，選擇X選擇的元素，解析得到元素標(biāo)簽，如果該元素

是此此類型元素的第一個(gè)兄弟。選中它。兼容性IE9+

概念：將多個(gè)小圖片拼接到一個(gè)圖片中。通過background-position和元素尺寸調(diào)節(jié)需要顯示的背景圖案。

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

減少HTTP請(qǐng)求數(shù)，極大地提高頁面加載速度

增加圖片信息重復(fù)度，提高壓縮比，減少圖片大小

更換風(fēng)格方便，只需在一張或幾張圖片上修改顏色或樣式即可實(shí)現(xiàn)

缺點(diǎn)：

圖片合并麻煩

維護(hù)麻煩，修改一個(gè)圖片可能需要從新布局整個(gè)圖片，樣式

聯(lián)系：它們都能讓元素不可見

區(qū)別：

display:none;會(huì)讓元素完全從渲染樹中消失，渲染的時(shí)候不占據(jù)任何空間；visibility: hidden;不會(huì)讓元素從渲染樹消失，渲染師元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見

display: none;是非繼承屬性，子孫節(jié)點(diǎn)消失由于元素從渲染樹消失造成，通過修改子孫節(jié)點(diǎn)屬性無法顯示；visibility: hidden;是繼承屬性，子孫節(jié)點(diǎn)消失由于繼承了hidden，通過設(shè)置visibility: visible;可以讓子孫節(jié)點(diǎn)顯式

修改常規(guī)流中元素的display通常會(huì)造成文檔重排。修改visibility屬性只會(huì)造成本元素的重繪。

讀屏器不會(huì)讀取display: none;元素內(nèi)容；會(huì)讀取visibility: hidden;元素內(nèi)容

link是HTML方式， @import是CSS方式

link最大限度支持并行下載，@import過多嵌套導(dǎo)致串行下載，出現(xiàn)FOUC

link可以通過rel="alternate stylesheet"指定候選樣式

瀏覽器對(duì)link支持早于@import，可以使用@import對(duì)老瀏覽器隱藏樣式

@import必須在樣式規(guī)則之前，可以在css文件中引用其他文件

總體來說：link優(yōu)于@import

block元素特點(diǎn)：

1.處于常規(guī)流中時(shí)，如果width沒有設(shè)置，會(huì)自動(dòng)填充滿父容器
2.可以應(yīng)用margin/padding
3.在沒有設(shè)置高度的情況下會(huì)擴(kuò)展高度以包含常規(guī)流中的子元素
4.處于常規(guī)流中時(shí)布局時(shí)在前后元素位置之間（獨(dú)占一個(gè)水平空間）
5.忽略vertical-align

inline元素特點(diǎn)

1.水平方向上根據(jù)direction依次布局
2.不會(huì)在元素前后進(jìn)行換行
3.受white-space控制
4.margin/padding在豎直方向上無效，水平方向上有效
5.width/height屬性對(duì)非替換行內(nèi)元素?zé)o效，寬度由元素內(nèi)容決定
6.非替換行內(nèi)元素的行框高由line-height確定，替換行內(nèi)元素的行框高由height,margin,padding,border決定
6.浮動(dòng)或絕對(duì)定位時(shí)會(huì)轉(zhuǎn)換為block
7.vertical-align屬性生效

IE6不支持min-height，解決辦法使用css hack：

.target {
    min-height: 100px;
    height: auto !important;
    height: 100px;   // IE6下內(nèi)容高度超過會(huì)自動(dòng)擴(kuò)展高度
}

ol內(nèi)li的序號(hào)全為1，不遞增。解決方法：為li設(shè)置樣式display: list-item;

未定位父元素overflow: auto;，包含position: relative;子元素，子元素高于父元素時(shí)會(huì)溢出。解決辦法：1）子元素去掉position: relative;; 2）不能為子元素去掉定位時(shí)，父元素position: relative;

IE6只支持a標(biāo)簽的:hover偽類，解決方法：使用js為元素監(jiān)聽mouseenter，mouseleave事件，添加類實(shí)現(xiàn)效果：

aaaa bbbbbDDDDDDDDDDDd aaaa lkjlkjdf j

IE5-8不支持opacity，解決辦法：

.opacity {
    opacity: 0.4
    filter: alpha(opacity=60); /* for IE5-7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}

IE6在設(shè)置height小于font-size時(shí)高度值為font-size，解決辦法：font-size: 0;

IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片

IE6-7不支持display: inline-block解決辦法：設(shè)置inline并觸發(fā)hasLayout

    display: inline-block;
    *display: inline;
    *zoom: 1;

IE6下浮動(dòng)元素在浮動(dòng)方向上與父元素邊界接觸元素的外邊距會(huì)加倍。解決辦法：

1）使用padding控制間距。
2）浮動(dòng)元素display: inline;這樣解決問題且無任何副作用：css標(biāo)準(zhǔn)規(guī)定浮動(dòng)元素display:inline會(huì)自動(dòng)調(diào)整為block

通過為塊級(jí)元素設(shè)置寬度和左右margin為auto時(shí)，IE6不能實(shí)現(xiàn)水平居中，解決方法：為父元素設(shè)置text-align: center;

容器元素閉合標(biāo)簽前添加額外元素并設(shè)置clear: both

父元素觸發(fā)塊級(jí)格式化上下文(見塊級(jí)可視化上下文部分)

設(shè)置容器元素偽元素進(jìn)行清理推薦的清理浮動(dòng)方法

如果display為none，那么position和float都不起作用，這種情況下元素不產(chǎn)生框

否則，如果position值為absolute或者fixed，框就是絕對(duì)定位的，float的計(jì)算值為none，display根據(jù)下面的表格進(jìn)行調(diào)整。

否則，如果float不是none，框是浮動(dòng)的，display根據(jù)下表進(jìn)行調(diào)整

否則，如果元素是根元素，display根據(jù)下表進(jìn)行調(diào)整

其他情況下display的值為指定值

總結(jié)起來：絕對(duì)定位、浮動(dòng)、根元素都需要調(diào)整display

毗鄰的兩個(gè)或多個(gè)margin會(huì)合并成一個(gè)margin，叫做外邊距折疊。規(guī)則如下：

兩個(gè)或多個(gè)毗鄰的普通流中的塊元素垂直方向上的margin會(huì)折疊

浮動(dòng)元素/inline-block元素/絕對(duì)定位元素的margin不會(huì)和垂直方向上的其他元素的margin折疊

創(chuàng)建了塊級(jí)格式化上下文的元素，不會(huì)和它的子元素發(fā)生margin折疊

元素自身的margin-bottom和margin-top相鄰時(shí)也會(huì)折疊

轉(zhuǎn)載自 : https://github.com/qiu-deqing/FE-interview