1表格的標題和表頭：
<table>
<caption>成績單</caption>
<tr>
<th>姓名</th>
<th>語文</th>
<th>英語</th>
<th>數學</th>
</tr>
<tr>
<td>100 </td>
<td>100 </td>
<td> 100</td>
</tr>
</table>2合併行：
<table>
<!--第1行-->
<tr>
<td>姓名:</td>
<td>小明</td>
</tr>
<!--第2行-->
<tr>
<td rowspan="2">喜歡水果:</td>
<td>蘋果</td>
</tr>
<!--第3行-->
<tr>
<td>香蕉</td>
</tr>
</table>
3<img>標籤
src 圖像的文件地址
alt 圖片顯示不出來時的提示文字
title 鼠標移到圖片上的提示文字
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圖像標籤img</title>
</head>
<body>
<img src="../App_images/lesson/hj/7-1-1.jpg" alt="海賊王路飛" title="海賊王路飛"/>
</body>
</html>4 圖片的相對和絕對路徑
一、“網頁1”引用海賊王圖片
如果在“網頁1”引用“海賊王”這張圖片，則圖片路徑有兩種寫法：
寫法一：<img src="images/海賊王.jpg" alt="海賊王" />
寫法二：<img src="c:/BookTest/images/海賊王.jpg" alt="海賊王"/>
以上兩種方法都能達到效果。爲什麼呢？這就是相對路徑和絕對路徑的問題。
1、相對路徑
寫法一採用了“相對路徑”方法，所謂的相對路徑，就是在同一個網站下，不同文件之間的的位置定位。我們分析一下，“網頁1”和images文件夾位於網站BookTest根目錄下，而海賊王圖片位於images文件夾下，那麼src應該是“images/海賊王.jpg”。
那有同學就會問，那下圖2中，“網頁1”如果要引用海賊王圖片的相對路徑怎麼寫呢？
![]()
相對路徑
答案應該是：<img src="海賊王.jpg" alt="海賊王"/>。這個時候網頁1與海賊王圖片位於同一目錄下。
如果在“網頁1”引用“海賊王”這張圖片，則圖片路徑有兩種寫法：
寫法一：<img src="images/海賊王.jpg" alt="海賊王" />
寫法二：<img src="c:/BookTest/images/海賊王.jpg" alt="海賊王"/>
以上兩種方法都能達到效果。爲什麼呢？這就是相對路徑和絕對路徑的問題。
1、相對路徑
寫法一採用了“相對路徑”方法，所謂的相對路徑，就是在同一個網站下，不同文件之間的的位置定位。我們分析一下，“網頁1”和images文件夾位於網站BookTest根目錄下，而海賊王圖片位於images文件夾下，那麼src應該是“images/海賊王.jpg”。
那有同學就會問，那下圖2中，“網頁1”如果要引用海賊王圖片的相對路徑怎麼寫呢？
相對路徑
答案應該是：<img src="海賊王.jpg" alt="海賊王"/>。這個時候網頁1與海賊王圖片位於同一目錄下。
2、絕對路徑
對於寫法二，採用的是“絕對路徑”方法，所謂的絕對路徑就是完整的路徑。
（ 2）、“網頁2”引用海賊王圖片
我們再回到圖1中的目錄內容，如果在“網頁2”引用“海賊王”這張圖片，圖片路徑也有兩種寫法：
- 寫法一：<img src="../images/海賊王.jpg" alt="海賊王"/>
- 寫法二：<img src="c:/BookTest/images/海賊王.jpg" alt="海賊王"/>
1、相對路徑
同樣，寫法一是相對路徑寫法，而寫法二是絕對路徑寫法。我們分析一下，“網頁2”位於test文件夾下，而海賊王圖片位於images文件夾下。因此，相對於“網頁2”，海賊王圖片位於“網頁2”上一級目錄下的images文件夾下。因此，src的寫法爲“../images/海賊王.jpg” alt=”海賊王”。其中“../”表示上一級目錄，大家要懂得這種寫法。
現在就可以對相對路徑寫法進行總結了。相對路徑的寫法首先就是要分析當前網頁的位置和圖像的位置之間的關係，然後用一種方式把他們之間的相對關係表達出來。
2、絕對路徑
寫法二是“絕對路徑”寫法，跟“網頁1”引用海賊王圖片的寫法一樣。絕對路徑，只要你的圖片沒有移動到別的地方，所有網頁引用該圖片的路徑寫法都是一樣的。大家稍微想一下就懂了。
引用：http://www.lvyestudy.com/les_hj/hj_7.2.aspx
5位圖3種格式：“.jpg”、“.png”、“.gif”。
（1）JPG格式
JPG可以很好處理大面積色調的圖像，如相片、網頁一般的圖片。
（2）PNG格式
PNG支持透明信息。所謂透明，即圖像可以浮現在其他頁面文件或頁面圖像之上，如圖1。可以說，PNG是專門爲web創造的圖像，通常大部分頁面設計者在頁面中加入lLogo或者是一些點綴的小圖像時，都會選擇使用PNG格式。
由於JPG格式容量較大，在保證圖片清晰、逼真的前提下，網頁中不可能大範圍使用文件較大的jpg格式圖片。PNG格式圖片體積小，而且無損壓縮，能保證網頁的打開速度，所以PNG格式圖片是很好的選擇。
由於PNG優秀的特點，PNG格式圖片可以稱爲“網頁設計專用格式”。
（3）GIF格式
GIF只支持256色以內的圖像。所以，GIF格式的圖片效果是很差的。但是，GIF有一個最大的特點，就是可以製作動畫，圖像作者利用圖像處理軟件，將靜態的GIF圖像設置爲單幀畫面，然後把這些單幀畫面連在一起，設置好一個畫面到下一個畫面的間隔時間，最後保存爲GIF格式就可以了。可以說，這就是簡單的逐幀動畫。目前這種格式的動畫在互聯網上廣爲流行。