天天看點

HTML學習筆記 HTML連結HTML學習筆記 HTML連結

HTML學習筆記 HTML連結

https://www.w3school.com.cn/html/html_links.asp#tips

建立超連結

标簽

<a href=" " target="_blank" rel="external nofollow"  name=" "></a>
           
1.通過href屬性建立指向另一個文檔的超連結
<html>
<body>
<a href="url" target="_blank" rel="external nofollow" >元素内容可以是圖檔可以是文本</a>
<!---"<"與"a"之間不能有空格 --->
</body>
<html>
           
2.通過name/id屬性指向本文檔中的某部分,即建錨,name或id的值即錨的命名,同時使用href屬性來确定抛錨的地方。建立多個錨,錨的命名不同。
<html>
<body>
<a href="#mao1" target="_blank" rel="external nofollow" >茶</a>
<br/>
<a href="#mao2" target="_blank" rel="external nofollow" >咖啡</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/>
<a name="mao1">茶</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/>
<a name="mao2">咖啡</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/>
</body>
<html>
           

效果:

HTML學習筆記 HTML連結HTML學習筆記 HTML連結
3.在一個文檔中建立指向另一個文檔中的錨
文檔1:<a href="文檔2.html#錨的名稱" target="_blank" rel="external nofollow" ></a>
文檔2:<a name="錨的名字">
           

例子

html文檔1:練習之連結1.html

<html>
<body>
<a href="練習之連結2.htm#mao" target="_blank" rel="external nofollow" >不秃頭組織</a>
</body>
<html>
           

html文檔2:練習之連結2.htm

<html>
<head>

</head>
<body >
<h1>不秃頭組織</h1>

<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/><br/><br/><br/><br/><br/><br/><br/><br/>

<a name="mao">不秃頭組織</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/>
</body>
</html>
           

效果:

HTML學習筆記 HTML連結HTML學習筆記 HTML連結

4.連結标簽的一些屬性總結

屬性
href url
name 随意起名
target _top(在原來的網頁上跳轉)、_blank(跳轉到新的網頁)