Web前端測試題

David Shariff通過網站提供了Web前端開發中CSS、HTML和JavaScript三部分的測試題。到發稿之日共有8320人蔘與了這個測試，可平均得分是53.8%。

CSS篇

Q1:CSS屬性區分大小寫嗎？


ul {
    MaRGin: 10px;
}

A:NO(不區分)

這對於初學者來說，可能會一時拿不定主意，他們區分大小寫嗎？但話說回來，如果你有使用過DW或者PSD生成的頁面，你會發現你的代碼中會有很多類似下面這樣的代碼：

.box {
    BORDER:1PX SOLID RED;
}

但這個樣式完全是有效的。不過有一點需要特別注意，如果你的HTML的結構中定義的是大寫類名，而在樣式中使用的是小寫的，那麼他們是有區別的。我們來看一個簡單的演示示例：

Q2:你能給內聯元素設置margin-top和margin-bottom嗎？

A:No(不能設置)

margin-top和margin-bottom對於一個內聯元素是根不起作用的。簡單的理解，margin-top和margin-bottom就是讓元素離遠離自身頂部和底部的元素。
假設我們有一個這樣的DEMO。
HTML





<div>
    <span>我是一個行內元素span</span>
    <span>我是一個行內元素span</span>
    <span>我是一個行內元素span</span>
    <strong>我是一個行內元素strong</strong>
    <span>我是一個行內元素span</span>
    <strong>我是一個行內元素strong</strong>
    <span>我是一個行內元素span</span>
    <strong>我是一個行內元素strong</strong>
    <span>我是一個行內元素span</span>
    <strong>我是一個行內元素strong</strong>
    <span>我是一個行內元素span</span>
    <strong>我是一個行內元素strong</strong>
</div>




CSS





div {
  width: 300px;
  margin: 20px
auto;
  border: 1px
solid green;
  padding: 5px;
  line-height: 1.4;
}
span {
  border: 1px
solid blue;
}
strong {
  border: 1px
solid orange;
}
span,
strong {
  margin-top: 5px;
  margin-bottom: 5px;
}




margin-top和margin-bottom應用到內聯元素上，這在規範中是允許的，不過由於在向一個行內非替換元素（如img）應用外邊距，它對行高沒有任何影響。由於外邊距實際上是透明的，所以這個聲明沒有任何視覺效果。其原因就在於行內非替換元素的外邊距(margin-top和margin-bottom)不會改變一個元素的行高。

我們來演示一下，增加margin-top和margin-bottom值，對內聯元素span和strong是否有所影響

效果再次證明，margin-top和margin-bottom對於一個內聯元素來說是沒有任何影響的。

Q3:內聯元素設置padding-top和padding-bottom會添加到元素的尺寸上嗎？

A:NO(不會)

對於內聯元素，margin和padding存在一個重大的區別。爲了說明這一點，我們給行內元素設置一個padding-top和padding-bottom的值，另個給其附上一個背景色，行內元素的背景會向上和向下面延伸。

理論上，對於有背景色和行內距的行內非替換元素，背景可以向元素上面和下面延伸：


strong {
  border: 1px
solid orange;
  background: orange;
  padding-top:10px;
  padding-bottom: 10px;
}

當然行高沒有改變，不過由於內距確實延伸了背景，所以背景應該可見，是這樣嗎？不錯，背景確實可見，它與前面的行重疊，這正是我們期望的結果。但回到試題上來，padding-top和padding-bottom並沒有增加行內元素的尺寸，如背景延伸所示，他們重疊在一起了。

Q4:如果你對元素設置字體大小:10 rem, 當用戶調整大小/拖瀏覽器窗口時文本將相應變化大小麼?

A:NO（不能）

REM是CSS3中新增的一個單位。在W3C官網上是這樣描述rem的——“font size of the root element”。也就是說rem是相對於根元素，這樣就意味着，我們只需要在根元素確定一個參考值，在根元素中設置多大的字體，這完全可以根據您自己的需求。但他並不能實現，隨着瀏覽器的縮小或放大，而改變元素的字號。他僅能通過修改的字號大小來進行修改。接下來模仿一下這個問題的場景：


