HTML5的超链接

所谓的“超链接(hyperlink)”指的是在HTML文件中的文字或者图片添加链接标记，用于跳转。

链接标记是<a href=""></a>,文字和图片都可以加上超链接。超链接的语法是：<a href="index.thm" target="_top">。

href属性设置的是该链接要跳转的网址或者文件路径。

target属性设置链接有如下几种。

target="_top",链接的目标会在浏览器窗口打开，如果有框架的话，网页中所有的框架也会被删除。

target="_blank"，链接的目标网页会在新的窗口打开。

target="_parent"，表示连接的目标会在当前的窗口打开，如果在框架网页中，则会在上一层框架打开目标网页。

target="_self"，表示的目标会在当前运行的窗口中打开，这是默认的。

target="_窗口名称"，连接的目标会在指定的名称的窗口或者框架中打开。

超链接在默认状态下，它的文字颜色会随着状态不同而有所变化，如下：

一还未浏览的，字体显示蓝色，有下划线

二 已经浏览的，字体显示紫色，有下划线

三 点击时，文字颜色显示红色，有下划线
  • 实际效果截图

html5超链接span HTML5超链接语法_html5超链接span

  • 代码
<!doctype html>

<html>

<head>
<title> 我的博客首页 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="zh-CN">
</head>

<body>
	<p><b>HTML超链接</b></p>
    <a href="www.baidu.com">  点击返回首页 </a>
</body>

</html>


<!doctype html>

<html>

<head>
<title> 我的博客首页 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="zh-CN">
</head>

<body>
	<p><b>HTML超链接</b></p>

    <a href="www.baidu.com"> <img src="1.png" border="1"> </a>
	

   
</body>

</html>
  • 2 HTML的站外网页链接
  • 代码运行效果

html5超链接span HTML5超链接语法_html5超链接span_02

  • 代码
<!doctype html>

<html>

<head>
<title> 我的博客首页 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="zh-CN">
</head>

<body>
	<p><b>我的收藏网址</b></p>

    <table border="1" cellspacing="2">

    <tr>
    	<td>网站名称</td>
    	<td>网址</td>
    </tr>

    <tr>
        <td><a href="" target="_top">开源中国</a></td>	
        <td></td>
    </tr>

    <tr>
        <td><a href="http://www.cocoachina.com" target="_top">Cocoachina</a></td>	
        <td>http://www.cocoachina.com</td>
    </tr>

    <tr>
        <td><a href="https://github.com" target="_top">Github</a></td>	
        <td>https://github.com</td>
    </tr>
    </table>
   
</body>

</html>
  • 链接到E-mail 邮箱
语法：<a href="mailto:这里填你的邮箱账号">写信给不孤独的美食家</a>
  • 设置E-mail的主题
语法:语法：<a href="mailto:这里填你的邮箱账号？Subject=博客反馈">写信给不孤独的美食家</a>
  • 设置邮件的抄送
语法：<a href="mailto:这里填你的邮箱账号？cc=@1213123mail.com">写信给不孤独的美食家</a>
  • 设置密件抄送
语法:语法：<a href="mailto:这里填你的邮箱账号？bcc=@1213123mail.com">写信给不孤独的美食家</a>
  • 设置邮件正文内容
语法:语法：<a href="mailto:这里填你的邮箱账号？body=加油学习，争取一月搞定H5" >写信给不孤独的美食家</a>
  • 实际效果
  • 代码
<!doctype html>

<html>

<head>
<title> 我的博客首页 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html lang="zh-CN">
</head>

<body>
	<p><b>我的收藏网址</b></p>

    <a href=/a>
   
</body>

</html>