標籤：定義 set element 解析 回溯 har ati block comment
一、HTML的基礎結構
以片可以看出HTML的基礎結構：
文檔聲明+<html>根項目（也叫頂級元素）------》<html>裡包括<head>元素+<body>元素
文檔聲明：http://www.cnblogs.com/Jm-jing/articles/6973877.html、
<head>元素：主要包括三大類資訊：
1、網頁基本資料
- 文檔標題（瀏覽器標籤中顯示的文本）：
<title>深入瞭解 head 元素</title>- 編碼格式：
<meta charset="utf-8">（你可能還看到gb2312格式，不過不建議使用），如果你的頁面出現亂碼，那一般就是編碼格式不對- 視窗設定：
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 搜尋引擎最佳化相關內容：
<meta name="description" content=“協助你深層次瞭解HTML文檔結構”>- IE瀏覽器版本渲染設定：
<meta http-equiv="X-UA-Compatible" content="ie=edge">2、其他檔案連結
- CSS 檔案：
<link rel="stylesheet" type="text/css" href="style.css">- JavaScript 檔案：
<script src=“script.js"></script>3、廠商定製
比喻開啟雙核瀏覽器先河的360瀏覽器就定製了一個預設使用哪個核心來渲染頁面，可以設定為webkit核心、IE標準，IE相容三種模式。代碼分別為：
<meta name="renderer" content="webkit"> <!-- 預設webkit核心 --><meta name="renderer" content="ie-stand"> <!-- 預設IE標準模式 --><meta name="renderer" content="ie-comp"> <!-- 預設IE相容模式 -->相關參考連結：
http://www.cnblogs.com/Jm-jing/articles/6986967.html
http://www.cnblogs.com/Jm-jing/articles/6986998.html
補充：
從理論上講，<html>元素的子項目只能是<body>元素以及<head>元素，但是有一些網頁卻將<script>元素放在了<body>元素外，也就是<html>元素下，但是，卻沒有報錯？
HTML5標準中的HTML文法規則，如果在</body>後再出現<script>或任何元素的開始標籤，都是parse error，瀏覽器會忽略之前的</body>，即視作仍舊在body內。所以實際效果和寫在</body>之前是沒有區別的。
詳情請看：http://www.cnblogs.com/Jm-jing/articles/6974074.html
二、HTML樹
樹的特點：以主幹為主，同時從主幹中延伸出很多的分支。因此，我們可以將HTML的代碼想象成一棵HTML樹，這樣便於我們去理解。
父元素：包含另一個元素的元素是被包含元素（即子項目）的父元素【一個元素可以擁有多個子項目，但只能有一個父元素】
兄弟元素：具有同一個父元素的幾個元素互稱為兄弟元素
補充一些提高Web效能的注意事項：
1、避免過多層嵌套：
層級越深的節點在初始化構建時，所佔記憶體越多。通過瀏覽器HTML解析器會將整個HTML文檔的結構儲存為DOM樹結構。當節點嵌套層次越深，構建的DOM書層 次也越深。所以，我們在寫HTML頁面的時候，要想清楚要以怎樣簡潔卻又能表現整個HTML頁面的結構去寫代碼。
2、顯示設定圖片的寬高
有時需要在頁面載入完之前，就對頁面配置進行定位。若頁面中的圖片沒指定尺寸，或尺寸與實際圖片大小不符，瀏覽器會在圖片下載完成後再"回溯"該圖片並重新顯示，從而浪費時間。所以最好為頁面的圖片設定指定尺寸
三、HTML元素
元素的定義：兩個標籤連同它們之間的內容構成元素。
元素的用途：是用來向瀏覽器說明文檔內容的工具 。其效果體現在內容之上
元素的特點：1、不同的元素有不同的確切含義。2、元素名不區分大小寫。3、語義元素可用來說明內容的含義以及內容的不同部分之間的關係。
元素類型：
1、中繼資料元素（metadata element）
定義：用來構建HTML文檔的基本結構，就如何處理文檔的瀏覽器提供資訊和指示
中繼資料元素：<tittle> <base> <meta> <link> <script> <noscript>等等
2、流元素（flow element）
定義：是短語元素的超集，即所有短語元素都是流元素，但並非所有流元素都是短語元素
流元素有：<noscript> <a>等等
3、短語元素（phrasing element）
定義：是HTML的基本成分
短語元素有：<script> <noscript> <a> <b>等等
4、其他元素
有些元素無法歸入以上3種類型，這些元素要麼沒有特別意義，要麼只能用在一些非常有限的情況下
例：<li>元素只能有3中父元素（<ul>/<ol>/<menu>）
詳情可參考：《HTML5權威指南》
補充
1、空元素
定義：元素的開始和結束標籤間並非一定有內容，沒有內容的元素成為空白元素。（有些空元素為空白時沒有意義---<code>）
<p></p>2、自閉合標籤
空元素可以更簡潔地使用一個標籤表示
<code/>3、虛元素
定義：有些元素只能使用一個標籤，在其中放置任何內容都不符合HTML規範。
表示：1、只使用開始標籤----><hr>
2、在1的基礎上加一個斜杠符號，其形式與空元素一致
虛元素有：<img>、<hr>
4、行內元素以及區塊層級元素
區塊層級元素：
特點：預設佔據正行寬度
例：<p> <div> <h1> <ul> <ol> <li>
行內元素：
特點：同行顯示，預設寬度由內容決定
例：<a> <span> <i> <em> <img>
四、全域屬性
定義：它們用來配置所有元素的共有行為，全域屬性可以用在任何一個元素身上，不過這不一定會帶來有意義或者有用的行為改變。
詳情請參考：http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
五、總結
1、一個HTML頁面先從聲明出發，到結構，再到元素，最後到屬性。就是說，一個HTML頁面肯定會包含聲明+結構+元素+屬性這4個基礎。
2、在寫一個網頁的結構前，要先想好頁面的布局
3、盡量做到語義化（多用H5元素），也是利於SEO
4、為了提高效能，謹記不要多層嵌套，盡量做到以最小的嵌套做出最好的結構
5、一個好的頁面，謹記要完善好<head>元素裡的內容，利於SEO
對HTML（HyperText Markup Language)的認識以及總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
