html链接

1.单独使用
<a href="http://baidu.com">Baidu</a>
2.与列表结合

<body>
		<p>Movie Reviews:
			<ul>
				<li><a href="http://www.empireonline.com">Empire</a></li>
				<li><a href="http://www.metacritic.com">Metacritic</a></li>
				<li><a href="http://www.rottentomatoes.com">Rotten Tomatoes</a></li>
				<li><a href="http://www.variety.com">Variety</a></li>
			</ul>
		</p>
	</body>

3.email链接
<a href=:mailto:jon@example.org">Email Jon</a>
4.新窗口打开链接。使用target
<a href="http://www.imdb.com" target="_blank">Internet Movie Database</a>

target="_self" 原页面打开
5.使用id配合href实现网页内定位

<body>
		<h1 id="top">Film-Making Terms</h1>
		<a href="#arc_shot">Arc Shot</a><br />
		<a href="#interlude">Interlude</a><br />
		<a href="#prologue">Prologue</a><br /><br />
		<h2 id="arc_shot">Arc Shot</h2>
		<p>A shot in which the subject is photographed by an encircling or moving camera</p>
		<h2 id="interlude">Interlude</h2>
		<p>A brief, intervening film scene or sequence, not specifically tied to the plot, that appears within a film</p>
		<h2 id="prologue">Prologue</h2>
		<p>A speech, preface, introduction, or brief scene preceding the the main action or plot of a film; contrast to epilogue</p>
		<p><a href="#top">Top</a></p>
	</body>

也可以使用name进行定位，使用a标签配合name

回到顶部，使用#：
<a href="#">回到顶部</a>

刷新页面:
<a href="">刷新页面</a>

运行脚本：
<a href="javascript:alert(666)">点我弹窗</a>

运行软件:

<a her="tel:10010">拨打电话</a>

<a href="sms:10086">发送短信</a>

6.触发下载 使用download
<a href="下载.zip" download>下载文件</a>

The four links states are:

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

The text-decoration property is mostly used to remove underlines from links

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

The background-color property can be used to specify a background color for links

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}
posted @ 2024-09-25 13:55  zhongta  阅读(31)  评论(0)    收藏  举报