HTML元素

HTML元素

什麼是HTML元素?

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

例如:

<p>段落內容</p>  

<p>是開始標籤,</p>是結束標籤,「段落內容」是元素內容

<a>連結內容</a>

<a>是開始標籤,</a>是結束標籤,「連結內容」是元素內容


HTML 元素語法

#HTML 元素以開始標籤起始

HTML 元素以結束標籤終止

元素的內容是開始標籤與結束標籤之間的內容

某些HTML 元素具有空內容(empty content)

空元素在開始標籤中進行關閉(以開始標籤的結束而結束)

大多數HTML 元素可擁有屬性

#註解: 您將在本教學的下一章中學習更多有關屬性的內容。


#巢狀的HTML 元素

<p大多數html="" 元素可以嵌套(可以包含其他="" 元素)。

什麼是嵌套?嵌套規則是什麼?

巢狀就是區塊級元素(block)包含內嵌元素(inline),一層一層,直到完成。

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

HTML 標籤包含區塊級元素(block)、內嵌元素(inline)

「區塊層級元素

#一般用來建立網站架構、佈局、承載內容…它包括以下這些標籤

程式碼如下:

  address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、 noframes、noscript、ol、p、pre、table、ul

內嵌元素

#

  一般用在網站內容之中的某些細節或部位,用以「強調、區分樣式、上標、下標、錨點」等等,下面這些標籤都屬於內嵌元素

代碼如下:

  a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、 select、small、span、strike、strong、sub、sup、textarea、tt、u、var

#HTML 標籤的巢狀規則

區塊元素可以包含內聯元素或某些區塊元素,但內聯元素不能包含區塊元素,它只能包含其它的內聯元素

程式碼如下:

##  <div>< ;h1></h1><p></p></div> —— 對</p> <p>  <a href=”#”><span>  <a href=”#"><span>]< /span></a> —— 對</p> <p>  <span><div></div></span> —— 錯


區塊級元素不能放在<p>裡面:程式碼如下:

  <p><ol><li></li></ol><<li></li></ol>< ;/p> —— 錯</p> <p>  <p><div></div></p> —— 錯


有幾個特殊的區塊級元素只能包含內嵌元素,不能再包含區塊級元素,這幾個特殊的標籤是

程式碼如下:

  h1、h2、 h3、h4、h5、h6、p、dt

li 內可以包含div 標籤—— 這一條其實不必單獨列出來的,但是網上許多人對此有些疑惑,就在這裡略加說明:

li 和div 標籤都是裝載內容的容器,地位平等,沒有級別之分(例如:h1、h2 這樣森嚴的等級制度^_^),要知道,li 標籤連它的父級ul 或是ol 都可以容納的,為什麼有人會覺得li 偏偏容納不下一個div 呢?別把li 看得那麼小氣嘛,別看li 長得挺瘦小,其實li 的胸襟很大滴……



塊級元素與塊級元素並列、內嵌元素與內嵌元素並列

程式碼如下:

  <div><h2></h2><p></p><</h2><p></p>< /div> —— 對</p> <p>  <div><a href=”#”></a><span></span></div><span></span></div> ——對</p> <p>  <div><h2></h2><span></span></div><span></span></div><span></span></div>; —— 錯誤


#HTML 文件實例

<!DOCTYPE html>
 <html>
 
 <body>
 <p>这里是测试事例</p>
 </body>
 
 </html>

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

HTML 實例解析

#<p> 元素:

<p>這裡是測試案例</p>

這個<p> 元素定義了HTML 文件中的一個段落。
這個元素有一個開始標籤<p> 以及一個結束標籤</p>.
元素內容是: 這裡是測試例子

<body> 元素:

<body>
<p>這裡是測試案例</p>
</body>

The <body>元素定義了HTML 文件的主體。
這個元素有一個開始標籤 <body> 以及一個結束標籤 </body>。
元素內容是另一個 HTML 元素(p 元素)。

<html> 元素:

<html>

<body>
<p>這裡是測試案例</p>
</body>

</html>

The <html> 元素定義了整個HTML 文件。
這個元素有一個開始標籤 <html> ,而一個結束標籤 </html>.
元素內容是另一個 HTML 元素(body 元素)。

不要忘記結束標籤

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

<p>這是一個段落
<p>這是一個段落

以上實例在瀏覽器中也能正常顯示,因為關閉標籤是可選的。

但不要依賴這種做法。忘記使用結束標籤會產生不可預料的結果或錯誤。

HTML 空白元素

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

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

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

在開始標籤中加入斜杠,例如 <br />,是關閉空元素的正確方法,HTML、XHTML 和 XML 都接受這種方式。

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

HTML 提示:使用小寫標籤

#

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

W3CSchool 使用的是小寫標籤,因為萬維網聯盟(W3C)在 HTML 4 中建議使用小寫,而在未來 (X)HTML 版本中強制使用小寫。


繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>欢迎学习HTML</h1> <h2>欢迎学习HTML</h2> <h3>欢迎学习HTML</h3> <p>这里是第一段内容</p> <p>这是第二段内容</p> <a href="//m.sbmmt.com/">点击学习</a> <br/> <img src="https://img.php.cn/upload/course/000/000/007/57fb2bca70c24537.jpg"> </body> </html> 同学们从上面的例子中找出各个标签的元素内容。