HTML标记可安全地封装不执行任何操作的元素 [英] HTML tag safe for enclosing elements that does nothing
问题描述
我有一些元素(例如div或段落)，我不想从其父元素继承样式.
I have elements (for example a div or a paragraph) which I don't want to inherit styles from their parent elements.
例如
<style>
div{
padding:3px;
}
/* and so many other basic tags styled like p, table, td, span, etc*/
</style>
<nonsensetag id="textToGrab">
<div>Hello World</div>
<p>Hi world</p>
</nonsensetag>
所以基本上我不能使用 div 或 p 来包装HelloWorld和Hiworld，因为它们将通过css规则进行格式化，但这是我只想知道的真正原因将它们包装在标签中，这样我就可以在不影响其当前样式的情况下使用javascript来捕获它们.
so basically I can't use div or p to wrap the HelloWorld and Hiworld because it will be formatted by css rules but the real reason why I want to just wrap them in a tag so I can grab them using javascript while not affecting its current style.
alert($('#textToGrab').text());
现在什么都不做的html标签是什么?还是由于CSS级联，我需要用有效的html标签包装它并强制重置所有样式吗?还是可以安全地创建自己的html标签?我可以在标准html模式中添加一些内容?
now what is the html tag that doesn't really do nothing? or do I need to wrap it with valid html tag and reset all the styles forcefully because css cascades? or its is safe to create my own html tag? if there's a possibility that I can add something in the standard html schema?
我已经读过这个问题，但它与我的情况不太吻合
I read this question already but it doesn't quite fit on my situation
推荐答案
什么是HTML标记，但实际上什么都不做?
What is the html tag that doesn't really do nothing?
< span> 和÷> 标签没有特定的含义，仅用于标记.
The <span> and <div> tags signify no specific meaning and are intended only for markup.
还是我需要用有效的html标签包装它并由于CSS级联而强制重置所有样式?
or do I need to wrap it with valid html tag and reset all the styles forcefully because css cascades?
强制重置所有样式需要大量的CSS .如果您认为需要这样做，则可能需要仔细考虑自己在做什么.您应该使用级联样式，而不是反对它们.
Resetting all the styles forcefully takes a boatload of CSS. If you feel you need to do this, you probably need to rethink carefully about what you are doing. You should be working with the cascading styles, not against them.
或者创建我自己的html标签是安全的吗?
or its is safe to create my own html tag?
永远不会执行此操作.尽管现代浏览器不会崩溃(它们是相当宽松的)，但HTML已被标准化以阻止每个人发明自己的标签.
Never, ever do this. While modern browsers won't break (they are quite permissive), HTML has been standardised to stop everyone from inventing their own tags.
是否有可能在标准html模式中添加一些内容?
if there's a possibility that I can add something in the standard html schema?
好吧，技术上，您可以.但这不值得麻烦.
Well, technically, you can. But it's just not worth the hassle.
还引用了 w3.org :
不要这样做！文档需要具有含义以及正确的语法.SGML和XML仅定义语法.HTML和XHTML定义含义.如果添加标准未定义的元素，则只有您自己知道它们的含义.在20或50年后，甚至您可能都不知道了……
Don't do this! Documents need to have a meaning as well as correct syntax. SGML and XML only define syntax. HTML and XHTML define meaning. If you add elements that aren't defined by a standard, only you yourself know what they mean. And in 20 or 50 years, even you may not know it anymore…
那怎么办呢?
IMO，这里的整个问题是您的CSS样式过于宽泛.您应尽可能将格式移至 .class .这使您可以更精细地控制每个 .class 的应用位置，并允许更多的代码重用.您将完全回避整个级联问题，并将这些节包装在< span> 标记中.
How can this be done then?
IMO, the whole problem here is that your CSS styling is too broad. You should move the formatting to a .class when possible. This gives you more fine-grained control over where you apply each .class and allows for greater code reuse. You'll sidestep the whole cascading issue entirely and will be able to wrap the sections in <span> tags.
注意:答案的其余部分并没有真正满足要求，但我宁愿保留而不是删除它，以防有人觉得有用
You can mark tags without using a .class by using a custom data-* attribute:
<div data-yank='field1'>Hello World!</div>
<p data-yank='field2'>Hi world</p>
attributeEquals 选择器允许您选择适当的元素:
The attributeEquals selector allows you to choose appropriate element:
$( "input[data-yank='field2']" ).text()
这篇关于HTML标记可安全地封装不执行任何操作的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
