34道常見的HTML+CSS面試題（附答案）

眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java(100G) Python(80G) 大數據區塊鏈測試 PPT JS(40g+300教程) HTML 簡歷領取相關學習資料！

一、HTML

1、<image>標簽上title屬性與alt屬性的區別是什么？

alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。

這包括那些使用本來就不支持圖像顯示或者圖像顯示被關閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性為設置該屬性的元素提供建議性的信息。使用title屬性提供非本質的額外信息。參考《alt和title屬性的區別及應用》

2、分別寫出以下幾個HTML標簽：文字加粗、下標、居中、字體

加粗：、

下標：

居中：<center>

字體：、<basefont>、參考《HTML標簽列表》

3、請寫出至少5個html5新增的標簽，并說明其語義和應用場景

section：定義文檔中的一個章節

nav：定義只包含導航鏈接的章節

header：定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。

footer：定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。

參考《HTML5 標簽列表》

4、請說說你對標簽語義化的理解？

a. 去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構

b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

c. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

d. 便于團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

5、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

聲明位于文檔中的最前面，處于標簽之前。告知瀏覽器以何種模式來渲染文檔。

嚴格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標準運行。

在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

6、你知道多少種Doctype文檔類型？

標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，

Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。

7、HTML與XHTML——二者有什么區別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關閉。

c. 標簽名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差異》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的內容標簽（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失

h. sessionStorage 的數據在頁面會話結束時會被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術webworker, websocket等

移除的元素：

a. 純表現的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性產生負面影響的元素：frame，frameset，noframes；

9、iframe的優缺點？

優點：

a. 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通信

缺點：

a. iframe會阻塞主頁面的Onload事件

b. 無法被一些搜索引擎索引到

c. 頁面會增加服務器的http請求

d. 會產生很多頁面，不容易管理。

參考《iframe的一些記錄》

10、Quirks模式是什么？它和Standards模式有什么區別？

在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區別：總體會有布局、樣式解析和腳本執行三個方面的區別。

a. 盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。

c. 設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用

d. 設置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

11、請闡述table的缺點

a. 太深的嵌套，比如table>tr>td>h3，會導致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。

b. 靈活性差，比如要將tr設置border等屬性，是不行的，得通過td

c. 代碼臃腫，當在table中套用table的時候，閱讀代碼會顯得異常混亂

d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。

e. 不夠語義

參考《為什么說table表格布局不好？》

12、簡述一下src與href的區別

src用于替換當前元素；href用于在當前文檔和引用資源之間確立聯系。

src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置

href是Hypertext Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接

公眾號【傳智播客博學谷】回復關鍵詞：前端 PS Java Python 大數據區塊鏈測試 PPT JS HTML 簡歷領取相關學習資料！

元素和偽類

說到這個，我們先回顧一下，偽類選擇器和偽元素選擇器，老版的瀏覽器沒有嚴格區分下面 2 種寫法。

a:after{}
a::after{}

在新的標準中，單冒號(:)用于 CSS3 偽類，雙冒號(::)用于 CSS3 偽元素，我們平時開發時可以注意一下，當然大多數瀏覽器兩種寫法都能識別。
常見偽元素和偽類偽類

:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()

偽類一般用于一個元素的某個狀態，比如說鼠標懸浮，按鈕點擊，鏈接已經訪問，輸入框聚焦等，還用于選擇某個特殊元素，比如說多個元素中的第一個，最后一個，偶數，奇數等。其作用是對某個符合以上條件的元素添加一些樣式。

a:hover{
        text-decoration: underline;
    }
a:active {
    color: blue;
}
a:link {
    color: red;
}
a:visited {
    color: green;
}

上面的例子展示了一個a標簽在不同狀態下的不同樣式，在未點擊鏈接之前，a標簽呈現紅色字體(link)，在鼠標移到a標簽上是，a標簽出現下劃線(hover)，在鼠標按下的時候，a標簽變為藍色(active)，點擊完了之后，a標簽變為綠色(visited)。可以看到，偽類的作用是為了給不同狀態的標簽添加樣式。

偽元素

::first-letter, ::first-line, ::before, ::after

在內容模塊中提到，偽元素如果沒有設置“content”屬性，偽元素是無用的。
使用偽元素插入的內容在頁面的源碼里是不可見的，只能在 css 里可見。
插入的元素在默認情況下是內聯元素（或者，在 html5 中，在文本語義的類別里）。因此，為了給插入的元素賦予高度，填充，邊距等等，你通常必須顯式地定義它是一個塊級元素。
還要注意的是典型的 CSS 繼承規則適用于插入的元素。例如，你有字體系列黑體，宋體，無襯線字體應用到 body 元素里，然后偽元素會像其他元素一樣繼承這些字體系列。
偽元素不會自然繼承自父元素(如 padding margins)的樣式。
你的直覺是 :before 和 :after 偽元素可能是插入的內容會被注入到目標元素的前或后注入。其實不是這樣的，注入的內容將是有關聯的目標元素的子元素，但它會被置于這個元素的任何內容的“前”或“后”。

<head>
    <style type="text/css">
        p.box::before {
          content: "#";
          border: solid 1px black;
          padding: 2px;
          margin: 0 10px 0 0;
        }
        p.box::after {
          content: "#";
          border: solid 1px black;
          padding: 2px;
          margin: 0 10px 0 0;
        }
    </style>
</head>
<body>
<p class="box">Other content.</p>
</body>

運行效果：

可以看到，我們html部分只寫了一個元素，但是我們利用偽元素渲染出來 3 個部分，前中后，這里我們可以認為，偽元素一般用來輔助html的元素。但在內容頁面的源碼又看不到，利用偽元素可以實現很多神奇的功能，這里不做具體講解，后面再出具體教程。

神奇的偽類：focus-within

言歸正傳，回到我們的主角focus-within，我們知道，偽類focus是指一個元素獲得焦點時，為其添加樣式。focus-within的范圍更廣，它表示一個元素獲得焦點，或該元素的后代元素獲得焦點。劃重點，它或它的后代獲得焦點。這也就意味著，它或它的后代獲得焦點，都可以觸發 :focus-within。

這個屬性有點類似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，都可以接收觸發 :focus-within 事件，類似下面這個簡單的例子這樣：

<html>
    <div class="box g-father">
        <div class="box g-children">
            <div class="box button" tabindex="1">button</div>
        </div>
  </div>
  <div class="g-body">HTML</div>
  <style>
    div {
      box-sizing: border-box;
    }
    .button,.g-children {
        width: 100%;
        height: 100%;
        padding: 20px;
        border: 1px solid;
    }
    .g-father {
        width: 200px;
        height: 200px;
        padding: 20px;
        border: 1px solid;
    }
    .g-body {
        margin-top: 20px;
        width: 200px;
        border: 1px solid;
    }
    .g-body:focus-within {
        background-color: #5daf34;
    }
    .g-father:focus-within {
        background-color: #3a8ee6;
    }
    .g-children:focus-within{
        background-color: #2c3e50;
    }
    .button:focus-within {
        background-color: #606266;
        color: red;
    }
        </style>
