HTML 鏈接

HTML 使用超級鏈接與網絡上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。

HTML 鏈接

如何在HTML文檔中創建鏈接。

(可以在本頁底端找到更多實例)

HTML 超鏈接（鏈接）

HTML使用標簽 <a>來設置超文本鏈接。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。

在標簽<a> 中使用了href屬性來描述鏈接的地址。

默認情況下，鏈接將以以下形式出現在瀏覽器中：

一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
訪問過的鏈接顯示為紫色并帶有下劃線。
點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

注意：如果為這些超鏈接設置了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。

HTML 鏈接語法

鏈接的 HTML 代碼很簡單。它類似這樣：:

href 屬性描述了鏈接的目標。.

實例

<a >訪問菜鳥教程</a>

上面這行代碼顯示為：: 訪問菜鳥教程

點擊這個超鏈接會把用戶帶到菜鳥教程的首頁。

提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。

HTML 鏈接 - target 屬性

使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。

下面的這行會在新窗口打開文檔：

實例

<a>訪問菜鳥教程!</a>

HTML 鏈接- id 屬性

id屬性可用于創建在一個HTML文檔書簽標記。

提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對于讀者來說是隱藏的。

實例

在HTML文檔中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文檔中創建一個鏈接到"有用的提示部分(id="tips"）"：

<a href="#tips">訪問有用的提示部分</a>

或者，從另一個頁面創建一個鏈接到"有用的提示部分(id="tips"）"：

<a >

訪問有用的提示部分</a>

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

注釋： 請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：，就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：。

圖片鏈接

如何使用圖片鏈接。

在當前頁面鏈接到指定位置

如何使用書簽

跳出框架

本例演示如何跳出框架，假如你的頁面被固定在框架之內。

創建電子郵件鏈接

本例演示如何如何鏈接到一個郵件。（本例在安裝郵件客戶端程序后才能工作。）

建電子郵件鏈接 2

本例演示更加復雜的郵件鏈接。

HTML 鏈接標簽

標簽	描述
<a>	定義一個超級鏈接

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

TML 代碼約定

很多 Web 開發人員對 HTML 的代碼規范知之甚少。

在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。

使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規范。

而針對于 HTML5 ，我們應該形成比較好的代碼規范，以下提供了幾種規范的建議。

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標簽一樣使用小寫，可以使用以下代碼：

<!doctype html>

使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

混合了大小寫的風格是非常糟糕的。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

不推薦:

<p>這是一個段落。</p>

</SECTION>

非常糟糕:

<p>這是一個段落。</p>

</SECTION>

推薦:

<body>

<p>菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。

菜鳥教程，學的不僅是技術，更是夢想。</p>

</body>

表格實例:

<table>

<tr>

<th>Description</th>

</tr>

<tr>

<td>Description of A</td>

</tr>

<tr>

<td>Description of B</td>

</tr>

</table>

列表實例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在標準 HTML5 中， <html> 和 <body> 標簽是可以省略的。

以下 HTML5 文檔是正確的:

實例:

<!DOCTYPE html>

<head>

</head>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標簽。

<html> 元素是文檔的根元素，用于描述頁面的語言：

<!DOCTYPE html>

聲明語言是為了方便屏幕閱讀器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

省略 <head>?

在標準 HTML5 中， <head>標簽是可以省略的。

默認情況下，瀏覽器會將 <body> 之前的內容添加到一個默認的 <head> 元素上。

實例

<!DOCTYPE html>

<html>

<body>

<h1>這是一個標題</h1>

<p>這是一個段落。</p>

</body>

</html>

嘗試一下 ?

	現在省略 head 標簽還不推薦使用。

元數據

HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題:

標題和語言可以讓搜索引擎很快了解你頁面的主題:

<!DOCTYPE html>

<head>

</head>

HTML 注釋

注釋可以寫在  中:

比較長的評論可以在  中分行寫：

<!--

這是一個較長評論。這是一個較長評論。這是一個較長評論。

這是一個較長評論這是一個較長評論。這是一個較長評論。

-->

長評論第一個字符縮進兩個空格，更易于閱讀。

樣式表

樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

短的規則可以寫成一行:

p.into {font-family: Verdana; font-size: 16em;}

長的規則可以寫成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

將左花括號與選擇器放在同一行。
左花括號與選擇器間添加以空格。
使用兩個空格來縮進。
冒號與屬性值之間添加已空格。
逗號和符號之后使用一個空格。
每個屬性與值結尾都要使用符號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。

	在逗號和分號后添加空格是常用的一個規則。

在 HTML 中載入 JavaScript

使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

使用 JavaScript 訪問 HTML 元素

一個糟糕的 HTML 格式可能會導致 JavaScript 執行錯誤。

以下兩個 JavaScript 語句會輸出不同結果:

實例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規則。

訪問 JavaScript 代碼規范。

使用小寫文件名

大多 Web 服務器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。

其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

你必須保持統一的風格，我們建議統一使用小寫的文件名。

文件擴展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區別

.htm 和 .html 的擴展名文件本質上是沒有區別的。瀏覽器和 Web 服務器都會把它們當作 HTML 文件來處理。

區別在于：

.htm 應用在早期 DOS 系統，系統現在或者只能有三個字符。

在 Unix 系統中后綴沒有特別限制，一般用 .html。

技術上區別

如果一個 URL 沒有指定文件名 (如 http://www.runoob.com/css/), 服務器會返回默認的文件名。通常默認文件名為 index.html, index.htm, default.html, 和 default.htm。

如果服務器只配置了 "index.html" 作為默認文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是，通常服務器可以設置多個默認文件，你可以根據需要設置默認文件嗎。

不管怎樣，HTML 完整的后綴是 ".html"。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

頁布局對改善網站的外觀非常重要。

請慎重設計您的網頁布局。

在線實例

使用 <div> 元素的網頁布局

如何使用 <div> 元素添加布局。

使用 <table> 元素的網頁布局

如何使用 <table> 元素添加布局。

網站布局

大多數網站會把內容安排到多個列中（就像雜志或報紙那樣）。

大多數網站可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。

	雖然我們可以使用HTML table標簽來設計出漂亮的布局，但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具。

HTML 布局 - 使用<div> 元素

div 元素是用于分組 HTML 元素的塊級元素。

下面的例子使用五個 div 元素來創建多列布局：

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網頁標題</h1></div><divid="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</div><divid="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">內容在這里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版權 ? runoob.com</div></div></body></html>

上面的 HTML 代碼會產生如下結果：

HTML 布局 - 使用表格

使用 HTML <table> 標簽是創建布局的一種簡單的方式。

大多數站點可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。

	即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化數據 - 表格不是布局工具！

下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來橫跨兩列：

實例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網頁標題</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">內容在這里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版權 ? runoob.com</td></tr></table></body></html>

上面的 HTML 代碼會產生以下結果：

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護。通過編輯單一的文件，就可以改變所有頁面的布局。如需學習更多有關 CSS 的知識，請訪問我們的CSS 教程。

Tip: 由于創建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站布局，并優化它們）。

HTML 布局標簽

標簽	描述
<div>	定義文檔區塊，塊級(block-level)
<span>	定義 span，用來組合文檔中的行內元素。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：雅虎前端優化的35條軍規(干貨分享速速收藏)
下一篇：「學術論文」基于自主安全的后勤保障指控系統設計與應用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML 鏈接

您的項目需求