element是網頁和文檔的組成部分，在XML和HTML中，一個element可能包含數據項，或者一個頁面的一小部分，如：一段文字或者一張圖片。一個典型的element包括開始標簽，屬性，內容和閉合標簽。
閉合標簽
讓我們看一段HTML代碼例子：
<a >MDN</a>
這是一個鏈接(錨元素)，在這個例子中，點擊“MDN”會跳轉到MDN頁面，我們在開始標簽中使用href屬性指向MDN的URL。
這個element a 包含了：
- 一個開始標簽
- 一個屬性
- 一段文字
- 一個閉合標簽
<em>有些元素是自閉合的，意味著只需要一個開始標簽</em>
<em>有些元素不包含任何屬性</em>
<em>元素里的內容可能包含多個元素</em>
element的最簡單形式，開始標簽可以寫成如下結構：
<a>
閉合標簽跟開始標簽一樣，只是在前面加一個斜杠：
</a>
標簽名包含在尖括號中(<a)，標簽名決定了瀏覽器如何來處理標簽。
當瀏覽器解析到錨元素時，顯示其內容并且當用戶點擊內容時，跳轉到href指定的內容。其他類型的元素處理方式不一樣(指處理和顯示方式)。
在開始標簽閉合之前如果包含屬性，如：
<a >
開始標簽之后的是element包含的內容，在錨元素例子中，表示你想讓用戶跳轉的頁面，注意到屬性的結構：
'href="https://developer.mozilla.org"'
是一個鍵值對(通過'='賦值)，屬性值用引號引起來，屬性用來提供額外的信息(影響瀏覽器處理的方式)。
element嵌套
<ul> <li>Apples</li> <li>Oranges</li> <li>Bananas</li> </ul>
在這個例子中，我們定義了一個無序列表，包含了3個列表項，我們叫這種結構為嵌套結構或者樹結構，你能想象當文檔變得很長，這個嵌套結構看起來像一顆樹：
- 一個element
(<li>)只能有一個直接父級element(<ul>)； - 一個element
(<ul>)可以包含一個或者多個子element(<li>); - 有相同父級element的直接子元素之間叫做sibling element(兄弟元素)；
自閉合標簽
最后，我們來看看自閉合element:
<img src="picture.png" alt="picture"/>
這是頁面引入圖片元素的標準方式，(<img>)元素包含屬性alt，alt屬性用來當圖片不能顯示時，顯示其替代文字。屬性src展示圖片的內容。在尖括號閉合之前有一個反斜杠表示其是一個自閉合標簽，閉合標簽不是必須的。
當瀏覽器解析到img element時，它將試著獲取src屬性值并顯示在頁面中，如果圖片不能獲取，將顯示alt屬性值，進一步解釋了屬性值如何影響瀏覽器解析element
當你探索web內容時，你將遇見許多類型的element，你可以訪問 HTML Element Reference 查看更多。
本文翻譯出處：
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Element
<strong>轉載請注明原作者，如果你覺得這篇文章對你有幫助或啟發，也可以請我腐敗一下</strong>