</html>

運行結果：

可以看到，在button獲得焦點時，因為冒泡的原因，它的父級元素全部應用了:focus-within的樣式。這里值得注意的是，正常的div是不能獲得焦點的，設置 tabindex 屬性才能獲取焦點，同時按鍵盤 Tab 鍵也可讓其獲取焦點，其中 tabindex 的值越小在 tab 鍵切換的時候就會首先聚焦。根據:focus-within的特性，我們在不利用 js 的情況下，實現很多實用性的功能。

感應用戶聚焦區域

利用focus-within可以增加用戶的感知區域，讓用戶獲得更好的視覺反饋。

<html>
    <div class="g-container">
      <input type="text" placeholder="user name" class="g_input" >
      <input type="text" placeholder="code" class="g_input" >
  </div>
  <style>
    .g-container {
        margin-top: 10vh;
    }
    .g-container {
        padding: 10px;
        width: 30vw;
        border: 1px solid #eee;
        transition: all .3s;
        text-align: center;
    }
    .g-container:focus-within {
        transform: translateY(-4px);
        box-shadow: 0 0 10px #ddd;
        border-color: hsl(199, 98%, 48%);
    }
    .g_input {
        border: none;
        width: 20vw;
        padding: 15px;
        font-size: 18px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        overflow: hidden;
        transition: 0.3s;
        box-shadow: 0 0 0px #ddd;
        &:focus {
            box-shadow: 0 0 10px #ddd;
            border-color: hsl(199, 98%, 48%);
        }
    }
    </style>
</html>

可以看到在沒有任何javascript邏輯控制情況下，用focus-within就實現了上面的效果。

實現離屏導航

我們先看一下效果：

可以看到是一個很棒的導航效果，而且真個實現沒有使用javascript控制，這無疑在性能和體驗上都有不少提升。具體源碼可以看下面的地址：https://codepen.io/dannievinther/pen/NvZjvz

實現 B 站，掘金等網站登錄動效切換

我們平時可能注意到了，B 站和掘金在用戶輸入密碼的時候，上面的圖片是捂著眼睛的，這里我們也可以用focus-within來實現。

<html>
    <div class="g-wrap"></div>
        <div class="g-container">
            <h2>登錄</h2>
            <div class="g-username">
                <input maxlength="64" placeholder="請輸入手機號或郵箱" class="input">
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" class="g-username">
            </div>
            <div class="g-password">
                <input type="password" maxlength="64" placeholder="請輸入密碼" class="input">
                <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png" class="g-password">
            </div>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" class="g-normal">
    </div>
<style>
.g-wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
}
.g-container {
  position: relative;
  width: 318px;
  margin: 100px auto;
  height: 370px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  z-index: 10;
}
.g-container h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 30px;
}
.g-container input {
  outline: none;
  padding: 10px;
  width: 100%;
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  outline: none;
  box-sizing: border-box;
  font-size: 16px;
}
img {
  position: absolute;
  top: -20%;
  left: 50%;
  width: 120px;
  height: 95px;
  transform: translate(-50%, 0);
}
.g-username {
  margin-bottom: 10px;
}
.g-username img {
  display: none;
  width: 120px;
  height: 113px;
}
.g-username:focus-within ~ img {
  display: none;
}
.g-username:focus-within input {
  border-color: #007fff;
}
.g-username:focus-within img {
  display: block;
}
.g-password {
  margin-bottom: 10px;
}
.g-password img {
  display: none;
  width: 103px;
  height: 84px;
  top: -15%;
}
.g-password:focus-within ~ img {
  display: none;
}
.g-password:focus-within input {
  border-color: #007fff;
}
.g-password:focus-within img {
  display: block;
}
</style>
</html>

可以看到，在不適用js的情況下，也能實現動態切換圖片的效果，但是還是有一些局限，dom排列只能是父級向上，不能把元素放在focus元素的子元素里面。所以沒有js靈活，但是代碼量更少。

focus-within 兼容性

因為 css3 的新增特性一直存在兼容問題，這里查詢了一下它的兼容性，看到紅色區域還是不算太慘淡，出來 ie,其他瀏覽器基本都支持了。

所有的源碼都可以在我的倉庫地址：https://github.com/jackzhujie/vue-study
個人博客：http://blog.aizhifou.cn
文章參考鏈接：https://www.cnblogs.com/coco1s/p/9406413.html

學習如逆水行舟，不進則退，前端技術飛速發展，如果每天不堅持學習，就會跟不上，我會陪著大家，每天堅持推送博文，跟大家一同進步，希望大家能關注我，第一時間收到最新文章。

言

看了一下各種面試題，選擇題是必有的

所以我整理了一些經典的前端面試選擇題，希望能對大家日后找工作有所幫助！

HTML/CSS

1、在 css 選擇器當中，優先級排序正確的是（）

A、id選擇器>標簽選擇器>類選擇器

B、標簽選擇器>類選擇器>id選擇器

C、類選擇器>標簽選擇器>id選擇器

D、id選擇器>類選擇器>標簽選擇器

解析：

選D

4個等級的定義如下：

第一等：代表內聯樣式，如: style=””，權值為1000

第二等：代表ID選擇器，如：#content，權值為100

第三等：代表類，偽類和屬性選擇器，如.content，權值為10

第四等：代表類型選擇器和偽元素選擇器，如div p，權值為1

2、下列定義的 css 中，哪個權重是最低的？（）

A、#game .name

B、#game .name span

C、#game div

D、#game div.name

解析：

選C

權重越大，優先級越高

CSS選擇器優先級是指“基礎選擇器”的優先級：

ID > CLASS > ELEMENT > *

3、關于HTML語義化，以下哪個說法是正確的？（）

A、語義化的HTML有利于機器的閱讀，如PDA手持設備、搜索引擎爬蟲；但不利于人的閱讀

B、Table 屬于過時的標簽，遇到數據列表時，需盡量使用 div 來模擬表格

C、語義化是HTML5帶來的新概念，此前版本的HTML無法做到語義化

D、header、article、address都屬于語義化明確的標簽

解析：

選D

1、什么是HTML語義化？

根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

2、為什么要語義化？

為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構

用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；

有利于SEO ：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：

爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；

方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化

