前端開發面試題收集(html部分)

1.問:<keygen>是正確的HTML5標籤嗎?css

答:是。html

<keygen> 標籤規定用於表單的密鑰對生成器字段。當提交表單時,私鑰存儲在本地,公鑰發送到服務器。前端

2.問:<bdo>標籤能夠改變文本方向?html5

答:能夠。git

bdo 元素可覆蓋默認的文本方向。例子:github

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

結果是:web

3.問:下列代碼是否合法面試

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

答:合法。bootstrap

<figure> 標籤規定獨立的流內容(圖像、圖表、照片、代碼等等)。figure 元素的內容應該與主內容相關,但若是被刪除,則不該對文檔流產生影響。<figcaption> 元素爲 figure 添加標題(caption)瀏覽器

4.問: 哪一種狀況下應該使用small標籤?

答:small標籤通常使用場景是在版權信息和法律文本里使用,也能夠在標題裏使用標註附加信息(bootstrap中可見),但不能夠用來建立副標題。

5.問:在一個結構良好的web網頁,多個h1標籤會不利於seo嗎?

答:不影響。

6.問:在一個搜索結果頁面,你想高亮搜索關鍵詞,你會用什麼html標籤?

答:<mark>。

<mark> 標籤訂義帶有記號的文本.

7.問:下列代碼中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>

答:scoped 屬性是一個布爾屬性。若是使用該屬性,則樣式僅僅應用到 style 元素的父元素及其子元素。

8.問:HTML5支持塊級超連接嗎?

答:支持。不少時候,能夠用 a標籤包含其餘塊級或內聯元素。

9.問:下列代碼中,頁面一加載會觸發http請求嗎?

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

答:會。

10.問:下列代碼中,頁面一加載會觸發http請求嗎?

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

答:會。

瀏覽器在代碼中發現一個 img 標籤引用了一張圖片,向服務器發出請求。此時瀏覽器不會等到圖片下載完,而是繼續渲染後面的代碼;

11.問:下列代碼中,main1.css會在"hello world!"輸出以前,下載並解析嗎?

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

答:會。

瀏覽器先拿到man1.css文件,而後發現了一個包含一行Javascript代碼的 script 標籤,趕快執行它;

12.問:下列代碼中,在main2.css獲取前main1.css必定會被下載解析嗎?

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

答:不會。

main1.css還不會被解析,要等main2.css下載後一塊兒解析,不過必定下載了。瀏覽器下載的順序是從上到下,渲染的順序也是從上到下,下載和渲染是同時進行的。若是遇到語義解釋性的標籤嵌入文件(JS腳本,CSS樣式),那麼此時瀏覽器的下載過程會啓用單獨鏈接進行下載。樣式表在下載完成後,將和之前下載的全部樣式表一塊兒進行解析解析完成後,將對此前全部元素(含之前已經渲染的)從新進行渲染。

13.問:下列代碼中,在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>

答:是。

渲染和下載是同時進行的,都是從上到下。這裏Paragraph 1在main2.css的上方,被渲染了一次,等到main2.css下載並解析時,會對它再渲染一次。因此在Paragraph 1呈如今頁面前,main2.css必定會被下載解析。只是它被渲染了兩次。

須要提到:js是阻塞加載(不能並行下載和解析)。緣由:

當引用了js的時候,瀏覽器發送一個 js 請求就會一直等待該請求的返回。由於瀏覽器須要一個穩定的dom樹結構,而JS中頗有可能有代碼直接改變了DOM樹結構,好比使用 document.write 或 appendChild,甚至是直接使用的location.href進行跳轉,瀏覽器爲了防止出現JS修改DOM樹,須要從新構建DOM樹的狀況,因此 就會阻塞其餘的下載和呈現。

因此js的引用通常也是放到body下面,而css的引用放在head中。

來源:http://davidshariff.com/quiz/

參考:前端面試(HTML)

http://camnpr.com/archives/must-know-the-seven-html5-features.html

相關文章
相關標籤/搜索