1.構(gòu)建內(nèi)容豐富的網(wǎng)頁
本項目的任務(wù)是為“觀鳥網(wǎng)”的主頁添加結(jié)構(gòu)化的元素,使其可以進行布局設(shè)計。需要添加的有:

頁眉(<header>),應(yīng)充滿頁面寬度,并包含網(wǎng)站主標題、網(wǎng)站 logo 和導航欄菜單" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運營 > HTML學習案例練習

HTML學習案例練習

時間:2023-09-29 08:00:02 | 來源:網(wǎng)站運營

時間:2023-09-29 08:00:02 來源:網(wǎng)站運營

HTML學習案例練習:

一、題目要求:


1.構(gòu)建內(nèi)容豐富的網(wǎng)頁


本項目的任務(wù)是為“觀鳥網(wǎng)”的主頁添加結(jié)構(gòu)化的元素,使其可以進行布局設(shè)計。需要添加的有:

你應(yīng)該為以下內(nèi)容添加合適的標簽:

還應(yīng):

2.Mozilla 醒目頁面


在這個測驗中,我們?yōu)槟愠尸F(xiàn)了一個接近完成了的 Mozilla 醒目頁面,旨在說明一些關(guān)于 Mozilla 的有趣的事情,以及提供一些更一步的資源鏈接。但目前還沒有添加任何視頻或圖片,這份工作就交給你了!你需要添加一些圖片、視頻等多媒體元素,好讓頁面變得更漂亮和更有意義。


3.構(gòu)建行星數(shù)據(jù)表格


你在學校工作; 目前,你的學生正在學習太陽系的行星,然后你想為他們提供一份簡單的易于追蹤的數(shù)據(jù)集合,來查找有關(guān)行星的數(shù)字和情況。一張 HTML 數(shù)據(jù)表將是理想的,你需要先獲得可用的數(shù)據(jù),然后把它變成一張表格,跟著下面的步驟。


二、我實現(xiàn)的效果:

1.構(gòu)建內(nèi)容豐富的網(wǎng)頁


2.Mozilla 醒目頁面


3.構(gòu)建行星數(shù)據(jù)表格


三、HTML實現(xiàn)代碼:

1.構(gòu)建內(nèi)容豐富的網(wǎng)頁

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>觀鳥網(wǎng)</title> <link href="https://fonts.googleapis.com/css?family=Long+Cang|Noto+Sans+SC:300" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]--> </head> <body><header> <h1>觀鳥網(wǎng)</h1> <img src="dove.png" alt="一張鴿子剪影圖片"></header><nav> <ul> <li><span>主頁</span></li> <li><a href="#">開始</a></li> <li><a href="#">圖片</a></li> <li><a href="#">設(shè)備</a></li> <li><a href="#">論壇</a></li> </ul></nav><main><article> <h2>歡迎</h2> <p>歡迎訪問觀鳥網(wǎng)虛擬站點。如果這是一個真實的網(wǎng)站,那么它就是觀鳥愛好者的理想聚集地。無論你是一名期望學習觀鳥知識的新手,還是一位希望分享體會、經(jīng)驗和圖片的觀鳥老手。</p> <p>時不我待!趕快帶齊裝備,關(guān)上電腦,去擁抱美麗的大自然吧!</p></article><aside> <h2>收藏照片</h2> <a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="一只體型小巧的鳥,羽毛藍綠色,爪黑白相間,黑色的喙細且鋒利。點擊縮略圖查看完整照片。"></a> <a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="一只美麗的孔雀的上半身圖片,它的頸上覆蓋藍色的羽毛,有淺色的喙和藍色的冠。點擊縮略圖查看完整照片。"></a> <a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="一只大鳥的上半身圖片,羽毛白色,淺色的喙細長而彎曲。點擊縮略圖查看完整照片。"></a> <a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="一只成年鵜鶘,羽毛大多為白色,背部和腹部有少許黑色羽毛,又長又直的喙呈黃色,喙的下方有一個喉囊可以暫時儲存食物。點擊縮略圖查看完整照片。"></a></aside></main><footer> <p>本虛擬站點遵守 CC0 協(xié)議,所有內(nèi)容均可任意修改和復(fù)用。原始版本由 Chris Mills 于 2016 年編寫。Roy Tian 于 2019 年漢化。</p> <p><a href="http://game-icons.net/lorc/originals/dove.html">鴿子圖標</a> 由 Lorc 繪制。</p></footer></body></html>

