Web前端(4)_超链接和锚

时间：2019-03-10 15:02:36 阅读：174 评论：0 收藏：0 [点我收藏+]

标签：htm html alt onclick hid 百度一下打开打开图片 spl

1、本页面打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<body>
    <a href="http://www.baidu.com" >百度一下</a>
</body>
</html>

View Code

2、新标签页打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

View Code

3、链接本地图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<body>
    <a href="../image/QQ360.png" target="_blank">打开图片</a>
</body>
</html>

View Code

4 、锚点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<br>
<a id = "top" href="#bottom" >去底部</a> <br />
    你好<br />
 你好<br />
 你好<br />
 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br />
 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 <a id = "bottom" href="#top" >去顶部</a> <br />
</body>
</html>

View Code

5、范围标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签</title>
</head>
<br>
<a id = "top" href="#bottom" >去底部</a> <br />
<a href="#range">点一下去范围标签</a>
    你好<br />
 你好<br />
 你好<br />
 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br />
 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
    <span id="range">我是范围标签</span>>
 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />

 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br /> 你好<br />
 <a id = "bottom" href="#top" >去顶部</a> <br />
</body>