饥人谷技术博客

Element(译文)

2015-11-20  本文已影响198人  奔跑的Pi

前端7班_leec

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:

<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>

上一篇 下一篇

猜你喜欢

热点阅读