1.HTML初始：HTML（Hyper Text Markup Language的縮寫），超文本標記語言，主要是通過HTML標籤對網頁中的文本、圖片、聲音等內容進行描述；
2.HTML標籤：標籤分兩種，一種是單標籤<br />，一種是雙標籤<p></p>，斜槓表示關閉符號；
一個HTML網頁的大致樣式是
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
第一行聲明這是一個HTML5文件。第二行和最後一行是<html></html>在HTML文檔中，所有的標籤都必須在這對標籤之中。在這對標籤之中，整體又可以分爲兩個部分，一部分是頭，一部分是主體，所以頭用<head></head>表示，而主體用<body></body>表示；所以<head></head>和<body></body>並不是規定網頁內容具體形狀、行爲等的，而是區分層次的，告訴瀏覽器，哪個部分是頭，哪個部分是主體，僅僅是爲了分層的；
在<head></head>標籤中，一般包括<title></title>標籤，這是現實在瀏覽器上頁面的標題：
<body></body>標籤則是瀏覽器顯示的主體：
3.標籤關係：只有兩種，要麼是嵌套關係，要麼是並列關係。
嵌套關係：標籤之間是可以相互嵌套，如上面的<html></html>和<head></head>之間就是嵌套關係，HTML標籤還可以多層嵌套，實際中非常多；
並列關係：標籤之間還可以是並列關係，如<head></head>和<body></body>之間是並列，沒有誰包括誰，所以兩者是並列關係；
4.文檔類型：告訴瀏覽器html文檔使用的是哪個版本
5.字符集：<meta charset="UTF-8">
utf-8是目前最常用的字符集編碼方式，包含全世界所有國家所需要用到的字符；
gb2312簡體中文，包括6763個漢字；
BIG5繁體中文，港澳臺等地使用；
GBK包含全部中文字符，是GB2312的擴展，加入對繁體字的支持，兼容gb2312；
記住一點就夠，直接使用utf-8就不會產生由於字符集不統一而亂碼的情況了；
6.常用HTML標籤：
a、排版標籤：主要和css搭配使用，顯示網頁結構的標籤，是網頁佈局最常用的標籤；
標題標籤（熟記）：有6個等級，分別是<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>、作爲標題使用，並且依據重要性遞減，即h1>h2>h3>h4>h5>h6；使用方法是<h1>這是一個重要性最大的標題</h1>；因爲<h1>是很重要的時候才用，所以輕易不要使用h1標籤，一般這是給logo使用的；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>老子的測試網站</title>
</head>
<body>
<h1>測試標題之h1</h1>
<h2>測試標題之h1</h2>
<h3>測試標題之h1</h3>
<h4>測試標題之h1</h4>
<h5>測試標題之h1</h5>
<h6>測試標題之h1</h6>
<h7>測試標題之h1</h7>
</body>
</html>
段落標籤（熟記）：在網頁中要把文字有條理地顯示出來，就需要用到段落標籤，不然瀏覽器是不會自己識別某段文字是否爲一個段落，而是將所有文字連續地、一行一行的顯示；段落標籤用法：<p>一個自然段落</p>；默認情況下，段落標籤中的內容會根據瀏覽器的變化自動換行；
水平標籤（認識）：網頁中常常有一個橫線將一些段落之間分隔開，使得整個文章或者頁面的結構更加清晰。這些“水平線”，可能是一個細長的圖片，也可以是一個<hr />標籤；
換行標籤<br />（熟記）：如果一個段落內部需要換行，那麼就需要使用換行標籤，在換行處輸入該標籤就可以；這個標籤的功能看上去<p></p>也能實現，但是段落標籤<p></p>換行後，兩行之間的間隙會很大，而換行標籤不會改變行距；
兩個重點佈局標籤：div、span，沒有語義，是網頁佈局中大量使用的兩個標籤；就是將整個源碼分爲一大塊一大塊的部分，方便對各個部分進行不同的操作；不會在瀏覽器顯示方面有什麼效果；
b、文本格式化標籤：文本中如果又需要將文字設置爲粗體、斜體、刪除線、下劃線等效果時使用的標籤；
| 標籤 | 顯示效果 |
| <b></b>、<strong></strong> | 文字以粗體方式顯示（推薦使用strong標籤，不僅加粗顯示，還有強調的意義） |
| <i></i>、<em></em> | 文字以斜體方式顯示（推薦使用em標籤） |
| <s></s>、<del></del> | 文字以加刪除線顯示（推薦使用del） |
| <u></u>、<ins></ins> | 文字以加下劃線方式顯示（不推薦使用u） |
<hr />
<p>文本格式化標籤</p>
<b>這是用 b 加粗的文字</b><br />
<strong>這是用 strong 加粗的文字</strong><br />
<s>這是 s 刪除的文字</s><br />
<del>這是 del 刪除的文字</del><br />
<u>這是加了 u 下劃線的文字</u><br />
<ins>這是加了 ins 下劃線的文字</ins><br />
<i>這是 i 標記的斜體字</i><br />
<em>這是 em 標記的斜體字</em><br />
7.標籤的屬性：
使用HTML製作網頁的時候，如果想要html標籤提供更多的信息，可以使用HTML標籤的屬性加以設置，基本的語法格式如下；
<標籤名 屬性1="屬性值1" 屬性2="屬性值2" ...>內容</標籤名>
a、標籤可以擁有多個屬性，必須寫在開始標籤中，位於標籤名後面；
b、屬性之間不分先後順序，標籤名與屬性、屬性與屬性之間均以空格分開；
c、任何標籤的屬性都有默認值，省略該屬性不指定時，則該屬性取默認值；
d、屬性和值之間採取鍵值對的形式表現；
8.圖像標籤：（重要），該標籤有一個src屬性是必須指定的，語法是：
<img src="圖片地址">
| 屬性 | 屬性值 | 描述 |
| src | URL |
圖像的路徑 |
| alt | 文本 | 圖像無法加載顯示時的替換文本 |
| title | 文本 | 鼠標懸停時顯示的內容 |
| width | 像素值（XHTML不支持頁面%百分比） | 設置圖像的寬度 |
| height | 像素值（XHTML不支持頁面%百分比） | 設置圖像的高度 |
| border | 數字 | 設置圖像邊框的寬度 |
width和height屬性一般只需要更改一個就可以了，另一個會等比縮小；
9.鏈接標籤：跳轉到另一個資源所在處的標籤，基本語法：
<a href="跳轉的目標地址" target="目標窗口的彈出方式">文本或圖像</a>
href用於指定鏈接目標的url地址，當爲標籤指定href屬性時，它就具有了超鏈接的功能；
target指定鏈接頁面的打開方式，其取值有_self和_blank，其中_self爲默認值，_blank爲在新窗口中打開；
注意：
a、外部鏈接需要加協議類型，如http://www.baidu.com，而內部鏈接可以直接是文件名稱；
b、如果暫時沒有具體的鏈接地址，可以置爲空，即值取#；
c、不僅可以添加超鏈接，而且同一個頁面中，也可以添加錨點
10.錨點定位（難點）
通過創建錨點鏈接，用戶能夠快速定位到目標內容。創建錨點鏈接分爲兩步：
a、使用<a href ="#id名">鏈接文本</a>創建鏈接文本；
b、使用相應的id名標註跳轉目標的位置；
c、錨點定位適合內容較長的頁面；
可點擊跳轉處：
<a href="#life">生活</a>
跳轉目標處：
<p id="life">生活</p>
11.base標籤：在網頁中，如果有大量的<a>標籤，而又要指定在新窗口中打開鏈接，那就非常冗餘，每個<a>標籤中都要指定target屬性爲_blank，非常繁瑣，於是可以這樣一次指定：
<head>
<base target="_blank">
</head>
其中target的屬性也可以是_self，指定了base標籤之後，如果某個單獨的鏈接其target想取另外的值，在其a標籤中指定即可；
12.特殊字符標籤（理解，需要時查查就可以了）：
| 特殊字符 | 描述 | 代碼 |
| 空格符 | | |
| < | 小於號 | < |
| > | 大於號 | > |
| & | 和號 | & |
| ￥ | 人民幣 | ¥ |
| © | 版權 |
© |
| ® | 註冊商標 | ® |
| ° | 攝氏度 | ° |
| ± | 加減號 | ± |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
13.註釋標籤：多使用註釋標籤是一個好的習慣，註釋標籤所包含的內容是給程序員自己看的，瀏覽器自己不適用；
<!--這是註釋的內容-->
Sublime快捷註釋：Ctrl+/
14.列表標籤：
a、無序列表：（重點）
<ul>
<li>蘋果</li>
<li>橘子</li>
<li>荔枝</li>
<li>米飯</li>
<li>其他</li>
</ul>
<ul></ul>標籤中一般只放<li></li>標籤，直接在<ul></ul>標籤中放其它標籤或者文字的做法是不允許的；
<li></li>標籤之間相當於一個容器，可以容納所有元素和標籤；
樣式屬性一幫交給css處理；
b、有序列表：（瞭解）特性或注意事項與<ol></ol>基本一致
<ol>
<li>中國</li>
<li>美國</li>
<li>俄羅斯</li>
<li>英國</li>
</ol>
c、自定義列表：自定義列表常常用於對術語的或名詞進行解釋和描述，自定義列表的列表項前有沒有任何項目符合；
<dl>
<dt>北京</dt>
<dd>昌平區</dd>
<dd>海淀區</dd>
<dd>大興區</dd>
<dd>通州區</dd>
<dd>朝陽區</dd>
</dl>
<dl></dl>標籤是總括自定義列表的，標誌這是一個自定義列表的標籤；
<dt></dt>定義一個大類，比如一個標題，<dd></dd>解釋說明<dt>的類；
一般用在網頁尾部：