2.Mozilla 醒目頁面

由于文章字數(shù)有限,所以不添加到該文章中。

3.構(gòu)建行星數(shù)據(jù)表格

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title >太陽系行星數(shù)據(jù)</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1>太陽系行星數(shù)據(jù)</h1><table><caption>太陽系中行星的一些數(shù)據(jù)。(資料取自<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">NASA 行星數(shù)據(jù) - 公制</a>,圖片取自<a href="https://www.nasa.gov/multimedia/imagegallery/">NASA 照片庫</a>。)</caption> <colgroup> <col span="2"> <col style="border: 2px solid black"> <col span="10"> </colgroup> <thead> <tr> <th colspan="2">&nbsp;</th> <th>名字</th> <th>質(zhì)量 (10<sup>24</sup>kg)</th> <th>直徑 (km)</th> <th>密度 (kg/m<sup>3</sup>)</th> <th>重力 (m/s<sup>2</sup>)</th> <th>天長 (hours)</th> <th>與太陽距離 (10<sup>6</sup>km)</th> <th>平均溫度 (°C)</th> <th>衛(wèi)星數(shù)量</th> <th>備注</th> </tr> </thead> <tbody> <tr> <td colspan="2" rowspan="4">類地行星</td> <td>水星</td> <td>0.330</td> <td>4,879</td> <td>5427</td> <td>3.7</td> <td>4222.6</td> <td>57.9</td> <td>167</td> <td>0</td> <td>與太陽最近</td> </tr> <tr> <td>金星</td> <td>4.87</td> <td>12,104</td> <td>5243</td> <td>8.9</td> <td>2802.0</td> <td>108.2</td> <td>464</td> <td>0</td> <td>&nbsp;</td> </tr> <tr> <td>地球</td> <td>5.97</td> <td>12,756</td> <td>5514</td> <td>9.8</td> <td>24.0 </td> <td>149.6</td> <td>15</td> <td>1</td> <td>我們的世界</td> </tr> <tr> <td>火星</td> <td>0.642</td> <td>6,792</td> <td>3933</td> <td>3.7</td> <td>24.7</td> <td>227.9</td> <td>-65</td> <td>2</td> <td>紅色星球</td> </tr> <tr> <td colspan="1" rowspan="4">類木行星</td> <td colspan="1" rowspan="2">氣巨星</td> <td>木星</td> <td>1898</td> <td>142,984</td> <td>1326</td> <td>23.1</td> <td>9.9</td> <td>778.6</td> <td>-110</td> <td>67</td> <td>太陽系最大</td> </tr> <tr> <td>土星</td> <td>568</td> <td>120,536</td> <td>687</td> <td>9.0</td> <td>10.7</td> <td>1433.5</td> <td>-140</td> <td>62</td> <td></td> </tr> <tr> <td colspan="1" rowspan="2">冰巨星</td> <td>天王星</td> <td>86.8</td> <td>51,118</td> <td>1271</td> <td>8.7</td> <td>17.2</td> <td>2872.5</td> <td>-195 </td> <td>27</td> <td></td> </tr> <tr> <td>海王星</td> <td>102</td> <td>49,528</td> <td>1638</td> <td>11.0</td> <td>16.1</td> <td>4495.1</td> <td>-200</td> <td>14</td> <td></td> </tr> <tr> <td colspan="2" rowspan="1">矮巨星</td> <td>冥王星</td> <td>0.0146</td> <td>2,370</td> <td>2095</td> <td>0.7</td> <td>153.3</td> <td>5906.4</td> <td>-225</td> <td>5</td> <td>2006年降格,但 <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">尚存爭議</a>.</td> </tr> </tbody> <tfoot> </tfoot> </table> </body></html>

關(guān)鍵詞:練習,學習

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