HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言,而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
HTML 標籤
HTML 標記標籤通常被稱爲 HTML 標籤 (HTML tag)。
HTML 標籤是由尖括號包圍的關鍵詞,比如 <html>
HTML 標籤通常是成對出現的,比如 <b> 和 </b>
標籤對中的第一個標籤是開始標籤,第二個標籤是結束標籤
開始和結束標籤也被稱爲開放標籤和閉合標籤
HTML 文檔 = 網頁
HTML 文檔描述網頁
HTML 文檔包含 HTML 標籤和純文本
HTML 文檔也被稱爲網頁
Web 瀏覽器的作用是讀取 HTML 文檔,並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤,而是使用標籤來解釋頁面的內容:
<html> 與 </html> 之間的文本描述網頁
<body> 與 </body> 之間的文本是可見的頁面內容
<h1> 與 </h1> 之間的文本被顯示爲標題
<p> 與 </p> 之間的文本被顯示爲段落
HTML 標題
HTML 標題(Heading)是通過 <h1> - <h6> 等標籤進行定義的。
超過的部分不顯示爲標題
Test:
<html> <body> <h1>My First Heading</h1> <h2>This is a heading </h2> <h3>This is a heading </h3> <!--支持1-6個--> <h12> What?</h12> <p>My First paragraph</p> <p>My Sencong paragraph</p> <a href="http://www.baidu.com">This is a link</a> <!-- 壓縮而不是截取--> <img src="1.jpg" width="500" height="500"> <img src="2.jpg" > </body> </html>
HTML 元素語法
HTML 元素以開始標籤起始
HTML 元素以結束標籤終止
元素的內容是開始標籤與結束標籤之間的內容
某些 HTML 元素具有空內容(empty content)
空元素在開始標籤中進行關閉(以開始標籤的結束而結束)
大多數 HTML 元素可擁有屬性
嵌套的 HTML 元素
大多數 HTML 元素可以嵌套(可以包含其他 HTML 元素)。
HTML 文檔由嵌套的 HTML 元素構成。
空的 HTML 元素
沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。
<br> 就是沒有關閉標籤的空元素(<br> 標籤定義換行)。
在 XHTML、XML 以及未來版本的 HTML 中,所有元素都必須被關閉。
在開始標籤中添加斜槓,比如 <br />,是關閉空元素的正確方法,HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的,但使用 <br /> 其實是更長遠的保障。
HTML 提示:使用小寫標籤
HTML 標籤對大小寫不敏感:<P> 等同於 <p>。許多網站都使用大寫的 HTML 標籤。
萬維網聯盟(W3C)在 HTML 4 中推薦使用小寫,而在未來 (X)HTML 版本中強制使用小寫。
HTML 屬性
HTML 標籤可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。
屬性總是以名稱/值對的形式出現,比如:name="value"。
屬性總是在 HTML 元素的開始標籤中規定。
HTML 提示:使用小寫屬性
屬性和屬性值對大小寫不敏感。
不過,萬維網聯盟在其 HTML 4 推薦標準中推薦小寫的屬性/屬性值。
而新版本的 (X)HTML 要求使用小寫屬性。
始終爲屬性值加引號
屬性值應該始終被包括在引號內。雙引號是最常用的,不過使用單引號也沒有問題。
在某些個別的情況下,比如屬性值本身就含有雙引號,那麼您必須使用單引號,例如:
name='Bill "HelloWorld" Gates'
<html> <!--背景色定義爲粉色--> <body bgcolor="pink"> <!-- 設置標題顯示的位置,中左右--> <h1 align="center">My First Heading</h1> <h2 align="left">This is a heading </h2> <h3 align="right">This is a heading </h3> <!--支持1-6個--> <h12> What?</h12> <p>My First paragraph</p> <p>My Sencong paragraph</p> </body> </html>
HTML 標題
標題(Heading)是通過 <h1> - <h6> 等標籤進行定義的。
<h1> 定義最大的標題。<h6> 定義最小的標題。
瀏覽器會自動地在標題的前後添加空行。
默認情況下,HTML 會自動地在塊級元素前後添加一個額外的空行,比如段落、標題元素前後。
標題很重要
請確保將 HTML heading 標籤只用於標題。不要僅僅是爲了產生粗體或大號的文本而使用標題。
搜索引擎使用標題爲您的網頁的結構和內容編制索引。
因爲用戶可以通過標題來快速瀏覽您的網頁,所以用標題來呈現文檔結構是很重要的。
應該將 h1 用作主標題(最重要的),其後是 h2(次重要的),再其次是 h3,以此類推。
HTML 水平線
<hr /> 標籤在 HTML 頁面中創建水平線。
hr 元素可用於分隔內容。
使用水平線 (<hr> 標籤) 來分隔文章中的小節是一個辦法(但並不是唯一的辦法)。
<html> <!--背景色定義爲粉色--> <body bgcolor="pink"> <!-- 設置標題顯示的位置,中左右--> <h1 align="center">My First Heading</h1> <hr/> <!-- 此標籤用於插入一條橫線 --> <h2 align="left">This is a heading </h2> <hr/> <h3 align="right">This is a heading </h3> <!--支持1-6個--> <hr/> <h12> What?</h12> <hr/> <p>My First paragraph</p> <hr/> <p>My Sencong paragraph</p> </body> </html>
HTML 段落
段落是通過 <p> 標籤定義的。瀏覽器會自動地在段落的前後添加空行。(<p> 是塊級元素)
使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用 <br /> 標籤代替它
<br /> 元素是一個空的 HTML 元素。由於關閉標籤沒有任何意義,因此它沒有結束標籤
<html> <!--背景色定義爲粉色--> <body bgcolor="pink"> <!-- 每一個br控制依次換行 --> <p>This<br/> is<br/> a<br/> HTML </p> </body> </html>
<br> 還是 <br />
您也許發現 <br> 與 <br /> 很相似。
在 XHTML、XML 以及未來的 HTML 版本中,不允許使用沒有結束標籤(閉合標籤)的 HTML 元素。
即使 <br> 在所有瀏覽器中的顯示都沒有問題,使用 <br /> 也是更長遠的保障。
HTML 輸出 - 有用的提示
我們無法確定 HTML 被顯示的確切效果。屏幕的大小,以及對窗口的調整都可能導致不同的結果。
對於 HTML,您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當顯示頁面時,瀏覽器會移除源代碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是,HTML 代碼中的所有連續的空行(換行)也被顯示爲一個空格。
HTML 超鏈接(鏈接)
超鏈接可以是一個字,一個詞,或者一組詞,也可以是一幅圖像,您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網頁中的某個鏈接上時,箭頭會變爲一隻小手。
我們通過使用 <a> 標籤在 HTML 中創建鏈接。
有兩種使用 <a> 標籤的方式:
通過使用 href 屬性 - 創建指向另一個文檔的鏈接
通過使用 name 屬性 - 創建文檔內的書籤
HTML 鏈接 - target 屬性
使用 Target 屬性,你可以定義被鏈接的文檔在何處顯示。
<html> <!--背景色定義爲粉色--> <body bgcolor="pink"> <a href="http://baidu.com" target="_blank">BaiDu</a> </body> </html>
HTML 鏈接 - name 屬性
name 屬性規定錨(anchor)的名稱。
您可以使用 name 屬性創建 HTML 頁面中的書籤。
書籤不會以任何特殊方式顯示,它對讀者是不可見的。
當使用命名錨(named anchors)時,我們可以創建直接跳至該命名錨(比如頁面中某個小節)的鏈接,這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
提示:錨的名稱可以是任何你喜歡的名字。
提示:您可以使用 id 屬性來替代 name 屬性,命名錨同樣有效。
基本的注意事項 - 有用的提示:
註釋:請始終將正斜槓添加到子文件夾。假如這樣書寫鏈接:href="http://www.w3school.com.cn/html",就會向服務器產生兩次 HTTP 請求。這是因爲服務器會添加正斜槓到這個地址,然後創建一個新的請求,就像這樣:href="http://www.w3school.com.cn/html/"。
提示:命名錨經常用於在大型文檔開始位置上創建目錄。可以爲每個章節賦予一個命名錨,然後把鏈接到這些錨的鏈接放到文檔的上部。如果您經常訪問百度百科,您會發現其中幾乎每個詞條都採用這樣的導航方式。
提示:假如瀏覽器找不到已定義的命名錨,那麼就會定位到文檔的頂端。不會有錯誤發生。