html {
    font-size: 16px;
}
p {
    font-size: 2rem;
}

接下來拖動瀏覽器大小，看其是否會修改p元素的字號：

Q5:僞類:checked將選擇input控件的單選或複選框,但不會選擇

A:False(假的)

這一題我也做錯了，最初認爲:checked是隻對單選按鈕和複選框有效。回想到HTML中定義了checked屬性時，除了可以爲單選按鈕和複選框之外還可以爲select的option設置這樣的屬性值。其作用表示的是選中。但萬萬沒有想到option也可以通過:checked來設置選中的樣式。下面的一段代碼是來自於Mozilla:





/* any "checkable" element */
:checked {
  width: 50px;
  height: 50px;
}
 
/* only radio elements */
  input[type="radio"]:checked {
  margin-left: 25px;
}
 
/* only checkbox elements */
input[type="checkbox"]:checked {
  display: none; 
}
 
/* only option elements */
option:checked {
  color: red;
}




Q6:在一個HTML文檔中,僞類:root總是指元素?

A:True(是的)

在絕大多數情況下你可能遇到，:root在Web頁上指的就是元素。在HTML文檔中元素永遠是最高級別的父元素。所以他是:root可想而知的。然而CSS是一種表現層，在其他的文檔格式中，如svg和XML，:root可以引用不同的元素。無也許是什麼標記語言，:root總是選擇文檔樹中最頂部的元素。

來看一個簡單的示例：


:root {
  background-color: red;
  padding: 2em;
  border:5px
solid green;
}
 
body {
  background-color: white;
  padding: 1.5em;
}

看個演示圖，更形象一些：

Q7:translate()函數可以在z軸移動一個元素的位置嗎?

A:False(不能)

使用translate()函數，你可以把元素從原來的位置移動，而不影響在X、Y軸上任何組件。他是一個2D的transform，但他不能讓元素在Z軸上進行移動。不過在3D的transform函數可以讓元素在Z軸上進行縮放效果。

Q8:“Sausage”文本的顏色是什麼？

HTML


<ul
class="shopping-list"
id="awesome">
    <li><span>Milk</span></li>
    <li
class="favorite"
id="must-buy"><span
class="highlight">Sausage</span></li>
</ul>

CSS


ul {
    color: red;
}
li {
    color: blue;
}

A:Blue(藍色)

這是一個很基礎的試題，考的就是選擇器的權重問題，上面兩個選擇器都是標籤選擇器，按照選擇器的權重等級之分，他們都是“０，０，０，１”。但同一個元素有兩個或多個衝突的屬性聲明，那麼有最高特殊性的聲明就會勝出。如果同一個元素具有相同的權重，處在後面的樣式就會比前面的聲明重。將上面的示例製作一個演示圖：

Q9:“Sausage”文本的顏色是什麼？

HTML


<ul
class="shopping-list"
id="awesome">
    <li><span>Milk</span></li>
    <li
class="favorite"
id="must-buy"><span
class="highlight">Sausage</span></li>
</ul>

CSS


ul li {
    color: red;/*0,0,0,2*/
}
#must-buy {
    color: blue;/*0,1,0,0*/
}

A:Blue(藍色)

在選擇器權重當中，一個ID的權重是“0,1,0,0”，而一個標籤元素是0,0,0,1。針對這個示例來說，前一個選擇器權重是”0,0,0,2″；後者的權重是“0,1,0,0”。因此，在這裏他的顏色是藍色。

Q10:“Sausage”文本的顏色是什麼？

HTML


<ul
class="shopping-list"
id="awesome">
    <li><span>Milk</span></li>
    <li
class="favorite"
id="must-buy"><span
class="highlight">Sausage</span></li>
</ul>

CSS


.shopping-list .favorite {
    color: red;/*0,0,2,0*/
}
#must-buy {
    color: blue;/*0,1,0,0*/
}

A:Blue(藍色)

Q11:“Sausage”文本的顏色是什麼？

HTML


<ul
class="shopping-list"
id="awesome">
    <li><span>Milk</span></li>
    <li
