HTML 元素

2023-05-06 10:12 更新

HTML 元素

HTML 文檔由 HTML 元素定義，HTML 元素指的是從開始標簽（start tag）到結(jié)束標簽（end tag）的所有代碼。

HTML 元素

開始標簽 * 元素內(nèi)容 結(jié)束標簽 *
<p> 這是一個段落 </p>
<a href="default.htm"> 這是一個鏈接 </a>
<br> 這是一個換行標簽  

*開始標簽常被稱為起始標簽（opening tag），結(jié)束標簽常稱為閉合標簽（closing tag）。

HTML 元素語法

  • HTML 元素以開始標簽起始
  • HTML 元素以結(jié)束標簽終止
  • 元素的內(nèi)容是開始標簽與結(jié)束標簽之間的內(nèi)容
  • 某些 HTML 元素具有空內(nèi)容（empty content）
  • 空元素在開始標簽中進行關(guān)閉（以開始標簽的結(jié)束而結(jié)束）
  • 大多數(shù) HTML 元素可擁有屬性

注釋: 您將在本教程的 HTML 屬性一章中學(xué)習(xí)更多有關(guān)屬性的詳細內(nèi)容。

嵌套的 HTML 元素

HTML 文檔由嵌套的 HTML 元素（可以包含其他 HTML 元素）構(gòu)成。 

HTML 文檔實例

實例

<!DOCTYPE html>

<html>

<body>

<p>這是第一個段落。</p>

</body>

</html>


嘗試一下 ?

上述的實例包含了三個 HTML 元素。

HTML 實例解析

<p> 元素:

實例

<p>這是第一個段落。</p>


嘗試一下 ?

這個 <p> 元素定義了 HTML 文檔中的一個段落。
這個元素擁有一個開始標簽 <p> 以及一個結(jié)束標簽 </p>。
元素內(nèi)容是: 這是第一個段落。

打開實戰(zhàn)測試開始學(xué)習(xí) <p> 標簽。

<body> 元素:

實例

<body>

<p>這是第一個段落。</p>

</body>


嘗試一下 ?

<body> 元素定義了 HTML 文檔的主體。
這個元素擁有一個開始標簽 <body> 以及一個結(jié)束標簽 </body>。
元素內(nèi)容是另一個 HTML 元素（p 元素）。

<html> 元素：

實例

<html>

<body>

<p>這是第一個段落。</p>

</body>

</html>


嘗試一下 ?

<html> 元素定義了整個 HTML 文檔。
這個元素擁有一個開始標簽 <html> ，以及一個結(jié)束標簽 </html>.
元素內(nèi)容是另一個 HTML 元素（body 元素）。

不要忘記結(jié)束標簽

如果您忘記了使用結(jié)束標簽，大多數(shù)瀏覽器也會正確地顯示 HTML：

實例

<p>這是一個段落

<p>這是一個段落


嘗試一下 ?

上述實例在瀏覽器中也能正常顯示，因為關(guān)閉標簽是可選的。

但您不能對此產(chǎn)生依賴性，因為忘記使用結(jié)束標簽會產(chǎn)生不可預(yù)料的結(jié)果或錯誤。

HTML 空元素

HTML 空元素即為沒有內(nèi)容的 HTML 元素。

HTML 空元素應(yīng)該在開始標簽中關(guān)閉。

HTML 的一個空元素為 <br>（用于定義換行），<br> 元素就是沒有關(guān)閉標簽。

HTML 空元素的關(guān)閉方法是在開始標簽中添加斜杠，比如 <br />，HTML、XHTML 和 XML 都接受這種方式。

注意：在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關(guān)閉，即使是空元素。

HTML 提示：使用小寫標簽

由于 HTML 標簽對英文字母的大小寫不敏感，所以 <P> 和 <p> 表達的意思相同，不過早年的大部分網(wǎng)站喜歡使用大寫的 HTML 標簽。

W3CSchool 使用的是小寫標簽，因為萬維網(wǎng)聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。

 在HTML4之前，HTML的標準比較混亂，所以早年的HTML代碼并不是那么規(guī)范，與XML的代碼會更加相似，而XML代碼的一大特點就是標簽喜歡使用大寫，所以在HTML剛發(fā)展的幾年大部分網(wǎng)站都喜歡使用大寫的標簽。

隨著HTML4甚至HTML5的普及，后續(xù)的網(wǎng)站都遵循HTML4的推薦——使用小寫，這也是為什么現(xiàn)在的大多數(shù)網(wǎng)站使用小寫的HTML標簽的原因。


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號