李佳
學(xué)號(hào)19011210599
轉(zhuǎn)載至本文鏈接：https://blog.csdn.net/JockLiu/article/details/98247346,版權(quán)聲明：本文為博主原創(chuàng)文章，遵循?CC 4.0 BY-SA?版權(quán)協(xié)議骗绕。
【嵌牛導(dǎo)讀】本文介紹了HTML的相關(guān)語(yǔ)法以及一些網(wǎng)頁(yè)頁(yè)面的編程實(shí)現(xiàn)
【嵌牛鼻子】超鏈接
【嵌牛提問(wèn)】如何進(jìn)行頁(yè)面跳轉(zhuǎn)酬土？
【嵌牛正文】超鏈接的介紹
超鏈接在本質(zhì)上屬于網(wǎng)頁(yè)一部分撤缴，它是一種允許我們同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行連接的元素。各個(gè)網(wǎng)頁(yè)鏈接在一起后微宝，才能真正構(gòu)成一個(gè)網(wǎng)站蟋软。
所謂超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)連接關(guān)系嗽桩，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)岳守，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片涤躲，一個(gè)電子郵件地址棺耍，一個(gè)文件，甚至是一個(gè)應(yīng)用程序种樱。而在一個(gè)網(wǎng)頁(yè)中用來(lái)超鏈接的對(duì)象蒙袍，可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接文字或圖片后嫩挤，鏈接目標(biāo)將顯示在瀏覽器上害幅，并且根據(jù)目標(biāo)類(lèi)型來(lái)打開(kāi)或運(yùn)行岂昭。
a標(biāo)簽
向網(wǎng)頁(yè)中添加a標(biāo)簽是實(shí)現(xiàn)超鏈接的重要方式以现，但不是唯一方式
<a href="content.html" target="top">第一節(jié)</a>
以上代碼實(shí)現(xiàn)了一個(gè)超鏈接，指向另一個(gè)HTML網(wǎng)頁(yè)约啊。點(diǎn)擊后可以訪問(wèn)連接指向的網(wǎng)頁(yè)邑遏。
a標(biāo)簽的重要屬性
在超鏈接中最主要的屬性有三個(gè)，分別是：href恰矩、title记盒、target。其他一些屬性會(huì)在后面陸續(xù)出現(xiàn)外傅。
href
href屬性用于指向一個(gè)目標(biāo)纪吮，該屬性是a標(biāo)簽必不可少的，少了它超鏈接將不能跳轉(zhuǎn)萎胰。href屬性的值是一個(gè)鏈接碾盟，也就是網(wǎng)頁(yè)或資源的地址。
鏈接可以是一個(gè)完整的地址技竟，也可以是相對(duì)路徑冰肴。對(duì)于外部連接通常使用完整的鏈接，鏈接必須包含所使用的協(xié)議（HTTP，HTTPS等）嚼沿，否則將是一個(gè)無(wú)效鏈接估盘。
title
title屬性可以為超鏈接設(shè)置一些介紹信息瓷患。當(dāng)鼠標(biāo)移到設(shè)置了title屬性的超鏈接上時(shí)骡尽，會(huì)顯示title屬性值的內(nèi)容。
<a href="content.html" title="進(jìn)入目錄" target="top">第一節(jié)</a>
?target
target屬性用于控制鏈接網(wǎng)頁(yè)打開(kāi)的位置（相對(duì)于當(dāng)前網(wǎng)頁(yè)）擅编。默認(rèn)情況下攀细，是刷新當(dāng)前網(wǎng)頁(yè)所在的窗口，加載新的頁(yè)面爱态。
實(shí)例分析：
創(chuàng)建一個(gè)index類(lèi)谭贪，用于展示left和right連接內(nèi)的內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr>
<td><iframe name="left" src="left.html"></iframe></td>
<td><iframe name="right" src="right.html"></iframe></td>
</tr>
</table>
</body>
</html>
接下來(lái)，在left和right類(lèi)里創(chuàng)建超鏈接锦担，連接content類(lèi)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="content.html" title="進(jìn)入目錄" target="top">雞你太美</a>
<a href="right.html" title="進(jìn)入目錄" target="right">蔡徐坤</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="content.html" target="content">蔡徐坤</a>
</body>
</html>
剩下最后的展示類(lèi)了俭识，我們要展示content.html的內(nèi)容，具體的內(nèi)容可以自行設(shè)定洞渔，這里我弄了一個(gè)超鏈接展示其他頁(yè)面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
content
<a href="index3.html">練習(xí)生</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表單一定要以表單域<form></form>開(kāi)始和結(jié)束
也就是寫(xiě)表單一般一定要有表單域
除非你不想提交表單
-->
<form enctype="multipart/form-data" method="post" action="index2.html">
<div>
<!--
? ? <label>
? ? <input>標(biāo)簽
? ? -->
<label for="name">姓名:</label>
<input id="name" name="name" type="text" value="蔡徐坤" maxlength="6"/>
</div>
<div>
<!--
? ? <label>
? ? <input>標(biāo)簽
? ? -->
<label for="pwd">密碼:</label>
<input id="pwd" name="pwd" type="password" value="7112" maxlength="13"/>
</div>
<div>
<!--
? ? <label>
? ? <input>標(biāo)簽
? ? -->
<label for="sex">性別:</label>
<input id="sex" name="sex" type="radio" value="男" />男
<input id="sex" name="sex" type="radio" value="女" checked="true" />女
</div>
<div>
<!--
? ? <label>
? ? <input>標(biāo)簽
? ? -->
<label for="fav">喜歡:</label>
<input id="fav" name="fav" type="checkbox" value="男" checked="true"/>唱
<input id="fav" name="fav" type="checkbox" value="女" checked="true"/>跳
<input id="fav" name="fav" type="checkbox" value="男" checked="true"/>rap
<input id="fav" name="fav" type="checkbox" value="男" checked="true"/>籃球
</div>
<div>
<!--如果要上傳文件套媚，使用type=“file”的屬性值，但是普通表單只能上傳字符數(shù)據(jù)
如果要上傳文件磁椒，必須在<form></form>里面添加enctype="multipart/form-data"
-->
<label for="photo">上傳:</label>
<input id="photo" name="photo" type="file" />
</div>
<div>
<label for="color">顏色:</label>
<input id="color" name="color" type="color" />
</div>
<div>
<label for="date">日期:</label>
<input id="date" name="date" type="date" />
</div>
<!--<div>
<label for="date">文章:</label>
<textarea id="article" name="article" rows="3" contenteditable="40"></textarea>
</div>-->
<div>
<label for="date">年份:</label>
<select id="year" name="year">
<option>1998</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
</select>
<label for="date">多選年份:</label>
<select id="year" name="year">
<option>1998</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option selected="true">2019</option>
</select>
</div>
<div>
<input id="imag" name="imag" type="image" src="img/3.jpg"/>
<input id="imag" name="imag" type="image" src="img/3.jpg"/>
<input id="imag" name="imag" type="image" src="img/3.jpg"/>
</div>
<div>
<input id="imag" name="imag" type="image" src="img/3.jpg"/>
<input id="imag" name="imag" type="image" src="img/3.jpg"/>
<input id="imag" name="imag" type="image" src="img/3.jpg"/>
</div>
<div>
<input id="submit" name="submit" type="submit" />
<input id="reset" name="reset" type="reset" />
</div>
</form>
</body>
</html>
測(cè)試：
————————————————
版權(quán)聲明：本文為CSDN博主「Jock.Liu」的原創(chuàng)文章堤瘤，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明浆熔。
原文鏈接：https://blog.csdn.net/JockLiu/article/details/98247346