4、CSS 樣式，下面哪一個元素能夠達到最大寬度，且前后各有一個換行？（）

A、Block Element

B、Square Element

C、Side Element

D、Box Element

解析：

選A

塊級元素block element

行內元素 inline element

行內塊元素 inline-block element

5、下面使用Animate-timing-function定義的貝塞爾曲線，哪一個是先快后慢的（）

A、animation-timing-function :

cubic-bezier(.22,1.23,.97,.89)

B、animation-timing-function :

cubic-bezier(1.23,..22,97,.89)

C、animation-timing-function :

cubic-bezier(1.23,.97,.89,.22)

D、animation-timing-function ：

cubic-bezier(.22,.97,.89,1.23)

解析：

選A

cubic-bezier即為貝茲曲線中的繪制方法

有四點，分別為P0-3，其中P0、P3是默認的點，對應了[0,0], [1,1]。

而剩下的P1、P2兩點則是我們通過cubic-bezier()自定義的。

cubic-bezier(x1, y1, x2, y2) 為自定義，x1,x2,y1,y2的值范圍在[0, 1]。

6、放在HTML里的哪一部分JavaScripts會在頁面加載的時候被執行？（）

A、文件頭部位置

B、文件尾

C、<head>標簽部分

D、<body>標簽部分

解析：

選D

head部分中的JavaScripts會在被調用的時候才執行。

body部分中的JavaScripts會在頁面加載的時候被執行。

7、問一份標準的HTML文檔有哪幾個必須的HTML標簽？（）

A、<html>

B、<head>

C、<title>

D、<body>

解析：

選A、B、C、D

注意一下題目說的是標準的HTML文檔

8、下列說法正確的有：（）

A、visibility:hidden;所占據的空間位置仍然存在，僅為視覺上的完全透明；

B、display:none;不為被隱藏的對象保留其物理空間；

C、visibility:hidden;與display:none;兩者沒有本質上的區別；

D、visibility:hidden;產生reflow和repaint（回流與重繪）；

解析：

選A、B

visiblity:看不見，摸的著.

display:看不見，摸不著.

display是dom級別的，可以渲染和重繪。

visiblity不是dom級別的，不能重繪，只能渲染

9、請選出所有的置換元素（）

A、img

B、input

C、textarea

D、select

解析：

選A、B、C、D

置換元素：瀏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容

例如：

瀏覽器會根據<img>標簽的src屬性的
值來讀取圖片信息并顯示出來，而如果查看html代碼，則看不到圖片的實際內容；
<input>標簽的type屬性來決定是顯示輸入 框，還是單選按鈕等。 
html中 的<img>、<input>、<textarea>、<select>、<object> 都是置換元素
這些元素往往沒有實際的內容，即是一個空元素。
置換元素在其顯示中生成了框，這也就是有的內聯元素能夠設置寬高的原因。

不可替換元素：html 的大多數元素是不可替換元素，即其內容直接表現給用戶端（如瀏覽器）

例如：

<label>label中的內容</label> 標簽<label>是一個非置換元素，文字label中的內容”將全被顯示。

10、以下哪些動畫效果無法通過貝塞爾曲線cubic-bezier實現（）

A、linear

B、ease

C、fade-in

D、ease-out

解析：

選C

fade-in和fade-out為淡入淡出效果

11、下面屬于CSS3新增屬性的有？（）

A、box-shadow

B、text-shadow

C、border-radius

D、rgba

解析：

選A、B、C、D

下邊我對CSS3新增屬性用法的整理：

1、box-shadow（陰影效果）

2、border-color（為邊框設置多種顏色）

3、border-image（圖片邊框）

4、text-shadow（文本陰影）

5、text-overflow（文本截斷）

6、word-wrap（自動換行）

7、border-radius（圓角邊框）

8、opacity（透明度）

9、box-sizing（控制盒模型的組成模式）

10、resize（元素縮放）

11、outline（外邊框）

12、background-size（指定背景圖片尺寸）

13、background-origin（指定背景圖片從哪里開始顯示）

14、background-clip（指定背景圖片從什么位置開始裁剪）

15、background（為一個元素指定多個背景）

16、hsl（通過色調、飽和度、亮度來指定顏色顏色值）

17、hsla（在hsl的基礎上增加透明度設置）

18、rgba（基于rgb設置顏色，a設置透明度）

12、input元素的type屬性的取值可以是( )

A、image

B、checkbox

C、button

D、select

解析：

選A、B、C

語法：

<input type=”value”>

屬性值：

Button：定義可點擊按鈕(多數情況下，用于通過JavaScript啟動腳本)

CheckBox：定義復選框

File：定義輸入字段和”瀏覽”按鈕，供文件上傳

Hidden：定義隱藏的輸入字段

Image：定義圖像形式的提交按鈕

Password：定義密碼字段，該字段中的字符被遮碼

Radio：定義單選按鈕

Reset：定義重置按鈕，重置按鈕會清除表單中的所有數據

Submit：定義提交按鈕，提交按鈕會把表單數據發送到服務器

Text：定義單行輸入字段，用戶可在其中輸入文本，默認寬度為20個字符

13、新窗口打開網頁，用到以下哪個值（）

A、_self

B、_blank

C、_top

D、_parent

解析：

選B

在html中通過<a>標簽打開一個鏈接，通過 <a> 標簽的 target

屬性規定在何處打開鏈接文檔。

如果在標簽<a>中寫入target屬性，則瀏覽器會根據target的屬性值去打開與其命名或名稱相符的 框架<frame>或者窗口.

在target中還存在四個保留的屬性值如下，

_black：在新窗口中打開被鏈接文檔

_self：默認。在相同的框架中打開被鏈接文檔

_ parent：在父框架中打開被鏈接文檔

_top：在整個窗口中打開被鏈接文檔

framename：在指定框架中打開被鏈接文檔

14、以下全部屬于塊級標簽的是？（）

A、<div><p><input><span><img>

B、<div><h1><p><img><dl>

C、<span><h1><p><img><dl>

D、<div><p><form><ul><h1>

解析：

選D

在CSS中，html中的標簽元素大體被分為三種不同的類型：

塊狀元素、內聯元素（又叫行內元素）和內聯塊狀元素

常見的塊狀元素有：

<div>、<p>、<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

常見的內聯元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常見的內聯塊狀元素有：

<img>、<input>

15、元素的alt和title有什么異同，選出正確的說法？（）

A、不同的瀏覽器，表現一樣

B、alt和title同時設置的時候，alt作為圖片的替代文字出現，title是圖片的解釋文字

C、alt和title同時設置的時候，title作為圖片的替代文字出現，alt是圖片的解釋文字

D、以上說法都不正確

解析：

選B

