PROSAGA码农传奇-Bootstrap-我应该使用标签代替吗？

我应该使用标签代替吗？

作者: 咿呀哟
发布时间: 2024-12-18 11:59:49 (2月前)
转自：

<div class =“excerpt”> 我查看了Facebook的来源，他们使用＆lt; i＆gt;标记以显示图标。此外，今天我看了Twitter的 引导 </跨度> 。它还使用＆lt; i＆gt;。标记以显示图标。但，从HTML5规范中缺少一些东西？我正在使用span来显示图标，它似乎对我有效，直到现在。更新： 引导 </跨度> 3现在使用跨度图标。官方文件鈥 </DIV>

收藏举报

8 条回复

0#
回复此人
电动少女 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> 我完全采用了与其他人的答案截然不同的方法。让我为我的解决方案添加前缀，并指出有时标准和约定应该被打破，特别是在标准HTML词法标记定义的上下文中。 没有什么可以阻止你创建自我描述的自定义元素。 的 现代浏览器甚至IE 6+（w / shim）都可以支持以下内容： </强> <pre> <code> <icon class="plus"> </code> </pre> 要么 <pre> <code> <icon-add> </code> </pre> 只需确保标记规范化： <pre> <code> icon { display:block; margin:0; padding:0; border:0; ... } </code> </pre> 如果你需要支持IE9或更早版本，请使用垫片（参见下面的帖子）。 的 看看这个StackOverflow帖子： </强> <a href="https://stackoverflow.com/questions/2802687/is-there-a-way-to-create-your-own-html-tag-in-html5/11467718#11467718"> 有没有办法在HTML5中创建自己的HTML标签 </A> 为了进一步论证，Google的Angular Directives和新的Polymer项目都使用了自定义HTML标签的概念。 </DIV>

编辑

1#
回复此人
猫南北 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> 我在这里跳得太晚了，但是在自己思考的时候遇到了这个页面。当然我不知道Facebook或Twitter如何证明它是合理的，但这是我自己的思想过程，它的价值。 最后，我得出结论，这种做法不是那么无意义（就是一个词？）。事实上，除了简短和“我是为图标”的良好关联，我认为它实际上是一个图标的最直接的语义选择 <code> <img> </code> 标签不实用。 的 1.用法与规格一致。 </强> 虽然它可能不是W3主要考虑的因素，但在我看来这是官方的规格 <code> </code> 可以很容易地容纳一个图标。毕竟，回复箭头符号以另一种方式说“回复”。它表达了一个技术术语，读者可能不熟悉，通常用斜体字表示。（“在推特上，这就是我们所说的 回复箭头 “）这是一个来自另一种语言的术语：一种象征性的语言。 如果，而不是箭头符号，Twitter使用 <code> shout out </code> 要么 <code> [Japanese character for reply] </code> （在英文页面上），这与规范一致。那为什么不呢 <code> [reply arrow] </code> ？（我在这里严格谈论HTML语义，而不是可访问性，我将会这样做。） 据我所知，图标用法明确违反规范的唯一部分是“文本范围”短语（当标签也不包含文本时）。很显然， <code> </code> tag主要用于文本，但与标记的整体意图相比，这是一个非常小的细节。此标记的重要问题不是它包含的内容格式，而是该内容的含义。 当您认为“text”和“icon”之间的界限在网站上几乎不存在时尤其如此。文本可能看起来更像一个图标（如在日本示例中）或图标可能看起来像文本（如在jpg按钮中显示“提交”或带有重叠标题的猫照片）或文本可能被替换或增强为通过CSS的图像。文字，图片 - 谁在乎？这都是内容。只要每个人 - 有障碍的人，有缺陷的浏览器，搜索引擎蜘蛛和其他各种机器都能理解这种意义，我们就完成了我们的工作。 因此，规范的编写者没有考虑（或选择）澄清这一点的事实不应该使我们的手与做有意义的事情联系起来并且与标签的精神一致。该 <code> <a> </code> 标签最初的目的是将用户带到其他地方，但现在它可能会弹出一个灯箱。大呐喊吧？如果有人在规格问题出现之前想出了如何在点击时弹出一个灯箱，他们仍应该使用 <code> <a> </code> 标签，而不是 <code> </code> ，即使它与当前的定义不完全一致 - 因为它最接近并且仍然与标签的精神一致（“当你点击这里时会发生某种事情”）。同样的处理 <code> </code> - 无论你放入其中的任何类型的东西，或者你创造性地使用它，它表达了一个替代或分开的术语的一般概念。 的 2. <code> </code> 标签 增加 图标元素的语义含义。 </强> 单独携带图标类的替代选项是 <code> </code> ，当然没有任何语义含义。机器问的时候 <code> </code> 它包含什么，它说，“我不知道。可能是任何东西。”但是 <code> </code> 标签说：“我包含了一种不同于通常方式的说法，或者可能是一个不熟悉的术语。”这与“我包含一个图标”不一样，但它比它更接近它 <code> </code> 拿到！ 的 最终，常见用法是正确的。 </强> 除了上述内容之外，值得考虑的是机器阅读器（无论是搜索引擎，屏幕阅读器还是其他任何东西）可能随时开始考虑Facebook，Twitter和其他网站使用 <code> </code> 标签的图标。他们不关心规范，因为他们关心通过任何必要的方式从代码中提取含义。因此，他们可能会使用这种常用的知识来简单地记录“这里可能有一个图标”或者做一些更高级的事情，比如触发查看CSS以获得暗示意义，或者谁知道什么。所以，如果你选择使用 <code> </code> 对于您网站上的图标，您可能会提供比规范更多的含义。 此外，如果这种用法变得普遍，将来可能会包含在规范中。然后你将完成你的代码，替换 <code> </code> 用 <code> </code> 的！因此，加入规范的方向可能是有意义的，特别是当它与当前规范没有明显冲突时。常见的用法倾向于比其他方式更多地规定语言规则。如果你已经够大了，你还记得“网站”是这个词新的时候的官方拼写吗？字典坚持必须有空间，Web必须大写。这有语义上的原因。但常见的用法是，“无论如何，这是愚蠢的。我正在使用'网站'，因为它更简洁，看起来更好。”不久，词典正式承认拼写正确。 的 所以我要继续使用它。 </强> 所以， <code> </code> 因为规范为机器提供了更多的意义，它为人类提供了更多的意义，因为我们很容易将“i”与“icon”相关联， 和 它只有一个字母。赢得！如果你确保在内部包含等效文本 <code> </code> 标签或它旁边（正如Twitter所做的那样），然后屏幕阅读器了解点击回复的位置，如果CSS没有加载，链接是可用的，具有良好视力的人类读者和体面的浏览器看到一个漂亮的图标。考虑到这一切，我没有看到缺点。 </DIV>

