在 HTML 中定义我自己的标签答案

【问题标题】：Defining my own tags in HTML在 HTML 中定义我自己的标签
【发布时间】：2018-04-27 18:16:32
【问题描述】：

我的网站中有一个段落，我必须在其中突出显示几个词。我没有使用 div 和一个类，而是使用了一个我自己命名的标签

<html>
    <head>
        <style>
            highlight{
                background-color:#FFF176;
            }
        </style>
    </head>
    <body>
        A quick <highlight>brown</highlight> fox jumped over a lazy dog.
    </body>
</html>

这里是JSSFiddle

它似乎工作正常。但这有什么问题吗？如果我将它用于项目可以吗？

【问题讨论】：

标签： css html tags

【解决方案1】：

使用自定义标签没有错。但是，您没有定义您使用的标签。请参阅下面有关使用自定义标签/元素的正确方法的文章的链接。

【讨论】：

【解决方案2】：

您可以在项目中使用此解决方案，功能上没问题，但建议您使用通用类名附加标签，以在不同的源文件中定义样式表 (CSS)、标签结构 (HTML) 和功能 (JavaScript)。

我建议您将 CSS 样式放入一个不同的文件中，并在 head 标签内添加一个链接标签，如下所示：

<head>
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>

在此页面中，您可以了解更多信息：

MDN Web Docs Mozilla

【讨论】：

【解决方案3】：

虽然可以这样做，但我建议如下：https://jsfiddle.net/838Lrnwk/

<html>
<head>
    <style>
        #high .highlight{
          background-color:#FFF176;
        }
    </style>
</head>
<body>
  <p id="high">
      A quick <a class="highlight">brown</a> fox jumped over a lazy dog.
  </p>
</body>

这将产生相同的效果；但是，您可以控制哪个段落具有效果以及所有其他标签（如 font、em、strong 等），并且仍然保留突出显示。

【讨论】：

谢谢。我认为这是一种更好的方法，因为它也通过了 W3 的 HTML 验证。