基礎(chǔ)面試題06:簡述一下你對HTML語義化的理解？更加通俗易懂！

.用正確的標(biāo)簽做正確的事情。

2.html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;

3.即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;

4.搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;

5.使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

簡單例子：以前大部分都是div和span

<body>
 <div id="header">...</div>
 <div id="nav"><span>...</span></div>
 <div class="artical">
 <div class="section"></div>
 </div>
 <div id="side-bar"><span>...</span></div>
 <div id="footer">...</div>
</body>

現(xiàn)在HTML5之后，好多了：article、footer、header、nav、section。

<body>
 <header>...</header>
 <nav>...</nav>
 <article>
 <section>
 ...
 </section>
 </article>
 <aside>...</aside>
 <footer>...</footer>
</body>

布局效果：

義化標(biāo)簽還有<header>(頭部)、<nav>(導(dǎo)航)、<main>(主要區(qū)域)、<article>(主要內(nèi)容)、<section>(區(qū)塊)、<aside>(側(cè)邊欄)和<footer>(底部)等。

語義化優(yōu)點(diǎn)：

沒CSS樣式的情況下，頁面整體也會呈現(xiàn)很好的結(jié)構(gòu)效果
讓人更容易讀懂-增加代碼可讀性
讓搜索引擎更容易讀懂-SEO

2. 默認(rèn)情況下，哪些HTML標(biāo)簽是塊級元素、內(nèi)聯(lián)元素、空元素？

內(nèi)聯(lián)(行內(nèi))元素有：a b span img input select strong；
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
常見的空元素：<br>、<hr>、<img>、<input>、<link>、<meta>

3. script標(biāo)簽中defer和async的區(qū)別

如果沒有defer或async屬性，瀏覽器會立即加載并執(zhí)行相應(yīng)的腳本。它不會等待后續(xù)加載的文檔元素，讀取到就會開始加載和執(zhí)行，這樣就阻塞了后續(xù)文檔的加載。

下圖可以直觀的看出三者之間的區(qū)別:

其中藍(lán)色代表js腳本網(wǎng)絡(luò)加載時間，紅色代表js腳本執(zhí)行時間，綠色代表html解析時間。

defer 和 async屬性都是去異步加載外部的JS腳本文件，它們都不會阻塞頁面的解析，其區(qū)別如下：

執(zhí)行順序： 多個帶async屬性的標(biāo)簽，不能保證加載的順序；多個帶defer屬性的標(biāo)簽，按照加載順序執(zhí)行；
腳本是否并行執(zhí)行：async屬性，表示后續(xù)文檔的加載和執(zhí)行與js腳本的加載和執(zhí)行是并行進(jìn)行的，即異步執(zhí)行；defer屬性，加載后續(xù)文檔的過程和js腳本的加載是并行進(jìn)行的，js腳本需要等到文檔所有元素解析完成之后才執(zhí)行，DOMContentLoaded事件觸發(fā)執(zhí)行之前。

4. HTML5有哪些更新

增加了語義化標(biāo)簽（上邊已提到）；
增加了重要的媒體標(biāo)簽<audio>和<video>，還引入了<source>標(biāo)簽配合媒體標(biāo)簽使用；
新增了<canvas>，使用 JavaScript 在就可以網(wǎng)頁上繪制圖像；
增加了draggable屬性設(shè)置元素可拖放；
提供了兩種在客戶端存儲數(shù)據(jù)的新方法localStorage和sessionStorage；
增加了DOM查詢操作querySelector和querySelectorAll；
此外，還增加了大量的表單類型和表單屬性；

5. DOCTYPE的作用

在網(wǎng)頁HTML的頂部，會發(fā)現(xiàn)頂部有一個<!DOCTYPE html>聲明，所有處于標(biāo)簽之前，它不是html標(biāo)簽。主要作用是告訴瀏覽器的解析器使用哪種HTML規(guī)范或者XHTML規(guī)范來解析頁面。

如果不寫文檔DOCTYPE聲明，瀏覽器將無法獲知HTML或XHTML文檔的類型，也會進(jìn)入怪異模式，那么，在不同的瀏覽器下，顯示的樣式效果會不一致；相反，瀏覽器按照W3C標(biāo)準(zhǔn)來解析代碼，呈現(xiàn)頁面。

6. 常?的meta標(biāo)簽及作用

對于viewport中的值，有下列選項：

width ：寬度(數(shù)值/device-width)
height ：高度(數(shù)值/device-height)
initial-scale ：初始縮放比例
maximum-scale ：最大縮放比例
minimum-scale ：最小縮放比例
user-scalable ：是否允許用戶縮放(yes/no）

對接下來很多應(yīng)屆生面臨找工作面試的問題，我將會總結(jié)一些前端面試常見的問題和大家分享。希望能幫助到即將進(jìn)入職場的同學(xué)們。話不多說，我們開始吧。

簡述一下你對HTML語義化的理解？

1、用正確的標(biāo)簽做正確的事情。

2、使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

3、即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;

4、html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;

5、搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;

歡迎你給我留言~

在線咨詢

上一篇：HTML <label> 標(biāo)簽
下一篇：精美html大型商城模板通用電商模板源碼

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商