HTML基本元素
一.標題
<h1>標題1</h1>標題會自動粗體，大寫其中的內容，並且帶有換行效果。一般會使用h1~h6分別表示不同大小的標題
二.段落
<p>段落4 </p>是paragraph的縮寫，自帶換行效果
三.粗體
<b>和<strong>都可以用來實現粗體的效果
<b>粗體效果</b><strong>strong標籤粗體效果</strong>- 區別
b是bold的縮寫，僅僅表示該文字是粗體的，並不暗示這段文字的重要性
strong雖然也是粗體，但是更多的是強調語義上的加重，提醒使用者該文字的重要性。 在SEO（搜尋引擎優化）的時候，也更加容易幫助使用者找到重點的內容。推薦使用strong
四.斜體
<i>和<em>都可以表示斜體效果
<i>使用 i 標籤帶來的斜體效果</i><em>使用 em 標籤帶來的斜體效果</em>- 區別
i是italic的縮寫，僅僅表示該文字是斜體的，並不暗示這段文字的重要性
em 是 Emphasized的縮寫，雖然也是斜體，但是更多的是強調語義上的加重，提醒使用者該文字的重要性。 常常用於引入新的術語的時候使用
五.預格式
需要在網頁上顯示程式碼的時候，需要使用到<pre>
六.刪除線
<del>使用del標籤實現的刪除效果</del>
效果：
使用del標籤實現的刪除效果
七.下劃線
<ins></ins>但是通常來講，不要給普通文字加下劃線，因為使用者會誤以為是一個超鏈
效果：
使用ins標籤實現的下劃線效果
八.影象
<img />
- src=""
設定影象的來源 - align=""
設定影象的位置：left、center、right。 - alt=""
當圖片不存在的時候，預設會顯示一個缺失圖片，這是不友好的，所以可以加上alt屬性。當圖片存在的時候，alt的內容是不會顯示的。當圖片不存在的時候，alt的內容就會出現。
效果：
九.超連結
<a href="http://www.12306.com">12306</a>
- target="_blank"
在一個新的頁面開啟一個連結，屬性值還有"_parent"，表示在當前頁面下開啟該連結。 - title="提示文字"
當滑鼠放在超鏈上的時候，就會彈出提示文字
效果：
<a href="http://www.12306.com" title="跳轉到http://www.12306.com">www.12306.com</a>
www.12306.com
十.表格
<table>標籤用於顯示一個表格
<tr>表示行
<td>表示列又叫單元格
- 新建一個3行2列的表格
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
效果：
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
- 帶邊框的表格
設定table的屬性border<table border="1"></table> - 設定table寬度
設定table的屬性 width
<table border="1" width="200px">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
效果：
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
- 單元格寬度絕對值
設定td的屬性width
<table border="1" width="200px">
<tr>
<td width="50px">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
效果：
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
5.單元格寬度相對值
設定td的屬性width為百分數
6. 單元格水平對齊
設定td的屬性align
<table border="1" width="200px">
<tr>
<td width="50%" align="left">1</td>
<td>2</td>
</tr>
<tr>
<td lign="center">3</td>
<td>4</td>
</tr>
<tr>
<td align="right">5</td>
<td>6</td>
</tr>
</table>
效果：
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
-
單元格垂直對齊
設定td的屬性valign -
單元格橫跨兩列水平合併
設定td的屬性colspan
<table border="1" width="200px">
<tr>
<td colspan="2" >1，2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
效果：
| 1，2 | |
| 3 | 4 |
| 5 | 6 |
- 單元格橫跨兩行垂直合併