HTML部分代码编写后浏览器无法显示问题排查

代码无法渲染、节点不进入DOM结构是HTML标签嵌套不符合规范，触发浏览器自动纠错机制导致的，具体有两处错误：

• 最外层使用<p>标签包裹<div>等块级元素：HTML标准明确规定<p>作为段落级标签，内部不能嵌套块级容器元素。浏览器解析到<p>标签内的第一个<div>时，会自动提前闭合<p>标签，后续写在该<p>内部的代码会被判定为结构异常，直接被排除在DOM树外。
• 国家选择框的<select>标签缺失闭合标签：标签未闭合会导致DOM结构层级错乱，后续节点解析逻辑被打乱，直接影响渲染结果。

1. 删除最外层非法包裹所有代码的<p>标签，不要用段落标签包裹块级容器。
2. 补全<select>标签的闭合标记，修正标签嵌套层级。

CSS样式 #

.profile-page {
  width: 50%;
  margin: auto;
  background-color: #f4f5fa;
  box-shadow: 2px 2px 5px 2px gray;
}

.profile-heading {
  width: 100%;
  background-color: #0b2b88;
  color: white;
  padding: 10px;
}

.profile-details {
  width: 100%;
  padding: 10px;
}

.input-field {
  display: flex;
  width: 100%;
  margin: auto;
}

.form-heading {
  width: 30%;
}

.form-input {
  width: 30%;
}

.form-input input {
  border: none;
}

.form-button {
  width: 50%;
  text-align: center;
}

.form-button button {
  background-color: #0b2b88;
  color: white;
  padding: 20px;
}

.edit-button {
  width: 30%;
}

HTML结构 #

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/96c1212185.js" crossorigin="anonymous"></script>

<div class="profile-page">
  <div class="profile-heading">
    <h3>Profile Details</h3>
  </div>
  <div class="profile-details">
    <form class="profile-form">
      <div class="input-field">
        <div class="form-heading">
          <label for="fname">First Name</label>
        </div>
        <div class="form-input">
          <input type="text" id="fname" name="fname" value="ABC" class="form-input-field" readonly />
        </div>
      </div>

      <div class="input-field">
        <div class="form-heading">
          <label for="email">Email</label>
        </div>
        <div class="form-input">
          <input type="email" id="email" name="email" value="admin@gmail.com" class="form-input-field" readonly/>
        </div>
      </div>

      <div class="input-field">
        <div class="form-heading">
          <label for="country">Country</label>
        </div>
        <div class="form-input">
          <select id="country" name="country" class="">
            <option value="---">---</option>
          </select>
        </div>
      </div>

      <div class="knxnvknfd">
        <div class="jnsdjjdi">
          <button type="submit" id="edit-button" name="" value="" class="form-input-field">Edit</button>
        </div>
      </div>
    </form>
  </div>
</div>

修复后刷新页面即可看到完整渲染的个人资料表单，所有节点都会正常出现在DOM结构中。

内容的提问来源于stack exchange，提问作者Manoj Kamble