javascript - JavaScript 和 XHTML 严格代码的问题

标签 javascript xhtml xhtml-1.0-strict

我在满足类作业的 XHTML Strict 要求时遇到了问题。类分配说使用java脚本生成一个表,但只有数组可以在外部javascript文件中使用。这在尝试满足 XHTML Scrict 要求时导致了一些问题。我打破的“规则”如下:

Line 147, Column 38: document type does not allow element "script" here

script type="text/javascript"

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

产生此错误的行是:

<script type="text/javascript">
    <!--
    for(var i=0; i<5;i++){
        document.write('<tr><td class="classes">');
        document.write(classArray[i]);
        document.write('</td></tr>');
    }
    -->
</script>

问题是这段代码在“正文”标签中。我不确定如何复制此代码以将其放在头部,同时在页面上我想要的位置生成表格。任何帮助将非常感激。我真的不太了解 XHTML Strict 或 Javascript,这只是 3 周类(class)模块的一部分,我所有的经验都来自讲座/阅读。

完整代码,可疑点在底部:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Career Goals</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            body
                {
                    background-image:url('./images/marbleBG.jpg');
                    background-repeat:no-repeat;
                    background-position:right top;
                    background-size: 100% , 100%;
                    margin-top:5%;
                    margin-bottom:5%;
                    font-family: sarif;
                    text-align: center;
                    font-size: 18px;
                }
            table.main
                {
                    margin-left: auto;
                    margin-right:auto;
                    height: auto;
                    width: 65%;
                    border: 0px solid black;
                }
            table.classes
                {
                    margin-left: 15%;
                    margin-right:auto;
                    height: 100%;
                    width: auto;
                    text-align : left;
                    border-collapse: collapse;

                }
            td.classes
                {
                    text-indent : 25px;
                    border: 1px solid;
                    padding: .3em;
                }
            th.classes
                {
                    padding: .3em;
                    border: 1px solid;
                }
            table.centered
                {
                    margin-left: 15%;
                    margin-right: auto;
                    border: 0px solid black;
                }
            h1.title
                {
                    text-align: center;
                    padding-bottom:25px;
                }
            p.left
                {
                    text-align: left;
                    font-size: 16px;
                    text-indent: 25px;
                }

            li
                {
                    text-align: left;
                }
        </style>
    </head>

    <body>
        <script type="text/javascript" src="myarray.js" ></script>
        <script type="text/javascript" src="mycookie.js" ></script>

        <table class="main">
            <tr>
                <td>
                    <h1 class="title"> Career Goals </h1>

                    <p class="left">
                        My goals when I complete my computer science degree with Arizona State University will include 
                        joining a corporation where I can improve my technical skills and assist in the growth of said company. 
                        I would like to be a part of a team of programmers with common career interests where we can motivate each 
                        other to visibly show improvement as our careers progress.
                    </p>

                    <p class="left">
                        In my study with Arizona State University I have learned many popular programming languages. In my career I plan
                        on utilizing most, if not all, of the languages I know. The programing languages I know include:
                    </p>

                    <table class="centered">
                        <tr>
                            <td>
                                <ul>
                                    <li>Java</li>
                                    <li>C/C++</li>
                                    <li>Scala</li>
                                    <li>Java Scripting</li>
                                    <li>PERL Scripting</li>
                                    <li>Unix Scripting</li>
                                    <li>HTML/XHTML</li>
                                </ul>
                            </td>
                        </tr>
                    </table>

                    <p class="left">
                        With Arizona State Univeristy I did not just learn programming languages, I learned industry practicies. In my career
                        I expect to utilize msot of these techniques, as well as learn new practicies to improve the quality of software I
                        assist in creating. The techniques taught by Arizona State University include:
                    </p>
                    <table class="centered">
                        <tr>
                            <td>
                                <ul>
                                    <li>Extreme Programming</li>
                                    <li>Paired Programming</li>
                                    <li>Code Reviews</li>
                                    <li>Refacotring Sessions</li>
                                </ul>
                            </td>
                        </tr>
                    </table>



                </td>
            </tr>
            <tr>
                <td>

                    <p class="left"> At Arizona State University I have taken many classes to progress 
                    in my computer science degree. Some of the classes that I have taken that may assist in my career goals are:
                    </p>

                    <table class="classes">
                        <tr>
                            <th class="classes">
                                <b>Classes Taken for Computer Science Major</b>
                            </th>
                        </tr>
                            <script type="text/javascript">
                                <!--
                                for(var i=0; i<5;i++){
                                    document.write('<tr><td class="classes">');
                                    document.write(classArray[i]);
                                    document.write('</td></tr>');

                                }
                                -->
                            </script>
                    </table>

                </td>
            </tr>

            <tr>
                <td>
                    <p class="left">
                        More of my skills and goals can be found on my <a href="resume.html">resume</a>. If you feel my career goals would be a great addition
                        to your team you can contact me using my <a href="contact.html">contact form</a>.
                    </p>

                </td>
            </tr>
        </table>
         <p>
            <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
        </p>
    </body>
</html>

最佳答案

除非脚本元素位于数据或标题单元格内,否则不允许在表格内使用脚本元素。如果您想从脚本生成表的一部分,则必须从脚本生成表的所有

顺便说一句,在 XHTML 中,注释就是注释,因此您实际上并没有脚本,只有包含注释的脚本元素。您可能没有注意到,因为您可能告诉浏览器将文档视为 HTML(本地文件的文件扩展名为 .html 或通过 HTTP 提供的文件的内容类型为 text/html)。 删除评论。然后你会发现 <在脚本中会产生更多错误(因为标记是 XHTML 脚本中的标记(与 HTML 不同))。 Wrap the content with CDATA flags .

一般来说,我不会为任何新项目推荐 XHTML。 XHTML 的处理方式与当您假装它是 HTML 时浏览器实际处理它的方式之间的差异使它变得更麻烦而不是值得的。

您似乎也有适合列表而不是表格的数据(只有一列是一个很大的线索),所以我会完全摆脱表格。

关于javascript - JavaScript 和 XHTML 严格代码的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8247002/

相关文章:

javascript - 打印 json 对象中的所有路径

javascript - 如果未单击 Bootstrap 选项卡,如何 checkin jQuery?

javascript - 从 JSON 文件中检索数据

javascript - 修改子项高度时如何自动设置父项高度的动画

html 文档类型添加空格?

html - 如何让xhtml页面遵循严格的语法检查?

javascript - 事件触发后获取 jquery 元素的索引

html - 如何使用 CSS 选择第二个进入具有特定 ID 的表的 thead?

html - 绝对位置高度和底部元素

html - DIV 未显示在 p 标签内