当前阅读教程:HTML入门到精通 > 2.8 HTML 链接 a标签 | ||||||||||||||||||||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | ||||||||||||||||||||||||||||||||||
上一篇: 2.7.3 HTML 引文, 引用, 及标签定义 | 下一篇: 2.9 HTML 图像标签 | |||||||||||||||||||||||||||||||||
基础用法<a> 标签定义超链接,用于从一个页面链接到另一个页面。 <a> 元素最重要的属性是 href 属性,它指定链接的目标。 链接的 HTML 代码很简单。它类似这样: <a href="url">链接文本</a> href 属性描述了链接的目标。示例 代码如下: <a href="https://www.taobao.com">访问淘宝网站</a> 上面这行代码显示为:访问淘宝网站 点击这个超链接会把用户带到淘宝网站的首页。 提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。 在所有浏览器中,链接的默认外观如下: n 未被访问的链接带有下划线而且是蓝色的 n 已被访问的链接带有下划线而且是紫色的 n 活动链接带有下划线而且是红色的 所有主流浏览器都支持 <a> 标签。 提示和注释 提示:如果没有使用 href 属性,则不能使用 hreflang、media、rel、target 以及 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 中的新属性。
HTML 链接- id 属性id属性可用于创建在一个HTML文档 书签标记。 提示:书签是不以任何特殊的方式显示,在HTML文档HTML 中是不显示的,所以对于读者来说是隐藏的,在文档ID 中插入,示例 代码如下: <a id="tips">有用的提示部分</a> 在HTML文档" 中创建一个链接到有用的提示部分(id="tips")": <a href="#tips">访问有用的提示部分</a> 或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")": <a href="https://www.taobao.com/html-links.html#tips">访问有用的提示部分</a> 示例1:简单的链接在所有浏览器中,链接的默认外观如下: n 未被访问的链接带有下划线而且是蓝色的 n 已被访问的链接带有下划线而且是紫色的 n 活动链接带有下划线而且是红色的 下面我们来看下在网页中的效果,示例 代码如下: <!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。 示例2:CSS如何去除链接下划线示例 代码如下: <!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。 示例3:图片链接的使用示例 代码如下: <!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。 示例4:跳转到同一个页面的不同位置示例 代码如下: <!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。 示例5: download下载链接属性示例 代码如下: <!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。 |
||||||||||||||||||||||||||||||||||
上一篇: 2.7.3 HTML 引文, 引用, 及标签定义 | 下一篇: 2.9 HTML 图像标签 |