㈠表格
⑴表格的基本結構
①表格的基本標簽有：table標簽（表格），tr標簽（行），td標簽（單元格）。<tr>標簽和<td>標簽都要在表格的開始標簽<table>和結束標簽</table>之間才有效。
②tr即"table row"(表格行)，td即"table data cell"(表格單元格)。
③<table>和</table>標記着表格的開始和結束；<tr>和</tr>標記着行的開始和結束；<td>和</td>標記着單元格的開始和結束。在表格中包含幾組<tr></tr>就表示該表格為幾行。
④用代碼看一下它的語法：
1 <html> 2 3 <body> 4 5 <p>每個表格由 table 標簽開始。</p> 6 <p>每個表格行由 tr 標簽開始。</p> 7 <p>每個表格數據由 td 標簽開始。</p> 8 9 <h4>一列：</h4> 10 <table > 11 <tr> 12 <td>100</td> 13 </tr> 14 </table> 15 16 <h4>一行三列：</h4> 17 <table > 18 <tr> 19 <td>100</td> 20 <td>200</td> 21 <td>300</td> 22 </tr> 23 </table> 24 25 <h4>兩行三列：</h4> 26 <table> 27 <tr> 28 <td>100</td> 29 <td>200</td> 30 <td>300</td> 31 </tr> 32 <tr> 33 <td>400</td> 34 <td>500</td> 35 <td>600</td> 36 </tr> 37 </table> 38 39 </body> 40 </html>
效果圖：
默認情況下，表格是沒有邊框的。
⑤那么如何才能讓表格擁有邊框呢？就要加入border屬性，如下圖所示：
1 <html> 2 3 <body> 4 5 <h4>帶有普通的邊框：</h4> 6 <table border="1"> 7 <tr> 8 <td>First</td> 9 <td>Row</td> 10 </tr> 11 <tr> 12 <td>Second</td> 13 <td>Row</td> 14 </tr> 15 </table> 16 17 <h4>帶有粗的邊框：</h4> 18 <table border="8"> 19 <tr> 20 <td>First</td> 21 <td>Row</td> 22 </tr> 23 <tr> 24 <td>Second</td> 25 <td>Row</td> 26 </tr> 27 </table> 28 29 <h4>帶有很粗的邊框：</h4> 30 <table border="15"> 31 <tr> 32 <td>First</td> 33 <td>Row</td> 34 </tr> 35 <tr> 36 <td>Second</td> 37 <td>Row</td> 38 </tr> 39 </table>
效果圖：
表格邊框的粗細通過改變border的數值大小來改變。
⑵表格標題 caption
①表格一般都有一個標題，表格的標題使用caption標簽。默認情況下，表格的標題位於整個表格的第一行，一個表格只能含有一個表格標題。
②代碼示例如下圖所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格標題標簽</title> 6 </head> 7 <body> 8 <table border="1"> 9 <caption>考試成績</caption> 10 <tr> 11 <td>小明</td> 12 <td>80</td> 13 <td>90</td> 14 <td>85</td> 15 </tr> 16 <tr> 17 <td>小紅</td> 18 <td>90</td> 19 <td>89</td> 20 <td>98</td> 21 </tr> 22 <tr> 23 <td>小張</td> 24 <td>99</td> 25 <td>95</td> 26 <td>97</td> 27 </tr> 28 </table> 29 30 </body> 31 </html>
效果圖：
⑶表頭 th
①表格的表頭th是td單元格的一種變體，它的本質還是一種單元格。它一般位於第一行，用來表明這一行或列的內容類別。表頭有一種默認樣式：瀏覽器會以粗體和居中的樣式顯示<th></th>標簽中的內容。
②th標簽和td標簽在本質上都是單元格，但是不代表這兩種可以互換使用。這兩者的區別在於語義上。th即“table header”（表頭的單元格），而td即“table data cell”（單元格）。當然對於表頭，我們可以使用td標簽代替th標簽，但是不建議這樣做。
③代碼示例如下圖所示:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格表頭標簽</title> 6 </head> 7 <body> 8 <table border="1"> 9 <caption>考試成績</caption> 10 <tr> 11 <th>姓名</th> 12 <th>語文</th> 13 <th>數學</th> 14 <th>英語</th> 15 </tr> 16 <tr> 17 <td>小明</td> 18 <td>80</td> 19 <td>90</td> 20 <td>85</td> 21 </tr> 22 <tr> 23 <td>小紅</td> 24 <td>90</td> 25 <td>89</td> 26 <td>98</td> 27 </tr> 28 <tr> 29 <td>小張</td> 30 <td>99</td> 31 <td>95</td> 32 <td>97</td> 33 </tr> 34 </table> 35 36 </body> 37 </html>
效果圖：
⑷表格的語義化
①為了更深一層對表格進行語義化，HTML引入了thead，tbody和tfoot這三個標簽。這三個標簽把表格分為三部分：表頭，表身，表腳，使得表格的結構更加清晰。
②頁腳往往都是用於統計數據的。在瀏覽器顯示下加了這三個標簽和沒加的效果是一樣的，但是加入這三個標簽可以使得代碼更具有語義化，同時方便控制表格的css樣式。
③代碼示例如下圖所示:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格語義化</title> 6 </head> 7 <body> 8 <table border="1"> 9 <caption>考試成績</caption> 10 <thead> 11 <tr> 12 <th>姓名</th> 13 <th>語文</th> 14 <th>數學</th> 15 <th>英語</th> 16 </tr> 17 </thead> 18 <tbody> 19 <tr> 20 <td>小明</td> 21 <td>80</td> 22 <td>80</td> 23 <td>80</td> 24 </tr> 25 <tr> 26 <td>小紅</td> 27 <td>90</td> 28 <td>90</td> 29 <td>90</td> 30 </tr> 31 <tr> 32 <td>小張</td> 33 <td>100</td> 34 <td>100</td> 35 <td>100</td> 36 </tr> 37 </tbody> 38 <tfoot> 39 <tr> 40 <td>平均</td> 41 <td>90</td> 42 <td>90</td> 43 <td>90</td> 44 </tr> 45 </tfoot> 46 </table> 47 48 </body> 49 </html>
效果圖：
⑸合並行 rowspan
①在設計表格時，有時候需要將兩個或更多的相鄰單元格組合成一個單元格，類似Word表格中的“合並單元格”。合並使用td標簽的rowspan屬性。
②語法:<td rowspan="跨度的行數">
③代碼示例如圖所示：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>合並行rowspan</title> 6 </head> 7 <body> 8 <table border="1"> 9 <!-- 第一行 --> 10 <tr> 11 <td>姓名：</td> 12 <td>小明</td> 13 </tr> 14 <!-- 第二行 --> 15 <tr> 16 <td rowspan="2">喜歡水果：</td> 17 <td>蘋果</td> 18 </tr> 19 <!-- 第三行 --> 20 <tr> 21 <td>香蕉</td> 22 </tr> 23 </table> 24 25 </body> 26 </html>
效果圖：
⑹合並列 colspan
①在HTML中，表格合並列指的是將幾個列進行合並。
②語法：<td colspan="跨度的列數">
③代碼示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>合並列colspan</title> 6 </head> 7 <body> 8 <table border="1"> 9 <!-- 第一行 --> 10 <tr> 11 <td colspan="2">菜鳥教程</td> 12 13 </tr> 14 <!-- 第二行 --> 15 <tr> 16 <td>HTML教程</td> 17 <td>CSS教程</td> 18 </tr> 19 <!-- 第三行 --> 20 <tr> 21 <td>Java教程</td> 22 <td>json教程</td> 23 </tr> 24 </table> 25 26 </body> 27 </html>
效果圖：
★當內容不能完全放於一個單元格內時，表格合並行和表格合並列就顯得非常有用。通過跨越許多單元格，不需要改變表格就能將更多的文字放入單元格。
㈡圖像
☆圖像標簽
在HTML中，圖像使用<img />標簽。img即“image”（圖像）。
請注意，從技術上講，<img> 標簽並不會在網頁中插入圖像，而是從網頁上鏈接圖像。<img> 標簽創建的是被引用圖像的占位空間。
⑴img標簽src屬性
①src即“source”（源文件）。img標簽的src屬性用於指定圖像源文件所在的路徑，它是圖像必不可少的屬性。
②語法：<img src="圖像文件的路徑" />
③img標簽是一個自閉合標簽，沒有結束標簽。src屬性用於設置圖像文件所在的路徑，可以是相對路徑也可以是絕對路徑。
④為了整理文檔的存儲，通常會把圖像文件存放在一個單獨的文件夾中，而且通常會將這些目錄命名為 "pics" 或者 "images" 之類的名稱，這樣做的好處是可以最大程度地簡化路徑。
⑤示例：演示如何將其他文件夾或服務器的圖片顯示到網頁中。
<html> <body> <p> 來自另一個文件夾的圖像： <img src="/i/ct_netscape.jpg" /> </p> <p> 來自 W3School.com.cn 的圖像： <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" /> </p> </body> </html>
效果圖：
⑵img標簽alt屬性
①<img> 標簽的 alt 屬性指定了替代文本，用於在圖像無法顯示或者用戶禁用圖像顯示時，代替圖像顯示在瀏覽器中的內容。
②假設由於下列原因用戶無法查看圖像，alt 屬性可以為圖像提供替代的信息：
- 網速太慢
- src 屬性中的錯誤
- 瀏覽器禁用圖像
- 用戶使用的是屏幕閱讀器
③注釋：alt 屬性的值是一個最多可以包含 1024 個字符的字符串，其中包括空格和標點。這個字符串必須包含在引號中。這段 alt 文本中可以包含對特殊字符的實體引用，但它不允許包含其他類別的標記，尤其是不允許有任何樣式標簽。
④語法:<a alt="value">
⑤屬性值：
⑥示例：演示如何為圖片顯示替換文本。
1 <html> 2 3 <body> 4 5 6 <p>僅支持文本的瀏覽器無法顯示圖像，僅僅能夠顯示在圖像的 "alt" 屬性中指定的文本。在這里，"alt" 的文本是“向左轉”。</p> 7 8 <p>請注意，如果您把鼠標指針移動到圖像上，大多數瀏覽器會顯示 "alt" 文本。</p> 9 10 <img src="/i/eg_goleft.gif" alt="向左轉" /> 11 12 <p>如果無法顯示圖像，將顯示 "alt" 屬性中的文本：</p> 13 14 <img src="/i/eg_goleft123.gif" alt="向左轉" /> 15 16 </body> 17 </html>
效果圖：
⑶img標簽title屬性
title屬性用於設置鼠標移到圖片上的提示文字，這些文字是給用戶看的。
語法：<img src="圖片地址" alt="圖片描述（給搜索引擎看）" title=“圖片描述（給用戶看）” />
☆圖片格式
⑴位圖
①位圖又稱為點陣圖像，是由像素（圖片元素）的單個點組成的。通常分為8位，16位，24位和32位。
②所謂8位圖並不是只有8種顏色，而是2的8次冪（即256）種顏色，8位圖指的是用8個bits來表示顏色，對人眼的感覺來說，16位色基本能滿足需要了。
③24位又稱為“真色彩”，2的24次冪，大概有1600萬種顏色之多，這個數字差不多是人眼可以分辨顏色的極限了。
④32位色並不是2的32次冪，其實也是2的24次冪，不過它添加了2的8次冪階顏色的灰度，也就是8位透明度，因此規定它為32位色。
⑤在制作頁面的時候，一般選用24位圖像。因為32位圖像會帶來更大的圖像容量，會使瀏覽器加載頁面速度變慢。
⑥放大原始位圖，圖像會失真，縮小原始位圖，同樣會使圖像效果失真，這是因為縮小圖像，減少的是圖像中像素的數量。
⑵位圖格式
①JPG格式
jpg可以很好地處理大面積色調的圖像，如相片，網頁中一般的圖片
②PNG格式
PNG支持透明信息。所謂透明，即圖像可以浮現在其他頁面文件或頁面圖像之上。可以說PNG是專門為web創造的圖像，通常大部分頁面設計者在頁面中加入logo或者一些點綴的小圖像時，都會選用PNG格式。PNG格式圖片體積小，而且無損壓縮，能保證網頁打開速度，所以PNG格式圖片是很好地選擇。
③GIF格式
GIF只支持256色以內的圖像。所以，GIF格式的圖片效果是很差的。但是，GIF可以制作動畫，圖像作者利用圖像處理軟件，將靜態的GIF圖像設置為單幀畫面，然后把這些單幀畫面連在一起，設置好一個畫面到下一個畫面的間隔時間，最后保存為GIF格式就可以了。可以說，這就是簡單的逐幀動畫。
當處理色調復雜，絢麗的圖像時，如照片，圖畫等，適合使用jpg格式；而處理一些logo，banner，簡單線條構圖的時候，適合使用PNG格式；GIF格式通常只適合表達動畫效果。
⑶矢量圖
①矢量圖格式
矢量圖又稱為“向量圖”。矢量圖是計算機圖形中用點，直線或者多邊形等基於數學方程的幾何圖元表示的圖像。
矢量圖是以一種數學描述的方式來記錄圖像內容的圖像格式。如一個方程式y=kx，當這個小方程體現在坐標系上的時候，設置不同的參數可以繪制不同角度的直線，這就是矢量圖的構圖原理。
矢量圖最大的優點是：無論放大，縮小或是旋轉等，圖像都不會失真。最大的缺點就是：難以表現色彩層次豐富的逼真圖像效果。
②矢量圖格式
矢量圖的后綴一般有“.ai”，".cdf"，".swf"和".fh"。
“.ai”后綴的文件是一種靜幀的矢量文件格式。".cdf"后綴的文件多為工程圖。".swf"格式文件指的是Flash。
⑷位圖和矢量圖區別
①位圖受分辨率的影響，而矢量圖不受分辨率影響。因此，當圖片放大時，位圖清晰度會變低，而矢量圖清晰度不變。
②位圖的組成單位是“像素”，而矢量圖的組成單位是“數學向量”。
③位圖適用於色彩豐富的圖片，而矢量圖卻不適用於色彩豐富的圖片。
④位圖常用於網頁中的照片，容量較大；矢量圖常用於印刷行業，網頁logo或矢量插圖。
未完待續。。。。。。