HTML文件最重要的特征之一就是超鏈接，通過網頁上所提供的連接功能，用戶可以鏈接到網絡上的其他網頁。
4.1 設置基本文字超鏈接
建立超鏈接所使用的HTML標記為<a></a>標記。超鏈接最重要的有兩個要素，設置為超鏈接的文本內容和超鏈接指向的目標地址。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超鏈接</title> </head> 點擊<a href="4.1.2.html"這里</a>連接到一個圖片網頁 </body> </html>
注：在<a>和</a>標記之間的內容就是在網頁中被設定為超鏈接的內容。hef屬性是必要屬性，用來放置超鏈接的目標地址，可以是本網站內部的某個HTML文件，也可以是外部網站某個網頁的URL地址
4.1.1 URL的格式
每個文檔在互聯網上有唯一的地址，該地址的全稱為統一資源定位器(Uniform Resource Laocator），簡稱URL。
URL由4個部分構成，即“協議”，“主機名”，“文件夾名”，“文件名”。
http:（協議）//www.aretch.cn（主機名）/study（文件夾名）/index.htm（文件名）
注：RL可分為兩種：
- 相對文檔的URL，這種URL以鏈接的原文檔為起點；
- 相對服務器的URL，這種URL以服務器的根目錄為起點。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超鏈接</title> </head> <body> 點擊<a href="https://i.cnblogs.com/EditPosts.aspx?opt=">鏈接01</a>鏈接到第一個網頁<br>
點擊<a href="3.4.html">鏈接02</a>鏈接到第2個網頁 </body> </html>
其中第1個使用的是絕對URL；第2個用的是服務器相對URL。
4.2 設置頁面內部的特定目標的鏈接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>web學習向導</title> </head> <body> <h1>Web學習向導</h1> <p><a href="#first">第1本書 </a><a href="#second">第2本書 </a><a href="#third">第3本書 </a> </p> <h2><a name="first">精通CSS+DIV網頁樣式與布局</a></h2> <p>本書系統地講解了……的省略部分</p> <h2><a name="second">CSS設計徹底研究</a></h2> <p>本書是一本深入……省略部分</p> <h2><a name="third">CSS設計禪意花園</a> </h2> <p>本書作者是世界……省略部分</p> </body> </html>
4.3 設置圖片的超鏈接
圖片超鏈接的建立和文字超鏈接的建立基本類似，都是通過<a></a>標記來實現的。只需要把原來的連接文字換成相應的圖片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片的超鏈接</title> </head> <body> <a href="3.1.2html.html"> <img src="cat.jpg"> </a> <br>點擊圖片放大</body> </html>
注：注意代碼中粗體顯示的語句。為一個圖片添加了超鏈接以后，瀏覽器會自動給圖片加一個粗邊框。如果想要去掉這個邊框，只需要在<img>標記中設置border=“0”后就可以取消這個邊框。
4.4 設置電子郵件鏈接
在某些網頁中
---恢復內容結束---
HTML文件最重要的特征之一就是超鏈接，通過網頁上所提供的連接功能，用戶可以鏈接到網絡上的其他網頁。
4.1 設置基本文字超鏈接
建立超鏈接所使用的HTML標記為<a></a>標記。超鏈接最重要的有兩個要素，設置為超鏈接的文本內容和超鏈接指向的目標地址。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超鏈接</title> </head> 點擊<a href="4.1.2.html"這里</a>連接到一個圖片網頁 </body> </html>
注：在<a>和</a>標記之間的內容就是在網頁中被設定為超鏈接的內容。hef屬性是必要屬性，用來放置超鏈接的目標地址，可以是本網站內部的某個HTML文件，也可以是外部網站某個網頁的URL地址
4.1.1 URL的格式
每個文檔在互聯網上有唯一的地址，該地址的全稱為統一資源定位器(Uniform Resource Laocator），簡稱URL。
URL由4個部分構成，即“協議”，“主機名”，“文件夾名”，“文件名”。
http:（協議）//www.aretch.cn（主機名）/study（文件夾名）/index.htm（文件名）
注：RL可分為兩種：
- 相對文檔的URL，這種URL以鏈接的原文檔為起點；
- 相對服務器的URL，這種URL以服務器的根目錄為起點。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超鏈接</title> </head> <body> 點擊<a href="https://i.cnblogs.com/EditPosts.aspx?opt=">鏈接01</a>鏈接到第一個網頁<br>
點擊<a href="3.4.html">鏈接02</a>鏈接到第2個網頁 </body> </html>
其中第1個使用的是絕對URL；第2個用的是服務器相對URL。
4.2 設置頁面內部的特定目標的鏈接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>web學習向導</title> </head> <body> <h1>Web學習向導</h1> <p><a href="#first">第1本書 </a><a href="#second">第2本書 </a><a href="#third">第3本書 </a> </p> <h2><a name="first">精通CSS+DIV網頁樣式與布局</a></h2> <p>本書系統地講解了……的省略部分</p> <h2><a name="second">CSS設計徹底研究</a></h2> <p>本書是一本深入……省略部分</p> <h2><a name="third">CSS設計禪意花園</a> </h2> <p>本書作者是世界……省略部分</p> </body> </html>
4.3 設置圖片的超鏈接
圖片超鏈接的建立和文字超鏈接的建立基本類似，都是通過<a></a>標記來實現的。只需要把原來的連接文字換成相應的圖片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片的超鏈接</title> </head> <body> <a href="3.1.2html.html"> <img src="cat.jpg"> </a> <br>點擊圖片放大</body> </html>
注：注意代碼中粗體顯示的語句。為一個圖片添加了超鏈接以后，瀏覽器會自動給圖片加一個粗邊框。如果想要去掉這個邊框，只需要在<img>標記中設置border=“0”后就可以取消這個邊框。
4.4 設置電子郵件鏈接
在某些網頁中，當訪問者點擊某個鏈接之后，會自動打開電子郵件的客戶端軟件，如Outlook或Foxmail等，向某個特定的E-mail地址發送郵件，這個鏈接就是電子郵件鏈接。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>郵件的鏈接</title> </head> <body> 聯系我們：<a href="mailto:support@artech.cn">給我們發送郵件</a> </body> </html>
4.5 設置新窗口以顯示鏈接頁面
在默認情況下，當點擊鏈接的時候，目標頁面還是在同一個窗口中顯示。如果要在點擊某個鏈接以后，打開一個新的瀏覽器窗口，在這個新窗口中顯示目標頁面，就需要在<a>標記中設置"target"屬性。
將"target"屬性設置為"_blank"，就會自動打開一個新窗口，顯示目標頁面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>以新窗口方式打開</title> </head> <body> 以<a href="3.6.html" target="_blank">新窗口</a>方式打一個網頁 </body> </html>
4.7 框架之間的鏈接
4.7.1 建立框架與框架集（<frame>和<frameset>)
框架集的HTML標記為<frameset>，框架的HTML標記是<frame>。
注：<frameset>標記和</frameset>標記是與<body>和</body>是同級的，不要將<frameset>標記含在<body>標記中，否則<frameset>標記將無法正常使用。
4.7.2 用cols屬性將窗口分為左右兩部分
窗口框架的分割方式有兩種，一種是水平分割，另一種是垂直分割。在<frameset>標記中的cols屬性和rows屬性來控制窗口的分割方式。
cols屬性可以將一個框架集分割為若干列，其語法結構“<frameset cols="n1,n2,···,*">”。
- n1表示子窗口1的寬度，以像素或百分比為單位；
- n2表示子窗口2的寬度，以像素或百分比為單位；
- 星號“*”表示分配給前面所有窗口后剩下的寬度，比如“<frameset cols="20%,30%,">”，那么“*”就表示50%的寬度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>窗體分割</title> </head> <frameset cols="30%,*"> <frame> <frame> </frameset> </html>
4.7.3 用rows屬性將窗口分為上中下三部分
rows屬性的使用方法和cols屬性是基本一樣的，只是在分割方向有所不同而已。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>窗體分割</title> </head> <frameset rows="30%,40%,*"> <frame> <frame> <frame> </frameset> </html>
4.7.4 框架的嵌套
rows屬性和cols屬性也可以混合起來使用，實現框架的嵌套。下面這個代碼實際上是先將窗口垂直分割為兩個子窗口，再將第2個子窗口進行水平分割。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>窗體的水平和垂直分割</title> </head> <frameset cols="30%,*"> <frame> <frameset rows="60%,*"> <frame> <frame> </frameset> </frameset> </html>
注：可以看到，框架集是可以嵌套的，在這個例子中，外層的框架集把整個窗口氛圍里左右兩個部分，而左面的部分又被一個框架集分為上下部分。
4.7.5 用src屬性在框架中插入網頁
框架的作用是顯示網頁，這是利用src屬性來進行設置的.這個src屬性和圖片插入標記<img>中的src屬性是一樣的，其語法結構也是“<frame src=HTML文件的位置>”。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片在分割框的應用</title> </head> <frameset cols="40%,*"> <frame src="4.1.html"> <frame src="4.3.html"> </frameset> </html>
4.8 鏈接增多后網站的組織結構與維護
通常在網站開發的時候，並不是把所有的網站文件都保存在一個網站的根目錄下面，而是使用不同的文件夾存放不同性質的文件。網站開發者可以通過合適的文件結構來對網站的文件進行方便的定位和管理。如果建立起適合的網站文件存儲結構，網站開發者就能迅速定位自己需要的文件，或者將制作完成的文件存儲到相應的目錄，進行網站開發工作。
1. 方案一
最簡單的存儲方案是按照文件類型進行分類管理。將不同類型的文件存放在不同的文件夾中，這種存儲方法適用於中小型的網站，該方法通過文件的類型對文件進行管理。
2. 方案二
按照主題對文件進行分類管理。關於某個主題的所有文件被存放在一個文件夾中，然后再進一步細分文件的類型。這種方案適用於頁面與文件數量眾多、信息量大的靜態網站。
3. 方案三
對文件的類型進行進一步細分存儲管理。這種存儲方案實際上是第一種存儲方案的深化，將頁面進一步細分后進行分類存儲管理。這種方案適用於那些文件類型復雜、包含各種文件的多媒體動態網站。