alt是html標簽的屬性，而title既是html標簽，又是html屬性。

title標簽這個不用多說，網頁的標題就是寫在

<title></title>

這對標簽之內的。

title作為屬性時，用來為元素提供額外說明信息。

例如，給超鏈接標簽a添加了title屬性

，把鼠標移動到該鏈接上面是，就會顯示title的內容，以達到補充說明或者提示的效果。

而alt屬性則是用來指定替換文字，只能用在img、area和input元素中（包括applet元素），用于網頁中圖片無法正常顯示時給用戶提供文字說明使其了解圖像信息

16、下列說法錯誤的是( )

A、設置display:none后的元素只會導致瀏覽器的重排而不會重繪

B、設置visibility:hidde后的元素只會導致瀏覽器重繪而不會重排

C、設置元素opacity:0之后，也可以觸發點擊事件

D、visibility:hidden的元素無法觸發其點擊事件

解析：

選A

設置display:none后的元素會導致瀏覽器的重排重繪

17、下列選項中，不屬于CSS3樣式選擇器的是（）

A、empty選擇器

B、root 選擇器

C、target選擇器

D、ID選擇器

解析：

選D

ID選擇器在css1中就定義了

18、超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了，解決方法是改變CSS屬性的排列順序？（）

A、a:link {} a:visited {} a:hover {} a:active {}

B、a:visited {} a:link {} a:hover {} a:active {}

C、a:active {} a:link {} a:hover {} a:visited {}

D、a:link {} a:active {} a:hover {} a:visited {}

解析：

選A

a:link; a:visited; a:hover; a:active;

a:hover必須放在a:link和a:visited之后；

a:active必須放在a:hover之后。

19、關于position定位，下列說法錯誤的是（）

A、fixed元素，可定位于相對于瀏覽器窗口的指定坐標，它始終是以 body 為依據

B、relative元素以它原來的位置為基準偏移，在其移動后，原來的位置不再占據空間

C、absolute 的元素，如果它的父容器設置了 position 屬性，并且 position 的屬性值為 absolute 或者 relative，那么就會依據父容器進行偏移

D、fixed 屬性的元素在標準流中不占位置

解析：

選B

absolute：

生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位，元素的位置通過”left”、”top”、”right”、以及”bottom”屬性進行規定

fixed：

生成絕對定位的元素，相對于瀏覽器窗口進行定位，元素的位置通過”left”、”top”、”right”以及”bottom”屬性進行規定

relative：

生成相對定位的元素，相對于其正常位置進行定位，因此，”left：20”會向元素的LEFT位置添加20像素

static：

默認值，沒有定位，元素出現正常的流中（忽略top，bottom，left，right或者z-index聲明）

inherit：

規定應該從父元素繼承position屬性的值

20、css中哪些屬性可以繼承（）

A、font-size

B、color

C、font-family

D、border

解析：

選A、B、C

margin padding border display 不可以繼承

21、下列哪些是瀏覽器支持的錨偽類：（）

A、a:link

B、a:disabled

C、a:hover

D、a:active

解析：

選A、C、D

在支持 css 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態和鼠標懸停狀態。用來表示鏈接不同狀態的偽類就是錨偽類

a:link {color: green;} / 未訪問的鏈接 /

a:visited {color: blue;} / 已訪問的鏈接 /

a:hover {color:orange;} / 鼠標移動到鏈接上 /

a:active {color: yellow;} / 選定的鏈接 /

22、關于CSS選擇器，以下說法正確的是：（）

A、每條選擇器最多只能出現一個偽元素

B、每條選擇器最多只能出現一個偽類

C、:nth-child(an+b)中n的取值從0開始

D、A+B匹配A之后所有符合B規則的元素

解析：

選A、C

C選項：

nth-child(an+b)在下標計算表達式an+b中：

a,b是系數可以是任意整數；

n就是個字面量“n”，表示是遞增變量，并且取值是從0開始的整數。

D選項：

B是A的下一個兄弟節點（AB有相同的父結點，并且B緊跟在A的后面）

23、列表分為兩類，一是無序列表，一是有序列表，以下哪個是無序列表？（）

A、<UL>

B、<OL>

C、<DIR>

D、<DL>

解析：

選A

Ul無序列表

OL有序列表

24、浮動會導致頁面的非正常顯示，以下幾種清除浮動的方法，哪個是不推薦使用的？（）

A、在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>

B、通過設置父元素overflow值為hidden；

C、父元素也設置浮動

D、給父元素添加clearfix類

解析：

選C

這四種方法都可以清除，最常用的是DA方法；

B方法的話，如果子元素中有使用了絕對定位，在頁面上顯示是在父元素外面，一般就沒法使用B方法了。

大型項目一般會多層嵌套，如果采用給父元素設置浮動的方法，那么父元素的父元素很有可能也要設置浮動，頁面布局很容易亂掉

25、下列關于web頁面級優化描述最正確的是（）

A、減少HTTP請求的次數

B、進行資源合拼和壓縮

C、Inline images

D、將外部腳本置于低端

E、減少不必要的HTTP跳轉

F、以上描述都對

解析：

選F

1、減少HTTP請求的次數。

http協議是無狀態的應用層協議，每次http請求都需要建立通信鏈路、進行數據傳輸，而在服務器端每個http都需要啟動獨立的線程去處理，這些通信和服務的開銷都很昂貴。所以減少http請求的數目可有效提高訪問性能，A正確。

2、進行資源合拼和壓縮。

合并CSS、合并javascript、合并圖片，將瀏覽器一次訪問需要的javascript和CSS合并成一個文件，這樣瀏覽器就只需要一次請求。在服務器端對文件進行壓縮，在瀏覽器端對文件解壓縮，可有效減少通信傳輸的數據量，B正確。

3、Inline images，使用data: URL

scheme的方式將圖片嵌入到頁面或CSS中嵌入頁面，因為直接嵌入頁面增大了頁面的體積，而且無法利用瀏覽器緩存。所以使用在CSS中的圖片則更為理想一些，C正確。

4、將外部腳本置于低端

瀏覽器在加載javascript后立即執行，有可能會阻塞整個頁面，造成頁面顯示緩慢，因此javascript最好放在頁面最下面，D正確。

5、減少不必要的HTTP跳轉

對于以目錄形式訪問的HTTP鏈接，很多人都會忽略鏈接最后是否帶’/’，假如你的服務器對此是區別對待的話，那么你也需要注意，這其中很可能隱藏了301跳轉，增加了多余請求，E正確

26、網頁開發中，一般需判斷瀏覽器類型，需通過userAgent中獲取瀏覽器內核來判斷，下列說法錯誤的是？（）

A、一直到IE9，都是Trident內核

