小编典典

自定义标签…为什么不呢?

css

我找到了一个网站,该网站提供了将自定义标签添加到html的指南,就像人们制作新的HTML5标签一样。我必须承认,我认为添加我自己的标签,“扫描”代码并查找所需内容会更好。但是我发现的每个网站,人们都说这不好。…但是为什么不好呢?

带有类的示例html:

<ul class="commentlist">
    <li class="comment odd">
    <div class="1">
        <div class="avatar">
            <img src="http://placehold.it/60x60" width="60" height="60" />
        </div>
        <div class="metadata">
            <div class="name">Name</div>
            <p>response1</p>
        </div>
    </div>
    <ul class="children">
        <li class="comment even">
            <div class="2">
                <div class="avatar">
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </div>
                <div class="metadata">
                    <div class="name">Name</div>
                    <p>response1a</p>
                </div>
            </div>
        </li>
        <li class="comment odd">
            <div class="3">
                <div class="avatar">
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </div>
                <div class="metadata">
                    <div class="name">Name</div>
                    <p>response1b</p>
                </div>
            </div>
        </li>
    </ul>
</li>

在这里,我可以使用自定义标签进行操作,我认为这很容易找到解决方法,所以为什么不这样做:

<clist>
<ccommentbox class="odd">
    <ccomment class="1">
        <cavatar>
            <img src="http://placehold.it/60x60" width="60" height="60" />
        </cavatar>
        <cdata>
            <cname>Name</cname>
            <ctext>response1</ctext>
        </cdata>
    </ccomment>
    <cchildren>
        <ccommentbox class="even">
            <ccomment class="2">
                <cavatar>
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </cavatar>
                <cdata>
                    <cname>Name</cname>
                    <ctext>response1a</ctext>
                </cdata>
            </ccomment>
        </ccommentbox>
        <ccommentbox class="odd">
            <ccomment class="3">
                <cavatar>
                    <img src="http://placehold.it/60x60" width="60" height="60" />
                </cavatar>
                <cdata>
                    <cname>Name</cname>
                    <ctext>response1b</ctext>
                </cdata>
            </ccomment>
        </ccommentbox>
    </cchildren>
</ccommentbox>

阅读 391

收藏
2020-05-16

共1个答案

小编典典

自定义标签不是邪恶的

请考虑一下:

  • 默认情况下,它们不会在IE 6-8中被识别->您必须使用JavaScript来介绍您在页面上使用的每个自定义标签,例如:document.createElement('custom-tag')这意味着 您的网站只有在打开JavaScript的情况下才能正确呈现
  • 在大多数浏览器中,您的自定义标记将被视为内联元素,例如<span>,这意味着您必须编写CSS才能将其声明为custom-tag { display: block }
  • 我发现没有资源可以证明自定义标签对搜索引擎有任何负面影响。实际上,谷歌发布了Angular.js,它在 首页的 示例中推广了自定义标签(<pane><tab>)。
  • 大多数HTML编辑器会将您的自定义标签标记为无效的HTML,因为它们不在官方规范中。

总结一下:

  • 当重要元素的意义大于<div>没有现有HTML 4/5等效项 时,请使用自定义标签。对于Web应用程序来说尤其如此,因为Web应用程序解析DOM以获得特殊的标签/属性/类以创建组件(例如Angular.js)。
  • 如果您构建的只是一个具有常规内容的 简单网站,请 使用标准HTML。您将希望您的网站在不启用JavaScript的情况下也能正常工作。
  • 如果您构建的 Web应用程序 中的自定义标签确实可以帮助使源代码更整洁并表达特殊的语义,请使用它们。上面提到的所有负面影响(必须打开JavaScript / CSS声明)在这些情况下都无关紧要。相同的规则适用于自定义属性。
2020-05-16