element是網(wǎng)頁和文檔的組成部分，在XML和HTML中糊识，一個(gè)element可能包含數(shù)據(jù)項(xiàng)彩倚，或者一個(gè)頁面的一小部分，如：一段文字或者一張圖片卷要。一個(gè)典型的element包括開始標(biāo)簽渣聚，屬性，內(nèi)容和閉合標(biāo)簽僧叉。
閉合標(biāo)簽
讓我們看一段HTML代碼例子：
<a >MDN</a>
這是一個(gè)鏈接(錨元素)奕枝，在這個(gè)例子中，點(diǎn)擊“MDN”會(huì)跳轉(zhuǎn)到MDN頁面瓶堕，我們在開始標(biāo)簽中使用href屬性指向MDN的URL隘道。
這個(gè)element a 包含了：
- 一個(gè)開始標(biāo)簽
- 一個(gè)屬性
- 一段文字
- 一個(gè)閉合標(biāo)簽
<em>有些元素是自閉合的，意味著只需要一個(gè)開始標(biāo)簽</em>
<em>有些元素不包含任何屬性</em>
<em>元素里的內(nèi)容可能包含多個(gè)元素</em>
element的最簡單形式郎笆，開始標(biāo)簽可以寫成如下結(jié)構(gòu)：
<a>
閉合標(biāo)簽跟開始標(biāo)簽一樣谭梗，只是在前面加一個(gè)斜杠：
</a>
標(biāo)簽名包含在尖括號(hào)中(<a)，標(biāo)簽名決定了瀏覽器如何來處理標(biāo)簽宛蚓。
當(dāng)瀏覽器解析到錨元素時(shí)激捏，顯示其內(nèi)容并且當(dāng)用戶點(diǎn)擊內(nèi)容時(shí)，跳轉(zhuǎn)到href指定的內(nèi)容凄吏。其他類型的元素處理方式不一樣(指處理和顯示方式)远舅。
在開始標(biāo)簽閉合之前如果包含屬性，如：
<a >
開始標(biāo)簽之后的是element包含的內(nèi)容痕钢，在錨元素例子中表谊，表示你想讓用戶跳轉(zhuǎn)的頁面，注意到屬性的結(jié)構(gòu)：
'href="https://developer.mozilla.org"'
是一個(gè)鍵值對(通過'='賦值)盖喷，屬性值用引號(hào)引起來爆办，屬性用來提供額外的信息(影響瀏覽器處理的方式)。
element嵌套
<ul> <li>Apples</li> <li>Oranges</li> <li>Bananas</li> </ul>
在這個(gè)例子中课梳，我們定義了一個(gè)無序列表距辆，包含了3個(gè)列表項(xiàng)，我們叫這種結(jié)構(gòu)為嵌套結(jié)構(gòu)或者樹結(jié)構(gòu)暮刃，你能想象當(dāng)文檔變得很長跨算，這個(gè)嵌套結(jié)構(gòu)看起來像一顆樹：
- 一個(gè)element
(<li>)只能有一個(gè)直接父級(jí)element(<ul>)； - 一個(gè)element
(<ul>)可以包含一個(gè)或者多個(gè)子element(<li>); - 有相同父級(jí)element的直接子元素之間叫做sibling element(兄弟元素)椭懊；
自閉合標(biāo)簽
最后诸蚕，我們來看看自閉合element:
<img src="picture.png" alt="picture"/>
這是頁面引入圖片元素的標(biāo)準(zhǔn)方式，(<img>)元素包含屬性alt，alt屬性用來當(dāng)圖片不能顯示時(shí)背犯，顯示其替代文字坏瘩。屬性src展示圖片的內(nèi)容。在尖括號(hào)閉合之前有一個(gè)反斜杠表示其是一個(gè)自閉合標(biāo)簽漠魏，閉合標(biāo)簽不是必須的倔矾。
當(dāng)瀏覽器解析到img element時(shí)，它將試著獲取src屬性值并顯示在頁面中柱锹，如果圖片不能獲取哪自，將顯示alt屬性值，進(jìn)一步解釋了屬性值如何影響瀏覽器解析element
當(dāng)你探索web內(nèi)容時(shí)禁熏，你將遇見許多類型的element壤巷，你可以訪問 HTML Element Reference 查看更多。
本文翻譯出處：
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Element
<strong>轉(zhuǎn)載請注明原作者瞧毙，如果你覺得這篇文章對你有幫助或啟發(fā)胧华，也可以請我腐敗一下</strong>