B、firefox是Gecko內核

C、chrome是webkit內核

D、IE是目前最快的瀏覽器

解析：

選D

-moz代表firefox瀏覽器私有屬性

-ms代表IE瀏覽器私有屬性

-webkit代表chrome、safari私有屬性 IE使用的是Trident內核，Firefox

使用的是Gecko內核。目前使用IE內核的瀏覽器還有搜狗，遨游，360等等。

27、關于浮動元素，下面說法錯誤的是（）

A、如果有多個浮動元素，浮動元素會按順序排下來而不會發生重疊的現象

B、浮動元素會盡可能地向頂端對齊、向左或向右對齊

C、如果有非浮動元素和浮動元素同時存在，并且非浮動元素在前，則浮動元素不會高于非浮動元素

D、行內元素與浮動元素發生重疊，其邊框，背景和內容都會顯示在浮動元素之下

解析：

選D

行內元素與浮動元素發生重疊，邊框、背景、內容都會顯示在浮動元素之上

塊級元素與浮動元素發生重疊，邊框、背景會顯示在浮動元素之下，內容會顯示在浮動元素之上

28、要將下面代碼中超鏈接文本呈現為紅色，不可以使用的樣式表是（）

<div><a href="http://www.w3.org/">**鏈接到W3C**</a></div>

A、a:link{color:red}

B、div a:link{color:red}

C、div>a:link{color:red}

D、div:first-child{color:red}

解析：

選D

div：first-child

表示選擇屬于父元素的第一個子元素的每個<div>元素

29、下列哪個不屬于id與class之間的區別（）

A、id在文檔中只能使用一次，而class可以多次使用

B、id比class具有更高的樣式優先級

C、一個元素只能有一個id屬性值，卻可以擁有多個class屬性值

D、在class中可以定義:hover偽類，在id中不能定義

解析：

選D

在樣式表定義一個樣式的時候，可以定義id也可以定義class。

1、在CSS文件里書寫時，ID加前綴"#"；CLASS用"."

2、id一個頁面只可以使用一次；class可以多次引用。

3、ID是一個標簽，用于區分不同的結構和內容；class是一個樣式，可以套在任何結構和內容上

4、從概念上說就是不一樣的：id是先找到結構/內容，再給它定義樣式；class是先定義好一種樣式，再套給多個結構/內容。

30、把鼠標移到按鈕并點擊時，會產生一串什么樣的事件（）

A、active hover focus

B、foucs hover active

C、hover active foucus

D、hover focus active

解析：

選D

觸發順序為 link-->visited--->hover--->active

31、下列哪些是HTML5相關的框架或類庫：( )

A、spring-core

B、RactiveJS

C、Dubbo

D、Bootstrap

E、AngularJS

F、Hibernate

解析：

選B、D、E

Spring框架是一個開放源代碼的J2EE應用程序框架

Dubbo是一款高性能、輕量級的開源Java RPC框架

Hibernate是一個開放源代碼的對象關系映射框架

32、css中clear的作用是什么？（）

A、清除該元素所有樣式

B、清除該元素父元素的所有樣式

C、指明該元素周圍不可出現浮動元素

D、指明該元素的父元素周圍不可出現浮動元素

解析：

選C

clear : none | left | right | both.

對于CSS的清除浮動(clear)，

這個規則只能影響使用清除的元素本身，不能影響其他元素

33、css 中可繼承的屬性有哪些（）

A、height

B、font-size

C、border

D、width

E、color

解析：

選B、E

所有元素可繼承：visibility和cursor。

內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

終端塊狀元素可繼承：text-indent和text-align。

列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image

JavaScript

1、JavaScript中window對象的子對象不包含以下哪個對象？（）

A. document   B. self   C. history   D. message

解析：

選D

window的主對象主要有如下幾個：

document   frames   history  location   navigator   screen

window、self、window.self三者是等價的

2、將一個整數序列整理為升序，兩趟處理后變為10,12,21,9,7,3,4,25，則采用的排序算法可能Z:（）

A、插入排序

B、快速排序

C、選擇排序

D、堆排序

解析：

選C

第一層循環：依次遍歷序列當中的每一個元素

第二層循環：將遍歷得到的當前元素依次與余下的元素進行比較

符合最小元素的條件，則交換

選擇排序的基本思想：比較+交換

3、下邊這代碼輸出的結果是：( )

function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase(new String('A'));

A、Case A

B、Case B

C、undefined

D、Do not know!

解析：

選D

此題考查的是關于new string();其中new是一個實例對象,要匹配的也是object,

所以輸出結果為Do not know

4、下邊這代碼輸出的結果是（）

var two   = 0.2
var one   = 0.1
var eight = 0.8
var six   = 0.6
console.log([two - one == one, eight - six == two]);

A、[true, true]

B、[false, false]

C、[true, false]

D、other

解析：

選C

這題考的是浮點數計算時精度丟失問題

5、以下代碼的執行結果是什么（）

var string = 'string';  
var number = 0;       
var bool = true;     
console.log(number || string);      
console.log(number && string); 
console.log(bool || number);
console.log(bool && number);

A. ‘string’, 0, true,0

B. ‘string’, true,0, 0

C. ‘string’, ‘string’,true, 0

D. ‘string’, 0, true,true

解析：

選A

var string = 'string';               對象為true
var number = 0;                      非零數字為true
var bool = true;                     非空字符串為true
console.log(number || string);         其他為false
console.log(number && string);          
console.log(bool || number);
console.log(bool && number);

6、下面可以匹配的正則表達式是（）

<img src=”http://image.163.com”></img>

A、<img src=”[^”]*”></img>

B、<img src=”[.”]*”></img>

C、<img src=”[^”]*></img>

D、<img src=”[.”]*></img>

解析：

選A

var a='<IMG src="http://image.163.com">'
          var b=/<IMGsrc="[^"]*">/gi          
           var s=a.match(b)                           
        for(var i= 0;i<s.length;i++)             
            {                                         
                      alert(s[i]);
                    alert(RegExp.$1)
               }

7、["1", "2", "3"].map(parseInt) 返回的結果為（）

A：["1", "2", "3"]

B：[1, 2, 3]

C：[0, 1, 2]

D：other

解析：

選D

這題的答案是：[1,NaN,NaN]

該題用到了map與parseInt；parseInt() 函數的語法是parseInt(string, radix)；

string 必需。要被解析的字符串。

radix可選。表示要解析的數字的基數。該值介于 2 ~ 36 之間。

如果省略該參數或其值為 0，則數字將以 10 為基礎來解析。如果它以 “0x” 或 “0X” 開頭，將以 16 為基數。

