HTML DTD 自定义 div 名称答案

【问题标题】：HTML DTD custom div nameHTML DTD 自定义 div 名称
【发布时间】：2014-04-21 11:29:42
【问题描述】：

基本上我想命名一个基本上是 div 的自定义标签，但名称不同，以便您在查看 HTML 代码时可以看到它是什么。 JavaScript 底层将使用 circular-view 和 circular-objects 使其工作。到目前为止，我有这个，但页面上显示的都是]>。顺便说一句，JavaScript 代码还没有真正做任何事情。

<!DOCTYPE html
[
    <!ELEMENT circular-view (circular-object*)>
    <!ELEMENT circular-object EMPTY>
    <!ATTLIST circular-object icon CDATA #REQUIRED>
    <!ATTLIST circular-object title CDATA #REQUIRED>
]>

<!--

    The custom element circular-view is to be used as a container
    for the circular-objects inside

    You must set the icon="link to image file"
    and title="text" attributes of each circular-object

    You can also set the id="" attribute of a circular-view
    to give it a custom size, layout, etc

-->

<html>
    <head>
        <title>Example</title>
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <link rel="stylesheet" type="text/css" href="Framework/FrameworkStyles.css"/>

        <script src="Framework/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="Framework/Animation.js"></script>
        <script type="text/javascript" src="Framework/CircularSelection.js"></script>
        <script type="text/javascript" src="Framework/CircularObject.js"></script>
        <script type="text/javascript" src="indexScript.js"></script>
        <!-- The page-specific JavaScript file should come last in the 
            list of scripts to avoid any declaration problems -->
    </head>

    <body onload="pageLoad()">


        <!---->


        <circular-view id="featuredView"><!--The container-->
            <circular-object title="1" icon="Example Pizza.png"/><!--JS will add img and div tags as children to display the stuff-->
            <circular-object title="2" icon="Example Pizza.png"/>
            <circular-object title="3" icon="Example Pizza.png"/>
            <circular-object title="4" icon="Example Pizza.png"/>
            <circular-object title="5" icon="Example Pizza.png"/>
            <circular-object title="6" icon="Example Pizza.png"/>
            <circular-object title="7" icon="Example Pizza.png"/>
            <circular-object title="8" icon="Example Pizza.png"/>
            <circular-object title="9" icon="Example Pizza.png"/>
            <circular-object title="10" icon="Example Pizza.png"/>
            <circular-object title="11" icon="Example Pizza.png"/>
        </circular-view>


        <!---->


    </body>
</html>

我是 DTD 的新手，实际上是几个小时前，所以我不确定我在做什么。

【问题讨论】：

这听起来像是一个 XY 问题。您这样做是为了了解 DTD 吗？因为可能有更简单的方法来做到这一点。

标签： html dtd

【解决方案1】：

要使用自定义元素，您不需要任何 DTD。浏览器是 DTD 无知的（嗯，大部分情况下）。只需使用元素。并使用您在其他情况下使用的任何doctype 字符串，例如简单的<!doctype html>。

但是，如果您对自定义元素有任何 CSS 样式，那么您需要使用 JavaScript 引入它，如果您希望样式也适用于旧版本的 IE（IE 8 和更早版本）。在这种情况下，您可以在第一次引用任何样式表之前添加以下内容：

<script>
document.createElement('circular-view');
document.createElement('circular-object');
</script>

在这种情况下，您可能不想为这些元素设置样式，因此不需要脚本代码。

您是否应该使用自定义标签是一个不同的问题，在 SO 上有很多关于此的问题，请参阅例如Using custom HTML Tags

您看到“]>”的原因是在使用 HTML 解析器时，浏览器不会处理文档类型声明的内部子集，即 [...] 部分。相反，当他们看到[ 时会停止解析，从而将[> 作为字符数据。

该声明即使在原则上也是错误的，因为它只有内部子集，所以它会使所有其他元素无效。

在使用 XML (XHTML) 解析器时，现代浏览器可以正确解析内部子集，但它们会忽略元素声明。它们不是验证处理器，因此它们对元素声明没有用处。

【讨论】：

确实，DTD 的主要用途是验证。由于自定义元素无论如何都是非标准的，即使根据自定义 DTD 验证文档也不会帮助浏览器了解如何处理它们。当然，这就是脚本的用武之地，正如提问者所知道的那样。
好的，那么我怎么能说循环是从 div 子类化的。到目前为止，我只有function defineCustomElements() { } defineCustomElements();
@user1726450，你没有，他们也没有。当您使用自定义元素时，它只是一个未知元素。您可以设置它的样式，也可以使用脚本对其进行处理，但无法将其绑定到标准 HTML 元素。另一方面，div 真正“做”的只是它在 CSS 中将display: block 作为默认值。