HTML链接

在网页上添加链接,一般语法:<a href="link-source">description</a>

其中,使用anchor(锚)标签,简写a;

之后键入属性href,表示超文本引用;

双引号内是链接,包括内部链接(链接到自己网页内,如联系方式网页等)外部链接(链接到网络上的其他网站,如网易、CSDN)下载链接(链接到文件,如pdf格式文件、mp3格式音乐等)锚链接或占位符链接(链接到某个网页的特定区域)

举例:



主要代码:

在index.html中,

		<div id="top"></div>
		
		
		<a href="contact.html">Contact Us</a>
		<!...内部链接,当前网页index与网页contact位于同一目录下,因此直接输入文件名contact.html...>
		
		<a href="prices/freshwater-fish-prices.html">Price List</a>
		<!...内部链接,网页freshwater-fish-prices在prices文件夹下,因此相对网页index输入相对路径...>
		
		<a href="http://www.163.com" target="_blank">Link to Netease Web</a>
		<!...外部链接,需要输入"http://",表示浏览器与服务器交流方式,使用http对该链接发出请求...>
		<!...若希望以新窗口或新标签形式打开外部链接,添加目标属性'target="_blank"'...>
		
		<a href="downloads/all-prices.pdf">Download our full price list</a>
		<!...下载链接...>
		
		
		<a href="#top">To Top</a>
		<!...锚链接,属性值先输入#表示链接到本网页,再输入相应id;在网页相应位置创建div标签,即可通过点击To Top直接到达本网页相应位置...>

在contact.html中,

		<a href="../index.html">Back To Index</a>
		<!...在网页freshwater-fish-prices,回到网页index,因此相对freshwater-fish-prices输入相对路径,其中”../“表示返回上一级目录..>

全部代码:

index.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />          
		<meta name="keywords" content="fish, smelly, trout, shark">
		<meta name="description" content="We shell the smelliest fish online, guranteed!">
		<title>my first web page</title>  >
		<link rel="stylesheet" type="text/css" href="css/main.css"> 
	</head>
	
	<body>
		<div id="top"></div>
		<img src="img/fishing.jpg" alt="Mr Green's Fish Emporium" width="100%">
		<h1>Welcome to my smelly fish shop</h1>
		<p>We sell the smelliest fish on the planet</p>
		
		<a href="contact.html">Contact Us</a>
		<!...内部链接,当前网页index与网页contact位于同一目录下,因此直接输入文件名contact.html...>
		<a href="prices/freshwater-fish-prices.html">Price List</a>
		<!...内部链接,网页freshwater-fish-prices在prices文件夹下,因此相对网页index输入相对路径...>
		<a href="http://www.163.com" target="_blank">Link to Netease Web</a>
		<!...外部链接,需要输入"http://",表示浏览器与服务器交流方式,使用http对该链接发出请求...>
		<!...若希望以新窗口或新标签形式打开外部链接,添加目标属性'target="_blank"'...>
		<a href="downloads/all-prices.pdf">Download our full price list</a>
		<!...下载链接...>
		
		<h2>Types of Fish We Sell</h2>
		<h3>Freshwater Fish</h3>
		<p>We are experts in catching many types of freshwater fish...</p>
		<h3>Saltwater Fish</h3>
		<p>We are experts in catching many types of Saltwater fish...</p>
		
		<h2>About Us</h2>
		<p>Mr Green's Smelly Fish Emporium prides itself on catching, preparing and delivering
		the smelliest fish right to your doorstep. Whether you like to cook them, feed them to
		your cat, or just hide them in your unruly neighbours porch, Mr Green has it covered!</p>
		
		<h2>Contact Us</h2>
		<p>You can contact Mr Green in various ways...</p>
		<h3>By phone</h3>
		<p>222-222-Fish</p>
		<h3>By Email</h3>
		<p>twcyq@mrgreenfish.com</p>
		<h3>By carrier pidgeon</h3>
		<p>To do this, order your pidgeon at www.mrgreenfish.com</p>
		
		<a href="#top">To Top</a>
		<!...锚链接,属性值先输入#表示链接到本网页,再输入相应id;在网页相应位置创建div标签,即可通过点击To Top直接到达本网页相应位置...>
	</body>
</html>

contact.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />          
		<meta name="keywords" content="fish, smelly, trout, shark">
		<meta name="description" content="We shell the smelliest fish online, guranteed!">
		<title>my first web page</title>  
		<link rel="stylesheet" type="text/css" href="css/main.css"> 
	</head>
	
	<body>
		<h1>Freshwater Fish Prices</h1>
		
		<a href="../index.html">Back To Index</a>
		<!...在网页freshwater-fish-prices,回到网页index,因此相对freshwater-fish-prices输入相对路径,其中”../“表示返回上一级目录..>
		
	</body>
</html>


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值