一、前言
一個基本的網站包含很多個網頁，一個網頁由HTML, CSS 和 JavaScript 組成。
- HTML：結構層，決定網頁的結構和內容（ “是什么”）
- CSS：渲染層，設定網頁的表現樣式（ “長啥樣”）
- Javascript：行為層，控制網頁的行為（ “做什么”）
二、什么是HTML？
HTML（Hyper Text Markup Language） ，即超文本標記語言。HTML 不是一種編程語言，而是一種標記語言 (markup language)，標記語言由一系列標簽組成，通過標記標簽來描述網頁。
三、HTML標簽
<a >跳轉至百度首頁</a>
HTML 標記通常被稱為 HTML 標簽 (HTML tag)。
- HTML 標簽是由尖括號包圍的關鍵詞，如：
<a>。 - HTML 標簽通常是成對出現的，如：
<a> </a>。 - 標簽對中的第一個標簽（
<a>）被稱為開始標簽，第二個標簽（</a>）被稱為結束標簽。 - 開始和結束標簽也被稱為開放標簽和閉合標簽。
提示：在HTML中標簽名是不區分大小寫的，也就是說一個標簽既可以全部寫成大寫的英文字母，也可以全部寫成小寫的英文字母（主流的寫法），如：“<head>”寫成“<HEAD>”，“<body>”寫成“<BODY>”都不會影響頁面的正常運行。甚至還可以將一個標簽元素的英文字母大小混寫都是不影響頁面正常運行的，但這種做法會影響代碼的可讀性，并不推薦。
四、屬性
HTML 標簽可以擁有屬性，屬性提供了有關HTML標簽的更多信息，屬性總是以 屬性名=屬性值 的形式出現，屬性一般定義在開始標簽中。
<a target="_blank">點擊前往</a>
上述代碼定義了一個 a 標簽（超鏈接），該標簽擁有 href 及 target 屬性，提供了鏈接地址以及在什么窗口下打開新的頁面，標簽中的文本為呈現在頁面上的內容。
五、元素
HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼，即元素由開始標簽、結束標簽、屬性以及顯示內容組成。
六、元素分類 *
HTML 元素分為塊級元素（block）、行內元素（inline）以及行內塊元素（inline-block），三種元素類型的特性如下：
- 塊級元素：單獨占一行，具備盒子模型，即可設置寬度和高度；
- 行內元素：不獨占一行，不具備盒子模型，即不可設置寬度和高度，大小由內容決定；
- 行內塊元素：不獨占一行，不具備盒子模型，即不可設置寬度和高度；
提示：對于塊級元素而言，即使你設置了寬高，其也會獨占一行。
如何判斷一個元素的類型？
在谷歌瀏覽器中鼠標右鍵檢查元素，然后通過元素選取器選取要查看元素類型的元素，最后在computed中搜索display屬性觀察其值即可。如下所示：
七、標簽嵌套
所謂標簽的嵌套，是指一個標簽對以內包含另外一個標簽，如：<html>標簽內包含<head>和<body>兩個標簽對，而<head>標簽內又可以包含<meta>和<title>等標簽。也就是說標簽不僅可以單獨存在，又可以包含其它一個或多個標簽，而且標簽的嵌套可以是多層的，并且嵌套層數是沒有限制的。
標簽的嵌套根據代碼規范性、性能和SEO（搜索引擎優化）等方面考慮，應當遵循以下規則：
- HTML頁面中所有需要顯示在瀏覽器窗口內的內容均需要放置在<body>標簽對以內。
- 在不影響頁面顯示、CSS樣式設置和DOM操作的前提下，標簽的嵌套層數是越少越好。
- 標簽嵌套的基本順序應該是：“塊級標簽>行內塊標簽>行內標簽”。
- 同一個顯示類型的標簽可以進行嵌套，如：“塊級標簽>塊級標簽”、“行內塊標簽>行內塊標簽”和“行內標簽>行內標簽”。
- 避免使用“行內標簽”去嵌套“行內塊標簽”和“塊級標簽”、“行內塊標簽”去嵌套“塊級標簽”，雖然有的時候在顯示上并不會出現問題，但“行內標簽”大部分是不具備布局屬性的，需要進行顯示類型轉換（display）才能夠進行CSS的布局設置，既麻煩，又不規范。
八、HTML 基本文檔結構
HTML基本文檔結構是指組成一個基本的HTML頁面所必須的元素標簽。具體編寫格式如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>
語法解讀：
- < !DOCTYPE html>：指定文檔類型
- < html>：根標簽。
- < head>：網頁頭部，配置網頁基本信息，如標題、編碼格式、JS文件引入及層疊樣式表引用等。
- < meta>：設置編碼格式，避免出現亂碼。
- <title>：設置網頁標題。
- <body>：網頁內容。
