html基础超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style type="text/css">
			a:link
			{
				font: 14px "microsoft yahei";
				color: blue;
				text-decoration: none;
			}
			a:hover
			{
				color: yellow;
				text-decoration:underline;
			}
			a:active
			{
				color: red;
				text-decoration:overline;
			}
			a:visited
			{
				color: black;
			}
		</style>
		
		
	</head>
	<body>
		<a id="top"></a>
		横线
		<hr size="1" width="200" color="aqua">	
		竖线
		<hr size="200" width="1" color="blue">	
		
		<a href="http://www.baidu.com" style="text-decoration: none;" title="百度" target=" _self">百度一下， 你就知道</a>
		
		<a href="https://dnf.qq.com/">
			<img src="img/1.jpg" style="width: 500px; height: 500px;" alt="">
		</a>
		
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		
		<a href="#top">回到顶部</a>
		<!-- 
		属性
		href:超链接的链接地址
		title:鼠标移动到超链接上显示的文字信息
		target:跳转链接地址的方式 默认是_self当前页面跳转, _black:打开新页面跳转
		style： text-decoration：none 可以取消超链接的下划线
				a:link 超链接伪类 设置超链接原本样式
				a:hover 设置超链接鼠标移入样式
				a:active 设置超链接鼠标点击激活样式
				a:visited 设置超链接鼠标点击过后完毕样式
				
		超链接的内部可以放<img / >图片标签 当点击内部图片的时候跳转超链接设置的地址
		
		超链接还可以作为锚点再内部页面进行跳转：
		example：
		top层的<a href="top"></a>
		bottom层的<a href="#top"></a>
		
		锚点:
		当点击bottom层的超链接时自身页面会跳转到top层的超链接位置,底部的地址写法需要以#加上目标链接的href内容或者是目标超链接的id值.
		
		-->
	</body>
</html>
丷釷枫丷
发布了60 篇原创文章 · 获赞 10 · 访问量 2万+
私信关注
猜你喜欢