class="favorite"
id="must-buy"><span
class="highlight">Sausage</span></li>
</ul>

CSS


ul#awesome {
    color: red;/*0,1,0,1*/
}
ul.shopping-list li.favorite span {
    color: blue;/*0,0,2,3*/
}

A:Blue(藍色)

這個時候大家可能會感到很奇怪了，爲什麼這個還是藍色的，而不是紅色的。主要是他們作用的是不在同一個元素之上。

Q12:“Sausage”文本的顏色是什麼？

HTML


<ul
class="shopping-list"
id="awesome">
    <li><span>Milk</span></li>
    <li
class="favorite"
id="must-buy"><span
class="highlight">Sausage</span></li>
</ul>

CSS


ul#awesome #must-buy {
    color: red;/*0,2,0,1*/
}
.favorite span {
    color: blue!important;/*1,0,0,1,1*/
}

A:Blue(藍色)

Q13:“Sausage”文本的顏色是什麼？

HTML


<ul
class="shopping-list"
id="awesome">
    <li><span>Milk</span></li>
    <li
class="favorite"
id="must-buy"><span
class="highlight">Sausage</span></li>
</ul>

CSS


ul.shopping-list li .highlight {
    color: red;/*0,0,2,2*/
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;/*0,0,3,2*/
}

A:Blue(藍色)

Q14:“Sausage”文本的顏色是什麼？

HTML


<ul
class="shopping-list"
id="awesome">
    <li><span>Milk</span></li>
    <li
class="favorite"
id="must-buy"><span
class="highlight">Sausage</span></li>
</ul>

CSS


#awesome .favorite:not(#awesome) .highlight {
    color: red;/*0,2,2,0*/
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1)
{
    color: blue;/*0,1,3,0*/
}

A:Red(紅色)

問題8~14都是在考CSS選擇器相關方面的知識，而其中最主要的是要理清楚選擇器的權重問題。在CSS中，選擇器的特殊性由選擇器本身的組件確定。特殊性值表述爲4個部分，如”0,0,0,0″。一個選擇器的具體特殊性如下確定：

對於選擇器中給定的各個ID屬性值，加“0,1,0,0”。
對於選擇器中給定的各個類屬性值，屬性選擇或僞類，加”0,0,1,0″。
對於選擇器中給定的各個元素爲僞元素，加“0,0,0,1”。
結合符和通配符“*”以及”:not()”沒有任何的加分權。
對於行內樣式，加爲“1,0,0,0”
對於”!important”加分高於上面的一切，將變成“1,0,0,0,0”
下面有幾張圖，能讓你倍感親切：

Q15:#example元素位置會發生什麼？

HTML


<p
id="example">Hello</p>

CSS


#example {
    margin-bottom: -5px;
}

A:”#example”之後的所有元素會向上移動“5px”。

Q16:#example元素位置會發生什麼？

HTML


<p
id="example">Hello</p>

CSS


#example {
    margin-left: -5px;
}

A:”#example”自身向左移動“5px”。

試題15和16測試的是margin對盒模型的影響。在CSS中，可以給元素設置負外邊距(前面說過，對於內聯元素，設置margin-top和margin-bottom是無效的)，這會導致元素超出其父元素，或者與其他元素重疊，但這並不違反盒模型。同樣來看一個示例：

通常我們很少使用負的margin，但他能做的其實很多。以下幾條是有關於負margin需要注意的地方：

負margin是絕對標準的CSS:這不是開玩笑。W3C甚至標註過：對於margin屬性來說，負值是被允許的。這是Nuff說的，查看這篇文章會有更多詳細內容。
負maring不是一種hack方法:千真萬確，不能因爲缺乏對負marign的理解，或者因爲它長得像hack，就認爲它是一種hack方法。除非你是用來修復自己在其他地方造成的錯誤。
不脫離文檔流:不使用float的話，負margin元素是不會破壞頁面的文檔流。所以如果你使用負margin上移一個元素，所有跟隨的元素都會被上移。
完全兼容:所有現代瀏覽器都完全支持負margin（IE6在大多數情況下也支持）。
浮動會影響負margin的使用:負margin不是你每天都用的CSS屬性，應用時應小心謹慎。
Dreamweaver不解析負margin:DW的設計視圖不會解析負margin。但問題是你爲什麼要在設計視圖中檢查你的網站呢？
如果使用得當，負margin是非常強大的屬性，以下是２種（負margin佔主導位置）的場景：

