Question

我制作了一个简单的html文件。但是在浏览器上运行它并在浏览器上查看源代码时它会显示不同的DOM结构，表格会嵌套在标签中。为什么DOM结构与原始源代码不同。

<html>
<head>
    <title>Student Details</title>
<head>
<body style="font-family:sans-serif;">
    <center>
        <div id='add_student'>
            <form>
                <lable for="tot" >Name:</label>
                <input type='text' id='tot'>
                <lable for='sex'>Sex:</label>
                <select id="sex">
                    <option value=''>Select</option>
                    <option value='Male'>Male</option>
                    <option value='Female'>Female</option>
                </select>
                <lable for='section'>Section:</label>
                <input type="radio" name="section" id='section' value="A">A 
                <input type="radio" name="section" id='section' value="B">B
                <input type="button" id="add_button" value="Add">
            </form>
            <hr>

        <table style="text-align: center;">
            <th>
                <td width='120px' text-align='center'>Name</td>
                <td width='120px' text-align='center'>Sex</td>
                <td width='120px' text-align='center'>Section</td>
                <td width='120px' text-align='center'>Click</td>
            </th>
        </table>
        <div id='list_div'> 


        </div>
        </div>
        <script src="jquery-1.8.2.min.js"></script>
        <script src="underscore-1.4.2.min.js"></script>
        <script src="backbone.js"></script>
        <script type="text/template" id='list_template'>
        <tr>
            <td width='120px' text-align='center' ><%= name %></td>
            <td width='120px' text-align='center'><%= sex %></td>
            <td width='120px' text-align='center'><%= section %></td>
            <td width='120px'><button id='del_but' value='Delete'>Click</button></td>
        </tr>
        </script>
        <script src="script.js"></script>
    </center>
    <script></script>
</body>

Answer 1

您的HTML无效（例如<lable for="tot" >拼写错误，因此元素嵌套在其中，因为您没有实际匹配它的结束标记，并且您有<th>包裹{{1} }元素而不是<td>包裹<thead>元素。）

编写有效的HTML。使用a validator进行测试。

Answer 2

你的HTML完全关闭了。在第一个表格中，<td>中有<th>个。

表的正确结构是：

<table>
   <tr>
     <th>header</th>
     <td>data</td>
     <td>data</td>
     (more tds...)
   </tr>
   (more trs...)
</table>

浏览器显示错误位置的元素

2 个答案: