整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一节我们说了相对路径、绝对路径，今天我们说下内部链接的使用。什么是内部链接呢？内部链接就是网站内部页面之间的相互链接，直接链接内部页面名称即可，比如: <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" href="http://www.mycodes.net
"><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小时内与您取得联系。