作用於static元素上的負margin屬性

當static元素的margin-top/margin-left被賦予負值時，元素將被拉進指定的方向。例如：

/* 元素向上移10px*/
#mydiv1 {margin-top:-10px;}

但如果你設置margin-bottom/right爲負數，元素並不會如你所想的那樣向下/右移動，而是將後續的元素拖拉進來，覆蓋本來的元素。


/*
* #mydiv1後續元素向上移10px, #mydiv1 本身不移動
*/
#mydiv1 {margin-bottom:-10px;}

如果沒有設定width屬性，設定負margin-left/right會將元素拖向對應的方向，並增加寬度，此時的margin的作用就像padding一樣。

浮動元素上的負margin

如果給一個浮動元素加上相反方向的負margin，則會使行間距爲0且內容重疊。這對於創建1列是100%寬度而其他列是固定寬度（比如100px）的自適應佈局來說是非常有用的方法。


<div
id="mydiv1">First</div>
<div
id="mydiv2">Second</div>
/* 應用在與浮動相反方向的負margin */
#mydiv1 {float:left; margin-right:-100px;}

若兩個元素都爲浮動，且#mydiv1的元素設定margin-right爲20px。這樣#mydiv2會認爲#mydiv1的寬度比原來寬度縮短了20px（因此會導致重疊）。但有意思的是，#mydiv1的內容不受影響，保持原有的寬度。

如果負margin等於實際寬度，則元素會被完全覆蓋。這是因爲元素的完全寬度等於margin，padding，border，width相加而成，所以如果負margin等於餘下三者的和，那元素的實際寬度也就變成了0px。

Q17:瀏覽器會下載沒有被應用的樣式內引用的資源？

HTML


<div
id="test1">
    <span
id="test2"></span>
</div>

CSS


#i-am-useless {
    background-image: url('mypic.jpg');
}

A:NO(不會)

對於HTML中的img，大家都知道，只要頁面加載了，圖片就會加載。但在CSS中的背景圖片，沒有被引用，那麼會不會加載呢？有些人會認爲會，因爲他在樣式中調用了，只不過不存在。有些人會認爲不會，因爲沒用到這個資源。那麼我們通過下面的圖來看看：

測試題中做個修改，把id換成結構中存大的，如”#test1″,在看一張圖的變化：

不用說什麼，兩圖一對比，勝過千言萬語。

Q18:頁面加載完畢後，瀏覽器會下載“mypic.jpg”圖片嗎？

HTML


<div
id="test1">
    <span
id="test2"></span>
</div>

CSS


#test2
{
    background-image: url('mypic.jpg');
    display: none;
}

A:Yes(會)

Q19:頁面加載完畢後，瀏覽器會下載“mypic.jpg”圖片嗎？

HTML


<div
id="test1">
    <span
id="test2"></span>
</div>

CSS


#test1
{
    display: none;
}
#test2
{
    background-image: url('mypic.jpg');
    visibility: hidden;
}

主義No(不會)

第18和19兩個測試題，和第17探討的是同一個問題，只不過多了元素隱藏和顯示的參數。如果你拿不定主意，那麼寫一個測試文件。一測一目瞭然。如果你想知道爲什麼，那就需要GG一下了。因爲對於他們的原理我也不懂，我就不誤人子弟了。

Q20:”only”選擇器起什麼作用？


@media only screen
and (max-width: 1024px) {
    margin: 0;
}

A:阻止老版本瀏覽器解析剩下的選擇器

Q21:overflow:hidden會創建一個新的BFC(block formatting context)?

HTML


<div>
    <p>I am floated</p>
    <p>So am I</p>
</div>

CSS


div {
    overflow: hidden;
}
p {
    float: left;
}

A:Yes(會)

