-
讓品牌有溫度、有情感
專注品牌策劃15年
-
當(dāng)前位置：首頁 > 創(chuàng)意學(xué)院 > 技術(shù) > 專題列表 > 正文
1、使用HTML制作網(wǎng)頁，要求3個(gè)網(wǎng)頁互通，每個(gè)網(wǎng)頁有圖有文字有超鏈接！
2、html5網(wǎng)頁設(shè)計(jì)期末作業(yè)，要求是一個(gè)網(wǎng)站（至少4個(gè)網(wǎng)頁）
html網(wǎng)頁完整代碼作業(yè)（html網(wǎng)頁完整代碼作業(yè)百度云）
發(fā)布時(shí)間：2023-04-21 23:22:52
稿源：
創(chuàng)意嶺 閱讀：
142
大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于html網(wǎng)頁完整代碼作業(yè)的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。
開始之前先推薦一個(gè)非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話答疑等等
只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端
官網(wǎng)：https://ai.de1919.com。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解相關(guān)業(yè)務(wù)請(qǐng)撥打電話175-8598-2043，或添加微信：1454722008
本文目錄:
頁完整代碼作業(yè)（html網(wǎng)頁完整代碼作業(yè)百度云）.jpg)
一、使用HTML制作網(wǎng)頁，要求3個(gè)網(wǎng)頁互通，每個(gè)網(wǎng)頁有圖有文字有超鏈接！
說先，做一個(gè)普通的網(wǎng)頁，并且在網(wǎng)頁中插入一張圖片。
代碼入下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
<body>
<img src="./test.jpg">
</body>
</html>
2
那么，如何添加超鏈接呢？這就要用到<a>標(biāo)簽來完成。
那么，如何給圖片添加超鏈接呢？只要把<img>標(biāo)簽放在<a>和</a>之間就可以了。
而a標(biāo)簽又有一個(gè)參數(shù)：href.該參數(shù)用來指定鏈接的地址，假設(shè)我們要鏈接到百度。那么更改代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
<body>
<a href="http://www.baidu.com"><img src="./test.jpg"></a>
</body>
</html>
3
保存后點(diǎn)擊該網(wǎng)頁。之后，點(diǎn)擊網(wǎng)頁上圖片?？矗晒B接到了百度。
4
上訴步驟，有一個(gè)要點(diǎn)！
href的值不能使www.baidu.com。否則會(huì)出錯(cuò)。必須要寫絕對(duì)地址;http://www.baidu.com才可以!
END
二.熱區(qū)鏈接
上訴時(shí)最普通的鏈接方式，其實(shí)要有一種更高級(jí)的連接方法。
在HTML中，可以把圖片劃分為多個(gè)熱點(diǎn)區(qū)域，然后讓每一個(gè)熱點(diǎn)區(qū)域分別鏈接到不同的地方！
厲害吧！
首先看代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
</head>
<body>
<img src="./test.jpg" usemap="#mymap">
<map name="mymap">
<area shape="rect" coords="0,0,20,20" href="http://www.baidu.com" title="梅園">
<area shape="rect" coords="30,30,20,20" href="http://mail.163.com" target="_blank" title="a園">
</map>
</body>
</html>
下面來分析代碼：
1）<img src="./test.jpg" usemap="#mymap">
意思是，在該圖片中，使用名為mymap的映射圖像名稱。
2）<map name="mymap">
意思是，定義熱區(qū)圖像，名稱為mymap
3)<area shape="rect" coords="0,0,20,20" href="http://www.baidu.com" title="梅園">
意思是，對(duì)map的一個(gè)熱區(qū)點(diǎn)進(jìn)行定義。rect代表矩形，coords代表熱區(qū)圖標(biāo)，href為需要連接的地址。
OK，剩下的語法都沒什么好說的了。
接著，打開網(wǎng)頁，可以發(fā)現(xiàn)，當(dāng)把鼠標(biāo)放在左上角的時(shí)候，鼠標(biāo)會(huì)變成“手”的形狀。點(diǎn)擊，變會(huì)進(jìn)入相應(yīng)的鏈接。
當(dāng)然，下圖標(biāo)的并不太準(zhǔn)確，但大概是這么個(gè)位置，供參考。
5
這里再補(bǔ)充一點(diǎn)：
shape的取值可以有多個(gè)：
1）rect：剛用了，代表矩形，他后面的坐標(biāo)為4個(gè)，前兩個(gè)為坐上坐標(biāo)（x，y），后兩個(gè)為右下坐標(biāo)
2）circle：圓形的坐標(biāo)。后面的坐標(biāo)為3個(gè)。前兩個(gè)為圓形的坐標(biāo)，最后一個(gè)為半徑。
當(dāng)然，還有許多其他的，就不列舉了，所謂邊越多，則坐標(biāo)越多，不難理解吧。
二、html5網(wǎng)頁設(shè)計(jì)期末作業(yè)，要求是一個(gè)網(wǎng)站（至少4個(gè)網(wǎng)頁）
按F12或者右鍵→檢查 可查看網(wǎng)頁源代碼，左上角元素下面的圖標(biāo)，可讓你看具體區(qū)域的代碼，右面那一列是CSS樣式，你找?guī)讉€(gè)簡(jiǎn)單的網(wǎng)頁把代碼復(fù)制過來慢慢改唄
三、急求一份HTML5+ CSS3制作的網(wǎng)頁制作作業(yè)，至少5頁。。。
我有，旅游類，美食、家鄉(xiāng)、學(xué)校、藍(lán)球、書法、個(gè)人主頁.....
都有5頁及以上、有JS有也有無JS的。要的找我。
四、用代碼寫如下表格，HTML？
具體的代碼可以參考下面這個(gè)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 500px;
background-color: blue;
margin: 100px auto;
}
</style>
</head>
<body>
</body>
第一個(gè)
<table border="1" width="300">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
第二個(gè)
<table border="1" width="300">
<tr>
<td colspan="3">合并第一行的三列</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
第三個(gè)
<table border="1" width="300">
<tr>
<td rowspan="2">合并第一列的兩行</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</html>
每一個(gè)table分別對(duì)應(yīng)圖片上的要求，可以直接使用
以上就是關(guān)于html網(wǎng)頁完整代碼作業(yè)相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。
推薦閱讀：
html個(gè)人簡(jiǎn)介網(wǎng)頁代碼（html簡(jiǎn)單網(wǎng)頁代碼）
百度的網(wǎng)頁地址（百度的網(wǎng)頁地址http）
景觀設(shè)計(jì)紅色文化旅游景區(qū)（紅色景觀設(shè)計(jì)案例）
贛公網(wǎng)安備 50019002502384號(hào)
