1. 程式人生 > >Web前端(4)_超鏈接和錨

Web前端(4)_超鏈接和錨

meta col 你好 -c 百度 EDA doc 路徑 新標簽頁

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>
View Code

6、鏈接路徑

技術分享圖片

Web前端(4)_超鏈接和錨