w3c規範中的BFC定義：浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不爲“visiable”的塊級盒子，都會爲他們的內容創建新的BFC（塊級格式上下文）。

在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生摺疊。

在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。

BFC的通俗理解：首先BFC是一個名詞，是一個獨立的佈局環境，我們可以理解爲一個箱子（實際上是看不見摸不着的），箱子裏面物品的擺放是不受外界的影響的。轉換爲BFC的理解則是：BFC中的元素的佈局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）並且在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。

Q22:”Screen”"關鍵字是匹配設備的物理屏幕還是瀏覽器的viewport(視窗)?

@media only screen and (max-width: 1024px) {
    margin: 0;
}

A:瀏覽器的視窗

第20和第21考的是媒體查詢的知識，如果你對CSS的media有一定的瞭解，那麼這兩題對你來說就是小菜。

HTML篇

Q1:


<keygen>

是HTML5有效的標籤？

A:Yes(是的)

是不是有效標籤，對於不熟悉HTML5的同學來說，就只能猜了，但對HTML5有觀注過，或稍爲了解了一點的同學，能馬上回答出來。如果你對HTML5標籤方面不太熟悉，可以猛擊這裏查看。

Q2:會直接修改文本的方向嗎？

A:Yes(會)

Q3:下面的HTML是有效的？


<figure>
    <img
src="myimage.jpg"
alt="My image">
    <figcaption>
        <p>This is my self portrait.</p>
    </figcaption>
</figure>

A:Yes(合法)

Q4:什麼情況下使用

1

`<small>`

標籤？

A:當你想在
標籤添加一個copyright信息時。

Q5:如果一個web頁面包含多個h1標籤,它會影響SEO嗎?

A: No(不會)

Q6:如果你有一個搜索結果頁面,想突出顯示搜索詞,HTML標籤,你會使用什麼? strong,,mark,em,或highlight

A:mark

Q7:scoped屬性起什麼作用？





<article>
    <h1>Hello World</h1>
    <style
scoped>
        p {
            color: #FF0;
        }
    </style>
    <p>This is my text</p>
</article>
 
<article>
    <h1>This is awesome</h1>
    <p>I am some other text</p>
</article>




A:若一個父元素含有Scope包裹的樣式，則此樣式規則適用於這個父元素中所有的子元素

Q8:HTML5中鏈接a能放置塊元素嗎？


<article>
    <a
href="#">
        <h1>Hello</h1>
        <p>I am some text</p>
    </a>
</article>

A:Yes(可以)

Q9:當頁面第一次加載，下面的html會觸發一個http請求麼？


<img
src="mypic.jpg"
style="visibility: hidden"
alt="My picture">

A:Yes(會)

Q10:當頁面第一次加載，下面的html會觸發一個http請求麼？


<div
style="display: none;">
    <img
src="mypic.jpg"
alt="My photo">
</div>

A:Yes(會)

Q11:main1.css會在hello world彈出前下載解析完畢麼？


<head>
    <link
href="main1.css"
rel="stylesheet">
    <script>
        alert('Hello World');
    </script>
</head>

A:Yes(會)

Q12:Main1.css需要被下載解析完畢後才請求main2css麼？


<head>
    <link
href="main1.css"
rel="stylesheet">
    <link
href="main2.css"
rel="stylesheet">
</head>

A:No(不需要)

Q13:Main2.css會在paragraph1渲染完畢前下載並解析麼？





<head>
    <link
href="main1.css"
rel="stylesheet">
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <link
href="main2.css"
rel="stylesheet">
</body>




A: Yes(會)

在HTML部分，主要涉及了標籤，以及文件加載和渲染的順序。如果需要深入的瞭解，我想要嘗試做一些案例測試。這樣拿到的答案會更準確一些，也會讓自己對所掌握的知識深刻一些。

JavaScript篇

JavaScript相關的知識，對於我來說，就是一片空白，在做這些測試的時候，幾乎是以猜來完成，所以也陣亡一大片。下面這部分邀請了@民工精髓大大，爲大家介紹JavaScript部分。

Q1:下面參數的值是多少？


"1" + 2 + "3" + 4;

A: 1234

