社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > 主體

網頁製作（html）的基本知識（四）連結詳解

零下一度
發布： 2017-05-06 13:40:35
原創
1802 人瀏覽過

1.HTML 連結

<html>
<body>
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>

<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

</body>
</html>
登入後複製

本範例示範如何在 HTML 文件中建立連結。 

<html>
<body>
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>

</body>
</html>
登入後複製


本範例示範如何使用圖像作為連結。

HTML 超連結（連結）

#超連結可以是一個字，一個詞，或是一組詞，也可以是一幅圖像，您可以點擊這些內容來跳到新的文件或當前文件中的某個部分。

當您把滑鼠指標移到網頁中的某個連結時，箭頭會變成一隻小手。

我們透過使用 標籤在 HTML 中建立連結。

有兩種使用 標籤的方式：

  1. 透過使用href 屬性- 建立指向另一個文件的連結

  2. 透過使用name 屬性- 建立文件內的書籤

延伸閱讀：什麼是超文本？

HTML 連結語法

連結的 HTML 程式碼很簡單。它類似這樣：

<a href="url">Link text</a>
登入後複製

href 屬性規定連結的目標。

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

實例

<a href="www.php.cn/">Visit php</a>
登入後複製

上面這行程式碼顯示為：Visit php

##點擊這個超連結會把使用者帶到php的首頁。

提示："連結文字" 不必一定是文字。 圖片或其他 HTML 元素都可以成為連結。

HTML 連結 - target 屬性

#使用 Target 屬性，可以定義被連結的文件在何處顯示。

下面的這行會在新視窗開啟文件：

<a href="http://www.php.cn/" target="_blank">Visit W3School!</a>
登入後複製

親自試試看

HTML 連結- name 屬性

name 屬性規定錨（anchor）的名稱。

name 屬性用於建立 HTML 內部的書籤。

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

當使用命名錨（named anchors）時，我們可以創建直接跳至頁面中某個節的鏈接，這樣用戶就無需不停的滾動頁面來尋找他們需要的訊息。

命名錨的語法：

<a name="label">Text to be displayed</a>
登入後複製

提示：錨的名稱可以是任何你喜歡的名字。

實例

HTML 文件內部的已命名的錨：

<a name="tips">Useful Tips Section</a>
登入後複製

然後，我們建立指向相同文件中“有用的提示」部分的連結：

<a href="#tips">Visit the Useful Tips Section</a>
登入後複製

或者，建立從另一個頁面指向該文件中「有用的提示」部分的連結：

<a href="www.w3school.com.cn/html_links.htm#tips">
Visit the Useful Tips Section
</a>
登入後複製

在上面的程式碼中，我們將# 符號和錨名稱加入到URL 的末端，就可以直接連結到tips 這個命名錨了。

具體效果：有用的提示

#基本的注意事項 - 有用的提示：

註解：請始終將正斜線新增至子資料夾。假如這樣書寫連結：href="www.w3school.com.cn/html"，就會向伺服器產生兩個 HTTP 請求。這是因為伺服器會添加正斜線到這個位址，然後建立一個新的請求，就像這樣：href="www.w3school.com.cn/html/"。

提示：命名錨經常用於在大型文件開始位置上建立目錄。可以為每個章節賦予一個命名錨，然後把連結到這些錨的連結放到文件的上部。如果您經常造訪百度百科，您會發現其中幾乎每個詞條都採用這樣的導航方式。

提示：假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

2.HTML 表格

<html>
<body>
<p>每个表格由 table 标签开始。</p>
<p>每个表格行由 tr 标签开始。</p>
<p>每个表格数据由 td 标签开始。</p>

<h4>一列：</h4>
<table border="1">
<tr>
  <td>100</td>
</tr>
</table>

<h4>一行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<h4>两行三列：</h4>
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

</body>
</html>
登入後複製

这个例子演示如何在 HTML 文档中创建表格。

<html>

<body>

<h4>带有普通的边框：</h4>  
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有粗的边框：</h4>  
<table border="8">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有很粗的边框：</h4>  
<table border="15">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>
登入後複製

本例演示各种类型的表格边框。

表格

表格由

标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 , 和 很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用 IE5.0 或者更新的版本，可以查看在我们的《XML教程》中的具体例子。

3.HTML 列表

<html>
<body>
<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>

</body>
</html>
登入後複製

本例演示无序列表。

<html>
<body>

<h4>一个有序列表：</h4>
<ol>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ol>

</body>
</html>
登入後複製

有序列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
登入後複製

在浏览器显示如下：

row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2


表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格

<table border="1"><tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
登入後複製

表格的表头

表格的表头使用

标签进行定义。

<table border="1">
<tr><th>Heading</th>
<th>Another Heading</th></tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
登入後複製

在浏览器显示如下：

HeadingAnother Heading
row 1, cell 1row 1, cell 2
row 2, cell 1row 2, cell 2


表格中的空单元格

在大多数浏览器中，没有内容的表格单元显示得不太好。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td><td></td></tr>
</table>
登入後複製

在浏览器显示如下：

row 1, cell 1row 1, cell 2
row 2, cell 1

注意：这个空的单元格的边框没有被显示出来。（不过 Mozilla Firefox 可以将整个边框显示出来。）为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td><td> </td></tr>
</table>
登入後複製

在浏览器中显示如下：

row 1, cell 1row 1, cell 2
row 2, cell 1


基本的注意事项 - 有用的提示：