圖像標籤（<img>）和源屬性（Src）
在 HTML 中，圖像由 <img> 標籤定義。
<img> 是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
定義圖像的語法是：
<img src="url" />
URL 指存儲圖像的位置。如果名爲 "boat.gif" 的圖像位於 www.w3school.com.cn 的 p_w_picpaths 目錄中，那麼其 URL 爲 http://www.w3school.com.cn/p_w_picpaths/boat.gif。
瀏覽器將圖像顯示在文檔中圖像標籤出現的地方。如果你將圖像標籤置於兩個段落之間，那麼瀏覽器會首先顯示第一個段落，然後顯示圖片，最後顯示第二段。
替換文本屬性（Alt）
alt 屬性用來爲圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。爲頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，並且對於那些使用純文本瀏覽器的人來說是非常有用的。
<html> <!--背景色定義爲粉色--> <body bgcolor="pink" height="500"> <a href="http://baidu.com" target="_blank">BaiDu</a> <img src="1.jpg" alt="Black Widow"> <img src="3.jpg" alt="Black Widow"> </body> </html>
基本的注意事項 - 有用的提示：
假如某個 HTML 文件包含十個圖像，那麼爲了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。
設置網頁圖片背景
<html> <!--添加背景圖片，gif和jpg皆可，如果圖片小於頁面會重複--> <body background="1.jpg"> <a href="http://baidu.com" target="_blank">BaiDu</a> <img src="3.jpg" alt="Black Widow"> </body> </html>
排列圖片
<html> <!--添加背景圖片，gif和jpg皆可，如果圖片小於頁面會重複--> <body background="1.jpg"> <a href="http://baidu.com" target="_blank">BaiDu</a> <!-- 分段添加圖片使其自動排列對齊 --> <p><img src="bw.jpg" alt="bw"></p> <p><img src="bw.jpg" alt="bw"></p> <p><img src="bw.jpg" alt="bw"></p> </body> </html>
圖片浮動：
<html> <!--添加背景圖片，gif和jpg皆可，如果圖片小於頁面會重複--> <body background="1.jpg"> <a href="http://baidu.com" target="_blank">BaiDu</a> <!-- 圖片跟隨段落靠左 --> <p><img src="bw.jpg" alt="bw" align="left">帶有圖像的一個段落。</p> <!--圖片跟隨段落靠右--> <p><img src="bw.jpg" alt="bw" align="right">帶有圖像的一個段落。</p> </body> </html>
調整圖片尺寸
<html> <!--添加背景圖片，gif和jpg皆可，如果圖片小於頁面會重複--> <body background="1.jpg"> <!-- 調整圖片尺寸 --> <p><img src="bw.jpg" height="200" width="200">帶有圖像的一個段落。</p> </body> </html>
設置圖片爲鏈接
<html> <!--添加背景圖片，gif和jpg皆可，如果圖片小於頁面會重複--> <body background="1.jpg"> <!-- 調整圖片尺寸 --> <p><img src="bw.jpg" height="200" width="200">帶有圖像的一個段落。</p> <!-- 將圖片設置成鏈接點 --> <a href="http://www.baidu.com"><img src="bw.jpg" height="200" width="200"> </a> </body> </html>
表格
表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割爲若干單元格（由 <td> 標籤定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
表格和邊框屬性
如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。
使用邊框屬性來顯示一個帶有邊框的表格
表格的表頭
表格的表頭使用 <th> 標籤進行定義。
大多數瀏覽器會把表頭顯示爲粗體居中的文本：
表格中的空單元格
在一些瀏覽器中，沒有內容的表格單元顯示得不太好。如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。
爲了避免這種情況，在空單元格中添加一個空格佔位符，就可以將邊框顯示出來。
<html> <body > <!-- 設置表格邊框厚度爲1 --> <table border="1"> <!-- 行 --> <tr> <!-- 表格標題 --> <th>Heading</th> <th>Another</th> </tr> <tr> <!-- 列 --> <td>AAA</td> <td>BBB</td> </tr> <tr> <td> </td><!-- 空表格--> <td>DDD</td> </tr> </table> </body> </html>
佔用多格的表格
<html> <body> <h4>橫跨兩列的單元格：</h4> <table border="1"> <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> <h4>橫跨兩行的單元格：</h4> <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> </body> </html>
表格嵌套：
<html> <body> <table border="1"> <tr> <td> <p>One</p> <p>Two</p> </td> <td> <table border="2"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td> <list>Cat</list> <list>gou</list> <list>豬</list> <list>牛</list> </td> <td>Hello</td> </tr> </table> </body> </html>
使用 Cell padding 來創建單元格內容與其邊框之間的空白。
<html> <body> <table border="3" cellpadding="10"> <tr> <td>AAA</td> <td>BBB</td> </tr> <tr> <td>CCC</td> <td>DDD</td> </tr> </table> </body> </html>
使用 Cell spacing 增加單元格之間的距離。
<html> <body> <table border="1" cellpadding="10" cellspacing="20"> <tr> <td>AAA</td> <td>BBB</td> </tr> <tr> <td>CCC</td> <td>DDD</td> </tr> </table> </body> </html>
單元格添加背景色和背景圖片
<html> <body> <table border="1" cellpadding="100" cellspacing="20"> <tr> <td bgcolor="green">AAAAAAAAAAAA</td> <td>BBBBBBBBBBBB</td> </tr> <tr> <td background="bw.jpg">CCCCCCCCCCC</td> <td>DDDDDDDDDDD</td> </tr> </table> </body> </html>
控制單元格內容靠邊排列
<html> <body> <table border="1" cellpadding="10" cellspacing="20" width="800" height="800"> <tr align="left"> <td bgcolor="green">AAAAAAAAAAAA</td> <td>BBBBBB</td> </tr> <tr align="right"> <td background="bw.jpg">CCCCCCCCCCC</td> <td>DDDDDD</td> </tr> </table> </body> </html>
使用 "frame" 屬性來控制圍繞表格的邊框
<html> <body> <p>外圍一圈</p> <table frame="box"> <tr> <td>AAA</td> <td>BBB</td> </tr> <tr> <td>CCC</td> <td>DDD</td> </tr> </table> <p></p> <p>只加上面</p> <table frame="above"> <tr> <td>AAA</td> <td>BBB</td> </tr> <tr> <td>CCC</td> <td>DDD</td> </tr> </table> <p></p> <p>只加下面</p> <table frame="below"> <tr> <td>AAA</td> <td>BBB</td> </tr> <tr> <td>CCC</td> <td>DDD</td> </tr> </table> <p></p> <p>只加上下</p> <table frame="hsides"> <tr> <td>AAA</td> <td>BBB</td> </tr> <tr> <td>CCC</td> <td>DDD</td> </tr> </table> <p></p> <p>只加左右</p> <table frame="vsides"> <tr> <td>AAA</td> <td>BBB</td> </tr> <tr> <td>CCC</td> <td>DDD</td> </tr> </table> </body> </html>