HTML基礎教程【0基礎學HTML】自學手冊?

web學習課程表

HTML 基礎教程

第一天

HTML 教程

HTML 簡介

HTML 基礎

HTML 元素

HTML 屬性

HTML 標題

HTML 段落

第二天

HTML 格式化

HTML 編輯器

HTML 樣式

HTML 連結

HTML 影象

HTML 表格

第三天

HTML 列表

HTML 塊

HTML 佈局

HTML 表單

HTML 框架

HTML 內聯框架

HTML 背景

HTML 顏色

HTML 顏色名

HTML基礎教程【0基礎學HTML】自學手冊

工具/原料

電腦

心態

堅持

方法/步驟

HTML 教程

在本教程中,你將學習如何使用 HTML 來建立站點。

HTML 很容易學習!你會喜歡它的!

現在開始學習 HTML !

HTML 例項

學習 100 個例項!使用我們的編輯器,你可以編輯 HTML,然後點選測試按鈕來檢視結果。

親自試一試吧!

HTML 測驗

在 W3School 測試你的 HTML 技能!

開始 HTML 測驗!

HTML 參考手冊

在 W3School,我們提供完整的 HTML 參考手冊,其中包括標籤、屬性、顏色、實體等等。

例項

My First Heading

My first paragraph.

親自試一試

什麼是 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 文件也被稱為網頁

Web 瀏覽器的作用是讀取 HTML 文件,並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤,而是使用標籤來解釋頁面的內容:

My First Heading

My first paragraph.

例子解釋

與 之間的文字描述網頁

與 之間的文字是可見的頁面內容

之間的文字被顯示為標題

之間的文字被顯示為段落

本章通過例項向您演示最常用的 HTML 標籤。

提示:不要擔心本章中您還沒有學過的例子,您將在下面的章節中學到它們。

提示:學習 HTML 最好的方式就是邊學邊做實驗。我們為您準備了很好的 HTML 編輯器。使用這個編輯器,您可以任意編輯一段 HTML 原始碼,然後單擊 TIY 按鈕來檢視結果。

HTML 標題

HTML 標題(Heading)是通過

-

等標籤進行定義的。

例項

This is a heading

This is a heading

This is a heading

親自試一試

HTML 段落

HTML 段落是通過

標籤進行定義的。

例項

This is a paragraph.

This is another paragraph.

親自試一試

HTML 連結

HTML 連結是通過 標籤進行定義的。

例項

親自試一試

註釋:影象的名稱和尺寸是以屬性的形式提供的。

HTML 文件是由 HTML 元素定義的。

HTML 元素

HTML 元素指的是從開始標籤(start tag)到結束標籤(end tag)的所有程式碼。

開始標籤 元素內容 結束標籤

This is a paragraph

This is a link


註釋:開始標籤常被稱為開放標籤(opening tag),結束標籤常稱為閉合標籤(closing tag)。

HTML 元素語法

HTML 元素以開始標籤起始

HTML 元素以結束標籤終止

元素的內容是開始標籤與結束標籤之間的內容

某些 HTML 元素具有空內容(empty content)

空元素在開始標籤中進行關閉(以開始標籤的結束而結束)

大多數 HTML 元素可擁有屬性

提示:您將在本教程的下一章中學習更多有關屬性的內容。

巢狀的 HTML 元素

大多數 HTML 元素可以巢狀(可以包含其他 HTML 元素)。

HTML 文件由巢狀的 HTML 元素構成。

HTML 文件例項

This is my first paragraph.

上面的例子包含三個 HTML 元素。

HTML 例項解釋

元素:

This is my first paragraph.

這個

元素定義了 HTML 文件中的一個段落。

這個元素擁有一個開始標籤

,以及一個結束標籤

元素內容是:This is my first paragraph。

元素:

This is my first paragraph.

元素定義了 HTML 文件的主體。

這個元素擁有一個開始標籤 ,以及一個結束標籤 。

元素內容是另一個 HTML 元素(p 元素)。

元素:

This is my first paragraph.

