HTML链接 -- a 标签,指定位置的链接,邮件链接,图像链接

HTML链接 -- a 标签


链接是超级链接的缩写,英文是hyperlink。

HTML中的H就是hypertext的缩写,超文本的意思。

超文本链接语言(网页)的精髓就是链接,通过链接才可以把世界各地的网页链到一起,成为互联网。

a标签

a 标签 -- 代表HTML链接
  • a标签是成对出现的,以<a>开始, </a>结束
  • 引用网址:http://www.dreamdu.com/xhtml/tag_a/
  • 属性.
    • Common -- 一般属性
    • accesskey -- 代表一个链接的快捷键访问方式
    • charset -- 指定了链接到的页面所使用的编码方式,比如UTF-8
    • coords -- 使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标
    • href -- 代表一个链接源(就是链接到什么地方)
    • hreflang -- 指出了链接到的页面所使用的语言编码
    • rel -- 代表文档与链接到的内容(href所指的内容)的关系
    • rev -- 代表文档与链接到的内容(href所指的内容)的关系
    • shape -- 使用图像地图的时候可以使用shape指定链接区域
    • tabindex -- 代表使用"tab"键,遍历链接的顺序
    • target -- 用来指出哪个窗口或框架应该被此链接打开
    • title -- 代表链接的附加提示信息
    • type -- 代表链接的MIME类型
  • a,是anchor(锚)的第一个字母

链接语法

<a href="url">显示的文字</a>

链接a标签说明

  • a-- 是链接的标签
  • href-- 是链接的属性,告诉浏览器链接到的网址(URI)
  • url-- 是我们要链接到的网页或者文件。url可以是一个绝对的网页,如: http://www.dreamdu.com/xhtml/.或者是一个相对网页
  • 显示的文字-- 是我们想要显示的文字,浏览者点击'显示的文字'就会连接到url页面.

示例

<a href="http://www.dreamdu.com/css/">点击链接到--梦之都CSS教程</a>
<a href="/xhtml/">点击链接到--梦之都XHTML教程</a>

所谓指定位置的链接,就是直接链接到文档中一个定义好的位置。

在HTML文档的顶部给一个标签加一个id属性,如<h2 id="top">顶部</h2>

再在HTML文档的底部加一个链接<a href="#top">回到顶部</a>,只要点击这个标签就可以直接转到具有id="top"的标签的位置(也就是顶部).

也可以直接链接到其它页面的指定位置.

HTML 指定位置的链接通常使用在文章较长,一屏无法显示的情况.

引用网址:http://www.dreamdu.com/xhtml/attribute_a_id/

示例

<h2 id="top">页面上部</h2>
<a href="#bottom">链接到页面下部</a>

<a href="#top">链接到页面上部</a>
<h2 id="bottom">页面下部</h2>

<a href="http://www.dreamdu.com/javascript/object_math/#syntax">JS Math函数语法</a>

HTML邮件链接

HTML邮件链接 -- 可以直接打开默认的邮件系统
  • HTML邮件链接使用了mailto语法
  • 引用网址:http://www.dreamdu.com/xhtml/attribute_a_mail/

示例

<a href="mailto:dreamdu@dreamdu.com">给我写邮件</a>

HTML图像链接

可以为一个图像指定链接.HTML图像通常使用img标签,下一节,我们将介绍img标签.

引用网址:http://www.dreamdu.com/xhtml/attribute_a_img/

示例

<a href="http://www.baidu.com/" title="baidu">
<img src="http://www.baidu.com/img/logo.gif" />
</a>

<a href="http://www.google.com/" title="google">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
</a>

HTML图像链接

可以为一个图像指定链接.HTML图像通常使用img标签,下一节,我们将介绍img标签.

引用网址:http://www.dreamdu.com/xhtml/attribute_a_img/

示例

<a href="http://www.baidu.com/" title="baidu">
<img src="http://www.baidu.com/img/logo.gif" />
</a>

<a href="http://www.google.com/" title="google">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
</a>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值