编辑

2#
回复此人
Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> 当我想在链接中放置一个绝对定位的图标时，我也发现这很有用 <code> <a> </code> 标签。 我想到了 <code> <img> </code> 首先标记，但链接内的那些标记的默认样式通常具有边框样式和/或阴影效果。另外，使用它感觉不对 <code> <img> </code> 标签没有定义“src”属性，而我正在使用背景图像样式表声明，以便图像不会重影和拖动。 此时你正在考虑像这样的标签 <code> </code> 要么 <code> </code> - 在这种情况下 <code> </code> 这种图标非常有意义。 总而言之，我认为除了直观之外，它的好处是它需要最少的样式表调整才能使这个标签作为一个图标。 </DIV>

编辑

3#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> 我的猜测：因为Twitter认为需要支持旧版浏览器，否则他们会使用 <code> :before </code> / <code> :after </code> 伪元素。 传统浏览器不支持我提到的那些伪元素，因此他们需要为图标使用实际的HTML元素，并且因为图标没有“独占”标签，所以他们只是使用了 <code> </code> 标记，并且所有浏览器都支持该标记。 他们当然可以使用 <code> </code> ，就像你一样（完全没问题），但可能是因为我上面提到的原因加上提到的那些 昆汀 ，也是Bootstrap使用的原因 <code> </code> 标签。 当你为造型原因使用额外的标记时，这是一个不好的做法，这就是原因 <a href="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-elements"> 伪元素 </A> 被发明，将内容与风格分开......但是当你看到需要支持传统浏览器时，有时你会被迫做这些事情。 PS。图标以一个开头的事实 '一世' 并且有一个 <code> </code> 标签，完全是巧合。 </DIV>

编辑

4#
回复此人
陆离 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> 昆汀的回答清楚地表明了这一点 <code> i </code> 标签不应该用于定义图标。 但是，霍莉建议说 <code> span </code> 本身没有任何意义，并投赞成票 <code> i </code> 代替 <code> span </code> 标签。 很少有人建议使用 <code> img </code> 因为它是语义和包含 <code> alt </code> 标签。但是，我们不应该也使用 <code> img </code> 因为即使是空的 <code> src </code> 向服务器发送请求。 <a href="http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/" rel="noreferrer"> 在这里阅读 </A> 我想，正确的方法是， <code> </code> 这解决了没有的问题 <code> alt </code> 标签 <code> span </code> 并使视力受损的用户可以访问它。这是语义而不是滥用（黑客）任何标签。 </DIV>

编辑

5#
回复此人
Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <BLOCKQUOTE> 他们为什么要使用 <code> </code> 标签显示图标？ </BLOCKQUOTE> 因为它是： <UL> <LI> 短 </LI> <LI> 我代表图标（虽然不是HTML） </LI> </UL> <BLOCKQUOTE> 这不是一个坏习惯吗？ </BLOCKQUOTE> 可怕的做法。它是性能胜过语义的胜利。 </DIV>

编辑

6#
回复此人
Minions | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> 我认为这看起来很糟糕 - 因为我最近正在使用Joomla模板而且我一直在使模板失败W3C因为它正在使用 <code> </code> 标签和已弃用，因为它的最初用途是斜体化，现在通过CSS而不是HTML完成。 这确实是非常糟糕的做法，因为当我看到它时，我通过模板并改变了所有 <code> </code> 标签到 <code> </code> 相反，然后想知道为什么整个模板看起来很奇怪。 这是使用它的一个坏主意的主要原因 <code> </code> 以这种方式标记 - 你永远不知道之后谁会看你的工作，并“假设”你真正想要做的是将文本斜体化而不是显示图标。我刚刚在网站上放了一些图标，我用下面的代码做了 <pre> <code> <img class="icon" src="electricity.jpg" alt="Electricity" title="Electricity"> </code> </pre> 这样我就把所有的图标放在一个类中，所以我所做的任何更改都会影响所有的图标（比方说我想要它们更大或更小，或者是圆形边框等），alt文本让屏幕阅读器有机会告诉人们什么这个图标可能不仅仅是“斜体文字，斜体结尾”（我不知道屏幕阅读器如何阅读屏幕，但我猜它就是这样），标题也让用户有机会鼠标悬停图像并得到一个工具提示，告诉他们图标是什么，以防他们无法弄明白。比使用好多了 <code> </code> - 它也通过了W3C标准。 </DIV>

编辑

登录后才能参与评论