HTMl 中是否有可用于分组的逻辑容器标签?

2022-01-24 00:00:00 containers html

我需要一些在页面中不可见的东西、没有任何边框的东西以及根本不影响页面呈现的东西.我需要这个来大量隐藏或显示里面的东西，比如 document.getElementById("asd").innerHTML = "blah bla blah and some buttons and etc";

我希望它的标签边框不显示在页面上或根本不改变渲染.

例如，我希望渲染结果相同:

asd<输入类型=按钮"值=dsa"/><桌子><tr><td>zxc</td></tr></表>qwe</div>

和:

asd<东西 id = "asd"><输入类型=按钮"值=dsa"/><桌子><tr><td>zxc</td></tr></表></某事>qwe</div>

div 不好，因为它有边框，并且从 html 页面中的新行渲染.

<html><头><title>asd</title></头><身体>asd

dsa也变得不可见

解决方案

我对问题的解释:你想在 body 元素内部使用一个 HTML 元素，这样它就可以包含各种元素，包括像表格这样的块元素，以便呈现页面，就好像元素的开始和结束标记不存在一样.也就是说，就好像元素被它的内容替换了一样.特别是，它不应导致任何换行.

HTML 中没有这样的元素.最接近的是 ins 和 del.它们可能已经足够接近了，因为它们对渲染的唯一默认效果是文本内容分别带有下划线或过度强调(浏览器对块元素内的文本不一致地实现了这一点)，并且这些效果很容易被取消，使用通常的 CSS 警告:

ins, del { text-decoration: none;}

之所以有效(并且是有效的 HTML)是因为这些元素具有透明内容模型".例如，一个 ins 元素 可以包含元素出现的上下文中允许的任何内容.

使用这些元素是否合乎逻辑值得商榷，但实际上，ins(用于插入的内容)甚至可能被认为是合乎逻辑的，这取决于你在做什么.

请注意，某些用户代理或辅助软件可能(至少在将来)以反映其定义含义的方式实现这些元素.例如，语音浏览器可能会在 ins 元素之前和之后说出插入文本"和插入文本结尾".

在某种程度上，a 元素(没有任何属性)的使用方式大致相同(它在浏览器实践和 HTML5 CR 中也具有透明内容模型)，但它具有一些限制使这种方法有问题.特别是，根据语法规则，a 元素不得包含另一个 a 元素或其他交互式内容"，如 input.

I need something not visible in page, something that don't have any borders and something that doesn't affect page rendering at all. I need this for a mass hiding or showing things inside, like document.getElementById("asd").innerHTML = "blah bla blah and some buttons and etc";

I want it's tag borders to not be shown on the page or changed the rendering at all.

For example, I want the rendered result to be same for:

<div>
    asd
    <input type = "button" value = "dsa" />
    <table>
        <tr>
            <td>zxc</td>
        </tr>
    </table>
    qwe
</div>

and:

<div>
    asd
    <something id = "asd">
        <input type = "button" value = "dsa" />
        <table>
            <tr>
                <td>zxc</td>
            </tr>
        </table>
    </something>
    qwe
</div>

The div is bad, because it have a borders and renders from new line in html page.

<html>
    <head>
        <title>asd</title>

    </head>
    <body>
        asd<div id = "test_div" style = "display: none;">dsa</div>
    </body>
</html>

dsa also became invisible

解决方案

My interpretation of the question: You would like to use an HTML element, inside the body element, so that it can include various elements, including block elements like tables, so that the page is rendered as if the element’s start and end tag were not there. That is, as if the element were replaced by its content. In particular, it should not cause any line break.

There is no such element in HTML. What come closest are ins and del. They might come close enough, as their only default effect on rendering is that text content is underlined or overstruck, respectively (browsers implement this inconsistently for text inside block elements), and these effects are easily cancelled out, with the usual CSS caveats:

ins, del { text-decoration: none; }

The reason why this works (and is valid HTML) is that these elements have "transparent content model". E.g., an ins element may contain anything that would be allowed in the context where the element appears.

Whether it is logical to use such elements is debatable, but in fact, ins (for inserted content) might even be regarded as logical to use, depending on what you are doing.

Beware that some user agents or assistive software may (at least in future) implement these elements in a manner that reflects their defined meaning. For example, a speech browser might speak "inserted text" and "end of inserted text" before and after an ins element.

To some extent, the a element (without any attributes) could be used largely the same way (it, too, has transparent content model in browser practice and in HTML5 CR), but it has some restrictions that make that approach questionable. In particular, by the syntax rules, an a element must not contain another a element or other "interactive content" like input.

相关文章