一、簡介
1、超文字標記語言（Hyper Text Mark Language），是一種建立網頁的標準標記語言，由瀏覽器來解析。
2、文件字尾名為.html或htm，html檔案也叫web頁面；
3、HTML中不支援空格、回車、製表符，它們都會被解析成一個空白字元；
4、HTML標籤通常是成對出現的,格式：<tagName>data</tagName>;
5、只有<body> </body>標籤內的內容才會在瀏覽器中顯示；
6、HTML語言不區分大小寫；
7、<!--註釋-->
8、helloworld!
1 <!DOCTYPE html> <!--宣告HEML版本--> 2 <html> 3 <head> 4 <meta charset="utf-8"> <!--宣告編碼方式--> 5 <title>helloworld!</title> 6 </head> 7 <body> 8 helloworld! 9 </body> 10 </html>
二、標籤
（一）基本
1 <html> </html> HTML頁面根元素 2 <head> </head> 包含文件的後設資料(meta) 3 <title> </title> 文件標題，存書籤時也顯示此內容 4 <body> </body> 包含了頁面的可見內容 5 <h1> </h1> 大標題，往下每一級標題依次h2,h3的類推，最小標題是h6 6 <p> </p> 段落 7 <a href=""> </a> 連結，中間內容為顯示內容，例：<a href="http://www.baidu.com">百度</a>；如果target="_blank"，連結會在新的視窗中開啟 8 <img src="address" width="3" height="5" /> 影像，alt屬性可在瀏覽器無法載入影像時顯示文字 9 <iframe></iframe> 框架，使用src屬性指向不同的URL，達到一個視窗顯示多個頁面的目的； 10 <br> 換行符，屬於一個空元素，即沒有內容的元素，空元素是在開始標籤中關閉的<br/> 11 <hr> 分割線 12 <div> </div> 區塊，可用於組合其他元素的容器；可使用它進行佈局； 13 <span> </span> 用來組合文件中的行內元素； 14 <!doctype html> 宣告html版本，不區分大小寫
（二）文字格式標籤
1 <strong> </strong> 加粗顯示之間的文字，也可用<b></b> 2 <em> </em> 斜體，也可用<i></i> 3 <big> </big> 放大 4 <small> </small> 縮小 5 <sub> </sub> 下標文字 6 <sup> </sup> 上標文字 7 <ins> </ins> 下劃線 8 <del> </del> 刪除線
（三）引文、引用及標籤定義
1 <abbr> </abbr> 縮寫，被縮寫的內容用title屬性來體現 2 <address> </address> 定義地址，通常被包含在<footer>元素的其他資訊中 3 <bdo> </bdo> 定義文字方向，預設值為從左到右，可用dir="rtl"來改為從右到左顯示 4 <blockquote> </blockquote> 定義長的引用，可用cite="URL"來規定引用的來源 5 <q> </q> 定義短的引用，屬性cite 6 <cite> </cite> 定義引用、引證 7 <dfn> </dfn> 定義一個定義專案
（四）“計算機輸出”標籤
1 <code> </code> 定義計算機程式碼 2 <kbd> </kbd> 定義鍵盤碼 3 <samp> </samp> 定義計算機程式碼樣本 4 <var> </var> 定義變數 5 <pre> </pre> 定義預格式文字
（五）head元素內包可含元素
1 <title> </title> 2 <base> 定義了頁面的預設連結地址，通過href屬性來實現 3 <link> 定義了文件和外部資源的關係，通常可用rel,type,href等屬性 4 <meta> 定義了文件中的後設資料，可有name,content,charset等屬性 5 <script></script> 用於載入指令碼檔案 6 <style></style> 定義了HTML文件的樣式檔案
（六）圖片標籤
1 <img> 2 <area> 定義帶有可點選區域的影像，可有shape,coords等屬性，來畫各種圖形 3 <map></map> 帶有可點選區域影像對映，必須有name屬性，中間可包含area元素；
（七）表格標籤
1 <table></table> 定義表格，表格的所有內容都應放在裡邊；屬性border=“1”定義了邊框大小 2 <caption></caption> 表格標題 3 <tr></tr> 表格每一行的內容； 4 <td></td> 一個單元格的內容； 5 <thead></thead> 表格第一行； 6 <th></th> 表頭內容，即第一行每一格內容； 7 <tbody></tbody> 表格主體； 8 <tfoot></tfoot> 表格最後一行； 9 <colgroup></colgroup> 表格列的組； 10 <col></col> 表格列的屬性；
（八）列表標籤
1 <ol> </ol> 有序列表，可通過type屬性來改變編號，預設為數字，還有A(大寫字母),a(小寫字母)，I(羅馬數字),i(小寫羅馬數字) 2 <ul> </ul> 無序列表,可通過style屬性來改變前邊的小標識，值有"list-style-type:square"，circle,disc等； 3 <li> </li> 列表項； 4 <dl> </dl> 定義列表； 5 <dt> </dt> 自定義列表專案； 6 <dd> </dd> 自定列表項的描述；
（九）表單標籤
1 <form> </form> 定義一個包含表單元素的區域，表單本身並不可見； 2 <input type="" size=""> 輸入域，當使用者需要在表單中輸入內容時使用；普通為text，如為密碼欄位可用password，將會以掩碼顯示；radio單選框，checkbox核取方塊，submit提交按鈕， 3 <textarea> </textarea> 一個多行輸入的文字域，屬性有rows,cols等； 4 <label> </label> 元素標籤，屬性for="element_id",form="form_id",兩個屬性用於關聯表單元素或表單； 5 <fieldset></fieldset> 使表單被外框包圍起來； 6 <legend></legend> 定義了fieldset元素的標題； 7 <select></select> 定義了下拉框列表，其他選項用<option>充填 8 <option></option> 定義下拉框的選項，常用的屬性有value 9 <optgroup></optgroup> 對option進行分組，不是實際選項,可使用label屬性來顯示組名； 10 <button></button> 按鈕，屬性有type(button,reset,submit),name,value，onclick(點選顯示內容)
三、屬性
1、屬性是HTML元素提供的附加資訊，一般寫在開始標籤內，以name="value"的形式出現；
2、屬性值應該被包括在引號內,單雙引號都可以，如果屬性值本身含有一種引號，就必須使用另一種引號；
3、常用屬性
class 定義一個或多個類名
id 定義元素的唯一的id
style 規定元素的行內樣式
title 描述了元素的額外資訊（作為工具條使用）
href 連結
四、CSS(Cascading Style Sheets)
1、CSS是用於渲染HTML元素標籤的樣式，從HTML4開始使用的；
2、通過三種方式新增到HTML中
內聯樣式：在HTML元素中使用style屬性；
內部樣式表：在<head>區域使用<style>元素來包含CSS；
外部引用：使用外部CSS檔案；
3、具有十分強大的功能，可對字型、顏色、大小、背景、排版等功能進行設定，具體可參考CSS的使用；
五、字元實體
1、HTML中預留字元必須被替換為字元實體，一些在鍵盤上找不到的字元也可以使用字元實體來替換，如聲調字元等；
2、實體名稱對區分大小寫；
3、具體可參考HTML實體參考手冊，以下是常用實體參考；
附：HTML常用標籤使用示例
1 <!DOCTYPE html> <!--宣告HTML版本--> 2 <html> 3 <head> <!--標頭檔案--> 4 <meta charset = "utf-8"> <!--宣告編碼方式--> 5 <title>HTML常用標籤示例</title> <!--標題--> 6 <base href=""> <!--定義頁面預設連結地址--> 7 </head> 8 <body> <!--主體，瀏覽器顯示的內容--> 9 <h1>HTML常用標籤示例</h1> <!--h1-h6都用來定義內容的標題，標題的大小1-6，標題越來越小--> 10 <hr> <!--下劃線--> 11 <h2>二號標題</h2> 12 <p>段落</p> <!--段落--> 13 <a href="http://wx1.sinaimg.cn/mw600/757b2779gy1fiq3cg31b9j20rs1464ff.jpg">超連結</a><br> 14 <br> <!--換行--> 15 <img src="http://wx2.sinaimg.cn/mw600/0069hRx7ly1fiodmonbtpj30dw0kn0wh.jpg" width="400" height="600" alt="這只是一張圖片"> 16 <!--<img src="httpwatch.png" width="800" height="700" id="11"> --> 17 <!---1.全路徑 2.找html放在哪個目錄下，當前目錄下的圖片顯示可以直接輸入圖片名稱--> 18 19 20 <h2>一、文字格式標籤</h2> 21 <strong>文字加粗</strong><br> 22 <em>文字斜體</em><br> 23 <big>文字放大</big><br> 24 <small>文字縮小</small><br> 25 <ins>下劃線</ins><br> 26 <del>刪除線</del><br> 27 <sub>下標</sub> 28 <sup>上標</sup><br> 29 30 31 <h2>二、引文、引用及標籤</h2> 32 <abbr title="這是被縮寫的內容">縮寫</abbr><br> 33 <address>這是地址的書寫樣式</address><br> 34 <bdo dir="rtl"> 這行文字的方向是反的 </bdo><br> 35 <blockquote cite="http://ws2.sinaimg.cn/mw600/5950978dly1fio1zx4o2nj20hs0npab3.jpg"> 36 很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的引用 37 </blockquote><br> 38 <q cite="http://www.baidu.com">短引用</q><br> <!--cite說明了引用的來源--> 39 這是一個<cite>引證</cite><br> 40 <dfn>定義專案</dfn> 41 42 43 <h2>三、“計算機輸出”標籤</h2> 44 <code>一段電腦程式碼</code><br> 45 <samp>計算機樣本</samp><br> 46 <kbd>鍵盤輸入</kbd><br> 47 <var>變數</var><br> 48 <pre> 49 預格式文字 50 可以直接回車換行 51 </pre> 52 53 54 <h2>四、圖片標籤</h2> 55 img圖見封面<br> 56 下圖有驚喜<br> 57 <img src="http://ws2.sinaimg.cn/mw600/5950978dly1fio1zx4o2nj20hs0npab3.jpg" 58 width="300" height="450" alt="pic" usemap="#girlmap"> 59 <map name="girlmap"> 60 <area shape="rect" coords="0,0,150,200" alt="Sun" href="http://wx3.sinaimg.cn/mw600/672f3952gy1fimxopgu8gj20z71gsazq.jpg"> 61 <area shape="circle" coords="300,58,100" alt="Mercury" href="http://ws3.sinaimg.cn/mw600/006Aq8zsgy1fimgva01tjj30k00zkdv5.jpg"> 62 <area shape="rect" coords="0,400,100,100" alt="Venus" href="http://wx3.sinaimg.cn/mw600/a82b014bgy1filt1mz0wuj21kw1i4nkc.jpg"> 63 </map><br> 64 65 66 67 <h2>五、表格標籤</h2> 68 <table border="1"> 69 <caption>表格標題</caption> 70 <thead> <!--表頭--> 71 <th>th1</th><th>th2</th><th>th3</th> 72 </thead> 73 <tbody> <!--表格主體，也可以不區分這些，直接使用tr,td畫表格--> 74 <tr> <!--行--> 75 <td>td1</td><td>td2</td> <!--單元格內容--> 76 </tr> 77 <tr> 78 <td>td3</td><td>td4</td> 79 </tr> 80 </tbody> 81 </table> 82 83 84 <h2>六、列表標籤</h2> 85 <h4>有序列表</h4> 86 <ol type="I"> 87 <li>列表項1</li> 88 <li>列表項2</li> 89 </ol> 90 91 <h4>無序列表</h4> 92 <ul style="list-style-type:square"> 93 <li>列表項1</li> 94 <li>列表項2</li> 95 </ul> 96 97 <h4>自定義列表</h4> 98 <dl> 99 <dt>自定義列表專案1</dt> 100 <dd>自定列表項的描述1</dd> 101 <dt>自定義列表專案2</dt> 102 <dd>自定列表項的描述2</dd> 103 </dl> 104 105 <h2>七、表單標籤</h2> 106 <form> 107 使用者名稱：<input type="text"><br> 108 密 碼：<input type="text" size="30"><br> 109 密 碼：<input type="password"><br> 110 </form> 111 <form> 112 <fieldset> <!--使表單有外框--> 113 <legend>fieldset元素的標題</legend> 114 <input type="radio">男<br> 115 <input type="radio">女 116 </fieldset> 117 </form> 118 <form> 119 <input type="checkbox">核取方塊1<br> 120 <input type="checkbox">核取方塊2<br> 121 </form> 122 <form> 123 <input type="submit" value="提交"><br> 124 </form> 125 <form> 126 下拉框<select> 127 <option values="1">下拉選項1</option> 128 <option values="2">下拉選項2</option> 129 <optgroup label="分組1"> 130 <option values="3">下拉選項3</option> 131 </optgroup> 132 </form> 133 <br> 134 <form> 135 <textarea rows="10" cols="50"> 136 多行輸入文字框 137 </textarea> 138 <br> 139 <label>最後一點</label> 140 </form> 141 142 </body> 143 </html>