一、html基本結構
1、doctype的作用
DOCTYPE是document type (文檔類型) 的縮寫。<!DOCTYPE >聲明位于文檔的最前面，處于標簽之前，它不是html標簽。主要作用是告訴瀏覽器的解析器使用哪種HTML規范或者XHTML規范來解析頁面。要建立符合標準的網頁,DOCTYPE聲明是必不可少的關鍵組成部分
2、刪除<!DOCTYPE>會發生什么
在W3C標準出來之前，不同的瀏覽器對頁面渲染有不同的標準，產生了一定的差異。這種渲染方式叫做混雜模式。在W3C標準出來之后，瀏覽器對頁面的渲染有了統一的標準，這種渲染方式叫做標準模式。不存在或者形式不正確會導致HTML或XHTML文檔以混雜模式呈現，就是把如何渲染html頁面的權利交給了瀏覽器，有多少種瀏覽器就有多少種展示方式。因此要提高瀏覽器兼容性就必須重視
3、嚴格模式和混雜模式
嚴格模式和混雜模式都是瀏覽器的呈現模式，瀏覽器究竟使用混雜模式還是嚴格模式呈現頁面與網頁中的DTD（文件類型定義）有關。
嚴格模式：又稱標準模式，是指瀏覽器按照W3C標準來解析代碼，呈現頁面
混雜模式：又稱為怪異模式或者兼容模式，是指瀏覽器按照自己的方式來解析代碼，使用一種比較寬松的向后兼容的方式來顯示頁面。
我們寫好一份HTML文檔，這時候全是代碼，用戶看不懂，是不是得用瀏覽器里的引擎給翻譯一下？用戶才看得到界面。關鍵是HTML有好多個版本，瀏覽器怎么知道按哪個版本解釋？你老爸讓你去掃地，你老媽讓你去洗碗，你是聽誰的，都是長輩，這時候如果你們家規定好了，凡事都聽你老爸的，這個就很好解決了，去掃地。這個DTD文檔模型就是這個意思，管它多少個HTML版本，我規定好我寫的這個HTML文檔以哪個為準就行，那我就知道我最終頁面會被解釋成一個什么樣子。
DTD文檔模型=DOCTYPE=DOCTYPE文檔聲明
4、常見的DOCTYPE聲明
HTML5
HTML 4.01 Strict 該DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
HTML 4.01 Transitional
該DTD包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
HTML 4.01 Frameset
該DTD 等同于 HTML 4.01 Transitional，但允許框架集內容。
XHTML 1.0 Strict
該DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。
XHTML 1.0 Transitional
該DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標記。
XHTML 1.0 Frameset
該DTD 等同于 XHTML 1.0 Transitional，但允許框架集內容。
4、HTML標簽
定義HTML 文檔，這個元素我們瀏覽器看到后就明白這是個HTML文檔了，所以你的其它元素要包裹在它里面，標簽限定了文檔的開始點和結束點，在它們之間是文檔的頭部和主體。
5、head標簽
Head標簽用于定義文檔的頭部，它是所有頭部元素的容器。 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
下面這些標簽可用在head 部分：
<title>、<meta>、<link>、<style>、 <script>。
應該把 標簽放在文檔的開始處，緊跟在 后面，并處于 標簽之前。
文檔的頭部經常會包含一些 標簽，用來告訴瀏覽器關于文檔的附加信息。
lang是language的意思，lang=”en”屬性對每張頁面中的主要語言進行聲明，en代表了英文，只是個聲明，聲明了它，對搜索引擎和瀏覽器更友好，并不會更改顯示內容。它還有常見的值是zh-CN，代表了中文。（搜索引擎不會判斷該站點是中文還是英文，它讓搜索引擎知道你的站點是中文站，這些都是html規范，越規范，越容易被收錄）
6、title標簽
- 可定義文檔的標題。它顯示在瀏覽器窗口的標題欄或狀態欄上。
- 當把文檔加入用戶的收藏夾或書簽列表時，標題將成為該文檔的默認名稱。
- <title> 標簽是 <head> 標簽中唯一必須要求包含的東西，就是說寫head一定要寫title，不是說其它的不加，而是title一定要加。
- title寫和你網頁相關的關鍵詞有利于seo優化
SEO是搜索引擎優化的英文縮寫。通過對網站內容調整，滿足搜索引擎的排名需求，從而提高自己網站被搜索引擎平臺錄取的幾率，從而把精準用戶帶到網站。
網站都有目標群體，通過title、meta標簽可以讓目標群體通過關鍵詞找到你的網站，所以你定義的關鍵詞決定了會吸引什么樣的群體。
7、meta標簽
META標簽用來描述一個HTML網頁文檔的屬性，此處的charset=”utf-8”是說當前使用的是utf-8編碼格式，在開發中我們經常會看到utf-8，或是gbk，這些都是編碼格式。國外一般會用gbk、gb2312，國內通常使用utf-8。
元素可提供有關頁面的元信息（meta-information），用來向瀏覽器或搜索引擎描述頁面。比如文檔的描述和關鍵詞。它只可以放在head中。屬于元信息標簽。
常見的meta有：
Keywords(關鍵字) keywords用來告訴搜索引擎你網頁的關鍵字是什么。
<meta name="keywords" content="web前端,尚學堂培訓">
description(網站內容描述) description用來告訴搜索引擎你的網站主要內容。
author作者 標注網頁的作者
二、標簽相互嵌套
標簽之間可以相互嵌套，但要注意嵌套順序
三、語義化標簽
1、什么是HTML語義化標簽
語義化的標簽，旨在讓標簽有自己的含義。
如上代碼，p 標簽與 span 標簽都區別之一就是，p 標簽的含義是：段落。而 span 標簽則沒有獨特的含義。
2、語義化標簽的優勢
- 代碼結構清晰，方便閱讀，有利于團隊合作開發。
- 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以語義的方式來渲染網頁。
- 有利于搜索引擎優化（SEO）。
