关于<a>标签的基本用法和特殊用法

来源：互联网发布：华驰网络编辑：程序博客网时间：2024/05/17 18:48

前几天温习HTML看到<a>标签时发现它除了本白只会的直接使用之外还有其他有意思的操作。(手动滑稽)当然这篇东西主要是为了记录温习成果，或是写给跟我一样的小白看的，没有什么太深度的内容。

说好了是温习，那么把最基础的东西也记一下吧，一方面加深印象，另一方面是为了方便回顾时能快速回忆起来。

<a>标签的基本打开方式

基本语法：

<a href="URL" target="" >链接描述</a>

这是一句最基本的<a>标签语句，它表示创建一个指向某个URL的链接，其文本内容为“链接描述”，其中，href为必须属性，target 为可选属性（它表示了新窗口的打开方式）。举个实际的例子：

<a href="http://baike.baidu.com" >百度百科</a>

这就创建了一个指向百度百科首页的文本链接，当你单击这个对象时，它会默认从当前窗口跳转到百度百科首页。
另外，<a>标签也可以与<img>标签混用，以创建一个图片链接，如下所示：

<a href="http://zhidao.baidu.com" target="_blank"><img src="img/sacreCoeur.jpg" alt="圣心大教堂" width="360"/></a>

这句代码的含义是，创建一个指向百度知道首页的图片连接，其整张图片就是一个链接。图片是在工程目录下的 img 文件夹内名为 sacreCoeur 的 jpg 格式图片，width属性表示将图片等比例缩放至宽度为360。当你单击这个对象时，它会在新窗口中打开页面。

注意： target 的取值有五种，分别是 _blank、_self、_parent、_top，以及 framename。其中 _self 表示链接对象将在本页面中打开，其为 target 属性的默认值。_blank 表示对象将在新的窗口中打开。而 _parent 和 _top 很少用到，framename 在后面会讲解。

<a>标签的特殊打开方式

1.将链接当作书签使用以链接到同页面内的不同位置

<p>三段式议论文</p><a href="#paragraph3">跳转到第三段</a><a href="#paragraph4">跳转到第四段</a><p>第一段：讲述一些主要内容，一般是文本中心思想。</p><p>第二段：通常展开叙述或者对中心论点展开分论点的横向或纵向论证。</p><p><a id="paragraph3"/>第三段：通常是继续进行分论点的论证，加强说服力。</p><p><a name="paragraph4"/>第四段：进行最后一个分论点的论述。</p><p>第五段：进行收尾，总结论点。</p>

以上代码创建了一个指向同页面第四段的文本链接，记住要用 id 或 name 属性对锚点命名，同时在链接到的锚点名称前添加 # 符号。当你单击它时，它会帮助你自动跳转到你事先预设的锚点位置，另外，请确保你的网页足够长，否则你将无法看到它的效果。

2.在同一张图的不同位置分别创建链接

<object data="img/pineappleRice.jpg" alt="菠萝炒饭" width="360" usemap="#pineappleRice"><map name="pineappleRice">   <a href="http://baike.baidu.com" shape="rect" coords="10,10,50,100">百度百科</a>   <a href="http://zhidao.baidu.com" shape="circle" coords="180,300,50">百度知道</a></map></object>/* 注意：目前只有火狐浏览器和 Opera 浏览器支持该功能。 *//* 出于兼容性考虑，建议不要使用该功能。 */

以上代码在 pineappleRice.jpg 内的不同地方分别创建了不同的超链接，其中 shape 属性为触发区域的形状，rect 为矩形，circle 为圆形，default 表示默认（全部区域），poly 表示多边形。

coords 属性表示区域的坐标：

当形状为矩形时，coords 有四个参数，分别代表起始点横坐标、纵坐标、矩形长度、矩形高度；

当形状为圆形时，coords 有三个参数，分别代表圆心横坐标、圆心纵坐标、圆周半径；

当形状为多边形时，coords有偶数个参数，奇数位参数为各点的横坐标，偶数位参数为各点的纵坐标；

最后再重申一遍：注意：目前只有火狐浏览器和 Opera 浏览器支持该功能，所以出于兼容性考虑，建议不要使用该功能。

3.利用<a>标签发送电子邮件

<a href="mailto:XXXXXXXXX@XXX.com,XXXXXXXXX@XX.com?subject=先生您好&body=尊敬的先生，您好：">发送邮件</a>

以上代码创建了一个邮件按钮，当用户单击这个按钮时会呼出电子邮件工具以编辑电子邮件并发送到指定邮箱中。mailto 属性为必需属性，表示邮件将发送的目标邮箱，可以一次性填写若干个，不同邮箱之间用逗号隔开。 subject 属性为可选属性，表示邮件的预设标题。body 属性为可选属性，表示邮件的预设内容。另外，如果Mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的每一个都以“&”开头。

4.利用<a>标签发送短信（例如短信验证码等）

<a href="sms:10086,10010?body=cxll">发送短信</a>

以上代码创建了一个短信发送按钮，当用户单击这个按钮时，会分别向10086和10010发送内容为 cxll (查询流量)的短信。

5.利用 framname 将新窗口展示在其他框架内

1.首先，创建一个新的页面，输入以下代码：

<frameset cols="100,*">  <frame src="toc.html">  <frame src="pref.html" name="view_frame"></frameset>

以上页面创建了一个框架，这个框架的名称为 view_frame，预设展示页面为 pref.html ，它指向 toc.html 页面。

2.其次，创建一个名称为 toc.html 的页面，输入以下代码：

<h3>XXX小说</h3><ul>  <li><a href="pref.html" target="view_frame">前言</a></li>  <li><a href="chapter1.html" target="view_frame">第一章</a></li>  <li><a href="chapter2.html" target="view_frame">第二章</a></li>  <li><a href="chapter3.html" target="view_frame">第三章</a></li></ul>

以上代码创建了多个将页面输出到框架内的超链接，当用户单击对应的超链接时，页面内容会显示在指定的框架内。

如何去掉<a>标签的下划线

用过<a>标签的人都知道，它的默认样式里是有下划线的，这在某些设置了页面布局风格（CSS）的网页里会非常影响整体美观，那么，如何去掉<a>标签的下划线呢？

① 在<a>标签内注明style="text-decoration:none;"，如下所示：

<a href="http://dict.youdao.com" style="text-decoration:none;" >跳转到有道词典</a>

注意：以上代码消去下划线的 style 只对本条超链接生效。

② 在<head>头部注明 style 样式 a{ text-decoration:none; }，如下所示：

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css"> a{text-decoration:none;}</style></head><body><a href="http://dict.youdao.com" >跳转到有道词典</a></body>

注意：以上代码消去下划线的 style 只对本页面的超链接生效。

③ 创建外部CSS样式并将其链接到网站（属于CSS的内容，在此暂不赘述）

————————————————————————————————————————————————————————————
注意：想要消去单一伪类的下划线，代码可以这样写：

a:link {color:#FF0000;text-decoration:none;}/* 未访问的链接的样式 */a:visited {color:#00FF00;text-decoration:none;}  /* 已访问的链接的样式 */a:hover {color:#FF00FF;text-decoration:none;}    /* 鼠标移动到链接上的样式 */a:active {color:#0000FF;text-decoration:none;}   /* 选定的链接的样式 */

注意：在上述伪类声明中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后，否则声明无效。

阅读全文

0 0