web前端開發測驗之HTML部分

時間 2019-11-10

標籤 web 前端開發測驗 html 部分欄目 HTML 简体版

原文原文鏈接

Tip：這是http://davidshariff.com/quiz/給出的前端開發測試題的HTML部分,我根據本身的理解給出的答案，歡迎拍磚，一塊兒刷題==>Github 倉庫地址。css

Q: <keygen> 是正確的HTML5標籤嗎？html

A: 是。前端

<keygen> 標籤規定用於表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發送到服務器。是HTML5 標籤。git
Q: <bdo> 標籤是否能夠改變文本方向？github

A: 能夠。web

<bdo>標籤覆蓋默認的文本方向。shell
```
<bdo dir="rtl">Here is some text</bdo>
```
Q: 下列HTML代碼是否正確？bootstrap
```
<figure>
    <img src="myimage.jpg" alt="My image">
    <figcaption>
        <p>This is my self portrait.</p>
    </figcaption>
</figure>
```
A: 正確瀏覽器

<figure> 標籤規定獨立的流內容（圖像、圖表、照片、代碼等等）。figure 元素的內容應該與主內容相關，但若是被刪除，則不該對文檔流產生影響。使用<figcaption>元素爲figure添加標題（caption）。服務器
Q: 哪一種狀況下應該使用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.
Q: 在一個結構良好的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
Q: 若是你有一個搜索結果頁面，你想高亮搜索的關鍵詞。什麼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.

Q: 下列代碼中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 元素的父元素及其子元素。

HTML5 支持塊級超連接嗎？例如：
```
<article>
    <a href="#">
        <h1>Hello</h1>
        <p>I am some text</p>
    </a>
</article>
```
A: 支持。

HTML5中<a> 元素表現爲一個超連接，支持任何行內元素和塊級元素。
Q: 當下列的HTML代碼加載時會觸發新的HTTP請求嗎？
```
<img src="mypic.jpg" style="visibility: hidden" alt="My picture">
```
A: 會哇

Q: 當下列的HTML代碼加載時會觸發新的HTTP請求嗎？

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

A: 會！

main1.css必定會在alert('Hello world')被加載和編譯嗎?

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

A: 是！

Q: 在main2.css獲取前main1必定必須被下載解析嗎？

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

A: no!

Q: 在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!