元素定義了整個 HTML 文件。

這個元素擁有一個開始標籤 ,以及一個結束標籤 。

元素內容是另一個 HTML 元素(body 元素)。

不要忘記結束標籤

即使您忘記了使用結束標籤,大多數瀏覽器也會正確地顯示 HTML:

This is a paragraph

This is a paragraph

上面的例子在大多數瀏覽器中都沒問題,但不要依賴這種做法。忘記使用結束標籤會產生不可預料的結果或錯誤。

註釋:未來的 HTML 版本不允許省略結束標籤。

空的 HTML 元素

沒有內容的 HTML 元素被稱為空元素。空元素是在開始標籤中關閉的。


就是沒有關閉標籤的空元素(
標籤定義換行)。

在 XHTML、XML 以及未來版本的 HTML 中,所有元素都必須被關閉。

在開始標籤中新增斜槓,比如
,是關閉空元素的正確方法,HTML、XHTML 和 XML 都接受這種方式。

即使
在所有瀏覽器中都是有效的,但使用
其實是更長遠的保障。

HTML 提示:使用小寫標籤

HTML 標籤對大小寫不敏感:

等同於

。許多網站都使用大寫的 HTML 標籤。

W3School 使用的是小寫標籤,因為全球資訊網聯盟(W3C)在 HTML 4 中推薦使用小寫,而在未來 (X)HTML 版本中強制使用小寫。

屬性為 HTML 元素提供附加資訊。

HTML 屬性

HTML 標籤可以擁有屬性。屬性提供了有關 HTML 元素的更多的資訊。

屬性總是以名稱/值對的形式出現,比如:name="value"。

屬性總是在 HTML 元素的開始標籤中規定。

屬性例項

HTML 連結由 標籤定義。連結的地址在 href 屬性中指定:

擁有關於對齊方式的附加資訊。

TIY : 居中排列標題

屬性例子 2:

定義 HTML 文件的主體。

擁有關於背景顏色的附加資訊。

TIY : 背景顏色

屬性例子 3:

定義 HTML 表格。(您將在稍後的章節學習到更多有關 HTML 表格的內容)

HTML 提示:使用小寫屬性

屬性和屬性值對大小寫不敏感。

不過,全球資訊網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。

而新版本的 (X)HTML 要求使用小寫屬性。

始終為屬性值加引號

屬性值應該始終被包括在引號內。雙引號是最常用的,不過使用單引號也沒有問題。

在某些個別的情況下,比如屬性值本身就含有雙引號,那麼您必須使用單引號,例如:

name='Bill "HelloWorld" Gates'

HTML 屬性參考手冊

我們的完整的 HTML 參考手冊提供了每個 HTML 元素可使用的合法屬性的完整列表:

完整的 HTML 參考手冊

下面列出了適用於大多數 HTML 元素的屬性:

屬性 值 描述

class classname 規定元素的類名(classname)

id id 規定元素的唯一 id

style style_definition 規定元素的行內樣式(inline style)

title text 規定元素的額外資訊(可在工具提示中顯示)

如需更多關於標準屬性的資訊,請訪問:

HTML 標準屬性參考手冊

在 HTML 文件中,標題很重要。

HTML 標題

標題(Heading)是通過

親自試一試

註釋:瀏覽器會自動地在標題的前後新增空行。

註釋:預設情況下,HTML 會自動地在塊級元素前後新增一個額外的空行,比如段落、標題元素前後。

標題很重要

請確保將 HTML heading 標籤只用於標題。不要僅僅是為了產生粗體或大號的文字而使用標題。

搜尋引擎使用標題為您的網頁的結構和內容編制索引。

因為使用者可以通過標題來快速瀏覽您的網頁,所以用標題來呈現文件結構是很重要的。

應該將 h1 用作主標題(最重要的),其後是 h2(次重要的),再其次是 h3,以此類推。

HTML 水平線

hr 元素可用於分隔內容。

例項

親自試一試

