FCC调查考试中第二个fieldset无法显示问题求助

导致第二个<fieldset>无法显示的核心原因是HTML存在多处语法错误，导致浏览器解析DOM结构混乱，以下是具体问题和修复方案：

• 未闭合的标签破坏DOM结构
  第一个<fieldset>内部，包裹<select>的<label>标签未闭合，同时<select>本身也缺少闭合标签</select>。浏览器会尝试自动补全未闭合标签，但这会导致后续的第二个<fieldset>被错误嵌套或忽略。
  修复：给<select>添加</select>闭合标签，同时闭合外层的<label>标签。

• option标签的value属性语法错误
  所有<option>的value属性都缺少等号=，正确写法应为value=""、value="1"等。语法错误会干扰HTML解析流程，间接影响后续元素的渲染。

• 第二个fieldset内部标签未闭合
  第二个<fieldset>里的<label>和<input>均未闭合，需补充闭合标签（或把<input>写成自闭合形式<input type="text" />）。

• link标签rel属性拼写错误
  <link rel="stylessheet">中的stylessheet多了一个s，正确应为stylesheet，虽然不直接影响fieldset显示，但会导致CSS无法加载，建议修正。

修正后的完整HTML代码 #

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title> Whats your favourite videogame?</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1 id="title"> WHATS YOUR FAVOURITE VIDEOGAME?</h1>
  <p id="description"> Please fill up the survey to help find the most popular videogames </p>
  <form id="survey-form">
    <fieldset>
      <label>Name: <input id="name" type="text" required /></label>
      <label>Age (optional): <input id="age" type="number" min="10" max="120" /></label>
      <label>Email: <input id="email" type="email" required /></label>
      <label>What do you do for living?
        <select id="job">
          <option value=""> (Select one) </option> 
          <option value="1"> Student </option>
          <option value="2"> Full time job </option>
          <option value="3"> Prefer not to say </option>
          <option value="4"> Other </option>
        </select>
      </label>
    </fieldset>

    <fieldset>
      <label>How much do you play? <input type="text" /></label>
    </fieldset>  
  </form>
</body> 

</html>

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