HTML 元素

2023-05-06 10:12 更新

HTML 元素

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

HTML 元素

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

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

HTML 元素語法

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

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

嵌套的 HTML 元素

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

HTML 文檔實(shí)例

實(shí)例

<!DOCTYPE html>

<html>

<body>

<p>這是第一個(gè)段落。</p>

</body>

</html>


嘗試一下 ?

上述的實(shí)例包含了三個(gè) HTML 元素。

HTML 實(shí)例解析

<p> 元素:

實(shí)例

<p>這是第一個(gè)段落。</p>


嘗試一下 ?

這個(gè) <p> 元素定義了 HTML 文檔中的一個(gè)段落。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <p> 以及一個(gè)結(jié)束標(biāo)簽 </p>。
元素內(nèi)容是: 這是第一個(gè)段落。

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

<body> 元素:

實(shí)例

<body>

<p>這是第一個(gè)段落。</p>

</body>


嘗試一下 ?

<body> 元素定義了 HTML 文檔的主體。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <body> 以及一個(gè)結(jié)束標(biāo)簽 </body>。
元素內(nèi)容是另一個(gè) HTML 元素（p 元素）。

<html> 元素：

實(shí)例

<html>

<body>

<p>這是第一個(gè)段落。</p>

</body>

</html>


嘗試一下 ?

<html> 元素定義了整個(gè) HTML 文檔。
這個(gè)元素?fù)碛幸粋€(gè)開始標(biāo)簽 <html> ，以及一個(gè)結(jié)束標(biāo)簽 </html>.
元素內(nèi)容是另一個(gè) HTML 元素（body 元素）。

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

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

實(shí)例

<p>這是一個(gè)段落

<p>這是一個(gè)段落


嘗試一下 ?

上述實(shí)例在瀏覽器中也能正常顯示，因?yàn)殛P(guān)閉標(biāo)簽是可選的。

但您不能對(duì)此產(chǎn)生依賴性，因?yàn)橥浭褂媒Y(jié)束標(biāo)簽會(huì)產(chǎn)生不可預(yù)料的結(jié)果或錯(cuò)誤。

HTML 空元素

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

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

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

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

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

HTML 提示：使用小寫標(biāo)簽

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

W3CSchool 使用的是小寫標(biāo)簽，因?yàn)槿f維網(wǎng)聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強(qiáng)制使用小寫。

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

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


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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)