溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在 HTML 中，圖像由 <img> 標簽定義。
<img> 是空標簽，意思是說，它只包含屬性，并且沒有閉合標簽。
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。
定義圖像的語法是：
<img src="url" />
URL 指存儲圖像的位置。如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 p_w_picpaths 目錄中，那么其 URL 為 https://cache.yisu.com/upload/information/20200312/65/247498.jpg。
瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果你將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。
alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
<html> <!--背景色定義為粉色--> <body bgcolor="pink" height="500"> <a >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 >BaiDu</a> <img src="3.jpg" alt="Black Widow"> </body> </html>
排列圖片
<html> <!--添加背景圖片，gif和jpg皆可，如果圖片小于頁面會重復--> <body background="1.jpg"> <a >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 >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 > </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> <h5>橫跨兩列的單元格：</h5> <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> <h5>橫跨兩行的單元格：</h5> <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>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
