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

web語義化是指通過HTML標記表示頁面包含的信息，包含了HTML標簽的語義化和css命名的語義化。
HTML標簽的語義化是指：通過使用包含語義的標簽（如h1-h6）恰當地表示文檔結構
css命名的語義化是指：為html標簽添加有意義的class，id補充未表達的語義，如Microformat通過添加符合規則的class描述信息
為什么需要語義化：

去掉樣式后頁面呈現清晰的結構

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

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

便團隊項目的可持續運作及維護

合理的title、description、keywords：搜索對著三項的權重逐個減小，title值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面title要有所不同；description把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面description有所不同；keywords列舉出重要關鍵詞即可

語義化的HTML代碼，符合W3C規范：語義化代碼讓搜索引擎容易理解網頁

重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容一定會被抓取

重要內容不要用js輸出：爬蟲不會執行js獲取內容

少用iframe：搜索引擎不會抓取iframe中的內容

非裝飾性圖片必須加alt

提高網站速度：網站速度是搜索引擎排序的一個重要指標

cookie

session

url重寫

隱藏input

ip地址

的title和alt有什么區別

title是global attributes之一，用于為元素提供附加的advisory information。通常當鼠標滑動到元素上的時候顯示。

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

聲明必須處于HTML文檔的頭部，在標簽之前，HTML5中不區分大小寫

聲明不是一個HTML標簽，是一個用于告訴瀏覽器當前HTMl版本的指令

現代瀏覽器的html布局引擎通過檢查doctype決定使用兼容模式還是標準模式對文檔進行渲染，一些瀏覽器有一個接近標準模型。

在HTML4.01中聲明指向一個DTD，由于HTML4.01基于SGML，所以DTD指定了標記規則以保證瀏覽器正確渲染內容

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

rfc2616中進行了定義：

首行是Request-Line包括：請求方法，請求URI，協議版本，CRLF

首行之后是若干行請求頭，包括general-header，request-header或者entity-header，每個一行以CRLF結束

請求頭和消息實體之間有一個CRLF分隔

根據實際請求需要可能包含一個消息實體

一個請求報文例子如下：

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中進行了定義：

首行是狀態行包括：HTTP版本，狀態碼，狀態描述，后面跟一個CRLF

首行之后是若干行響應頭，包括：通用頭部，響應頭部，實體頭部

響應頭部和響應實體之間用一個CRLF空行分隔

最后是一個可能的消息實體

響應報文例子如下：

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}

*通用選擇器：選擇所有元素，不參與計算優先級，兼容性IE6+

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

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

X Y后代選擇器： 選擇滿足X選擇器的后代節點中滿足Y選擇器的元素，兼容性：IE6+

X 元素選擇器： 選擇標所有簽為X的元素，兼容性：IE6+

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

X + Y直接兄弟選擇器：在X之后第一個兄弟節點中選擇滿足Y選擇器的元素，兼容性： IE7+

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

X ~ Y兄弟： 選擇X之后所有兄弟節點中滿足Y選擇器的元素，兼容性： IE7+

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

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

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

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

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

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

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

[:checked]：選擇單選框，復選框，下拉框中選中狀態下的元素，兼容性：IE9+

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

:hover：鼠標移入狀態的元素，兼容性a標簽IE4+， 所有元素IE7+

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

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

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

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

>= 0， 兼容性IE9+

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

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

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

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

X:first-child：偽類，選擇滿足X選擇器的元素，且這個元素是其父節點的第一個子元素。兼容性IE7+

X:last-child：偽類，選擇滿足X選擇器的元素，且這個元素是其父節點的最后一個子元素。兼容性IE9+

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

X:only-of-type：偽類，選擇X選擇的元素，解析得到元素標簽，如果該元素沒有相同類型的兄弟節點時選中它。兼容性IE9+

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

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

概念：將多個小圖片拼接到一個圖片中。通過background-position和元素尺寸調節需要顯示的背景圖案。

優點：

減少HTTP請求數，極大地提高頁面加載速度

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

更換風格方便，只需在一張或幾張圖片上修改顏色或樣式即可實現

缺點：

圖片合并麻煩

維護麻煩，修改一個圖片可能需要從新布局整個圖片，樣式

聯系：它們都能讓元素不可見

區別：

display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見

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

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

讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

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

link最大限度支持并行下載，@import過多嵌套導致串行下載，出現FOUC

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

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

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

總體來說：link優于@import

block元素特點：

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

inline元素特點

1.水平方向上根據direction依次布局
2.不會在元素前后進行換行
3.受white-space控制
4.margin/padding在豎直方向上無效，水平方向上有效
5.width/height屬性對非替換行內元素無效，寬度由元素內容決定
6.非替換行內元素的行框高由line-height確定，替換行內元素的行框高由height,margin,padding,border決定
6.浮動或絕對定位時會轉換為block
7.vertical-align屬性生效

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

.target {
    min-height: 100px;
    height: auto !important;
    height: 100px;   // IE6下內容高度超過會自動擴展高度
}

ol內li的序號全為1，不遞增。解決方法：為li設置樣式display: list-item;

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

IE6只支持a標簽的:hover偽類，解決方法：使用js為元素監聽mouseenter，mouseleave事件，添加類實現效果：

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在設置height小于font-size時高度值為font-size，解決辦法：font-size: 0;

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

IE6-7不支持display: inline-block解決辦法：設置inline并觸發hasLayout

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

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

1）使用padding控制間距。
2）浮動元素display: inline;這樣解決問題且無任何副作用：css標準規定浮動元素display:inline會自動調整為block

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

容器元素閉合標簽前添加額外元素并設置clear: both

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

設置容器元素偽元素進行清理推薦的清理浮動方法

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

否則，如果position值為absolute或者fixed，框就是絕對定位的，float的計算值為none，display根據下面的表格進行調整。

否則，如果float不是none，框是浮動的，display根據下表進行調整

否則，如果元素是根元素，display根據下表進行調整

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

總結起來：絕對定位、浮動、根元素都需要調整display

毗鄰的兩個或多個margin會合并成一個margin，叫做外邊距折疊。規則如下：

兩個或多個毗鄰的普通流中的塊元素垂直方向上的margin會折疊

浮動元素/inline-block元素/絕對定位元素的margin不會和垂直方向上的其他元素的margin折疊

創建了塊級格式化上下文的元素，不會和它的子元素發生margin折疊

元素自身的margin-bottom和margin-top相鄰時也會折疊

轉載自 : https://github.com/qiu-deqing/FE-interview