html入門教程（html零基礎入門教程）

1.1 HTML簡介

什麼是HTML?

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

l HTML 指的是超文字標記語言: Hyper Text Markup Language

l HTML 不是一種程式語言，而是一種標記語言

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

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

l HTML 文件包含了HTML 標籤及文字內容

l HTML文件也叫做 web 頁面

例項

我的第一個標題

我的第一個段落。

例項解析

l DOCTYPE 宣告瞭文件型別

l 位於標籤與描述了文件型別

l 位於標籤與為視覺化網頁內容

l 位於標籤

與

作為一個標題使用

l 位於標籤

與

作為一個段落顯示

在HTML5中也是描述了文件型別。

1.1.3 HTML 標籤

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

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

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

l 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤“/”

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

<標籤>內容

1.1.4 HTML 元素

"HTML 標籤" and "HTML 元素" 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始標籤與結束標籤，如下例項:

HTML 元素:

This is a paragraph.

1.1.5 Web 瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari，Chrome）是用於讀取HTML檔案，並將其作為網頁顯示。

瀏覽器並不是直接顯示的HTML標籤，但可以使用標籤來決定如何展現HTML頁面的內容給使用者：

1.1.6 HTML 網頁結構

下面是一個視覺化的HTML頁面結構：

1.1.7 HTML版本

從初期的網路誕生後，已經出現了許多HTML版本:

1.1.8  宣告

宣告有助於瀏覽器中正確顯示網頁。

網路上有很多不同的檔案，如果能夠正確宣告HTML的版本，瀏覽器就能正確顯示網頁內容。

doctype 宣告是不區分大小寫的，以下方式均可：

常見的 DOCTYPE 宣告

u HTML 5

u HTML 4.01 Strict

這個 DTD 包含所有 HTML 元素和屬性，但不包括表象或過時的元素（如 font ）。框架集是不允許的。

u HTML 4.01 Transitional

這個 DTD 包含所有 HTML 元素和屬性，包括表象或過時的元素（如 font ）。框架集是不允許的。

u HTML 4.01 Frameset

這個 DTD 與 HTML 4.01 Transitional 相同，但是允許使用框架集內容。

u XHTML 1.0 Strict

這個 DTD 包含所有 HTML 元素和屬性，但不包括表象或過時的元素（如 font ）。框架集是不允許的。結構必須按標準格式的 XML 進行書寫。

u XHTML 1.0 Transitional

這個 DTD 包含所有 HTML 元素和屬性，包括表象或過時的元素（如 font ）。框架集是不允許的。結構必須按標準格式的 XML 進行書寫。

u XHTML 1.0 Frameset

這個 DTD 與 XHTML 1.0 Transitional 相同，但是允許使用框架集內容。

u XHTML 1.1

這個 DTD 與 XHTML 1.0 Strict 相同，但是允許新增模組（例如為東亞語言提供 ruby 支援）。

1.2HTML基礎

1.2.1 標題

HTML 標題（Heading）是通過

-

標籤來定義的.

h是英文header標題的縮寫，標題無處不在，它的應用範圍十分廣泛：網站結構、寫作文、PPT等。h1是主標題，h2是副標題，h3、h4、h5、h6依次遞減字型的大小。

例項：

1.2.2 段落

HTML 段落是通過標籤

來定義的，P是英文paragraph段落的縮寫，經常被用來建立一個段落，就和你寫作文一樣。

1.2.3 連結

HTML 連結是通過標籤 來定義的.a標籤，也叫anchor（錨點）元素，既可以用來連結到外部地址實現頁面跳轉功能，也可以連結到當前頁面的某部分實現內部導航功能。在 href 屬性中指定連結的地址。

使用target屬性,可以定義被連結的文件在何處開啟，target=“_blank”會在新視窗開啟文件。

這是一個連結！

標籤定義 HTML 頁面中的主題變化（比如話題的轉移），並顯示為一條水平線。

1.2.4 折行

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

文字格式化

HTML 使用標籤 與 對輸出的文字進行格式, 如：粗體 or 斜體

通常標籤 替換加粗標籤 來使用, 替換 標籤使用。

1.2.5 表格

表格由

標籤來定義。每個表格均有若干行（由標籤定義），每行被分割為若干單元格（由

如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。

使用邊框屬性來顯示一個帶有邊框的表格：

表格的表頭使用th標籤進行定義。

大多數瀏覽器會把表頭顯示為粗體居中的文字：

行合併和列合併:

1.2.6 列表

HTML 支援有序、無序和定義列表:

有序列表也是一列專案，列表專案使用數字進行標記。 有序列表始於

1. 標籤。每個列表項始於
2. 標籤。

列表項項使用數字來標記。

觀察在ol新增type屬性，type=”A”或者type=”a”或者type=”i”或者type=”I”

無序列表是一個專案的列表，此列專案使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表使用

• 標籤。

自定義列表不僅僅是一列專案，而是專案及其註釋的組合。

自定義列表以

標籤開始。每個自定義列表項以

開始。每個自定義列表項的定義以

開始。

1.2.10區塊

HTML 可以通過

Ø 區塊元素

大多數 HTML 元素被定義為塊級元素或內聯元素。

塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。

例項:

,

,

• ,

Ø 內聯元素

內聯元素在顯示時通常不會以新行開始。

例項: ,

, ,

Ø

元素

HTML

元素是塊級元素，它是可用於組合其他 HTML 元素的容器。

元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前後顯示折行。

如果與 CSS 一同使用，

元素可用於對大的內容塊設定樣式屬性。

元素的另一個常見的用途是文件佈局。它取代了使用表格定義佈局的老式方法。使用元素進行文件佈局不是表格的正確用法。元素的作用是顯示錶格化的資料。

1.2.11佈局

大多數網站可以使用

或者元素來建立多列。CSS 用於對元素進行定位，或者為頁面建立背景以及色彩豐富的外觀。

1.2.12 表單

表單是一個包含表單元素的區域。

表單元素是允許使用者在表單中輸入內容,比如：文字域(textarea)、下拉選單、單選框(radio-buttons)、覈取方塊(checkboxes)等等。

表單使用表單標籤來設定:

文字域（Text Fields）

文字域通過標籤來設定，當使用者要在表單中鍵入字母、數字等內容時，就會用到文字域。

密碼欄位

密碼欄位通過標籤來定義:

單選按鈕（Radio Buttons）

標籤定義了表單單選框選項:

覈取方塊（Checkbox）

定義了覈取方塊. 使用者需要從若干給定的選擇中選取一個或若干選項。

提交按鈕(Submit Button)

定義了提交按鈕.

當使用者單擊確認按鈕時，表單的內容會被傳送到另一個檔案。表單的動作屬性定義了目的檔案的檔名。由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理。

下拉選單

文字框

按鈕

1.2.13 head頭部

元素包含了所有的頭部標籤元素。在元素中你可以插入指令碼（scripts）, 樣式檔案（CSS），及各種meta資訊。

可以新增在頭部區域的元素標籤為: