JavaScript 和 XHTML 严格代码的问题
我在满足课堂作业的 XHTML 严格要求方面遇到问题。类分配表示使用java脚本生成表，但只有数组可以在外部javascript文件中使用。当尝试满足 XHTML Scrict 要求时，这会导致一些问题。我打破的“规则”如下：
第 147 行，第 38 列：文档类型不允许此处使用元素“script”
脚本类型=“text/javascript”
在不允许的上下文中发现了上述元素。这可能意味着您有不正确的嵌套元素——例如“body”部分中的“style”元素而不是“head”内部——或者两个元素重叠（这是不允许的）。
导致此错误的一个常见原因是在 HTML 文档中使用了 XHTML 语法。由于 HTML 隐式关闭元素的规则，此错误可能会产生级联效应。例如，在 HTML 文档的“head”部分中使用 XHTML 的“meta”和“link”标签可能会导致解析器推断出“head”部分的结尾和“body”的开头。 ”部分（其中不允许“链接”和“元”；因此报告错误）。
生成此错误的行是：
<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>
问题是此代码位于“body”标记中。我不确定如何复制此代码以将其放置在头部，同时在页面上我想要的位置生成表格。任何帮助将不胜感激。我真的不太了解 XHTML Strict 或 Javascript，这只是为期 3 周的课程模块的一部分，我所有的经验都来自讲座/阅读。
完整代码，嫌疑人朝向底部：
<!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>
I have an issue with meeting XHTML Strict requirements for a class assignment. The class assignment says to use java script to generate a table, but only the array can be use in an external javascript file. This has lead to some issues when trying to meet XHTML Scrict requirements. The 'rule' i break is as follows:
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).
The line that is generating this error is:
<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>
The issue is this code is in the 'body' tags. I'm not sure how i can replicate this code to place it in the head while generating a table in the spot I want on the page. Any help would be much appreciated. I really don't know much about XHTML Strict or Javascript, this is just part of a 3 week module for class, and all my experience is from lecture/reading.
Full Code, Suspect is toward bottom:
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
脚本元素不允许出现在表格内，除非它们位于数据或标题单元格内。如果您想从脚本生成表的一部分，则必须从脚本生成表的全部。
顺便说一句，在 XHTML 中，注释就是注释，因此实际上没有脚本，只有包含注释的脚本元素。您可能没有注意到，因为您可能告诉浏览器将文档视为 HTML（本地文件具有 .html 文件扩展名，或者通过 HTTP 提供的文件具有 text/html 内容类型）。 删除评论。然后您会发现脚本中的
<会生成更多错误（因为标记是 XHTML 中脚本内的标记（与 HTML 不同））。 使用 CDATA 标志包裹内容。一般来说，我不会推荐 XHTML 用于任何新项目。 XHTML 的处理方式与当您假装它是 HTML 时浏览器实际处理它的方式之间的差异使得它变得更加麻烦而不值得。
您似乎还拥有适合列表的数据，而不是表格（只有一列是一个重要线索），所以我会完全摆脱表格。
Script elements are not allowed inside tables except when they are inside a data or heading cell. If you want to generate part of a table from a script then you must generate all of the table from the script.
As an aside, in XHTML a comment is a comment, so you don't actually have a script there, just a script element containing a comment. You might not notice, because you are probably telling the browser to treat the document as HTML (with a .html file extension for local files or a text/html content-type for ones served over HTTP). Get rid of the comment. You will then find that the
<in the script will generate more errors (because markup is markup inside a script in XHTML (unlike in HTML)). Wrap the content with CDATA flags.Generally speaking, I would not recommend XHTML for any new project. The differences between how XHTML should be handled and how browsers actually handle it when you pretend it is HTML makes it more trouble then it is worth.
You also appear to have data suitable for a list, not a table (having only one column is a big clue), so I'd get rid of the table entirely.
您不必使用 Javascript 生成整个表格，您只需要使用比 document.write 更好的方法来输出元素。由于这是针对一个类的，所以我不太愿意给您确切的代码，但您应该能够使用 document.getElementById()、document.createElement('td') 和appendChild() 的组合。
像这样的东西：
document.getElementById('classes').appendChild(newChild);
作为旁注，Quentin 关于语义问题是完全正确的：XHTML 不太可能是正确的选择并且基于表格不幸的是，非表格内容的布局已经过时了。但是，我知道这是一个课堂项目，所以你可能别无选择。
You don't have to generate the whole table with Javascript, you just need to use a better method than document.write to output your elements. Since this is for a class I am hesitant to give you exact code but you should be able to use a combination of document.getElementById(), document.createElement('td') and appendChild().
Something like:
document.getElementById('classes').appendChild(newChild);
As a side note, Quentin is completely correct about the semantic questions: XHTML is unlikely to be the right choice and table-based layouts of non-tabular content are woefully out of date. However, I understand that this is for a class project so you may have no choice.