整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一節我們說了相對路徑、絕對路徑，今天我們說下內部鏈接的使用。什么是內部鏈接呢？內部鏈接就是網站內部頁面之間的相互鏈接，直接鏈接內部頁面名稱即可，比如: <a href="index.html">首頁名稱</a>
我們寫一個例子:
效果如下:
點擊內部鏈接后，顯示內部鏈接內容
這里默認是當前頁面打開，如果加上 target="_blank"就是新打開一個頁面
內部鏈接不需要加上http或者https的前綴。
如果開發時還不知道要跳轉到哪個鏈接，輸入一個 "#"后即可，相當于一個空鏈接，但同時又占了一個位置。看下示例:
我們點擊空鏈接后，雖然頁面沒動，但是可以看下鏈接地址變了
file:///E:/LiePinCode/html/html_6.html#
接著我們看下下載鏈接，如果href里面地址是一個文件或者是壓縮包，會下載這個文件。我們來試下
但是點擊后發現文件沒有下載，這是怎么回事呢？
先換個文件類型試試，比如 .exe或者zip 試了之后發現都不行，難道又是瀏覽器的問題？那換谷歌瀏覽器吧
果然，谷歌瀏覽器就可以了
可以看到zip文件下載成功了，估計還是跟火狐瀏覽器的安全性有關系。我們再試下剛才的xmind文件是否可以下載成功吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210822_九</title>
</head>
<body>
<h3>下載一個文件</h3>
<a href="E:\獵聘\測試用例201207需求.zip">文件下載</a>
<br/>
<a href="E:\獵聘\測試用例\PC端誰看過我功能下線.xmind">試下之前的用例是否可以</a>
</body>
</html>
原來是可以的，說明就是瀏覽器的問題，那接下來我們就默認使用谷歌瀏覽器來操作和演示了。在網頁中的各種網頁元素，都可以添加超鏈接，比如音樂、視頻、文本、圖像、表格等。我們再給圖片加一張超鏈接
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210822_九</title>
</head>
<body>
<h2>圖片超鏈接</h2>
<a href="HTML5.jpeg">圖片超鏈接</a>
<h3>下載一個文件</h3>
<a href="E:\獵聘\測試用例201207需求.zip">文件下載</a>
<br/>
<a href="E:\獵聘\測試用例\PC端誰看過我功能下線.xmind">試下之前的用例是否可以</a>
</body>
</html>
再看另外一種效果:
點擊圖片后跳轉到鏈接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210822_九</title>
</head>
<body>
<h2>圖片超鏈接</h2>
<a href="https://www.baidu.com"><img src="HTML5.jpeg"></a>
<h3>下載一個文件</h3>
<a href="E:\獵聘\測試用例201207需求.zip">文件下載</a>
<br/>
<a href="E:\獵聘\測試用例\PC端誰看過我功能下線.xmind">試下之前的用例是否可以</a>
</body>
</html>
代碼如上
然后我們說下錨點鏈接: 點擊錨點鏈接，可以快速定位到某個位置。
我們來舉個例子試下:
點擊標題三，跳轉到標簽三或者段落三
看下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210822_九</title>
</head>
<body>
<h1>標題一</h1>
<h2>標題二</h2><br>
<a href="#life">標題三(有錨點)</a><br>
<h4>標題四</h4>
<p>段落一</p>
1.今天天氣特別好<br>
1.今天天氣特別好<br>
1.今天天氣特別好<br>
1.今天天氣特別好<br>
1.今天天氣特別好<br>
1.今天天氣特別好<br>
1.今天天氣特別好<br>
1.今天天氣特別好<br>
1.今天天氣特別好<br>
<p>段落二</p>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
2.今天下雨了<br>
<h5>錨點要跳轉到的標簽</h5>
<p>段落三</p>
3.生活有點甜，錨點會來這一段，相信我<br>
3.生活有點甜，錨點會來這一段，相信我<br>
3.生活有點甜，錨點會來這一段，相信我<br>
3.生活有點甜，錨點會來這一段，相信我<br>
3.生活有點甜，錨點會來這一段，相信我<br>
3.生活有點甜，錨點會來這一段，相信我<br>
3.生活有點甜，錨點會來這一段，相信我<br>
3.生活有點甜，錨點會來這一段，相信我<br>
3.生活有點甜，錨點會來這一段，相信我<br>
<p id="life">段落四</p>
4.你懂個p
</body>
</html>
好的，今天先到這里
信
51rgb
網頁自動跳轉頁面的代碼在很多時候都非常的有用，下面的是兩個簡單的例子。僅供參考。
方案一，用<meta>里直接寫刷新語句：
<html>
<head>
<meta http-equiv="Content-Language" content="zh-CN">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta http-equiv="refresh" content="5;url=http://www.51rgb.com">
<title>html網頁自動跳轉代碼--西農大網站</title>
</head>
<body>
測試：html網頁自動跳轉代碼<br/>
你可以在這里寫下你想的一切東西！<br />
如：西北農林科技大學是一所985、211院校。<br />
</body></html>
方案二，用javascript腳本來跳轉
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>正在進入西農大網站</title>
</head>
<body>
<form name=loading>
<p align=center> <font color="#0066ff" size="2">正在進入，請稍等</font><font color="#0066ff" size="2" face="Arial">...</font>
<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">
<inputtype=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">
<script>
var bar=0
var line="||"
var amount="||"
count
function count{
bar=bar+2
amount=amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count",100);}
else
{window.location=http://www.51rgb.com;}
}</script>
</p>
</form><p align="center">
測試：html網頁自動跳轉代碼<br/>
你可以在這里寫下你想的一切東西！<br />
如：西北農林科技大學是一所985、211院校。<br /><br />
如果您的瀏覽器不支持跳轉,<astyle="text-decoration: none" ><font color="#FF0000">請點這里</font></a>.</p>
</body>
</html>
↓↓↓
.什么是文本和圖像鏈接！
瀏覽網頁時，會看到一些帶下劃線的文字。，將光標移到文字上時，光標將變成手形，單擊會打開一個網頁，這樣的鏈接就是文本鏈接。
在網頁中瀏覽內容時，若將光標移到圖像上，光標會變成手形，單擊會打開一個網頁，這樣的鏈接就是圖像鏈接。
文本鏈接
圖像鏈接
2.創建鏈接的方法！
使用<a>標簽可以實現網頁超鏈接，但<a>標簽需要定義錨來指定鏈接目標。錨（anchor）有兩種用法，介紹如下：
（1）通過使用href屬性，創建指向另外一個文檔的鏈接（或超鏈接）；
（2）通過使用name和id屬性，創建一個文檔內部的書簽（也就是說，可以創建指向文檔片段的鏈接）。
使用href屬性的代碼格式如下：
<a href="鏈接地址">創建鏈接的文本或圖片</a>
使用name屬性的代碼格式如下：
<a name="value">創建鏈接的文本或圖片</a>
name屬性用于指定錨（anchor）的名稱，可以創建（大型）文檔內的書簽。
使用id屬性的代碼格式如下：
<a id="value">創建鏈接的文本或圖片</a>
3.創建網頁內的文本鏈接！
創建網頁內的文本鏈接主要使用href屬性來實現，如在網頁中做一些知名網站的友情鏈接，具體操作方法如下。
（1）編寫代碼如下圖所示：
（2）在瀏覽器中打開文件，預覽效果如下所示，可以看到帶有超鏈接的文本呈現淺紫色。
小提示：鏈接地址前的“http:// ”不可省略，否則會出現錯誤提示。
4.創建網站內的圖像鏈接！
使用<a>標簽為圖片添加鏈接的代碼格式如下：
<a href="鏈接目標l"><img src="圖片"/></a>
下面是一個簡單的圖片鏈接案例。
（1）編寫代碼如下圖所示：
（2）在瀏覽器中打開文件，預覽效果如下所示。光標放在圖片上呈現抓手形，單擊后可跳轉到指定網頁。
瀏覽器截圖
小提示：文件中的圖片要和當前網頁文件在同一個目錄下，鏈接的網頁沒有加“http:// ”，默認為當前網頁所在目錄。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
