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> —— 錯
#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 版本中強制使用小寫。