超链接标记及属性

来自CloudWiki
跳转至： 导航， 搜索
  • 超级链接在本质上属于一个网页的一部分，它允许我们从当前页面跳转到其他页面。
  • 各个网页链接在一起后，才能真正构成一个网站。

超链接是什么

  • 所谓的超链接是指从一个网页能跳向另一个目标的连接关系
  • 这个目标可以是另一个网页，也可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

超链接的分类

内部链接

  • 同一网站域名下页面的互相链接
  • W4-1.png

外部链接

  • 链接到绝对URL，例如某个网址，或者某个其他类型的文件
  • W4-2.png

锚点链接

  • 链接到同一页面的不同部分
  • Web5-1.png

超链接标记

  • 超链接标记<a></a>是一个行内标记，
  • 位置点标记<a>，将文本或图形标识为链接
  • 属性href，用于指定要链接的文件
  • 具体格式
<a href=“”>链接热点文字或图片</a>
  • 标记<a>属于行内标记，本身不具备换行功能，可使用display:block实现换行。
  • 例子：W3C编辑器
<html>
   <body>
     <p><a href="http://www.w3school.com.cn/" >Visit W3School!</a></p>
     <p>当你点击该链接时，浏览器会跳转到一个新网页。</p>
   </body>
 </html>

href 属性

href：指定链接地址（URL路径）

href属性常用链接地址：

  • 完整url形式，常用于本网站与其他网站之间的链接。例如http://www.sict.edu.cn
  • 相对路径：用于本网站内部各个页面或图片之间的链接
    1. 用于链接当前页面自己，也可以表示设置了一个空链接
  • 链接到外部文档、图像或多媒体文件，例如某个压缩包
  • 同一页面的某一部分------锚点
  • Email地址

target 属性

  • 使用 Target 属性，你可以定义被链接的文档在何处显示。
  • 可用值：
_self：链接页面在当前窗口打开
_blank：链接页面在新窗口打开
_top（选学）：链接页面在顶层框架打开
_parent（选学）：链接页面在父框架打开

<html>
   <body>
     <p><a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a></p>
     <p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开</p>
   </body>
 </html>

超链接的具体类型

外部链接

<a href="http://www.sict.edu.cn">山东商职学院</a>

<html>
  <body>
    <p><a href="http://www.baidu.com" target="_blank">百度</a></p>
    <p><a href="http://www.qq.com" target="_blank">腾讯</a></p>
    <p><a href="http://www.taobao.com" target="_blank">淘宝</a></p>
    <p><a href="http://www.163.com" target="_blank">网易</a></p>
    <p><a href="http://www.sohu.com" target="_blank">搜狐</a></p>
  </body> 
 </html>

内部链接

  • 本网站内部各个页面之间的链接,如
<a href="intro.html">创始人介绍</a>
  • 例子：新建5个最简单的html页面，1.html,2.html,3.html,4.html,5.html

然后在同一目录下新建网页index.html,代码如下： 

<html>
  <body>
    <p><a href="1.html" target="_blank">项目介绍</a></p>
    <p><a href="2.html" target="_blank">商业模式</a></p>
    <p><a href="3.html" target="_blank">主营业务</a></p>
    <p><a href="4.html" target="_blank">团队分工</a></p>
    <p><a href="5.html" target="_blank">财务预估</a></p>
  </body> 
 </html>

锚点链接

  • 用于跳转到同一文档内的指定位置或其它文档的指定位置
  • 设置锚点链接的两个步骤：
  1. 使用id属性设置锚点标记
    1. <a id= “marker”>主题名称</a>
  2. 使用href属性设置链接
    1. <a href= “#marker”>热点文字</a> 
 <html>

<body>

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

若要链接到其它文档的指定位置，定义了锚点之后， 

<a href= “文档URL#marker”>热点文字</a>

Email链接

<html>
<body>

<p>
这是邮件链接：
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>

<p>
<b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

</body>
</html>

文件链接

能够在href属性中链接mp3、txt、rar、ppt等文件。

对于浏览器不支持打开的文件，一般会将它下载。

综合应用

【例h4-9.html】被链接页面h4-9.html与主页面h4-10.html保存在同一文件夹目录下、被链接图像文件dog1.jpg保存在当前目录的下一级文件夹images中。
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
     <title>超链接页面</title>
  </head>
  <body>
     <p> <a href="http://www.163.com" target="_blank" title="单击这里链接163网站">163网站</a></p>
     <p> <a href="h3-17.html" target="_blank">学习页面</a></p>
     <p> <a href="images/cat1.jpg" target="_blank"><img src="images/cat1.jpg" title="单击通过页面查看原图像" width="30" height="35" border="0" /></a></p>
  </body>
取自“http://www.openbrains.net/mediawiki/index.php?title=超链接标记及属性&oldid=14755”