前端面試資源（二）

時間 2019-12-05

原文原文鏈接

web語義化

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

去掉樣式後頁面呈現清晰的結構
盲人使用讀屏器更好地閱讀
搜索引擎更好地理解頁面，有利於收錄
便團隊項目的可持續運做及維護

前端須要注意哪些SEO

合理的title、description、keywords：搜索對着三項的權重逐個減少，title值強調重點便可，重要關鍵詞出現不要超過2次，並且要靠前，不一樣頁面title要有所不一樣；description把頁面內容高度歸納，長度合適，不可過度堆砌關鍵詞，不一樣頁面description有所不一樣；keywords列舉出重要關鍵詞便可
語義化的HTML代碼，符合W3C規範：語義化代碼讓搜索引擎容易理解網頁
重要內容HTML代碼放在最前：搜索引擎抓取HTML順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容必定會被抓取
重要內容不要用js輸出：爬蟲不會執行js獲取內容
少用iframe：搜索引擎不會抓取iframe中的內容
非裝飾性圖片必須加alt
提升網站速度：網站速度是搜索引擎排序的一個重要指標

web開發中會話跟蹤的方法有哪些

cookie
session
url重寫
隱藏input
ip地址

`<img>`的`title`和`alt`有什麼區別

title是global attributes之一，用於爲元素提供附加的advisory information。一般當鼠標滑動到元素上的時候顯示。
alt是<img>的特有屬性，是圖片內容的等價描述，用於圖片沒法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

doctype是什麼,舉例常見doctype及特色

<!doctype>聲明必須處於HTML文檔的頭部，在<html>標籤以前，HTML5中不區分大小寫
<!doctype>聲明不是一個HTML標籤，是一個用於告訴瀏覽器當前HTMl版本的指令
現代瀏覽器的html佈局引擎經過檢查doctype決定使用兼容模式仍是標準模式對文檔進行渲染，一些瀏覽器有一個接近標準模型。
在HTML4.01中<!doctype>聲明指向一個DTD，因爲HTML4.01基於SGML，因此DTD指定了標記規則以保證瀏覽器正確渲染內容
HTML5不基於SGML，因此不用指定DTD

HTTP request報文結構是怎樣的

rfc2616中進行了定義：css

首行是Request-Line包括：請求方法，請求URI，協議版本，CRLF
首行以後是若干行請求頭，包括general-header，request-header或者entity-header，每一個一行以CRLF結束
請求頭和消息實體之間有一個CRLF分隔
根據實際請求須要可能包含一個消息實體

一個請求報文例子以下：html

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

HTTP response報文結構是怎樣的

rfc2616中進行了定義：前端

首行是狀態行包括：HTTP版本，狀態碼，狀態描述，後面跟一個CRLF
首行以後是若干行響應頭，包括：通用頭部，響應頭部，實體頭部
響應頭部和響應實體之間用一個CRLF空行分隔
最後是一個可能的消息實體

響應報文例子以下：java

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}

CSS選擇器有哪些

*通用選擇器：選擇全部元素，不參與計算優先級，兼容性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+git

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

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

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+web

css sprite是什麼,有什麼優缺點

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

優勢：cookie

減小HTTP請求數，極大地提升頁面加載速度
增長圖片信息重複度，提升壓縮比，減小圖片大小
更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現

缺點：

圖片合併麻煩
維護麻煩，修改一個圖片可能須要重新佈局整個圖片，樣式

`display: none;`與`visibility: hidden;`的區別

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

區別：

display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續佔據空間，只是內容不可見
display: none;是非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；visibility: hidden;是繼承屬性，子孫節點消失因爲繼承了hidden，經過設置visibility: visible;可讓子孫節點顯式
修改常規流中元素的display一般會形成文檔重排。修改visibility屬性只會形成本元素的重繪。
讀屏器不會讀取display: none;元素內容；會讀取visibility: hidden;元素內容

`link`與`@import`的區別

link是HTML方式， @import是CSS方式
link最大限度支持並行下載，@import過多嵌套致使串行下載，出現FOUC
link能夠經過rel="alternate stylesheet"指定候選樣式
瀏覽器對link支持早於@import，可使用@import對老瀏覽器隱藏樣式
@import必須在樣式規則以前，能夠在css文件中引用其餘文件
整體來講：link優於@import

`display: block;`和`display: inline;`的區別

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瀏覽器有哪些常見的bug,缺陷或者與標準不一致的地方,如何解決

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;

<style type="text/css">
.outer {
    width: 215px;
    height: 100px;
    border: 1px solid red;
    overflow: auto;
    position: relative;  /* 修復bug */
}
.inner {
    width: 100px;
    height: 200px;
    background-color: purple;
    position: relative;
}
</style>

<div class="outer">
    <div class="inner"></div>
</div>

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

<style type="text/css">
.p:hover,
.hover {
    background: purple;
}
</style>

<p class="p" id="target">aaaa bbbbb<span>DDDDDDDDDDDd</span> aaaa lkjlkjdf j</p>

<script type="text/javascript">
function addClass(elem, cls) {
    if (elem.className) {
        elem.className += ' ' + cls;
    } else {
        elem.className = cls;
    }
}
function removeClass(elem, cls) {
    var className = ' ' + elem.className + ' ';
    var reg = new RegExp(' +' + cls + ' +', 'g');
    elem.className = className.replace(reg, ' ').replace(/^ +| +$/, '');
}

var target = document.getElementById('target');
if (target.attachEvent) {
    target.attachEvent('onmouseenter', function () {
        addClass(target, 'hover');
    });
    target.attachEvent('onmouseleave', function () {
        removeClass(target, 'hover');
    })
}
</script>

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,float,position的關係

若是display爲none，那麼position和float都不起做用，這種狀況下元素不產生框
不然，若是position值爲absolute或者fixed，框就是絕對定位的，float的計算值爲none，display根據下面的表格進行調整。
不然，若是float不是none，框是浮動的，display根據下表進行調整
不然，若是元素是根元素，display根據下表進行調整
其餘狀況下display的值爲指定值

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

外邊距摺疊(collapsing margins)

毗鄰的兩個或多個margin會合併成一個margin，叫作外邊距摺疊。規則以下：

兩個或多個毗鄰的普通流中的塊元素垂直方向上的margin會摺疊
浮動元素/inline-block元素/絕對定位元素的margin不會和垂直方向上的其餘元素的margin摺疊
建立了塊級格式化上下文的元素，不會和它的子元素髮生margin摺疊
元素自身的margin-bottom和margin-top相鄰時也會摺疊

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。