如何通过网页浏览器翻译html中的嵌套标签以及嵌套标签的顺序如何？ [英] How are nested tags in html translated by web browsers and how does order of nesting tags in matter?
问题描述
在html中，假设我有两个标签< code> 和< pre> ，并且我想写预先格式化的代码然后这些标签的顺序是否重要？例如。以下是相同的吗？
<！DOCTYPE html>
< html>
< body>
< p>代码示例：< / p>
< pre>< code> var person = {
firstName：John2，
lastName：Doe
}< / code>< / pre>
< / body>
< / html>
现在我嵌入< pre> 里面< code> 标记，
<！DOCTYPE html>
< html>
< body>
< p>代码示例：< / p>
< code>< pre> var person = {
firstName：John2，
lastName：Doe
}< / pre>< / code>
< / body>
< / html>
以上两种方法会有什么技术上的区别吗？
附录：我也不明白在这里如何翻译html代码。在第一个版本中，代码标签中的文本应该被转换成不保留额外空白和换行符的内容，以便前标签应该看到代码标签的输出，并且不应该呈现额外的空白和换行符。
在第二种情况下，应将pre标签的输出提供给代码标签。现在代码标签会看到保留的额外空白和换行符，但代码标签的输出不应该保留它们，因为这就是代码标签的功能;它放弃了额外的空白和换行符。 解决方案
< span> < code> < a> < IMG> < b>
和块元素
< div> < pre> < p> < H1> < ul>
要嵌套有效，块元素可以包含
和一个内联元素可以包含
有些例外，但我不会在这里提出。
另外，如果将一个块元素放在内联中，它通常仍会显示相同的输出。
为什么？ ......大多数浏览器都会尝试解释他们做了什么，并尝试修正它并使其工作。
所以要回答您的问题
这些标签的排序是否重要？
是的，一般来说，block元素不允许在内联元素内，但也可能有其他原因和异常。
关于你的问题（评论）
内部代码< code>或者< pre>标签被赋予更高的优先级？
设置时，内部元素的属性预定义的，覆盖外部元素的相等属性。
所以在你的情况下， pre 元素的 white-space 属性默认设置为属性是继承， white-space：pre 并且 code 使用该值，因此输出看起来相同至于 pre 元素。
但是，如果我们明确设置 属性，它的行为将与您预期的一样，并且不会出现换行符等。代码元素中的空间
#reset code {white-space：normal;}
< div> < p>示例：属性的继承< / p> <预> <代码> var person = {firstName：John2，lastname：Doe}< / code> < / pre>< / div>< hr>< div id =reset> < p>示例：显式设置属性< / p> <预> <代码> var person = {firstName：John2，lastname：Doe}< / code> < / pre>< / div>
In html suppose I have two tags in hand <code> and <pre> and I want to write preformatted code then does the ordering of these tags matter? E.g. Are the following equivalent?
<!DOCTYPE html>
<html>
<body>
<p>Code example:</p>
<pre><code>var person = {
firstName:"John2",
lastName:"Doe"
}</code></pre>
</body>
</html>
Now I nest <pre> inside the <code> tag,
<!DOCTYPE html>
<html>
<body>
<p>Code example:</p>
<code><pre>var person = {
firstName:"John2",
lastName:"Doe"
}</pre></code>
</body>
</html>
Would there be any technical difference between the above two approaches?
Addendum: I also don't understand how is the html code being translated here. In the first version The text inside the code tags should be translated into something which doesn't retain extra white spaces and line-breaks so the pre tags should see the output of code tags and should not render extra white spaces and line breaks.
And in the second case the output of pre tags should be given to code tags. Now the code tags will see the preserved extra white spaces and line breaks but the output of code tags should not retain them because that is what the code tag does; it gives up extra white spaces and line breaks.
For html elements in general, there are 2 major groups, inline elements, for example
<span> <code> <a> <img> <b>
and block elements
<div> <pre> <p> <h1> <ul>
To be nested valid, a block element can contain
- an inline element
- a block element
and an inline element can contain
- an inline element
There are exceptions, though I will not bring them up here.
Also, if one would put a block element inside an inline, it will often still show the same output.
Why? ... Most browsers will try to interpret what one did and try to "fix it and make it work anyway".
So to answer your question
does the ordering of these tags matter?
Yes, in general, block elements are not allowed inside inline elements, but there can be other reasons and exceptions as well.
Regarding your question (comment)
Which is translated first? The code inside <code> or the <pre> tags are given higher priority?
Short answer, the inner element's property, when set, either explicit or predefined, overrides the outer element's equal property.
So in your case, the pre element's white-space property is set, as default, to white-space: pre and as the white-space property is inherited by default, the code uses that value, hence the output looks the same as for the pre element.
But if we were to explicit set the white-space property on the code element, it will behave as you might expect, with no line breaks etc.
#reset code {
white-space: normal;
}
<div>
<p>Example: inheritence of property</p>
<pre>
<code>
var person = {
firstName:"John2",
lastName:"Doe"
}
</code>
</pre>
</div>
<hr>
<div id="reset">
<p>Example: explicit set property</p>
<pre>
<code>
var person = {
firstName:"John2",
lastName:"Doe"
}
</code>
</pre>
</div>
这篇关于如何通过网页浏览器翻译html中的嵌套标签以及嵌套标签的顺序如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
