HTML七种超链接用法

1、文本链接：

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

2、图像链接：

<a href="http://www.baidu.com"><img src="图片路径" alt="Baidu Logo"<br /><!--图片路径：相对路径../      绝对路径http://-->
</a>

3、描点链接：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h2 id="main">首页</h2><a href="#html_base">跳转到HTML基础</a><br /><a href="#css_base">跳转到CSS基础</a><br /><a href="#javascript_base">跳转到JavaScript基础</a><br /><pre><!--<pre>预定格式文本，与<p>标签不同，<pre>会保留空格和换行符</p>--></pre><h5 id="html_base">HTML基础</h5><a href="#main">回到顶部</a><pre></pre><h5 id="css_base">CSS基础</h5><a href="#main">回到顶部</a><pre></pre><h5 id="javascript_base">JavaScript基础</h5><a href="#main">回到顶部</a></body>
</html>

4、图像热区链接：

shape属性	解释	cords属性	解释
circle	圆形	x,y,z	(x,y)圆心坐标,r半径
rect	矩形	x1,y1;x2,y2	(x1,y1)左上角坐标 (x2,y2)右下角坐标
poly	多边形	x1,y1;x2,y2;x3,y3;x4,y4;...	(x1,y1)(x2,y2)(x3,y3)(x4,y4)... 多边形各个点坐标

可以通过电脑自带的画图工具确定位置

在画图工具中，鼠标放到图像上，会显示当前位置，这个就是坐标

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a href="https://www.baidu.com/"><!--点击图像的某小块就会跳转到百度--><map name="image_link"><area shape="circle" coords="100,100,30" href="" alt=""/><area shape="rect" coords="90,20,150,80" href="" alt=""/><area shape="poly" coords="200,30,300,10,280,70,260,100,220,50" href="" alt=""/></map>       <img usemap="#image_link" src="图片路径" alt="Baidu Logo"/><!--还可以width，height设置图像的宽高--></a></body>
</html>

5、E-mail链接：

<a href="mailto:someone@example.com">联系我们</a>

6、JavaScript链接：

<a href="javascript:alert('Hello World!');">点击弹窗</a>

7、空链接：

<a href="">这是一个空链接</a><br />
<a href="#">这是一个空链接</a><br />
<a href="javascript:void(0)">这是一个空链接</a><br />

HTML七种超链接用法相关推荐

挖掘经典：几乎被人遗忘的HTML七种用法 (转)
转来学习http://www.cnblogs.com/netWild/archive/2010/11/30/1892418.html 当今的WEB领域,新概念.新技术不断涌现 -- WEB2.0.AJ ...
java中String的七种用法
转载:http://www.open-open.com/home/space.php?uid=2869&do=blog&id=8764 这一两天在学习string的一些用法,记得在来北 ...
苹果电脑Mac中delete键的七种用法
Windows键盘是有Backspace 和 Delete键的, 虽然苹果电脑Mac只有Delete键,但是这并不影响mac的效率.在macOS下有一些Delete键的组合用法, 灵活运用这些技巧,往 ...
硬件设计:元器件--二极管常用的七种用法
硬件设计:元器件--二极管常用的七种用法参考资料:https://wenku.baidu.com/view/5c3d8a5c804d2b160b4ec01d.html 二极管除单向导电特性外,还有许 ...
Gridview数据控件的七种字段类型
9.8 数据控件的七种字段类型(Fields Type)的应用 GridView共支持七种字段类型,字段原本应该叫"Column"比较恰当,但ASP.NET 2.0却采用另一个名 ...
【多线程】学习记录七种主线程等待子线程结束之后在执行的方法
最近遇到一个问题需要主线程等待所有的子线程结束,才能开始执行,统计所有的子线程执行结果,返回,网上翻阅各种资料,最后记录一下,找到七种方案第一种:while循环对于"等待所有的子线程结束 ...
揭密Oracle之七种武器
揭密Oracle之七种武器第一章搭建测试环境 vage 揭密Oracle之七种武器第一章搭建测试环境 (揭密Oracle之七种武器第二章地址:DTrace语法:跟踪物理IO http:/ ...
js去除字符串数字前面的0_JS基础复习-七种基本数据类型
前言:JS必须死记的七种数据类型 string number boolean null undefined symbol(比较特殊,先不做讨论) object 一.string-字符串 1.定义:字符 ...
java 静态内部类线程安全问题_单例模式的七种写法, 面试题：线程安全的单例模式...
http://cantellow.iteye.com/blog/838473 http://meizhi.iteye.com/blog/537563 第一种(懒汉,线程不安全): Java代码 pu ...

HTML七种超链接用法

HTML七种超链接用法相关推荐

最新文章

热门文章