5.1  添加指向其它Web页面的链接

  无论目标Web页面是否属于你网站的一部分,还是属于其它网站,都可以添加指向其它Web页面的链接。只需要用<a>就可以添加链接。

 <a href="www.baidu.com">百度搜索</a>

  <a>最常用的属性是href——它是hypertext reference的简写。href属性的功能是告诉浏览器从哪里能找都你链接的信息。其它属性还包括name、title、tabindex、accesskey和target属性。

  位于<a>与</a>标记之间的文本就是呈现在Web页面中供你单击的文本。在绝大多数情况下,该文本会以一种与周围文本不同的颜色突出显示,并且带有下划线。为了确定href属性的值,要考虑所使用的链接类型。基本的链接类型包括以下两种:

  • 绝对链接
  • 相对链接

5.1.1  绝对链接

  绝对链接就是那些包含完整路径名的链接。在绝大多数情况下,当链接到那些不属于你自己网站的页面或站点时,应该使用绝对链接。绝对链接必须在开头包含所使用的协议(http://)。

 <a href="http://www.yahoo.com">Visit Yahoo!</a>

5.1.2  相对链接

  之所以称为相对链接,是因为它并不包含所指向页面的完整路径名。在你的网站中,当想从一个页面链接到另外一个页面时,相对链接是最常用的链接形式。

 <a href="contact.html">Contact Me</a>

  如果要在当前文件夹之下的另外一个文件夹中查找某个文件,则href属性的值将如下显示:

 <a href="wendy/contact.html">Contact Me</a>

  如果链接到当前文件夹之上的父文件夹中的某个文件,就可以为目录树之上的每一层目录添加一个“../”。

 <a href="../../contact">Contact Me</a>

  告诉浏览器返回网站根(root或base)目录的另外一种方法,是简单的使用一条斜杠,例如:

 <a href="/index.html">Return Home</a>

5.2  添加指向同一Web页面之中其它部分的链接

  当链接到一个页面时,因为每一个页面都有一个文件名,所以浏览器知道查找哪一个页面文件。但有时我们可能想链接到网站某个页面中的一部分文件。要链接到Web页面中的一部分,首先必须为该部分定义一个名称。

5.2.1  创建锚点

  锚点就是页面中的一个位置,它定义一个特殊的名称,以便随后链接到该锚点。如果没有首先对部分的锚点进行命名,就无法链接到锚点。

 <a name="section1">Section1</a>

  在上面的例子中,位于<a>与</a>之间的文本就是显示在Web页面上的文本,它将该锚点标识为“Section1”。如果不喜欢为锚点定义一个标签,也可以使之保持空白。

 <a name="top"></a>

5.2.2  链接到锚点

  要创建锚点,只需要使用a元素和name属性。要定义到锚点的链接,只需将一个井号(#)和锚点名称作为href属性的值即可。

 <a href="#top">Return to th top of the page</a>

  如果想创建一个指向另一个Web页面中某个特定部分的链接(即不在当前页面之中),就可以使用目标页面的文件名和锚点名称,在二者中间用一个井号(#)隔开。

 <a href="index.html#intro">View Introduction</a>

5.3  定义链接的样式

  在样式表中,实际上通过a元素来定义链接的颜色。

 <style type="text/css">
body{background-color:white;}
a:link{color:blue;} /*a:link定义链接到被单击之前的颜色*/
a:visited{color:purple;} /*a:visited定义链接到被单击之后和被访问过之后的颜色*/
a:hover{color:orange;} /*a:hover定义当鼠标悬停于链接之上时,链接呈现的颜色*/
a:active{color:red;} /*a:active定义链接正在被单击时的颜色*/
</style>

5.3.1  默认的链接颜色
  在绝大多数情况下,浏览器默认的链接颜色是蓝色,默认的已访问链接的颜色是紫色,默认的活动链接的颜色是红色。

  虽然默认的链接颜色并不是硬性要求,而且并不总是可能采取默认颜色,但对于未访问链接、已访问链接、活动链接,采用默认的蓝色、紫色和红色是很好的。

5.3.2  其它的链接样式

  text-decoration属性用于定义在链接的文本之下是否显示下划线。默认情况下,所有链接的文本之下都会显示一条下划线,下划线的颜色与链接文本的颜色相同。

  使用text-decoration属性,可以将其设置为overline(上划线)、line-through(中划线)和none(不带划线)。

 <style type="text/css">
body{background-color:white;}
a:link{
color:blue;
font-weight:bold;
}
a:visited{
color:purple;
}
a:hover{
color:orange;
font-weight:bold;
text-decoration:none;
background-color:yellow;
}
a:active{
color:red;
font-weight:bold;
}
</style>

5.4  定制链接:设置Tab键顺序、键盘快捷方式和目标窗口

  通过设置标题、Tab键顺序、键盘快捷方式和目标窗口,还可以进一步定制链接。
5.4.1  标题

  当在某个链接(或在任何其它页面元素)中添加title属性时,实际上是为浏览器和用户提供提供了关于当前内容更为详细的一个说明——对于链接而言,就是对链接所指向目标文件的进一步说明。对于如何显示title属性的内容,不同浏览器之间可能会有所差异,但在绝大多数情况下,当把鼠标指针放在该链接上时,title属性指定的文本将以“工具提示”的方式显示出来。

 <a href="www.baidu.com" title="visit baidu">百度一下</a>

  W3C鼓励尽可能多地在页面上添加title属性,包括图像、指向段落和文本部分的链接等,因为title属性有助于样式表的开发和提高页面的可用性。

5.4.2  Tab键顺序

  使用tabindex属性,可以以手动方式定制Web页面上链接或表单字段元素的Tab键顺序。

 <!-- 当用户使用tab键在Web页面中导航时,tabindex属性的值定义了链接被选中的顺序  -->
<a href="http://www.w3school.com.cn/" tabindex="1">W3School</a><br />
<a href="http://www.google.com/" tabindex="2">Google</a><br />
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

5.4.3  键盘快捷方式

  使用accesskey属性可以为Web页面中的链接设置相应的快捷方式。

 <!--  accesskey属性的值定义了用户应该输入的键盘快捷键 -->
<a href="http://www.w3school.com.cn/" tabindex="1" accesskey="1">W3School</a>(Alt-1)<br />
<a href="http://www.google.com/" tabindex="2" accesskey="2">Google</a>(Alt-2)<br />
<a href="http://www.microsoft.com/" tabindex="3" accesskey="3">Microsoft</a>(Alt-3)

5.4.4  目标窗口
  使用target属性来指定加载链接的浏览器窗口。

  target属性常用的值:

  • _blank:在一个新的、未命名的浏览器窗口中打开链接
  • _self:在当前使用的同一个浏览器窗口中打开链接
 <a href="http://www.w3school.com.cn/" target="_blank">W3School</a>
 <a href="http://www.w3school.com.cn/" target="_self">W3School</a>

[HTML/HTML5]5 使用链接的更多相关文章

  1. 2017-11-29 HTML5样式、链接和表格

    HTML5样式.链接和表格HTML5列表<ol> 有序列表<ul> 无序列表<li> 列表项 <dl> 列表<dt> 列表项<dd&g ...

  2. Html5 设置菱形链接菜单

    本例是采用html5+css3.0设置的菜单链接.其中主要用到了以下几个方面: 1. CSS3.0中的2D变换,如:旋转transform:rotate(45deg);移动,放大transform:r ...

  3. 移动设备wap手机网页html5通过特殊链接:打电话,发短信,发邮件详细教程

    如果需要在移动浏览器中实现拨打电话,调用sms发短信,发送email等功能,移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法. 采用url href链接的方式,实现在Safa ...

  4. HTML5样式、链接和表格

    -------------------siwuxie095 HTML5 样式 1.标签 <style> 标签:样式定义 <link> 标签:资源引用 2.属性 rel:用于指定 ...

  5. HTML5网页制作教程:HTML5块级链接

    网页制作Webjx文章简介:Web 标准中处处充满了打脸行为,这条规则现在已经失效了!在那篇文章发布一个月后,HTML5doctor 发表了 “Block-level” links in HTML5, ...

  6. HTML5,超级链接

    <a href="http://h123.date">预算控制系统</a><<br><a href="2.html&quo ...

  7. HTML5开发手机项目—个人总结

    让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/>   1)html上加 ...

  8. HTML5中a标签的锚点使用

    前几天有个用户问我关于在线手册功能里的锚点问题.因为他通过代码发现,在编辑手册内容时,锚点的设置是通过id选择器来制定的,而不是带有name属性的a标签.其实这是HTML5和HTML4(XHTML)等 ...

  9. HTML5开发手机项目-个人总结(转)

    让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/>    1)html上 ...

随机推荐

  1. OA工作流规格--转

    工作流是整个OA系统的核心,也是BPM的核心,工作流到 底需要实现哪些功能,本文就此以用户的需求为蓝本进行阐述.工作流表面看起来是很简单的,无非是一个表单模板,一个流程定义,然后起草后根据设定的流程一 ...

  2. ClickOnce添加自定义prerequisite

    参考http://www.codeproject.com/Articles/15863/Add-your-own-custom-prerequisite-to-quot-ClickOnce 下载地址: ...

  3. python 编辑xml中namespace问题中出现很多ns0

    原始文件:

  4. 使用JDBC实现Oracle用户认证

    两天时间写的小品,以前的J2EE环境基本使用框架.现在使用JDBC配合Oracle存储过程模拟了一下用户注册和用户认证. 一.添加必须的jar包 需要JDBC连接Oracle的包和shiro-core ...

  5. SSH框架整合项目(一)——搭建平台和引入依赖

    前言:这个项目是我的第一个实验性项目,最初的立意是制作一个个性化的BBS.由于BBS能够综合大部分功能,因此作为练手的项目来说再好不过.从写第一行代码到完成测试版大概历时2周.中间遇到了不少以前在学习 ...

  6. 【转载】免费台北.edu教育邮箱及Office 365 Education申请

    免费的邮箱非常多,但是免费的.edu教育邮箱却很少有.记得上次不少人寻找.edu教育邮箱还是因为国外一家VPS商家推出的专门针对学生的优惠包,使用.edu教育邮箱就可以获得50美元的优惠,真的很划算. ...

  7. jquey知识点整理

    jquery选择器 1.元素选择器: $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro&q ...

  8. 虚拟机中Linux系统盘空间不足

    虚拟机中Linux系统盘在使用过程中, 出现空间不足的提示. 使用命令du --max-depth=1 -h 查看Home目录下各个文件占用空间, 发现是./cache(隐藏文件)占用很大空间.进入c ...

  9. 文件打包,下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件

    总结:                                                          使用PHP下载文件的操作需要给出四个header(),可以参考我的另一篇博文: ...

  10. python之SQLAlchemy

    ORM介绍 orm英文全称object relational mapping,就是对象映射关系程序,简单来说我们类似python这种面向对象的程序来说一切皆对象,但是我们使用的数据库却都是关系型的,为 ...