提示:使用水平線 (

HTML 註釋

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

註釋是這樣寫的:

例項

親自試一試

註釋:開始括號之後(左邊的括號)需要緊跟一個歎號,結束括號之前(右邊的括號)不需要。

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

HTML 提示 - 如何檢視原始碼

您一定曾經在看到某個網頁時驚歎道 “WOW! 這是如何實現的?”

如果您想找到其中的奧祕,只需要單擊右鍵,然後選擇“檢視原始檔”(IE)或“檢視頁面原始碼”(Firefox),其他瀏覽器的做法也是類似的。這麼做會開啟一個包含頁面 HTML 程式碼的視窗。

來自本頁的例項

標題

如何在 HTML 文件中顯示標題。

隱藏的註釋

如何在 HTML 原始碼中插入註釋。

水平線

如何插入水平線。

HTML 標籤參考手冊

W3School 的標籤參考手冊提供了有關這些標題及其屬性的更多資訊。

您將在本教程下面的章節中學到更多有關 HTML 標籤和屬性的知識。

標籤 描述

定義 HTML 文件。

定義文件的主體。

段落是通過

例項

親自試一試

註釋:瀏覽器會自動地在段落的前後新增空行。(

提示:使用空的段落標記



不要忘記結束標籤

即使忘了使用結束標籤,大多數瀏覽器也會正確地將 HTML 顯示出來:

例項

親自試一試

上面的例子在大多數瀏覽器中都沒問題,但不要依賴這種做法。忘記使用結束標籤會產生意想不到的結果和錯誤。

註釋:在未來的 HTML 版本中,不允許省略結束標籤。

提示:通過結束標籤來關閉 HTML 是一種經得起未來考驗的 HTML 編寫方法。清楚地標記某個元素在何處開始,並在何處結束,不論對您還是對瀏覽器來說,都會使程式碼更容易理解。

HTML 折行

如果您希望在不產生一個新段落的情況下進行換行(新行),請使用
標籤:

親自試一試


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


還是

您也許發現

很相似。

在 XHTML、XML 以及未來的 HTML 版本中,不允許使用沒有結束標籤(閉合標籤)的 HTML 元素。

即使
在所有瀏覽器中的顯示都沒有問題,使用
也是更長遠的保障。

HTML 輸出 - 有用的提示

我們無法確定 HTML 被顯示的確切效果。螢幕的大小,以及對視窗的調整都可能導致不同的結果。

對於 HTML,您無法通過在 HTML 程式碼中新增額外的空格或換行來改變輸出的效果。

當顯示頁面時,瀏覽器會移除原始碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是,HTML 程式碼中的所有連續的空行(換行)也被顯示為一個空格。

親自試一試

(這個例子演示了一些 HTML 格式化方面的問題)

方法/步驟2

今天我們web前端html先學到更新到HTML 段落,明天準時有更新哦。

注意事項

文章持續有更新,敬請關注

其實每次遇到不會的問題都去借鑑別人的是很麻煩的 不如自己專心去學習這一門課程 只有學到的才是自己的 每次遇到問題才能靈活運用 你去聽騰訊課堂的課 它裡面都會教的 有不懂的可以跟老師線上互動 這樣每次自己去學習了才會影響深刻

擁有關於表格邊框的附加資訊。

-

等標籤進行定義的。

定義最大的標題。

定義最小的標題。

例項

This is a heading

This is a heading

This is a heading


標籤在 HTML 頁面中建立水平線。

This is a paragraph


This is a paragraph


This is a paragraph


標籤) 來分隔文章中的小節是一個辦法(但並不是唯一的辦法)。

to

定義 HTML 標題


定義水平線。

定義註釋。

可以把 HTML 文件分割為若干段落。

HTML 段落

標籤定義的。

This is a paragraph

This is another paragraph

是塊級元素)

去插入一個空行是個壞習慣。用 標籤代替它!(但是不要用 標籤去建立列表。不要著急,您將在稍後的篇幅學習到 HTML 列表。)

This is a paragraph

This is another paragraph

This is
a para
graph with line breaks

相關問題答案