html基礎教程1

阿新 • • 發佈：2020-06-29

什麼是 HTML？

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>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

例子解釋

<html> 與 </html> 之間的文字描述網頁

<body> 與 </body> 之間的文字是可見的頁面內容
<h1> 與 </h1> 之間的文字被顯示為標題
<p> 與 </p> 之間的文字被顯示為段落

HTML 標題

HTML 標題（Heading）是通過 <h1> - <h6> 等標籤進行定義的。

例項

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落

HTML 段落是通過 <p> 標籤進行定義的。

例項

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML 連結

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

例項

<a href="http://www.baidu.com">This is a link</a>

註釋：在 href 屬性中指定連結的地址。

HTML 影象

HTML 影象是通過 <img> 標籤進行定義的。

例項

<img src="666666.jpg" width="104" height="142" />

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

HTML 元素

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

開始標籤	元素內容	結束標籤
<p>	This is a paragraph	</p>
<a href="default.htm" >	This is a link	</a>
<br />

註釋：開始標籤常被稱為開放標籤（opening tag），結束標籤常稱為閉合標籤（closing tag）。

HTML 元素語法

HTML 元素以開始標籤起始
HTML 元素以結束標籤終止
元素的內容是開始標籤與結束標籤之間的內容
某些 HTML 元素具有空內容（empty content）
空元素在開始標籤中進行關閉（以開始標籤的結束而結束）
大多數 HTML 元素可擁有屬性

巢狀的 HTML 元素

大多數 HTML 元素可以巢狀（可以包含其他 HTML 元素）。

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

HTML 文件例項

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

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

HTML 例項解釋

<p> 元素：

<p>This is my first paragraph.</p>

這個 <p> 元素定義了 HTML 文件中的一個段落。

這個元素擁有一個開始標籤 <p>，以及一個結束標籤 </p>。

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

<body> 元素：

<body>
<p>This is my first paragraph.</p>
</body>

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

這個元素擁有一個開始標籤 <body>，以及一個結束標籤 </body>。

元素內容是另一個 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>

<html> 元素定義了整個 HTML 文件。

這個元素擁有一個開始標籤 <html>，以及一個結束標籤 </html>。

元素內容是另一個 HTML 元素（body 元素）。

不要忘記結束標籤

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

<p>This is a paragraph
<p>This is a paragraph

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

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

空的 HTML 元素

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

<br> 就是沒有關閉標籤的空元素（<br> 標籤定義換行）。

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

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

即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。

HTML 提示：使用小寫標籤

HTML 標籤對大小寫不敏感：<P> 等同於 <p>。許多網站都使用大寫的 HTML 標籤。

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

HTML 屬性

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

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

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

屬性例項

HTML 連結由 <a> 標籤定義。連結的地址在 href 屬性中指定：

<a href="http://www.baidu.com">This is a link</a>

親自試一試

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 標題

標題（Heading）是通過 <h1> - <h6> 等標籤進行定義的。

<h1> 定義最大的標題。<h6> 定義最小的標題。

例項

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

親自試一試

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

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

標題很重要

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

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

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

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

HTML 水平線

<hr /> 標籤在 HTML 頁面中建立水平線。

hr 元素可用於分隔內容。

例項

<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

親自試一試

提示：使用水平線 (<hr> 標籤) 來分隔文章中的小節是一個辦法（但並不是唯一的辦法）。

HTML 註釋

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

註釋是這樣寫的：

例項

<!-- This is a comment -->

親自試一試

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

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

HTML 提示 - 如何檢視原始碼

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

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

HTML 標籤參考手冊

標籤	描述
<html>	定義 HTML 文件。
<body>	定義文件的主體。
<h1> to <h6>	定義 HTML 標題
<hr>	定義水平線。
<!-->	定義註釋。

HTML 段落

HTML 標題
HTML 格式化

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

HTML 段落

段落是通過 <p> 標籤定義的。

例項

<p>This is a paragraph</p>
<p>This is another paragraph</p>

親自試一試

註釋：瀏覽器會自動地在段落的前後新增空行。（<p> 是塊級元素）

提示：使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用 <br /> 標籤代替它！（但是不要用 <br /> 標籤去建立列表。不要著急，您將在稍後的篇幅學習到 HTML 列表。）

不要忘記結束標籤

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

例項

<p>This is a paragraph
<p>This is another paragraph

親自試一試

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

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

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

HTML 折行

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

<p>This is<br />a para<br />graph with line breaks</p>

親自試一試

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

<br> 還是 <br />

您也許發現 <br> 與 <br /> 很相似。

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

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

HTML 輸出 - 有用的提示

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

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

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

來自本頁的例項

HTML 段落: 如何在瀏覽器中顯示 HTML 段落。
換行: 在 HTML 文件中使用換行。
在 HTML 程式碼中的排版一首唐詩: 瀏覽器在顯示 HTML 時，會省略原始碼中多餘的空白字元（空格或回車等）。

HTML 標籤參考手冊

標籤	描述
<p>	定義段落。
<br />	插入單個折行（換行）。

文字格式化標籤

標籤	描述
<b>	定義粗體文字。
<big>	定義大號字。
<em>	定義著重文字。
<i>	定義斜體字。
<small>	定義小號字。
<strong>	定義加重語氣。
<sub>	定義下標字。
<sup>	定義上標字。
<ins>	定義插入字。
<del>	定義刪除字。
<s>	不贊成使用。使用 <del> 代替。
<strike>	不贊成使用。使用 <del> 代替。
<u>	不贊成使用。使用樣式（style）代替。

“計算機輸出”標籤

標籤	描述
<code>	定義計算機程式碼。
<kbd>	定義鍵盤碼。
<samp>	定義計算機程式碼樣本。
<tt>	定義打字機程式碼。
<var>	定義變數。
<pre>	定義預格式文字。
<listing>	不贊成使用。使用 <pre> 代替。
<plaintext>	不贊成使用。使用 <pre> 代替。
<xmp>	不贊成使用。使用 <pre> 代替。

引用、引用和術語定義

標籤	描述
<abbr>	定義縮寫。
<acronym>	定義首字母縮寫。
<address>	定義地址。
<bdo>	定義文字方向。
<blockquote>	定義長的引用。
<q>	定義短的引用語。
<cite>	定義引用、引證。
<dfn>	定義一個定義專案。