6 HTML5的超链接标记

最新推荐文章于 2021-11-27 14:09:35 发布

weixin_34256074

最新推荐文章于 2021-11-27 14:09:35 发布

阅读量273

点赞数 1

原文链接：https://my.oschina.net/iOSliuhui/blog/844029

版权

2019独角兽企业重金招聘Python工程师标准>>>

HTML5的超链接

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

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

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

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

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

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

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

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

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

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

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

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

三 点击时，文字颜色显示红色，有下划线

实际效果截图
代码

<!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的站外网页链接
代码运行效果

输入图片说明

代码

<!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="https://www.oschina.net" target="_top">开源中国</a></td>	
        <td>https://www.oschina.net</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="mailto:1054539558@qq.com?body=加油学习，争取一月搞定H5">写信给不孤独的美食家</a>
   
</body>

</html>

转载于:https://my.oschina.net/iOSliuhui/blog/844029