本博客目的只是簡單記錄學習Html 過程中的知識點，
內容主要參考來源：W3School Html 教程
HTML 教程
HTML基礎
### HTML 簡介
HTML ： Hyper Text Markup Language 超文本標記語言
HTML 不是一種編程語言，而是一種標記語言
標記語言 是一套標記標籤（markup tag）
HTML 文檔 == 網頁 == HTML 標籤+純文本
基本的HTML標籤
標題 Hreading
HTML標題 通過 < h1> - < h6> 等標籤進行定義
瀏覽器會自動在標題的前後添加空行。
默認情況下，HTML會自動的在塊級元素前後添加一個額外的空行，
例如段落、標題元素前後。
<h1> This is a heading </h1>段落 paragraph
<p> This is a paragraph. </p>鏈接 link
<a href="http://www.baidu.com"> This is a link. </a>圖像 img
<img src="baidu.jpg" width="104" height=112" />換行
<br />水平線
<hr />HTML 元素
HTML 元素指的是從開始標籤到結束標籤的所有代碼。
某些HTML 元素具有空內容（empty content），空元素在開始標籤中進行關閉。
大多數HTML元素可擁有屬性。
大多數HTML元素可以嵌套，即包含其他HTML元素。
注意： 不要忘記結束標籤，即使大多數瀏覽器中可能會在正確顯示，但是不要依賴這種做法，未來的HTML版本不允許省略結束標籤。
提示： 使用小寫標籤
HTML標籤對大小寫不敏感，但是未來HTML強制使用小寫。
HTML 屬性
HTML 標籤可以擁有屬性
屬性總是以 名稱/值 對的形式出現，如 name = “value”
屬性總是在HTML 元素的開始標籤中規定
注： 屬性值應該始終被包括在引號內，一般是雙引號，不過單引號也行。
大多數HTML 屬性值
| 屬性 | 值 | 描述 |
|---|---|---|
| class | classname | 規定元素的類名（classname） |
| id | id | 規定元素的唯一的id |
| style | style_definition | 規定元素的行內樣式（inline style） |
| title | text | 規定元素的額外信息 |
HTML 註釋
<!-- comment -->文本格式化標籤
| 標籤 | 描述 |
|---|---|
| < b > | 定義粗體文本。 |
| < big > | 定義大號字。 |
| < em > | 定義着重文字。 |
| < i > | 定義斜體字。 |
| < small > | 定義小號字。 |
| < strong > | 定義加重語氣。 |
| < sub > | 定義下標字。 |
| < sup > | 定義上標字。 |
| < ins > | 定義插入字。 |
| < del > | 定義刪除字。 |
| < s > | 不贊成使用。使用 < del > 代替。 |
| < strike > | 不贊成使用。使用 < del > 代替。 |
| < u> | 不贊成使用。使用樣式（style）代替。 |
“計算機輸出”標籤
| 標籤 | 描述 |
|---|---|
| < code > | 定義計算機代碼。 |
| < kbd > | 定義鍵盤碼。 |
| < samp > | 定義計算機代碼樣本。 |
| < tt > | 定義打字機代碼。 |
| < var > | 定義變量。 |
| < pre > | 定義預格式文本。 |
| < listing > | 不贊成使用。使用 代替 |
| < plaintext > | 不贊成使用。使用 代替。 |
| < xmp > | 不贊成使用。使用 代替。 |
HTML 樣式
外部樣式表
樣式需要被應用到很多頁面時，外部樣式表將是理想的選擇。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>內部樣式表
適用於單個文件裏的樣式
可以在head部分通過< style > 標籤定義內部樣式表
<head>
<style type="text/css">
body {background-color:red}
p {margin-left: 20px}
</style>
</head>內聯樣式
適用於個別元素裏的樣式，樣式屬性可以包含任何CSS屬性。
<p style="color:red; margin-left: 20px">
This is a paragraph
</p>HTML 鏈接
<a href="url"> link </a>開始標籤和結束標籤之間的文字被作爲超鏈接來顯示。
HYML 超鏈接
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像。你可以點擊這些內容來跳轉到相應文檔中。
通過 < a > 標籤在HTML中創建鏈接
- 通過 href 屬性： 創建指向另一個文檔的鏈接
- 通過 name 屬性 ： 創建文檔內的書籤
HTML 鏈接 – target 屬性
使用 target屬性，可以定義被鏈接的文檔在何處顯示：
target=“_blank” :在新窗口打開文檔
HTML 鏈接 – name 屬性
name 屬性規定錨（anchor）的名稱。
可以使用name屬性創建HTML頁面中的標籤
書籤不會以任何特殊方式顯示，它對讀者是不可見的。
當使用命名錨（named anchors）時，我們可以創建直接跳至該命名錨（比如頁面中某個小節）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
您可以使用 id 屬性來替代 name 屬性，命名錨同樣有效。
<a name="tips"> anchor </a><a href = "#tips"> anchor </a>HTML 圖像標籤< img > 和源屬性（Src）
< img > 是空標籤，只包含屬性，並且沒有閉合標籤。
- src 屬性： 圖像的URL 地址
- alt 屬性： 預備的可替換文本
<img src="url" alt = "Big Boat"/>HTML 表格標籤 < table >
表格標籤： < table >
每個表有若干行： < tr > < /tr >
表格數據（table data）： < td > < td >
表格標籤
| 表格 | 描述 |
|---|---|
| < table > | 定義表格 |
| < caption > | 定義表格標題。 |
| < th > | 定義表格的表頭。 |
| < tr > | 定義表格的行。 |
| < td > | 定義表格單元。 |
| < thead > | 定義表格的頁眉。 |
| < tbody > | 定義表格的主體。 |
| < foot > | 定義表格的頁腳。 |
| < col > | 定義用於表格列的屬性。 |
| < colgroup > | 定義表格列的組。 |
數據單元格可以包含文本，圖片，列表，段落，表單，水平線和表格等。
屬性：
- 邊框 border
空格佔位符： & nbsp ;
列表
無序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>自定義列表
<html>
<body>
<h2>一個定義列表：</h2>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dd>很好用 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
</html>
HTML < div > & < span >
可以通過 < div> 和 < span> 將 HTML 元素組合起來。
HTML 塊元素
大多數 HTML 元素被定義爲塊級元素或內聯元素。
編者注：“塊級元素”譯爲 block level element，“
內聯元素”譯爲 inline element。
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。
例子：< h1>, < p>, < ul>, < table>
內聯元素在顯示時通常不會以新行開始。
例子：< b>, < td>, < a>, < img>
HTML < div > 元素
HTML < div> 元素是塊級元素，它是可用於組合其他 HTML 元素的容器。
< div> 元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前後顯示折行。
如果與 CSS 一同使用，< div> 元素可用於對大的內容塊設置樣式屬性。
< div> 元素的另一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用 < table> 元素進行文檔佈局不是表格的正確用法。< table> 元素的作用是顯示錶格化的數據。
HTML < span> 元素
HTML < span> 元素是內聯元素，可用作文本的容器。
< span> 元素也沒有特定的含義。
當與 CSS 一同使用時，< span> 元素可用於爲部分文本設置樣式屬性。
HTML 分組標籤
| 標籤 | 描述 |
|---|---|
| < div> | 定義文檔中的分區或節（division/section）。 |
| < span> | 定義 span，用來組合文檔中的行內元素。 |
HTML 表單和輸入
HTML 表單用於蒐集不同類型的用戶輸入。
表單
表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入信息的元素：
- 文本域
- 下拉列表
- 單選框
- 複選框等等
表單標籤：
<form>
....
input 元素
....
</form>輸入
多數情況下被用到表單標籤的是輸入標籤 < input >.
輸入類型是由類型屬性(type)定義的。
經常用到的輸入類型：
- 文本域 Text Fields (缺省寬度是20個字符)
<form>
Name:
<input type="text" name="myName" />
</form>多行文本域 Textarea 多行的文本輸入控件。
通過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。
註釋：在文本輸入區內的文本行間，用 “%OD%OA” （回車/換行）進行分隔。單選按鈕 Radio Buttons
<form>
<input type="radio" name="sex" value="male"> Male
<br />
<input type="radio" name="sex" value="female">Female
</form>- 複選框 Checkboxes
<form>
<input type="checkbox" name="bike"> Bike
<br />
<input type="checkbox" name="car"> Car
</form>- 確認按鈕 和 動作屬性（Action）
用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件；
表單的動作屬性定義了目的文件的文件名。
<form name="input" action="html_form.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit">- 下拉列表 < select >, < option >
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>HTML 框架
通過使用框架，可以在同一個瀏覽器中顯示不只一個頁面。
每份HTML文檔稱爲一個框架，並且每個框架都獨立於其他的框架。
框架結構標籤 < frameset >
- 框架結構標籤< frameset >定義如何將窗口分割爲框架
- 每個frameset定義了一系列行或列
- rows/columns 的值規定了每行或每列佔據屏幕的面積
框架標籤 Frame
Frame 標籤定義了放置在每個框架中的HTML文檔；