HTML簡介

什麼是 HTML？

HTML 是用來描述網頁的一種語言。

HTML 指的是超文本標記語言 (Hyper Text Markup Language)

HTML 不是一種編程語言，而是一種標記語言 (markup language)

標記語言是一套標記標籤 (markup tag)

HTML 使用標記標籤來描述網頁

HTML 標籤

HTML 標記標籤通常被稱為 HTML 標籤 (HTML tag)。

HTML 文檔描述網頁

HTML 文檔包含 HTML 標籤和純文本

HTML 文檔也被稱為網頁

HTML 標籤是由尖括號包圍的關鍵詞，比如

HTML 標籤通常是成對出現的，比如 和

標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤

開始和結束標籤也被稱為開放標籤和閉合標籤

HTML 文檔 = 網頁

我們可以使用專業的 HTML 編輯器來編輯 HTML：

Adobe Dreamweaver

Microsoft Expression Web

CoffeeCup HTML Editor

下面我們用記事本來製作一個簡單的網頁:

第一步，打開記事本

如何啟動記事本：

開始

所有程序

附件

記事本

第二步，在記事本中編輯HTML語言，如圖:

第三步，保存 HTML

在記事本的文件菜單選擇“另存為”。

當您保存 HTML 文件時，既可以使用 .htm 也可以使用 .html 擴展名。

第四步，在瀏覽器中運行這個 HTML 文件

啟動您的瀏覽器，然後選擇“文件”菜單的“打開文件”命令，或者直接在文件夾中雙擊您的 HTML 文件。

結果應該類似這樣：

這樣，一個簡單的網頁就成了。

HTML代碼-標題

網頁製作時用什麼來表示標題呢？下面我們來看看:

HTML 標題

標題（Heading）是通過

-

等標籤進行定義的。

定義最大的標題。

定義最小的標題。

註釋：瀏覽器會自動地在標題的前後添加空行。

註釋：默認情況下，HTML 會自動地在塊級元素前後添加一個額外的空行，比如段落、標題元素前後。

HTML代碼—水平線

HTML 水平線

hr 元素可用於分隔內容。

提示：使用水平線 (

HTML代碼—註釋

HTML 註釋

可以將註釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略註釋，也不會顯示它們。

註釋是這樣寫的：

註釋：開始括號之後（左邊的括號）需要緊跟一個歎號，結束括號之前（右邊的括號）不需要。

提示：合理地使用註釋可以對未來的代碼編輯工作產生幫助。

HTML代碼—段落

段落是通過

標籤定義的。

註釋：瀏覽器會自動地在段落的前後添加空行。（

是塊級元素）

提示：使用空的段落標記

去插入一個空行是個壞習慣。用
標籤代替它！（但是不要用
標籤去創建列表。不要著急，您將在稍後的篇幅學習到 HTML 列表。）

HTML代碼-折行

折行有什麼用呢？

當然折行的主要目的是調整網頁佈局，讓它看起來更美觀大方。

如果您希望在不產生一個新段落的情況下進行換行（新行），請使用
標籤：

元素是一個空的 HTML 元素。由於關閉標籤沒有任何意義，因此它沒有結束標籤。

HTML樣式-背景顏色

background-color 屬性為元素定義了背景顏色：

This is a heading

This is a paragraph.

HTML樣式-字體、顏色和尺寸

font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸：

A heading

A paragraph.

HTML樣式-文本對齊

text-align 屬性規定了元素中文本的水平對齊方式。

下面我們看看中，右，左的三種對齊方式演示:

HTML引用

1.HTML 元素定義短的引用。

瀏覽器通常會為 元素包圍引號。

2.用於長引用的 HTML

HTML 元素定義被引用的節。

瀏覽器通常會對

HTML超鏈接

什麼是超鏈接？超鏈接就是從一個頁面到另一個頁面之間跳轉的方式。

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

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

我們通過使用

有兩種使用

1. 通過使用 href 屬性 - 創建指向另一個文檔的鏈接
2. 通過使用 name 屬性 - 創建文檔內的書籤

上面這行代碼顯示為：Visit Baidu

點擊這個超鏈接會把用戶帶到 Baidu 的首頁。

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

鏈接屬性

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

閱讀更多 小童觀時界 的文章

關鍵字: 標籤 標記語言 網頁設計