加法優先級等同，從左往右，數字與字符串相加，數字轉換成字符串進行運算，結果等同於：”12″+”3″+4 = “123″+4 = “1234″。

Q2:下面參數的值是多少？


4 + 3 + 2 + "1"

A:91

優先級同上，從左往右，等同於：7+2+”1″ = 9+”1″ = “91″。

Q3:下面代碼彈出的是什麼？





var
foo = 1;
function
bar() {
    foo = 10;
    return;
    function
foo() {}
}
bar();
alert(foo);




A:1

function的定義會提前到當前作用域之前，所以等同於：





var
foo = 1;
function
bar() {
    function
foo() {}
    foo = 10;
    return;
}
bar();
alert(foo);




所以，在foo=10的時候，foo是有定義的，屬於局部變量，影響不到外層的foo。

Q4:下面代碼彈出的是什麼？


function
bar() {
 
    return
foo;
 
    foo = 10;
 
    function
foo() {}
 
    var
foo = 11;
 
}
 
alert(typeof
bar());

A:function

與上題類似，等同於：





function
bar() {
    function
foo() {}
    return
foo;
    foo = 10;
    var
foo = 11;
}
alert(typeof
bar());




在return之後聲明和賦值的foo都無效，所以返回了function。

Q5:下面代碼彈出值順序是什麼？





var
x = 3;
var
foo = {
    x: 2,
    baz: {
        x: 1,
        bar: function() {
            return
this.x;
        }
    }
}
var
go = foo.baz.bar;
alert(go());
alert(foo.baz.bar());




A:3,1

this指向執行時刻的作用域，go的作用域是全局，所以相當於window，取到的就是window.x，也就是var x=3;這裏定義的x。而foo.baz.bar()裏面，this指向foo.baz，所以取到的是這個上面的x，也就是1。

Q6:下面代碼彈出值是什麼？


var
x = 4,
 
    obj = {
 
        x: 3,
 
        bar: function() {
 
            var
x = 2;
 
            setTimeout(function() {
 
                var
x = 1;
 
                alert(this.x);
 
            }, 1000);
 
        }
 
    };
 
obj.bar();

A:4

不管有沒有這個setTimeout，它裏面這個function都是孤立的，this只能是全局的window，即使不延時，改成立即執行結果同樣是4。

Q7:下面代碼彈出值是什麼？


x = 1;
 
function
bar() {
 
    this.x = 2;
 
    return
x;
 
}
 
var
foo = new
bar();
 
alert(foo.x);

A:2

這裏主要問題是最外面x的定義，試試把x=1改成x={}，結果會不同的。這是爲什麼呢？在把函數當作構造器使用的時候，如果手動返回了一個值，要看這個值是否簡單類型，如果是，等同於不寫返回，如果不是簡單類型，得到的就是手動返回的值。如果，不手動寫返回值，就會默認從原型創建一個對象用於返回。

Q8:下面代碼彈出值是什麼？


function
foo(a) {
 
    alert(arguments.length);
 
}
 
foo(1, 2, 3);

A:3

arguments取的是實參的個數，而foo.length取的是形參個數。

Q9:下面代碼彈出值是什麼？


var
foo = function
bar() {};
 
alert(typeof
bar);

A:undefined

這種情況下bar的名字從外部不可見，那是不是這個名字別人就沒法知道了呢？不是，toString就可以看到它，比如說alert(foo)，可以看看能打出什麼。

Q10:下面代碼彈出值是什麼？


var
arr = [];
 
arr[0]  = 'a';
 
arr[1]  = 'b';
 
arr.foo = 'c';
 
alert(arr.length);

A:2

數組的原型是Object，所以可以像其他類型一樣附加屬性，不影響其固有性質。

Q11:下面代碼彈出值是什麼？


function
foo(a) {
 
    arguments[0] = 2;
 
    alert(a);
 
}
 
foo(1);

A:2

實參可以直接從arguments數組中修改。

Q12:下面代碼彈出值是什麼？


function
foo(){}
 
delete
foo.length;
 
alert(typeof
foo.length);

A:number

