html從入門到放棄（終）-html語(yǔ)義化

個(gè)例子

這兩段代碼這瀏覽器中顯示的效果是一樣的

但是用第一種方式就是屬于標(biāo)簽語(yǔ)義化

標(biāo)簽語(yǔ)義化，需要對(duì)html的標(biāo)簽有很深厚的了解，我也就簡(jiǎn)單的舉個(gè)例子，讓大家明白這個(gè)概念就行了

然后html從入門到放棄的所有教程到這里就結(jié)束了。

接下來(lái)可能會(huì)出一些css的教程，大家喜歡的話，可以關(guān)注我

，Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

（1）、<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html> 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
（2）、標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。

2，HTML5 為什么只需要寫 <!DOCTYPE HTML>？

HTML5 不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行）；
而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。

3，行內(nèi)元素有哪些？塊級(jí)元素有哪些？空(void)元素有那些？

首先：CSS規(guī)范規(guī)定，每個(gè)元素都有display屬性，確定該元素的類型，每個(gè)元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block”，則為“塊級(jí)”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。
（1）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語(yǔ)氣）
（2）塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見(jiàn)的空元素：
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

4，頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？

（1）link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
（2）頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題;

5，介紹一下你對(duì)瀏覽器內(nèi)核的理解？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
（1）渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
（2）JS引擎則：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。
最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。

6，常見(jiàn)的瀏覽器內(nèi)核有哪些？

Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

7，html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和 HTML5？

* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
繪畫(huà) canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;
語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術(shù)webworker, websocket, Geolocation;
移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；
* 支持HTML5新標(biāo)簽：
IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。
當(dāng)然也可以直接使用成熟的框架、比如html5shim;

* 如何區(qū)分HTML5： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

8，簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解？

用正確的標(biāo)簽做正確的事情。
html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析;
即使在沒(méi)有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲(chóng)也依賴于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。

9，HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋一下？

在用戶沒(méi)有與因特網(wǎng)連接時(shí)，可以正常訪問(wèn)站點(diǎn)或應(yīng)用，在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件。
原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))，通過(guò)這個(gè)文件上的解析清單離線存儲(chǔ)資源，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過(guò)被離線存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示。
如何使用：
1、頁(yè)面頭部像下面一樣加入一個(gè)manifest的屬性；
2、在cache.manifest文件的編寫離線存儲(chǔ)的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在離線狀態(tài)時(shí)，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。

10，瀏覽器是怎么對(duì)HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載的呢？

在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件，如果是第一次訪問(wèn)app，那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲(chǔ)。如果已經(jīng)訪問(wèn)過(guò)app并且資源已經(jīng)離線存儲(chǔ)了，那么瀏覽器就會(huì)使用離線的資源加載頁(yè)面，然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件，如果文件沒(méi)有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。
離線的情況下，瀏覽器就直接使用離線存儲(chǔ)的資源。

11，請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過(guò)加密）。
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），記會(huì)在瀏覽器和服務(wù)器間來(lái)回傳遞。
sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
存儲(chǔ)大小：
cookie數(shù)據(jù)大小不能超過(guò)4k。
sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
有期時(shí)間：
localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)；
sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。
cookie 設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉

12，iframe有那些缺點(diǎn)？

*iframe會(huì)阻塞主頁(yè)面的Onload事件；
*搜索引擎的檢索程序無(wú)法解讀這種頁(yè)面，不利于SEO;
*iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載。
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過(guò)javascript
動(dòng)態(tài)給iframe添加src屬性值，這樣可以繞開(kāi)以上兩個(gè)問(wèn)題。

13，Label的作用是什么？是怎么用的？

label標(biāo)簽來(lái)定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

14，如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?

WebSocket、SharedWorker；
也可以調(diào)用localstorge、cookies等本地存儲(chǔ)方式；
localstorge另一個(gè)瀏覽上下文里被添加、修改或刪除時(shí)，它都會(huì)觸發(fā)一個(gè)事件，
我們通過(guò)監(jiān)聽(tīng)事件，控制它的值來(lái)進(jìn)行頁(yè)面信息通信；
注意quirks：Safari 在無(wú)痕模式下設(shè)置localstorge值時(shí)會(huì)拋出 QuotaExceededError 的異常；

15，如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？

1、map+area或者svg
2、border-radius
3、純js實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡(jiǎn)單算法、獲取鼠標(biāo)坐標(biāo)等等

16，title與h1的區(qū)別、b與strong的區(qū)別、i與em的區(qū)別？

title屬性沒(méi)有明確意義只表示是個(gè)標(biāo)題，H1則表示層次明確的標(biāo)題，對(duì)頁(yè)面信息的抓取也有很大的影響；

strong是標(biāo)明重點(diǎn)內(nèi)容，有語(yǔ)氣加強(qiáng)的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時(shí)：<strong>會(huì)重讀，而<B>是展示強(qiáng)調(diào)內(nèi)容。

i內(nèi)容展示為斜體，em表示強(qiáng)調(diào)的文本；

Physical Style Elements -- 自然樣式標(biāo)簽

b, i, u, s, pre

Semantic Style Elements -- 語(yǔ)義樣式標(biāo)簽

strong, em, ins, del, code

應(yīng)該準(zhǔn)確使用語(yǔ)義樣式標(biāo)簽, 但不能濫用, 如果不能確定時(shí)首選使用自然樣式標(biāo)簽。

17，你知道多少種Doctype文檔類型？

該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過(guò)渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁(yè)，而 Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁(yè)。

