HTML TAG
element是网页和文档的组成部分，在XML和HTML中，一个element可能包含数据项，或者一个页面的一小部分，如：一段文字或者一张图片。一个典型的element包括开始标签，属性，内容和闭合标签。
闭合标签
让我们看一段HTML代码例子：
<a href="https://developer.mozilla.org">MDN</a>
这是一个链接(锚元素)，在这个例子中，点击“MDN”会跳转到MDN页面，我们在开始标签中使用href属性指向MDN的URL。
这个element a 包含了：
- 一个开始标签
- 一个属性
- 一段文字
- 一个闭合标签
<em>有些元素是自闭合的，意味着只需要一个开始标签</em>
<em>有些元素不包含任何属性</em>
<em>元素里的内容可能包含多个元素</em>
element的最简单形式，开始标签可以写成如下结构：
<a>
闭合标签跟开始标签一样，只是在前面加一个斜杠：
</a>
标签名包含在尖括号中(<a)，标签名决定了浏览器如何来处理标签。
当浏览器解析到锚元素时，显示其内容并且当用户点击内容时，跳转到href指定的内容。其他类型的元素处理方式不一样(指处理和显示方式)。
在开始标签闭合之前如果包含属性，如：
<a href="https://developer.mozilla.org">
开始标签之后的是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>
网友评论