您的位置：首页 > Web前端 > HTML

HTML链接

2016-05-05 13:17 429 查看

在网页上添加链接，一般语法：<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航