foo.length是無法刪除的，它在Function原型上。

David Shariff在總共提供了47道題，22道CSS題,13道HTML題和12道Javascript題。這些題對於一位Web前端人員來說都不是什麼很複雜的題，是一些基礎題、概念題，但也是非常讓人理解或者混淆的題。在此對CSS和javascript部分做了一些分析和推薦閱讀。希望這些題能幫助大家能測試自己所掌握的知識以及擴展自己的閱讀。

Web前端測試題

CSS篇

Q1:CSS屬性區分大小寫嗎？

A:NO(不區分)

Q2:你能給內聯元素設置margin-top和margin-bottom嗎？

A:No(不能設置)

Q3:內聯元素設置padding-top和padding-bottom會添加到元素的尺寸上嗎？

A:NO(不會)

Q4:如果你對元素設置字體大小:10 rem, 當用戶調整大小/拖瀏覽器窗口時文本將相應變化大小麼?

A:NO（不能）

A:False(假的)

Q6:在一個HTML文檔中,僞類:root總是指元素?

A:True(是的)

Q7:translate()函數可以在z軸移動一個元素的位置嗎?

A:False(不能)

Q8:“Sausage”文本的顏色是什麼？

A:Blue(藍色)

Q9:“Sausage”文本的顏色是什麼？

A:Blue(藍色)

Q10:“Sausage”文本的顏色是什麼？

A:Blue(藍色)

Q11:“Sausage”文本的顏色是什麼？

A:Blue(藍色)

Q12:“Sausage”文本的顏色是什麼？

A:Blue(藍色)

A:Blue(藍色)

Q14:“Sausage”文本的顏色是什麼？

A:Red(紅色)

Q15:#example元素位置會發生什麼？

A:”#example”之後的所有元素會向上移動“5px”。

Q16:#example元素位置會發生什麼？

A:”#example”自身向左移動“5px”。

Q17:瀏覽器會下載沒有被應用的樣式內引用的資源？

A:NO(不會)

Q18:頁面加載完畢後，瀏覽器會下載“mypic.jpg”圖片嗎？

A:Yes(會)

Q19:頁面加載完畢後，瀏覽器會下載“mypic.jpg”圖片嗎？

Q20:”only”選擇器起什麼作用？

A:阻止老版本瀏覽器解析剩下的選擇器

Q21:overflow:hidden會創建一個新的BFC(block formatting context)?

A:Yes(會)

Q22:”Screen”"關鍵字是匹配設備的物理屏幕還是瀏覽器的viewport(視窗)?

A:瀏覽器的視窗

HTML篇

Q1:

A:Yes(是的)

Q2:會直接修改文本的方向嗎？

A:Yes(會)

Q3:下面的HTML是有效的？

A:Yes(合法)

Q4:什麼情況下使用 1 <small>

A:當你想在 標籤添加一個copyright信息時。

Q5:如果一個web頁面包含多個h1標籤,它會影響SEO嗎?

A: No(不會)

A:mark

Q7:scoped屬性起什麼作用？

A:若一個父元素含有Scope包裹的樣式，則此樣式規則適用於這個父元素中所有的子元素

Q8:HTML5中鏈接a能放置塊元素嗎？

A:Yes(可以)

Q9:當頁面第一次加載，下面的html會觸發一個http請求麼？

A:Yes(會)

Q10:當頁面第一次加載，下面的html會觸發一個http請求麼？

A:Yes(會)

Q11:main1.css會在hello world彈出前下載解析完畢麼？

A:Yes(會)

Q12:Main1.css需要被下載解析完畢後才請求main2css麼？

A:No(不需要)

Q13:Main2.css會在paragraph1渲染完畢前下載並解析麼？

A: Yes(會)

JavaScript篇

Q1:下面參數的值是多少？

A: 1234

Q2:下面參數的值是多少？

A:91

Q3:下面代碼彈出的是什麼？

A:1

Q4:下面代碼彈出的是什麼？

A:function

Q5:下面代碼彈出值順序是什麼？

A:3,1

Q4:什麼情況下使用

1

`<small>`

A:當你想在
標籤添加一個copyright信息時。