HTML5超链接的创建方法_html5

超链接是网页中最常用的元素，每个网页通过超链接关联在一起，构成一个完整的网站。超链接可以是网页中的任何元素，只有通过超链接定义的对象，才能再单击后进行跳转。

一、创建超链接

1、用<a></a>标签环绕需要被链接的对象。

1>、基本语法格式：<a href="跳转目标" target="目标窗口弹出方式">文本或图像</a>

i、href：用于指定链接目标的url（网址）地址，当<a>标签应用href属性时，他就具有了超链接功能。

ii、target：用于指定链接打开方式，_self为原窗口打开，_blank为新窗口打开。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
	<a href="http://www.zcool.com.cn/" target="_self">站酷</a> target="_self"原窗口打开<br/>
	<a href="http://www.baidu.com/" target="_blank">百度</a> target="_blank"新窗口打开<br/>
</body>
</html>

ps:1、超链接标签本身带有默认显示样式。

2、暂时没有链接目标时，href的属性值可定义为“#”，意为空链接。

2>、图像超链接出现边框解决办法：

创建图像超链接时，在某些浏览中，图像会自动添加边框效果，影响页面美观。去掉边框最直接的方法是将边框设置为0，具体代码如下：

二、锚点链接

通过创建锚点链接，用户能够直接跳到指定位置的内容，提高信息检索速度。

1、基本语法格式：<a href="#id名">内容</a>

2、href="#id名"，只要单击创建了超链接的对象就会跳到指定位置。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锚点链接</title>
</head>
<body>
	<ul>
		<li><a href="#one">李四光</a></li>
		<li><a href="#two">袁隆平</a></li>
		<li><a href="#three">屠呦呦</a></li>
		<li><a href="#four">南仁东</a></li>
		<li><a href="#five">孙家栋</a></li>
	</ul>
	<h3 id="one">李四光</h3>
	<p>李四光1889年出生于湖北黄冈，是中国地质力学的创立者、现代地球科学和地质工作的奠基人。</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<h3 id="two">袁隆平</h3>
	<p>袁隆平1930年出生于北京，被誉为“世界杂交水稻之父”。发明了“三系法”籼型杂交水稻，“两系法”杂交水稻。</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<h3 id="three">屠呦呦</h3>
	<p>屠呦呦1930年出生于浙江宁波，是中国第一位获得诺贝尔科学奖的本土科学家，也是第一位获得诺贝尔医学奖的华人科学家。</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<h3 id="four">南仁东</h3>
	<p>南仁东1945年出生于吉林辽源，被誉为中国“天眼之父”。担任fast工程首席科学家兼总工程师。</p>
	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	<h3 id="five">孙家栋</h3>
	<p>孙家栋1929年出生于辽宁瓦房店，被誉为中国航天的“大总师”，“中国卫星之父”。</p>
</body>
</html>

三、链接伪类控制超链接

1、超链接的四种不同状态：

超链接标签<a>的伪类	描述
a:link{css样式规则；}	超链接默认样式
a:visited{css样式规则；}	超链接被访问之后的样式
a:hover{css样式规则；}	鼠标指针经过、悬停时超链接的样式
a:active{css样式规则；}	鼠标单击不放时超链接的样式

ps：4种伪类顺序也需按上表排列，否则定义样式可能不起作用。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>链接伪类选择器</title>
	<style type="text/css">
		a{margin-right: :20px;}/*设置右边距为20px*/
		a:link,a:visited{
			color:#000;        /*设置默认和被访问之后的颜色为黑色*/
			text-decoration:none;   /*设置<a>自带下划线效果为无*/
		}
		a:hover{
			color:#093;       /*默认样式颜色为绿色*/
			text-decoration: underline; /*设置鼠标指针悬停时显示下划线*/
		}
		a:active{color:#fc0;}    /*设置鼠标单击不放时颜色为黄色*/
	</style>
</head>
<body>
	<a href="#">公司首页</a>
	<a href="#">公司简介</a>
	<a href="#">产品介绍</a>
	<a href="#">联系我们</a>
</body>
</html>

到此这篇关于html5超链接的创建的文章就介绍到这了,更多相关html5超链接的创建内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！