如果該參數小于 2 或者大于 36，則 parseInt() 將返回 NaN

實際上map里的callback函數接受的是三個參數分別為元素下標和數組

回調函數的語法如下所示： function callbackfn(value, index, array1) 可使用最多三個參數來聲明回調函數。

8、[typeof null, null instanceof Object]這些類型的結果是（）

A: ["object", false]

B: [null, false]

C: ["object", true]

D: other

解析：

選A

這題考察的是typeof運算符和instanceof運算符

typeof運算符，一些基礎類型的結果是：

Undefined "undefined"

Null "object"

Boolean "boolean"

Number "number"

String "string"

Any other object "object"

Array "object"

Null instanceof任何類型都是false

9、下邊代碼輸出的結果是（）

var val = 'smtg';
console.log('Value is ' + (val === 'smtg') ? 'Something' : 'Nothing');

A: Value is Something

B: Value is Nothing

C: NaN

D: other

解析：

選D

這題考的是js中的運算符優先級，

這里’+’運算符的優先級要高于’?’

所以val === ‘smtg’實際上就是true

所以結果為’Something’

10、下邊代碼輸出的結果是（）

var name = 'World!';
(function () {
    if (typeof name === 'undefined') {
        var name = 'Jack';
        console.log('Goodbye ' + name);
    } else {
        console.log('Hello ' + name);
    }
})();

A: Goodbye Jack

B: Hello Jack

C: Hello undefined

D: Hello World

解析：

選A

這題考的是js作用域中變量的提升，

js的作用于中使用var定義變量都會被提升到所有代碼的最前面，

所以var name目前是undefined,

題目的typeof name === ‘undefined’的結果為true時，就會輸出’Goodbye Jack’

11、var arr = [];typeof arr 的結果是（）

A、array

B、function

C、object

D、undefined

解析：

選C

5種簡單數據類型（也稱基本數據類型）：

Undefined、Null、Boolean、Number、String

1種復雜數據類型：Object（基本上除了上述5種，其余都是Object）

12、以下代碼執行后，console 的輸出是（）

function Foo(){
console.log(this.location);
}
Foo();

A、當前窗口的 Location 對象

B、undefined

C、null

D、TypeError

解析：

選A

這題考的是this的用法

'use strict'條件下，會報TypeError

無'use strict'下，this指向window

13、下列事件哪個不是由鼠標觸發的事件（）

A、click

B、contextmenu

C、mouseout

D、keydown

解析：

選D

常見的事件：

1. 點擊事件：
        1. onclick：單擊事件
        2. ondblclick：雙擊事件

    2. 焦點事件
        1. onblur：失去焦點
        2. onfocus:元素獲得焦點。

    3. 加載事件：
        1. onload：一張頁面或一幅圖像完成加載。

    4. 鼠標事件：
        1. onmousedown    鼠標按鈕被按下。
        2. onmouseup    鼠標按鍵被松開。
        3. onmousemove    鼠標被移動。
        4. onmouseover    鼠標移到某元素之上。
        5. onmouseout    鼠標從某元素移開。
    5. 鍵盤事件：
        1. onkeydown    某個鍵盤按鍵被按下。    
        2. onkeyup        某個鍵盤按鍵被松開。
        3. onkeypress    某個鍵盤按鍵被按下并松開。

    6. 選擇和改變
        1. onchange    域的內容被改變。
        2. onselect    文本被選中。

    7. 表單事件：
        1. onsubmit    確認按鈕被點擊。
        2. onreset    重置按鈕被點擊。

14、如何遍歷下面的 my_data 對象？（）

var my_data={a:’Ape’, b:’Banana’, c:’Citronella’};

A、for(var key in my_data) {}

B、foreach(my_data as key=>value) {}

C、for(var i=0;i<my_data.length;i++) {}

D、全不正確

解析：

選A

for in遍歷對象所擁有的屬性(可枚舉的)

由于對象和數組不同，不能用下標來訪問，只能用for in遍歷

15、如何判斷一個js對象是否是Array,arr為要判斷的對象，其中最準確的方法是？（）

A、typeof(arr)

B、arr instanceof Array

C、arr.toString==='[object Array]';

D、Object.prototype.toString.call(arr) === '[object Array]';

解析：

選D

A選項中的typeof(arr) 返回的是 Object

instanceof 在跨 frame 對象構建的場景下會失效

arr.toString 沒有這種用法，正確的用法是 arr.toString() 返回的是數組的內容

16、在很多時候，我們需要給網頁中的一些元素不停的切換樣式，那么要怎樣實現給元素刪除一個樣式的同時，添加另外一個樣式（ )

A、

$('#ele').removeClass('className');
$('#ele').addClass('ClassName');

B、

$('us').removeClass('className');
$('us').addClass('ClassName');

C、

$('.us').removeClass('className');
$('.us').addClass('ClassName');

D、

$('us').remove('className');
$('us').add('ClassName');

解析：

選A

B選項錯

選項使用元素選擇器，但是 HTML 中沒有 us 標簽

C選項錯

選項使用類選擇器，但是刪除了類樣式后，如何通過類選擇器給元素添加樣式

D選項錯

add() 方法：把元素添加到已存在的元素組合中。

remove() 方法：移除被選元素，包括所有的文本和子節點。

17、下列代碼hasOwnProperty的作用是？（）

var obj={}
……..
obj.hasOwnProperty("val")

A、判斷obj對象是否具有val屬性

B、判斷obj對象是否具有val的值

C、判斷obj的原型對象是否具有val的屬性

D、判斷obj的原型對象是否具有val的值

解析：

選A

hasOwnProperty：

是用來判斷一個對象是否有你給出名稱的屬性或對象

isPrototypeOf :

是用來判斷要檢查其原型鏈的對象是否存在于指定對象實例中，是則返回true，否則返回false。

18、下列不屬于javascript內置對象的是（）

A、Math

B、Date

C、RegExp

D、Window

E、Error

解析：

選D

js中的內部對象包括

Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各種錯誤類對象，
包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

19、javascirpt中的數字在計算機內存儲為多少Byte（）

A、2 Byte

B、4Byte

C、8Byte

D、16Byte

解析：

選C

"JavaScript內部，所有數字都是以64位浮點數形式儲存，即使整數也是如此。"

8 Byte = 64bit ;

8個字節，64位

20、以下運行結果（）

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

A、0--9

B、10個10

C、10個9

D、無限循環

解析：

選B

setTimeout中的閉包函數是每1s執行一次

由于for循環的執行速度遠小于1s，

所以當開始執行閉包函數的時候for循環已經結束了（i=10），

之后閉包函數執行十次（因為循環了10次），所以打印了10個10。