18， HTML與XHTML——二者有什么區(qū)別？

區(qū)別：

1.所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記

2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫

3.所有的XML標(biāo)記都必須合理嵌套

4.所有的屬性必須用引號(hào)""括起來(lái)

5.把所有<和&特殊符號(hào)用編碼表示

6.給所有屬性賦一個(gè)值

7.不要在注釋內(nèi)容中使“--”

8.圖片必須有說(shuō)明文字

19，<img>的title和alt有什么區(qū)別？

title是global attributes之一，用于為元素提供附加的advisory information。通常當(dāng)鼠標(biāo)滑動(dòng)到元素上的時(shí)候顯示。

alt是<img>的特有屬性，是圖片內(nèi)容的等價(jià)描述，用于圖片無(wú)法加載時(shí)顯示、讀屏器閱讀圖片。可提圖片高可訪問(wèn)性，除了純裝飾圖片外都必須設(shè)置有意義的值，搜索引擎會(huì)重點(diǎn)分析。

關(guān)HTML的相關(guān)的基礎(chǔ)問(wèn)題

我的觀點(diǎn)

1Doctype作用？嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

①<!DICTYPE>聲明位于文檔中的最前面，處于<html>標(biāo)簽之前，告訴瀏覽器的解析器，用什么文檔類型來(lái)規(guī)范解析這個(gè)文檔。

②嚴(yán)格模式的排版和js運(yùn)作模式是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行

③在混雜模式中，頁(yè)面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作

DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)

我的觀點(diǎn)

HTML5 為什么只需要寫 <!DOCTYPE HTML>？

html5不基于SGML(標(biāo)準(zhǔn)通用語(yǔ)言)，因此不需要對(duì)DTD（文檔類型定義）進(jìn)行引用，但需要doctype來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式運(yùn)行）

而html4.01基于SGML，所以需要對(duì)DTD進(jìn)行應(yīng)用，才能告知瀏覽器文檔所使用的文檔類型。

我的觀點(diǎn)

行內(nèi)元素有哪些？塊級(jí)元素有哪些？空（void）元素有哪些？

①.css規(guī)范規(guī)定，每個(gè)元素都有display 屬性，配檔該元素的類型，每個(gè)元素都有默認(rèn)的display值。

②.行內(nèi)元素有：a b soan img input select strong（強(qiáng)調(diào)的語(yǔ)氣）

塊級(jí)元素有：div ul li ol dl dt dd h1 h2 h3... p

空元素(沒(méi)有內(nèi)容的HTML內(nèi)容被稱為空元素，空元素是在開(kāi)始標(biāo)簽中關(guān)閉的)有: img input br hr link meta

我的觀點(diǎn)

頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？

①.link屬于XHTML標(biāo)簽，而@import是CSS提供的；

②.頁(yè)面被加載的時(shí)，link會(huì)同事被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載；

③.import只有在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題;

④.link 方式的樣式的權(quán)重>@import的權(quán)重

我的觀點(diǎn)

常見(jiàn)的瀏覽器內(nèi)核有哪些？

IE瀏覽器的內(nèi)核：Trident、

Mozilla的Gecko、

Chrome的Blink（WebKit的分支）、

Opera內(nèi)核原為Presto，現(xiàn)為Blink

我的觀點(diǎn)

介紹一下你對(duì)瀏覽器內(nèi)核的理解？

瀏覽器內(nèi)核是瀏覽器最重要的或者說(shuō)是最核心的部分。主要負(fù)責(zé)對(duì)網(wǎng)頁(yè)語(yǔ)法的解釋并渲染(顯示)網(wǎng)頁(yè)。

瀏覽器內(nèi)核又可以分為兩個(gè)部分（渲染引擎和js引擎）

js引擎則是解析JavaScript語(yǔ)言，執(zhí)行javascript語(yǔ)言來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。

渲染引擎負(fù)責(zé)取的網(wǎng)頁(yè)的內(nèi)容，整理訊息，以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后哦會(huì)輸出至顯示器或者打印機(jī)。

我的觀點(diǎn)

簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解？

HTML語(yǔ)義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）

于開(kāi)發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時(shí)讓瀏覽器的爬蟲(chóng)和機(jī)器很好地解析。

HTML語(yǔ)義化的主要目的是：

①.為了在沒(méi)有css的情況下，頁(yè)面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)

②.有利于用戶體驗(yàn)

③.有利于SEO和搜索引擎建立良好的溝通。

④.方便其他設(shè)備解析以意義的方式來(lái)渲染網(wǎng)頁(yè)、

⑤.便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，增加可讀性。

我的觀點(diǎn)

HTML5的離線儲(chǔ)存怎么使用

離線存儲(chǔ)局勢(shì)將一些源代碼文件保存在本地，這樣后續(xù)的頁(yè)面重新加載將使用本地資源文件，在離線情況下可以繼續(xù)訪問(wèn)web應(yīng)用，同時(shí)通過(guò)一定的手法(更新相關(guān)文件或者使用相關(guān) API)，可以更新、刪除離線存儲(chǔ)等操作

限時(shí)!！免費(fèi)送Dreamweaver、js等前端教程

↓↓↓

在線咨詢

上一篇：2分鐘了解 HTML 的基本結(jié)構(gòu)和語(yǔ)法規(guī)則
下一篇：javascript 解決默認(rèn)取整的坑(目前已知的最佳解決方案)

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商

html從入門到放棄（終）-html語(yǔ)義化

您的項(xiàng)目需求