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 教程
在本教程中,你將學習如何使用 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
註釋:開始標籤常被稱為開放標籤(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 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 段落,明天準時有更新哦。
注意事項
文章持續有更新,敬請關注
其實每次遇到不會的問題都去借鑑別人的是很麻煩的 不如自己專心去學習這一門課程 只有學到的才是自己的 每次遇到問題才能靈活運用 你去聽騰訊課堂的課 它裡面都會教的 有不懂的可以跟老師線上互動 這樣每次自己去學習了才會影響深刻