21、若需給子scope發送消息，需使用哪個方法（）

A、$emit()

B、$broadcast()

C、$on()

D、$send()

解析：

選B

$broadcast是向下傳播事件

22、函數的調用方式有哪些：（）

A、直接調用

B、作為對象方法調用

C、作為構造函數調用

D、通過call和apply方法調用

解析：

選A、B、C、D

23、下拉菜單中，用戶更改表單元素Select中的值時，就會調用（）事件處理程序

A、onMouseOver

B、onFocus

C、onChange

D、onClick

解析：

選C

切換下拉菜單更改狀態用onchange

A選項：鼠標事件

B選項：焦點事件一般是input

C選項：改變狀態

D選項：點擊事件

24、在ES6規范中，以下類型哪些屬于基本數據類型（）

A、String

B、Null

C、Undefined

D、Symbol

解析：

選A、B、C、D

基本數據類型：

Number,String, Null, Undefined,  Boolean，Symbol（es6新增）

引用數據類型：

Object，Function

25、語句var arr=[a,b,c,d];執行后，數組arr中每項都是一個整數，下面得到其中最大整數語句正確的是哪幾項？（）

A、Math.max(arr)

B、Math.max(arr[0], arr[1], arr[2], arr[3])

C、Math.max.call(Math, arr[0], arr[1], arr[2], arr[3])

D、Math.max.apply(Math,arr)

解析：

選B、C、D

因為傳入的數組，所以A選項錯誤

C選項，Function.call()可以傳入任意多個參數，所以C正確

D選項，Function.apply()第二個參數以數組形式傳遞，所以D正確

26、以下結果里，返回true的是（）

A、!![]

B、1===’1’

C、null===undefined

D、!!’’

解析：

選A

A選項，由于數組屬于對象類型，所以空的數組轉換成布爾型是true，前置！！，兩次取反，返回true。A正確。

B選項，“===”同等于（包含數據類型），左右兩端數據類型不同，因此返回false。

C選項，同上，由于左右兩端數據類型不同，返回false。

D選項，字符的編碼值為0的字符，因此返回false。

27、JavaScript實現繼承的方式，不正確的是( )

A、原型鏈繼承

B、構造函數繼承

C、組合繼承

D、關聯繼承

解析：

選D

JavaScript實現繼承共6種方式：

原型鏈繼承、借用構造函數繼承、組合繼承、原型式繼承、寄生式繼承、寄生組合式繼承。

28、以下代碼執行后，console 的輸出是（）

let x = 10;
let foo = () => {
console.log(x);
let x = 20;
x++;
}
foo();)

A、拋出 ReferenceError

B、10

C、20

D、21

解析：

選A

let不存在變量提升，所以沒有事先聲明。

let塊級作用域，所以不會去訪問外部的x。

既不會訪問外部，又沒有事先聲明，輸出x便會報錯

29、關于 this 的工作原理，下面 4 種情況的描述哪一個是錯誤的？（）

A、在全局范圍內，this指向全局對象（瀏覽器下指window）

B、對象函數調用時，this指向當前對象

C、全局函數調用時，this指向全局函數

D、使用new實例化對象時，this指向新創建的對象

解析：

選C

this有四種情況！

1、當在函數調用的時候指向widow

2、當方法調用的時候指向調用對象

3、當用apply和call上下文調用的時候指向傳入的第一個參數

4、構造函數調用指向實例對象

JS中this關鍵字，它代表函數運行時，自動生成的一個內部對象，只能在函數內部使用。

全局函數調用時，this指向全局函數；應該是指向調用全局函數的對象。

30、以下js操作Array的方法中不能添加元素的是：（）

A、push

B、pop

C、unshift

D、splice

解析：

選B

數組.pop(): 刪除數組的最后一項，該表達式返回最后一項的數據

31、關于javascript，以下選項描述錯誤的是（）

A、在原型上擴展的可枚舉方法，會被for in循環出來

B、使用object.defineProperty可向對象添加或者修改屬性

C、通過hasOwnProperty可判斷一個對象以及其原型鏈上是否具有指定名稱的屬性

D、原型鏈是JS實現繼承的一種模型

E、每個對象都有prototype屬性，返回對象類型原型的引用

F、For循環是按順序的，for in 循環是不一定按順序的

解析：

選C

hasOwnProperty方法是用來檢測給定的屬性是否在當前對象的實例中。

32、關于ES6的使用以下描述錯誤的是？（）

A、

const a = 1;

const b = 2;

const map = {a, b};

B、

enum TYPE {
OK,
YES
}

C、

class A {
constructor (a) {
this.a = a;
}
}
class AA extends A {
constructor (a, b) {
super(a);
this.b = b;
}
toString () {
return this.a + '' + this.b;
}
}

D、

function* greet(){

yield
"How";

yield
"are";

yield
"you";

}

var greeter = greet();

console.log(greeter.next().value);

console.log(greeter.next().value);

console.log(greeter.next().value);

解析：

選B

es6中將構造方法的function換成了class，

用于與普通函數區分，其中的屬性都放在constructor中，

方法在原型中，子類繼承采用extends關鍵字;對于es6中枚舉的使用，

只能是以類的方式定義枚舉類，不能直接使用enum關鍵字

33、獲取 input 節點的錯誤方法是( )

<form class="file" name="upload">
<input id="file" name="file" />
</form>

A、document.querySelectorAll('file')[0]

B、document.getElementById('file')[0]

C、document.getElementByTagName('file')[0]

D、document.getElementById('file')

解析：

選A、B、C、D

A選項：應該是 document.querySelectorAll('#file')[0]

B選項：應該是 document.getElementById('file')

C選項：應該是 document.getElementsByTagName('input')[0]

D選項：input標簽中就沒有class屬性

34、下列哪些會返回false（）

A、null

B、undefined

C、0

D、‘0'

解析：

選A、B、C

35、以下哪些選項可以將集合A轉化為數組（）

A、Array.form(A)

B、[].slice.apply(A)

C、[…A]

D、[].map.call(A, o => o)

解析：

選A、B、C、D

A選項：可以把對象轉換成真正的數組

B選項：slice( )方法可從已有的數組中返回選定的元素

C選項：展開運算符，把A集合的元素展開后，用數組[]承載，返回新的數組

D選項：map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值

36、js數組的方法中，哪些方法不能改變自身數組（）

A、splice

B、concat

C、sort

D、pop

解析：

選B

splice刪除數據會改變數組

concat連接數組但是不改變院數組

sort排序會改變數組

pop出棧返回最后一個最后一個元素，改變數組

37、下面有關JavaScript中 call和apply的描述，錯誤的是( )

A、call與apply都屬于Function.prototype的一個方法，所以每個function實例都有call、apply屬性

