Question

基本上我想命名一个基本上是div的自定义标签，但它有一个不同的名称，这样你就可以看到它在查看HTML代码时的含义。引擎盖下的JavaScript会使用circular-view和circular-object来完成工作。到目前为止，我有这个，但页面上显示的所有内容都是]>。顺便说一下，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新手，所以我不确定我到底在做什么。

Answer 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

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

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

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

HTML DTD自定义div名称

1 个答案: