020-html連結

lywgames發表於2020-10-09
HTML

1. html使用超級連結與網路上的另一個文件相連。

2. 幾乎可以在所有的網頁中找到連結。點選連結可以從一張頁面跳轉到另一張頁面。

3. html超連結(連結)

3.1. 超連結可以是一個字, 一個詞, 或者一組詞, 也可以是一幅影像, 您可以點選這些內容來跳轉到新的文件或者當前文件中的某個部分。

3.2. 當您把滑鼠指標移動到網頁中的某個連結上時, 箭頭會變為一隻小手。

3.3. 我們通過使用<a />標籤在html中建立連結。

3.4. 有兩種使用<a />標籤的方式:

 3.4.1. 通過使用href屬性, 建立指向另一個文件的連結。

 3.4.2. 通過使用name屬性, 建立文件內的書籤。

4. html連結語法

4.1. 連結的html程式碼很簡單。它類似這樣:<a href="url">Link text</a>

4.2. href屬性規定連結的目標。

4.3. 開始標籤和結束標籤之間的文字被作為超級連結來顯示。

4.4. 例項, 點選這個超連結會把使用者帶到W3School的首頁。

<a href="http://www.w3school.com.cn/">Visit W3School</a>

5. html連結-target屬性

5.1. 使用Target屬性, 你可以定義被連結的文件在何處顯示。

5.2. 下面的這行會在新視窗開啟文件:

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

6. html連結-name屬性

6.1. name屬性規定錨(anchor)的名稱。

6.2. 您可以使用name屬性建立html頁面中的書籤。

6.3. 書籤不會以任何特殊方式顯示, 它對讀者是不可見的。

6.4. 當使用命名錨(named anchors)時, 我們可以建立直接跳至該命名錨(比如頁面中某個小節)的連結, 這樣使用者就無需不停地滾動頁面來尋找他們需要的資訊了。

6.5. 命名錨的語法: <a name="label">錨（顯示在頁面上的文字）</a>

6.6. 您可以使用id屬性來替代name屬性, 命名錨同樣有效。

7. 錨的用法

7.1. 首先, 我們在html文件中對錨進行命名(建立一個書籤):<a name="tips">基本的注意事項 - 有用的提示</a>

7.2. 然後, 我們在同一個文件中建立指向該錨的連結:<a href="#tips">有用的提示</a>

7.3. 您也可以在其他頁面中建立指向該錨的連結:

<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>

8. 命名錨經常用於在大型文件開始位置上建立目錄。可以為每個章節賦予一個命名錨, 然後把連結到這些錨的連結放到文件的上部。如果您經常訪問百度百科, 您會發現其中幾乎每個詞條都採用這樣的導航方式。 假如瀏覽器找不到已定義的命名錨, 那麼就會定位到文件的頂端。不會有錯誤發生。

9. 圖片超連結

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>影像超連結</title>
	</head>

	<body>
		<a href="https://www.w3school.com.cn" target="_blank"><img src="w3school.png" alt="跳轉到w3school首頁" /></a>
	</body>
</html>

10. 文件內錨

<!DOCTYPE htmlPUBLIC "-//W3C//DTD html4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>文件內錨</title>
	</head>

	<body>
		<a href="#attribute">html屬性</a> <br /> <br />
		<a href="#style">html樣式</a> <br /> <br />
		<hr />
		<h1>html簡介</h1>
			<h3>什麼是html?</h3>
			<h3>html標籤</h3>
			<h3>html文件</h3>
		<h1>html元素</h1>
			<h3>html元素語法</h3>
				<h4>html元素以開始標籤起始</h4>
				<h4>html元素以結束標籤終止</h4>
				<h4>元素的內容是開始標籤與結束標籤之間的內容</h4>
				<h4>某些html元素具有空內容(empty content)</h4>
				<h4>空元素在開始標籤中進行關閉(以開始標籤的結束而結束)</h4>
				<h4>大多數html元素可擁有屬性</h4>
			<h3>巢狀的html元素</h3>
			<h3>html例項解釋</h3>
			<h3>不要忘記結束標籤</h3>
			<h3>空的 html元素</h3>
			<h3>使用小寫標籤</h3>
		<h1><a id="attribute">html屬性</a></h1>
			<h3>使用小寫屬性</h3>
			<h3>始終為屬性值加引號</h3>
		<h1><a name="style">html樣式</a></h1>
			<h3>html的style屬性</h3>
			<h3>不贊成使用的標籤和屬性</h3>
			<h3>html樣式例項 - 背景顏色</h3>
			<h3>html樣式例項 - 字型、顏色和尺寸</h3>
			<h3>html樣式例項 - 文字對齊</h3>
	</body>
</html>

11.文件外錨點

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>文件外錨</title>
	</head>

	<body>
		<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
	</body>
</html>

 

相關文章