2011-11-23 94 views
2

我遇到了滿足XHTML嚴格要求的類分配問題。類的分配說使用java腳本來生成一個表,但只有該數組可以在外部JavaScript文件中使用。這在嘗試滿足XHTML Scrict要求時會導致一些問題。該「規則」我打破如下:JavaScript和XHTML嚴格代碼問題

147行,列38:文檔類型不允許元素「腳本」在這裏

腳本類型=「文/ JavaScript的」

元素上述命名是在不允許的情況下發現的。這可能意味着你有不正確的嵌套元素 - 比如「body」部分中的「style」元素而不是「head」 - 或者兩個重疊的元素(這是不允許的)。

此錯誤的一個常見原因是在HTML文檔中使用XHTML語法。由於HTML隱式元素的規則,這個錯誤可能會產生級聯效應。例如,在HTML文檔的「head」部分爲「meta」和「link」使用XHTML的「自關閉」標記可能會導致解析器推斷「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> 

的問題是,這個代碼是在「身體」的標籤。我不知道如何將此代碼複製到頭部,同時在頁面上想要的位置生成表格。任何幫助將非常感激。我對XHTML Strict或Javascript瞭解不多,這僅僅是爲期三週的課程模塊的一部分,我的經驗來自講座/閱讀。

全碼,疑是朝向底部:

<!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> 

回答

5

腳本元素沒有內部表允許當它們是數據或標題單元內除。如果要從腳本生成表格的一部分,則必須從腳本生成表格的所有。另外,在XHTML中,評論是一個評論,所以你實際上並沒有一個腳本,只是一個包含評論的腳本元素。您可能沒有注意到,因爲您可能會告訴瀏覽器將文檔視爲HTML(對於本地文件使用.html文件擴展名,對於通過HTTP進行傳輸的文本/ HTML內容類型)。 擺脫評論。然後你會發現腳本中的<會產生更多的錯誤(因爲標記是XHTML腳本中的標記(與HTML不同))。 Wrap the content with CDATA flags

一般來說,我不會推薦任何新項目的XHTML。 XHTML應該如何處理以及瀏覽器在假裝HTML時如何處理它們之間的差異使得它更加麻煩,這是值得的。

你也似乎有數據適合列表,而不是表(只有一列是一個很大的線索),所以我會擺脫完整的表。

+0

太棒了,解決了它。我想我完全錯誤地解釋了這個錯誤! – meriley

+0

@ user959799如果這個答案解決了你的問題,你應該接受它。 – mc10

2

您不必使用Javascript生成整個表格,只需使用比document.write更好的方法輸出元素即可。由於這是爲一個類,我猶豫是否給你確切的代碼,但你應該能夠使用document.getElementById(),文檔的組合。createElement('td')和appendChild()。

類似於: document.getElementById('classes')。appendChild(newChild);

作爲附註,Quentin對於語義問題是完全正確的:XHTML不太可能是正確的選擇,而非表格式的非表格佈局非常過時。但是,我知道這是爲了一個課程項目,所以你可能別無選擇。