僅僅是自己對着W3CSchool整理的一些HTML基礎知識點，敲一遍加深下印象也方便以後複習。
HTML文本格式化
<b>This text is bold</b>
<strong>This text is strong</strong>
<big>This text is big</big>
<em>This text is emphasized</em>
<i>This text is italic</i>
<small>This text is small</small>
This text contains <sub>subscript</sub>
This text contains <sup>superscript</sup>
預格式文本
<pre></pre>標籤中的內容保留換行和空格，很合適顯示代碼等格式
計算機輸出代碼
<code>Computer Code</code>
<kbd>Keyboard input</kbd>
<tt>Teletype text</tt>
<samp>Sample text</samp>
<var>Computer variable</var>
這些標籤常用於顯示計算機/編程代碼。
地址
<address>
上海市楊浦區軍工路516號<br/>
上海理工大學<br/>
郵編：200093
</address>
縮寫和首字母縮寫
縮寫，鼠標移到縮寫上會顯示標籤<abbr title="etcetera">etc.</abbr>
首字母縮寫，鼠標移到縮寫上會顯示標籤<acronym title="World Wide Web">WWW</acronym>
文字方向
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
塊引用
長塊引用
<blockquote>
長塊引用瀏覽器會插入換行和外邊距。
</blockquote>
短的引用
<q>
短引用
</q>
另：
刪除字與插入字效果
後面的兩個字被<del>刪除</del>了
後面的兩個字是<ins>插入</ins>的
HTML CSS
如何使用樣式
1.外部樣式表
適用於樣式應用到很多頁面，可以通過一個文件來改變多個頁面的外觀
<head>
<link rel="stylesheet" type="text/css" href="yourstyle.css">
</head>
2.內部樣式表
適用於單個文件使用特別的樣式
<head>
<style type="text/css">
body{background-color:red}
p{margin-left:20px}
</style>
</head>
3.內聯樣式
特殊的樣式需要應用到個別元素
<p style="color:red;margin-left:20px">
This is a paragraph
</p>
詳見CSS教程http://www.w3school.com.cn/css/index.asp
圖像標籤和源屬性
<img>是空標籤，它只包含屬性，並且沒有閉合標籤，在頁面上顯示圖像，需要使用src屬性。
<img src="url"/>
替換文本屬性(Alt)
alt屬性爲圖像定義一串預備的可替換的文本。
<img src="boat.gif" alt="Big Boat">
圖像背景
<body background="images/background.jpg">
注：如果圖像小於頁面，圖像會進行重複。
圖像對齊方式
<img src = "images/a.jpg" align = "bottom">（默認對齊方式）
<img src = "images/a.jpg" align = "middle">
<img src = "images/a.jpg" align = "top">
浮動圖像
<p>
<img src="a.jpg" align="left">
帶有圖像的一個段落，align屬性爲left，圖像會浮動在文本的左側。
</p>
<p>
<img src ="a.jpg" align="right">
帶有圖像的一個段落，align屬性爲right，圖像會浮動在文本的右側。
</p>
調整圖像尺寸
<img src="a.jpg" width="100" height="80">
圖像鏈接
<a href ="http://weibo.com">
<img border="0" src="a.jpg"/>
</a>
創建圖像映射
HTML表格
表格由<table></table>定義，每個表格由若干行（行由<tr></tr>定義），每行分割爲若個單元格（單元格由<td></td>定義，td即table data）
單元格內可以包含文本、圖片、列表、表單、水平線、表格等
<table border="1">
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
表格和邊框屬性
<table border="1">
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
如果不定義邊框，表格將不顯示邊框。
表格的表頭
表格的表頭使用<th>標籤來定義。
大多數瀏覽器會把表頭顯示爲粗體居中的文本。
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
表格中的空單元格
<table border="1">
<tr>
<td>11</td>
<td>12</td>
</tr>
<td> </td>
<td>22</td>
</table>
帶有標題的表格
<table border="1">
<caption>My title</caption>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>
跨行/跨列的單元格
跨行
<table border="1">
<tr>
<td>11</td>
<td colspan="2">12</td>
</tr>
<td>21</td>
<td>22.1</td>
<td>22.2</td>
<tr>
</tr>
</table>
跨列
<table border="1">
<tr>
<td>Name</td>
<td>Evan</td>
</tr>
<tr>
<td rowspan="2">Information</td>
<td>hahaha1</td>
</tr>
<tr>
<td>hahaha2</td>
</tr>
</table>
表格內嵌套標籤
<table border="1">
<tr>
<td>
<p>This is a pragraph in table</p>
</td>
</tr>
</table>
單元格邊距
<table border="1" cellpadding="10">
<tr>
<td>haha</td>
</tr>
</table>
單元格間距
<table border="1" cellspacing="12">
<tr>
<td>ha</td>
<td>ha</td>
</tr>
</table>
表格的背景顏色與背景圖片
背景顏色
<table border="1" bgcolor="blue">
<tr>
<td>ha</td>
<td>ha</td>
</tr>
</table>
背景圖片
<table border="1" background="a.jpg">
<tr>
<td>ha</td>
<td>ha</td>
</tr>
</table>
單元格的背景顏色與圖片
與表格的操作方式類似
框架(frame)屬性
frame屬性有：box-包圍、above-上方、below-下方、hsides-上下、vsides-左右
<table frame="box">
<tr>
<td>ha</td>
<td>ha</td>
</tr>
</table>
HTML列表
無序列表
<ul></ul>標籤定義列表，<li></li>標籤定義項目，此項目使用粗體圓點進行標記
項目符號
<ul type="disc"> </ul>
<ul type="circle"> </ul>
<ul type="square"> </ul>
有序列表
<ol></ol>標籤定義列表，<li></li>標籤定義項目，此項目使用數字進行標記
項目符號
<ol type="a"> </ol>
<ol type="A"> </ol>
<ol type="I"> </ol>
<ol type="i"> </ol>
定義列表
定義列表不僅是一列項目，而是項目及其註釋的組合。
<dl></dl>標籤定義列表，<dt></dt>定義項目，<dd></dd>定義註釋
嵌套列表
以上列表均可以嵌套使用
