HTML 鏈接是通過 <a> 標簽進行定義的。
HTML 圖像是通過 <img> 標簽進行定義的。
開始標簽常被稱為開放標簽（opening tag），結(jié)束標簽常稱為閉合標簽（closing tag）
大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文檔由嵌套的 HTML 元素構成。
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html> 包含三個html元素```
**`<br />` 其實是更長遠的保障。**換行
<h1 align="center">擁有關于對齊方式的附加信息。 < body bgcolor="yellow"> 擁有關于背景顏色的附加信息。
<table border="1">` 擁有關于表格邊框的附加信息。
###HTML 屬性參考手冊
| 屬性 | 值 | 描述 |
| ------------- |:-------------:| -----:|
| class | classname | 規(guī)定元素的類名（classname） |
| id | id | 規(guī)定元素的唯一 id |
| style |style_definition | 規(guī)定元素的行內(nèi)樣式（inline style） |
| title | text | 規(guī)定元素的額外信息（可在工具提示中顯示） |
| accesskey | | 規(guī)定激活元素的快捷鍵。 |
| contenteditable | 5=HTML5 中添加的屬性 | 規(guī)定元素內(nèi)容是否可編輯 |
| contextmenu | 5 | 規(guī)定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。 |
| dats-* | 5 | 用于存儲頁面或應用程序的私有定制數(shù)據(jù)。 |
| dir | | 規(guī)定元素中內(nèi)容的文本方向。 |
| draggable | 5 | 規(guī)定元素是否可拖動。 |
| dropzone | 5 |規(guī)定在拖動被拖動數(shù)據(jù)時是否進行復制、移動或鏈接 |
| didden | 5 | 規(guī)定元素仍未或不再相關 |
| lang | | 規(guī)定元素內(nèi)容的語言。 |
| spellcheck | 5 | 規(guī)定是否對元素進行拼寫和語法檢查。 |
| tabindex | | 規(guī)定元素的 tab 鍵次序。 |
| translate | 5 | 規(guī)定是否應該翻譯元素內(nèi)容。 |
##標題
標題（Heading）是通過 `<h1> - <h6> `等標簽進行定義的。
水平線——`<hr />` 標簽在 HTML 頁面中創(chuàng)建水平線。
注釋`<!-- This is a comment -->`
##段落
**別用空段落標記去插入一個空行**
折行——` <br />`
**所有連續(xù)的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個空格。**
##樣式
style 屬性的作用：提供了一種改變所有 HTML 元素的樣式的通用方法。
**應該避免使用下面這些標簽和屬性：**
| 標簽 | 描述 |
| ------------- |:-------------:|
|` <center> ` | 定義居中的內(nèi)容 |
| `<font>和<basefont>` | 定義 HTML 字體 |
| `<s>和<strike>` | 定義刪除線文本 |
| `<u>` | 定義下劃線文本 |
| 屬性 | 描述 |
| ------------- |:-------------:|
| align | 定義文本的對齊方式 |
| gbcolor | 定義背景顏色 |
| color | 定義文本顏色 |
**對于以上這些標簽和屬性：請使用樣式代替！**
屬性為元素定義了背景顏色
<html>
<body style="background-color:yellow">background-color
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸：
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
text-align 屬性規(guī)定了元素中文本的水平對齊方式：
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>
##文本格式化
文本格式化標簽
標簽| 描述
----|------
`<b > ` | 定義粗體文本
`<big > ` | 定義大號字
`<em>` | 定義著重文字
`<i>` | 定義斜體字
`<small> ` | 定義小號字
`<strong>` | 定義加重語氣
`<sub>` | 定義下標字
`<sup>` | 定義上標字
`<ins>` | 定義插入字
` <del> ` | 定義刪除字
`<s>` | 不贊成使用。使用(del)代替
`<strike>` | 不贊成使用。使用(del)代替
`<u> ` | 不贊成使用。使用(style)代替
“計算機輸出”標簽
標簽 | 描述
------------- |-------------
`< code> ` | 定義計算機代碼
`<kbd> ` | 定義鍵盤碼
`<samp>` | 定義計算機代碼樣本
`<tt >` | 定義打字機代碼
`<var > ` | 定義變量
`<pre> `| 定義預格式文本
`<listing> ` | 不贊成使用使用 `<pre>` 代替
`<plaintext >` | 不贊成使用。使用 `<pre>` 代替
` <xmp> `|不贊成使用。使用 `<pre>` 代替
引用、引用和術語定義
標簽 |描述
------------- |-------------
`<abbr> ` | 定義縮寫
`<acronym >` | 定義首字母縮寫
`<address>` | 定義地址
`<bdo >` | 定義文字方向
`<blockquote>` | 定義長的引用
`<q>` | 定義短的引用語
`<cite>` |定義引用、引證
`<dfn >`| 定義一個定義項目
##引用
`<q></q>`元素定義短的引用。
HTML `<blockquote>` 元素定義被引用的節(jié)
HTML `<abbr> `元素定義縮寫或首字母縮略語。對縮寫進行標記能夠為瀏覽器、翻譯系統(tǒng)以及搜索引擎提供有用的信息。
`<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>`
HTML` <dfn> `元素定義項目或縮寫的定義。
HTML <address> 元素定義文檔或文章的聯(lián)系信息（作者/擁有者）。
HTML <cite> 元素定義著作的標題。
HTML <bdo> 元素定義雙流向覆蓋（bi-directional override）
##計算機代碼元素
通常，HTML 使用可變的字母尺寸，以及可變的字母間距。在顯示計算機代碼示例時，并不需要如此。
HTML 計算機代碼元素
標簽 |描述
------------- |-------------
`<code> ` | 定義計算機代碼文本 `<code> `元素不保留多余的空格和折行----如需解決該問題，您必須在 `<pre>` 元素中包圍代碼
`<kbd>` | 定義鍵盤文本
`<samp>` | 定義計算機代碼示例
`<var>` | 定義變量
`<pre>` | 定義格式化文本
##注釋
條件注釋:您也許會在 HTML 中偶爾發(fā)現(xiàn)條件注釋：
`<!--[if IE 8]>
.... some HTML here ....
<![endif]-->條件注釋定義只有 Internet Explorer 執(zhí)行的 HTML 標簽`
##CSS
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表:
1. 外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2. 內(nèi)部樣式表
當單個文件需要特別樣式時，就可以使用內(nèi)部樣式表。你可以在 head 部分通過 <style> 標簽定義內(nèi)部樣式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3. 內(nèi)聯(lián)樣式
當特殊的樣式需要應用到個別元素時，就可以使用內(nèi)聯(lián)樣式。 使用內(nèi)聯(lián)樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
標簽 | 描述
----|------
`<style>` | 定義樣式定義。
`<link>` | 定義資源引用。
`<div> `| 定義文檔中的節(jié)或區(qū)域（塊級）。
`<span> `| 定義文檔中的行內(nèi)的小塊或區(qū)域。
`<font >`| 規(guī)定文本的字體、字體尺寸、字體顏色。不贊成使用。請使用樣式。
`<basefont>` | 定義基準字體。不贊成使用。請使用樣式。
`<center>` | 對文本進行水平居中。不贊成使用。請使用樣式。
##鏈接
有兩種使用 `<a> `標簽的方式：
1. 通過使用 `href` 屬性 - 創(chuàng)建指向另一個文檔的鏈接
2. 通過使用` name`屬性 - 創(chuàng)建文檔內(nèi)的書簽
書簽不會以任何特殊方式顯示，它對讀者是不可見的。
當使用命名錨（named anchors）時，我們可以創(chuàng)建直接跳至該命名錨（比如頁面中某個小節(jié)）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
實例`<a>` 定義錨
首先，我們在 HTML 文檔中對錨進行命名（創(chuàng)建一個書簽）：
`<a name="tips">基本的注意事項 - 有用的提示</a>`
然后，我們在同一個文檔中創(chuàng)建指向該錨的鏈接：
`<a href="#tips">有用的提示</a>`
您也可以在其他頁面中創(chuàng)建指向該錨的鏈接：
`<a >有用的提示</a>`
在上面的代碼中，我們將 # 符號和錨名稱添加到 URL 的末端，就可以直接鏈接到 tips 這個命名錨了。
· 使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。
##圖像
圖像由 <img> 標簽定義，要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。
> 在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
圖像標簽
標簽 | 描述
----|------
`<img>` | 定義圖像
`<map>` | 定義圖像地圖
`<area> `| 定義圖像地圖中的可點擊區(qū)域
創(chuàng)建圖像映射——可以點擊圖像上的星球，將它們放大。
<html>
<body>
<p>請點擊圖像上的星球，把它們放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注釋：</b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性（根據(jù)瀏覽器），所以我們同時向 map 元素添加了 "id" 和 "name" 屬性。</p>
</body>
</html>
##表格
> 表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
如果不定義邊框?qū)傩裕砀駥⒉伙@示邊框。有時這很有用，但是大多數(shù)時候，我們希望顯示邊框。
使用邊框?qū)傩詠盹@示一個帶有邊框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格的表頭使用 <th> 標簽進行定義?！蠖鄶?shù)瀏覽器會把表頭顯示為粗體居中的文本：
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
空單元格_為了避免這種情況，在空單元格中添加一個空格占位符，就可以將邊框顯示出來。` `
<tr>
<th rowspan="2">電話</th> 跨兩行單元格
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
表格帶標題，直接可以用h1，h2……
定義跨行跨列的單元格：
<tr> 跨列單元格
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
跨行單元格：
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">電話</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
單元格邊距：
`<table border="1" cellpadding="10">`
單元格間距：
`<table border="1" cellspacing="10">`
表格背景添加背景顏色或背景圖像
`<table border="1"
bgcolor="red">`
`<table border="1"
background="/i/eg_bg_07.gif">`
單元格內(nèi)添加背景或顏色
`<td
background="/i/eg_bg_07.gif">`
`<td
bgcolor="red">First</td>`
在表格單元中排列內(nèi)容
<td align="left">化妝品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
框架frame屬性
<table frame="box"> 有四邊邊框
<table frame="above"> 只有上邊框
<table frame="below"> 只有下邊框
<table frame="hsides"> 只有上下邊框
<table frame="vsides"> 只有左右邊框
表格 | 描述
----|------
`<table>` | 定義表格
`<caption>` | 定義表格標題
`<th> `| 定義表格表頭
`<tr>` | 定義表格的行
`<td>` | 定義表格單元
`<thead> `| 定義表格的頁眉
`<tbody>` | 定義表格主體
`<tfoot>` | 定義表格的頁腳
`<col> `| 定義用戶表格列屬性
`<colgroup> `| 定義表格列的組
