位置:电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
第1章 HTML 入门
第2章 HTML 基础标签
第3章 HTML 高级标签
第4章 HTML 表单标签
第5章 HTML 媒体和视频(Videos)
当前阅读教程:HTML入门到精通 > 2.8 HTML 链接 a标签
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 2.7.3 HTML 引文, 引用, 及标签定义 下一篇: 2.9 HTML 图像标签

基础用法

<a> 标签定义超链接,用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性,它指定链接的目标。

链接的 HTML 代码很简单。它类似这样:

<a href="url">链接文本</a>

href 属性描述了链接的目标。示例

小白教程网www.2d5.net

代码如下:

<a href="https://www.taobao.com">访问淘宝网站</a>

上面这行代码显示为:访问淘宝网站

点击这个超链接会把用户带到淘宝网站的首页。

提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

在所有浏览器中,链接的默认外观如下:

n  未被访问的链接带有下划线而且是蓝色的

n  已被访问的链接带有下划线而且是紫色的

n  活动链接带有下划线而且是红色的

所有主流浏览器都支持 <a> 标签。

提示和注释

提示:如果没有使用 href 属性,则不能使用 hreflangmediareltarget 以及 type 属性。

提示:通常在当前浏览器窗口中显示被链接页面,除非规定了其他 target

提示:请使用 CSS 来改变链接的样式。

HTML 4.01 HTML5之间的差异

HTML 4.01 中,<a> 标签既可以是超链接,也可以是锚。在 HTML5 中,<a> 标签是超链接,但是假如没有 href 属性,它仅仅是超链接的一个占位符。

HTML5 有一些新的属性,同时不再支持一些 HTML 4.01 的属性。

全局属性

<a> 标签支持 HTML 的全局属性。

事件属性

<a> 标签支持 HTML 的事件属性。

a标签的属性

New表示HTML5 中的新属性。

属性

描述

download

filename

指定下载链接(href 属性必须在   <a> 标签中指定)

href

URL

规定链接的目标 URL。

hreflang

language_code

规定目标 URL 的基准语言。仅在 href 属性存在时使用。

media

media_query

规定目标 URL 的媒介类型。默认值:all。仅在 href 属性存在时使用。

name

section_name

HTML5 不支持。规定锚的名称。

rel

alternate
  author
  bookmark
  help
  license
  next
  nofollow
  noreferrer
  prefetch
  prev
  search
  tag

规定当前文档小白教程网与目标 URL 之间的关系。仅在   href 属性存在时使用。

rev

text

HTML5 不支持。规定目标 URL 与当前文档小白教程网之间的关系。

shape

default
  rect
  circle
  poly

HTML5 不支持。规定链接的形状。

target

_blank
  _parent
  _self
  _top
  framename

规定在何处打开目标 URL。仅在 href 属性存在时使用。

_blank    在新窗口中打开被链接文档小白教程网

_self     默认。在相同的框架中打开被链接文档小白教程网

_parent   在父框架集中打开被链接文档小白教程网

_top       在整个窗口中打开被链接文档小白教程网

framename  在指定的框架中打开被链接文档小白教程网。Iframe

type

MIME_type

规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。
  注:MIME = Multipurpose Internet Mail Extensions。

HTML 链接- id 属性

id属性可用于创建在一个HTML文档小白教程网书签标记。

提示:书签是不以任何特殊的方式显示,在HTML文档小白教程网中是不显示的,所以对于读者来说是隐藏的,在HTML文档小白教程网中插入ID,示例

小白教程网www.2d5.net

代码如下:

<a id="tips">有用的提示部分</a>

HTML文档小白教程网中创建一个链接到"有用的提示部分(id="tips""

<a href="#tips">访问有用的提示部分</a>

或者,从另一个页面创建一个链接到"有用的提示部分(id="tips""

<a href="https://www.taobao.com/html-links.html#tips">访问有用的提示部分</a>

示例

小白教程网www.2d5.net

1:简单的链接

在所有浏览器中,链接的默认外观如下:      

n  未被访问的链接带有下划线而且是蓝色的

n  已被访问的链接带有下划线而且是紫色的

n  活动链接带有下划线而且是红色的

下面我们来看下在网页中的效果,示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 链接:黄菊华老师</title>
</head>
 
<body>
     <a href="http://www.taobao.com">这是一个链接,链接到淘宝</a>
</body>
    
</html>

效果如图2-18、图2-19、图2-20

image.png

示例

小白教程网www.2d5.net

2:CSS如何去除链接下划线

示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 链接 a标签 CSS如何去除链接下划线</title>
     <style>
             a{
                      text-decoration: none; /*除去下划线*/
                      color: red;
             }
     </style>
</head>
<body>
     <a href="0.html" style="text-decoration: none;">链接到本地文件</a><br><br>
     <a href="0.html" target="_blank">链接到本地文件</a><br><br>
     <a href="http://www.baidu.com" target="_blank">链接百度</a>
</body>
</html>

效果如图2-21

image.png

示例

小白教程网www.2d5.net

3:图片链接的使用

示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 链接 a标签 图片链接的使</title>
</head>
<body>
     <a href="tupian/cp01.jpg"><img src="tupian/cp01.jpg" width="50" /></a><br>
     <a href="tupian/cp02.jpg" target="_blank">
             <img src="tupian/cp01.jpg" width="50" />
     </a>
</body>
</html>

效果如图2-22

image.png

示例

小白教程网www.2d5.net

4:跳转到同一个页面的不同位置

示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 链接 a标签 跳转到同一个页面的不同位置</title>
</head>
 
<body>
     <a id="dingbu">顶部</a>
     <H1><a href="#dibu">跳转到底部</a></h1>
     <p>浙江杭州黄菊华老师1</p><br><br><br>
     <p>浙江杭州黄菊华老师2</p><br><br><br>
     <p>浙江杭州黄菊华老师3</p><br><br><br>
     <p>浙江杭州黄菊华老师4</p><br><br><br>
     <p>浙江杭州黄菊华老师5</p><br><br><br>
     <p>浙江杭州黄菊华老师6</p><br><br><br>
     <p>浙江杭州黄菊华老师7</p><br><br><br>
     <p>浙江杭州黄菊华老师8</p><br><br><br>
     <p>浙江杭州黄菊华老师9</p><br><br><br>
     <p>浙江杭州黄菊华老师10</p><br><br><br>
     <p>浙江杭州黄菊华老师11</p><br><br><br>
     <p>浙江杭州黄菊华老师12</p><br><br><br>
     <a  id="dibu" >底部</a> | <a href="#dingbu">回到顶部</a>
</body>
</html>

效果如图2-23

image.png


示例

小白教程网www.2d5.net

5: download下载链接属性

示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 链接 a标签 图片链接的使</title>
</head>
 
<body>
    
     <a href="tupian/cp01.jpg" download="tupian/cp01.jpg">
             <img src="tupian/cp01.jpg" width="50" />
     </a><br>
    
     <a href="tupian/cp02.jpg" target="_blank" download="tupian/cp02.jpg">
             <img src="tupian/cp02.jpg" width="50" />
     </a><br>
    
     <a  href="#" download="0.rar">
             <img src="tupian/cp03.jpg" width="50" />
     </a>    
    
</body>
</html>

效果如图2-24

image.png

上一篇: 2.7.3 HTML 引文, 引用, 及标签定义 下一篇: 2.9 HTML 图像标签
毕业设计网             广告联系QQ:45157718(微信同号)