這塊內(nèi)容分成下面5個(gè)部分：1.HTML常見(jiàn)元素和理解。2.HTML版本。3.HTML元素分類(lèi)。4.HTML元素的嵌套關(guān)系。5.HTML元素的默認(rèn)樣式和定制化。
1.HTML常見(jiàn)元素：head區(qū)的元素：meta 、title 、style、link、script、base等，這類(lèi)元素不會(huì)在頁(yè)面上進(jìn)行顯示，表示與頁(yè)面相關(guān)資源和描述；body區(qū)的元素：div/section/article/aside/header/footer、p、span/em/strong、table/thead/tbody/tr/td、ul/ol/li/dl/dt/dd、a、form/input/select/textarea/button等，這類(lèi)元素顯示在頁(yè)面上，所以豐富一些。 比如：
<meta charset="utf-8">表示我們的文件采用什么樣子的字符集，使用哪種編碼的字符。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"視口（手機(jī)和電腦屏幕）初始縮放，最大縮放，是否可以縮放，適配移動(dòng)端的寬度的第一步。
<base href="/">指定一個(gè)基礎(chǔ)路徑，所以路徑都以它我基礎(chǔ)路徑。
HTML重要屬性：a[href,target]、img[src,alt]、table td[colspan,rowspan]、form[target,method,enctype]、input[type,value]、button[type]、select>option[value]、label[for]。
如果用ajax提交請(qǐng)求，還是否有必要用form元素，答案是建議的，因?yàn)槭紫任覀兛梢岳帽韱沃衧ubmit、reset的特性來(lái)提交和重置表單；同時(shí)在jquery中serialize就可以整體提取表單的用法我們可以利用；可以和框架或驗(yàn)證組件結(jié)合進(jìn)行表單驗(yàn)證；此外對(duì)用戶來(lái)說(shuō)瀏覽器會(huì)提供一些與form相關(guān)的功能，比如密碼管理工具，幫助記住密碼等。所以只要涉及到表單驗(yàn)證，所以即使你不用form的原生提交，還是建議加上form。
如何理解HTML?HTML到底是什么，如何去理解它。
HTML“文檔”；描述文檔的“結(jié)構(gòu)”；有區(qū)塊和大綱。HTML5 Outliner（H5o）大綱算法工具（from W3C），來(lái)查看一個(gè)頁(yè)面的大綱。能夠讓機(jī)器和其他引擎更好的理解文檔，也方便他人理解，不要一直用div，所以html標(biāo)簽的語(yǔ)義也是很重要的。如下圖，用h5o查看淘寶網(wǎng)大綱：
HTML版本問(wèn)題：
HTML/4.01(SGML) 、XHTML(XML)、? HTML5。
對(duì)于上面三種版本的格式書(shū)寫(xiě)，都有官方文檔，同時(shí)W3C提供了網(wǎng)站:https://validator.w3.org，來(lái)上傳我們的文件，然后出來(lái)檢查的結(jié)果。會(huì)寫(xiě)出錯(cuò)誤的個(gè)數(shù)以及錯(cuò)誤的原因等。同樣的代碼用不同的標(biāo)準(zhǔn)來(lái)寫(xiě)，錯(cuò)誤不一樣。
下面準(zhǔn)備一個(gè)XHTML的文件，進(jìn)行驗(yàn)證：
相同同的內(nèi)容，在HTML5標(biāo)準(zhǔn)：
建議大家在寫(xiě)完HTML5，都去驗(yàn)證一下。
關(guān)于HTML5新增內(nèi)容：
HTML5新增的區(qū)塊標(biāo)簽：section、article、nav、aside。它們除aside外會(huì)反應(yīng)的大綱視圖中，aside表示不太重要的內(nèi)容，比如廣告。
表單增強(qiáng)：日期、時(shí)間、搜索，表單驗(yàn)證(required,min,max,正則等)，Placeholder自動(dòng)聚焦。
HTML5新增語(yǔ)義：header/footer 頭尾；section/article區(qū)域（div是沒(méi)有語(yǔ)義的）；nav導(dǎo)航；aside側(cè)邊欄，放不重要的內(nèi)容，如友情鏈接等；em/strong（斜體/粗體）強(qiáng)調(diào)；i icon 圖標(biāo)。
HTML5其他新增內(nèi)容，是關(guān)于API的，如本地存儲(chǔ)，定位等等。
HTML元素的分類(lèi)：
按照默認(rèn)樣式分：塊級(jí) block(默認(rèn)方形會(huì)占據(jù)整行),行內(nèi) inline（內(nèi)聯(lián)元素），inline-block（對(duì)外像inline,對(duì)內(nèi)又是block,有自己的形狀，尺寸等，不多，大多是表單元素，比如select,input等）。下面用一個(gè)例子簡(jiǎn)單說(shuō)明下這些區(qū)別：
如上圖，select是一個(gè)inline-block元素，對(duì)外是與其他元素處于一行，對(duì)內(nèi)可設(shè)置寬高，呈現(xiàn)方形，而em,strong是inline,不可以設(shè)置寬高。
HTML5中按照默認(rèn)內(nèi)容分：內(nèi)容模型，如flow（文檔流中元素，meta元素如base,title不在文檔流中）,interactive（和用戶有交互的元素）,heading,sectioning（分區(qū)的元素等）,embeded（嵌入其它資源，video,audio,canvas等）,phrasing（如em,strong等）,metadata。
"https://www.w3.org/TR/html5/dom.html#phrasing-content"有一個(gè)動(dòng)態(tài)的圖：
HTML元素的嵌套關(guān)系:
塊級(jí)元素可以包含行內(nèi)元素；塊級(jí)元素不一定能包含塊級(jí)元素；行內(nèi)元素一般不能包含塊級(jí)元素。
比如p不能包含div，行內(nèi)元素a元素可以包含塊級(jí)元素，但是為什么呢，具體嵌套關(guān)系是w3c中有規(guī)定的，上面的這三個(gè)說(shuō)法是不嚴(yán)謹(jǐn)?shù)摹?/p>
在"https://www.w3.org/TR/html5/textlevel-semantics.html#the-a-element"中查看元素的Content model，
關(guān)于Transparent，點(diǎn)擊進(jìn)去，官方說(shuō)明如下‘Some elements are described as?transparent; they have "transparent" in the description of their content model. The content model of a?transparent?element is derived from the content model of its parent element: the elements required in the part of the content model that is "transparent" are the same elements as required in the part of the content model of the parent of the transparent element in which the transparent element finds itself.’
簡(jiǎn)單理解就是，Transparent透明的內(nèi)容模型，在計(jì)算內(nèi)容模型，其嵌套合法性的時(shí)候，本身不參加計(jì)算，是否合法取決于它外面的元素。
下面舉一個(gè)簡(jiǎn)單的例子：
用瀏覽器打開(kāi)該頁(yè)面，發(fā)現(xiàn)任然顯示了錯(cuò)誤，沒(méi)有報(bào)錯(cuò)，但是我們打開(kāi)Elements進(jìn)行查看，會(huì)有一個(gè)重大發(fā)現(xiàn)：
此時(shí)右邊的文檔結(jié)構(gòu)已經(jīng)發(fā)生了改變，這是沒(méi)有預(yù)料到的，這是因?yàn)闉g覽器的容錯(cuò)機(jī)制，幫助我們?nèi)ケM可能正確的容錯(cuò)，可是這種隱蔽的容錯(cuò)是開(kāi)發(fā)人員不知道的，開(kāi)發(fā)的時(shí)候不可控的，所以我們要避免出現(xiàn)這樣的情況，所以每次我們還是到上文提出的網(wǎng)站'https://validator.w3.org'來(lái)檢驗(yàn)?zāi)愕膆tml。同時(shí)也說(shuō)明，p里面不可以包含div(a是不參與計(jì)算嵌套合法性)，我們打開(kāi)官網(wǎng)查看一下p的Content model。
Phrasing content有哪些呢，在動(dòng)態(tài)圖中可以粗略看下，也可以點(diǎn)擊上圖Phrasing content。
HTML元素默認(rèn)樣式：
默認(rèn)樣式的意義：會(huì)給出一些元素一些有意義的樣式；默認(rèn)樣式帶來(lái)的問(wèn)題：有些默認(rèn)樣式是超過(guò)我們預(yù)期之外，還有各個(gè)瀏覽器中默認(rèn)樣式不盡相同。下面舉個(gè)例子來(lái)看看默認(rèn)樣式：
這里沒(méi)有增加任何樣式，但是仍然有樣式顯示，當(dāng)你想查明原因時(shí)候，請(qǐng)從html標(biāo)簽開(kāi)始查起，看樣式為什么而來(lái)。比如：
html元素樣式如下，發(fā)現(xiàn)html無(wú)默認(rèn)樣式，
body默認(rèn)元素樣式如下，發(fā)現(xiàn)body有8個(gè)像素的margin，是user agent stylesheet:
ul元素默認(rèn)樣式如下，可以看出有margin（黃色），有padding（綠色）。
在瀏覽器中更改樣式如下，padding設(shè)置為0，沒(méi)有了上圖中的綠色部分，同時(shí)設(shè)置list-style-position:inside，表示list中點(diǎn)包括在li元素內(nèi)，關(guān)于圓點(diǎn)的樣式還有l(wèi)ist-style-image,list-style-type屬性可以設(shè)置：
css reset:
如何處理reset瀏覽器中的默認(rèn)樣式，去除所有的默認(rèn)樣式，或者使各個(gè)瀏覽器中的默認(rèn)樣式盡量保持一致，如：“https://meyerweb.com/eric/tools/css/reset/”，"https://yuilibrary.com/yui/docs/cssreset/"，還有一種如下四行的reset css 方式（如果你不想去了解css reset也可以加上這個(gè)簡(jiǎn)短的css reset），
上面三種都是為了干掉瀏覽器的默認(rèn)樣式，還有一種思路是盡可能使各個(gè)瀏覽器默認(rèn)樣式保持一致，嘗試在各個(gè)瀏覽器中去做修正，如"https://necolas.github.io/normalize.css/"，Normalize.css定義是，“A modern, HTML5-ready alternative to CSS resets.Normalize.css?makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.”
1.doctype的意義是什么。
讓瀏覽器以標(biāo)準(zhǔn)模式渲染；讓瀏覽器知道元素的合法性。
2.HTML XHTML HTML5的關(guān)系。
HTML屬于SGML;XHTML屬于XML，是HTML進(jìn)行XML嚴(yán)格化的結(jié)果；HTML5不屬于SGML或XML，比XHTML寬松。
3.HTML5有什么變化。
新的語(yǔ)義化元素，header article footer section nav 等；表單增強(qiáng)（新的元素和表單驗(yàn)證）；新的API(離線、音視頻、圖形、實(shí)時(shí)通信、本地存儲(chǔ)、設(shè)備能力)；分類(lèi)和嵌套變更（如a元素的嵌套的合法性）。
4.em和i有什么區(qū)別。
em是語(yǔ)義化的標(biāo)簽，表強(qiáng)調(diào)；i是純樣式的標(biāo)簽，表斜體；HTML5中i不推薦使用，一般用作圖標(biāo)，代表icon的意思。
5.語(yǔ)義化的意義是什么。
開(kāi)發(fā)者容易理解；機(jī)器容易理解結(jié)構(gòu)（搜索、讀屏軟件）；有助于SEO（搜索）；semantic microdata(另外一種規(guī)范，會(huì)做更加語(yǔ)義化的標(biāo)記，幫助搜索)。
6.哪些元素可以自閉合。
表單元素input;圖片img;br hr;meta link，對(duì)于自閉合元素在html5中可以不加斜杠，但是在xhtml中一定要加的。
7.HTML和DOM的關(guān)系。
HTML是‘死’的；DOM是經(jīng)過(guò)瀏覽器HTML解析而來(lái)，呈現(xiàn)出來(lái)頁(yè)面，是活的；JS可以維護(hù)DOM。
8.property和attribute的區(qū)別。
property是特性，attribute是屬性，attribute是‘死’的，property是‘活’。首次渲染，首先將attribute賦值給property。
9.form的作用有哪些。
直接提交表單；使用submit/reset按鈕；便于瀏覽器保存表單；第三方庫(kù)可以整體提取值；第三方庫(kù)可以進(jìn)行表單驗(yàn)證。
