web前端筆試題庫之HTML篇

總結了一些web前端面試（筆試）題分享給大家，本篇文章就先給大家分享HTML部分的筆試題，附答案，大家可以自己做做，看看能答對幾個！

Q1：<keygen> 是正確的HTML5標籤嗎？

A：是。

<keygen> 標籤規定用於表單的金鑰對生成器欄位。當提交表單時，私鑰儲存在本地，公鑰傳送到伺服器。是HTML5 標籤。

Q2：<bdo> 標籤是否可以改變文字方向？

A：可以。

<bdo>標籤覆蓋預設的文字方向。

<bdo dir="rtl">Here is some text</bdo>

Q3：下列HTML程式碼是否正確？

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

A：正確

<figure> 標籤規定獨立的流內容（影象、圖表、照片、程式碼等等）。figure 元素的內容應該與主內容相關，但如果被刪除，則不應對檔案流產生影響。使用<figcaption>元素為figure新增標題（caption）。

Q4：哪種情況下應該使用small標籤？當你想在h1 標題後建立副標題？還是當在footer裡面增加版權資訊？

A：small標籤一般使用場景是在版權資訊和法律文字裡使用，也可以在標題裡使用標註附加資訊（bootstrap中可見），但不可以用來建立副標題。

The HTML Small Element (<small>) makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.

Q5：在一個結構良好的web網頁裡，多個h1標籤會不利於SEO嗎？

A：不影響。

According to Matt Cutts (lead of Google's webspam team and the de facto expert on these things), using multiple <h1> tags is fine, as long as you're not abusing it (like sticking your whole page in an <h1> and using CSS to style it back to normal size). That would likely have no effect, and might trigger a penalty, as it looks spammy.
If you have multiple headings and it would be natural to use multiple <h1>'s, then go for it.
摘自：http://www.quora.com/Does-using-multiple-h1-tags-on-a-page-affect-search-engine-rankings

Q6：如果你有一個搜尋結果頁面，你想高亮搜尋的關鍵詞。什麼HTML 標籤可以使用?

A：<mark> 標籤表現高亮文字。

The HTML <mark> Element represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched for word.

Q7：下列程式碼中scope 屬性是做什麼的？

<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：scoped 屬性是一個布林屬性。如果使用該屬性，則樣式僅僅應用到 style 元素的父元素及其子元素。

Q8：HTML5 支援塊級超連結嗎？例如：

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

A：支援。

HTML5中<a> 元素表現為一個超連結，支援任何行內元素和塊級元素。

Q9：當下列的HTML程式碼載入時會觸發新的HTTP請求嗎？

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

A：會哇

Q10：當下列的HTML程式碼載入時會觸發新的HTTP請求嗎？

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

A：會！

Q11：main1.css一定會在alert('Hello world')被載入和編譯嗎?

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

A：是！

Q12：在main2.css獲取前main1一定必須被下載解析嗎？

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

A：no!

Q13：在Paragraph 1載入後main2.css才會被載入編譯嗎？

<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視訊教學、】

以上就是web前端筆試題庫之HTML篇的詳細內容，更多請關注TW511.COM其它相關文章！