B、apply傳入的是一個參數數組，也就是將多個參數組合成為一個數組傳入

C、call傳入的則是直接的參數列表。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。

D、兩者傳遞的參數不同，call函數第一個參數都是要傳入給當前對象的對象，apply不是

解析：

選D

call, apply方法它們除了第一個參數,即執行時上下文對象相同外,

call方法的其它參數將依次傳遞給借用的方法作參數,而apply就兩個參數,

第二個參數為一個數組傳遞

38、白屏時間first paint和可交互時間dom ready的關系是（）

A、先觸發first paint ，后觸發dom ready

B、先觸發dom ready，后觸發first paint

C、一起觸發

D、沒關系

解析：

選A

白屏時間（first Paint Time）——用戶從打開頁面開始到頁面開始有東西呈現為止

首屏時間——用戶瀏覽器首屏內所有內容都呈現出來所花費的時間

用戶可操作時間(dom Interactive)——用戶可以進行正常的點擊、輸入等操作，默認可以統計domready時間，因為通常會在這時候綁定事件操作

總下載時間——頁面所有資源都加載完成并呈現出來所花的時間，即頁面 onload 的時間

39、最后一句alert的輸出結果是( )

var msg='hello'; 
for (var i=0; i<10; i++)
 { 
   var msg='hello'+i*2+i; 
 }
 alert(msg);

A、hello

B、hello27

C、hello30

D、hello189

解析：

選D

這里只是for循環不是函數，

因此for內部定義的msg與for外部定義的msg為在同一塊作用域，為同一個變量。

輸出hello189

hello+9*2+9

40、要在10秒后調用checkState，下列哪個是正確的（）

A、window.setTimeout(checkState, 10);

B、window.setTimeout(checkState(), 10);

C、window.setTimeout(checkState, 10000);

D、window.setTimeout(checkState(), 10000);

解析：

選C

checkState加了( )相當于函數表達式，會立即執行，執行的結果作為返回值傳遞給settimeout

10 s 應該為 10000

所以選C

41、下列代碼得到的結果是（）

console.log(([])?true:false); 
console.log(([]==false?true:false)); 
console.log(({}==false)?true:false)

A、false true true

B、true true false

C、true false true

D、true true true

解析：

選B

Boolean([]); //true
Number([]); //0
Number({}); // NaN
Number(false); //0

console.log(([])?true:fasle);// => console.log((true)?true:false);
console.log([]==false?true:false); // => console.log(0==0?true:false);
console.log(({}==false)?true:false); // => console.log((NaN==0)?true:false);

第一個

([])布爾轉換成true

第二個

==相等比較時，允許類型轉換

其他類型值和布爾值==比較時，先將布爾值強制轉換為對應數字，再進行比較

[]==false

[]==0

[]和數字相等比較時轉數字0

0==0

true

第三個

{}==false

{}==0

NaN==0

false

42、JavaScript定義var a="40",var b=7,則執行a%b會得到( )

A、null

B、undefined

C、5

D、"5"

解析：

選C

運算中，+號，數字隱式轉換成字符串

其余的運算符號是字符串隱式轉換成數字

43、下列關于閉包描述正確的是？（）

A、(function(){})()理論上是一個閉包

B、閉包不耗內存，可以隨意使用

C、閉包內變量執行后不會被清除

D、閉包不滿足鏈式作用域結構

解析：

選A、C

邏輯上立即執行函數可以理解為：聲明閉包函數-執行-釋放內存

閉包內變量要到整個閉包被清除的時候才會清除

44、在ECMAScript6 中,promise的狀態有（）

A、Pending

B、Pause

C、Resolved

D、Rejected

解析：

選A、C、D

Promise 對象代表一個異步操作，有3種狀態：

Pending(進行中)、Resolved(已完成，又稱Fulfilled)和Rejected(已完成)’

45、下面有關瀏覽器中使用js跨域獲取數據的描述，說法錯誤的是（）

A、使用window.name來進行跨域

B、域名、端口相同，協議不同，屬于相同的域

C、js可以使用jsonp進行跨域

D、通過修改document.domain來跨子域

解析：

選B

只要協議、域名、端口有任何一個不同, 都被當作是不同的域

46、下面關于DNS說法正確的是（）

A、DNS協議端口號為53

B、DNS的作用是域名和IP地址的相互映射

C、DNS協議大多數運行在UDP協議之上

D、DNS的默認緩存時間為1小時

解析：

選A、C

A選項：DNS協議默認端口號是53

B選項：DNS就是將域名翻譯成IP地址。

C選項：主要用UDP，但是當請求字節過長超過512字節時用TCP協議，將其分割成多個片段傳輸

D：操作系統的DNS緩存：windows DNS緩存的默認值是 MaxCacheTTL，它的默認值是86400s，也就是一天。macOS 嚴格遵循DNS協議中的TTL。

游覽器的DNS緩存：chrome對每個域名會默認緩存60s；IE將DNS緩存30min；Firefox默認緩存時間只有1分鐘；Safari約為10S。

47、下面運行結果正確的是（）

var a = {}, b = Object.prototype;
[a.prototype === b, Object.getPrototypeOf(a) === b]

A、other

B、[true, true]

C、[false, false]

D、[false, true]

解析：

選D

這題考的是__proto__和prototype的區別

Object實際上是一個構造函數（typeof Object的結果為"function"）

使用字面量創建對象和new Object創建對象是一樣的，

所以a.__proto__也就是Object.prototype，

而Object.getPrototypeOf(a)與a.__proto__是一樣的，所以第二個結果為true

而實例對象是沒有prototype屬性的，只有函數才有

所以a.prototype其實是undefined，第一個結果為false

48、下面運行結果正確的是（）

var a = /678/,
    b = /678/;
a == b
a === b

A、other

B、true，true

C、true、false

D、false、false

解析：

選D

JavaScript中的正則表達式依舊是對象，使用typeof運算符就能得出結果：object

運算符左右兩邊都是對象時，比較他們是否指向同一個對象

最后

希望看到文章的同學都有收獲！

還有想了解更多的同學可以去https://www.jianshu.com/u/7e7ee1652bbf 看一下我之前發的文章，希望能夠對你們有所幫助。

在線咨詢

上一篇：HTML代碼中的空格和空行
下一篇：各個省份的一分一檔表匯總，資料持續更新中！

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

34道常見的HTML+CSS面試題（附答案）

元素和偽類

偽元素

神奇的偽類：focus-within

感應用戶聚焦區域

實現離屏導航

實現 B 站，掘金等網站登錄動效切換

focus-within 兼容性

HTML/CSS

JavaScript

最后

您的項目需求