Frontend Notes Lab

Appearance

html、body 与表格结构 ​

问题 ​

html 标签有什么作用？html, body { height: 100%; } 和只写 body { height: 100%; } 有什么区别？表格固定表头应该怎么理解？

结论 ​

html 元素是 HTML 文档的根元素，head 和 body 都是它的子元素。head 放元数据，body 放页面主体内容。虽然浏览器对缺失标签有容错能力，但实际项目应写出清晰完整的文档骨架。

只给 body 设置 height: 100% 时，如果 html 没有明确高度，body 的百分比高度可能没有你预期的视口参考。因此常见全屏布局会写：
css
html,
body {
  min-height: 100%;
}

如果应用根节点也需要撑满父级，要把高度基准从 html、body 一直传到 #app。只写 #app { height: 100%; } 不够：

css
html,
body,
#app {
  height: 100%;
}

如果只是希望应用至少占满一屏，并且内容变多时页面可以继续向下增长，通常更直接的写法是：

css
#app {
  min-height: 100vh;
}

表格结构上，thead、tbody、tfoot 用来表达表格区域。固定表头本质是 CSS 布局问题，常见方案是 position: sticky：

css
th {
  position: sticky;
  top: 0;
  background: white;
}

不要为了固定表头破坏表格语义。能保留 table、thead、tbody 的情况下优先保留。

Demo ​

html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>页面骨架</title>
  </head>
  <body>
    <main>页面主体</main>
  </body>
</html>

面试回答：

html 是文档根元素，包含 head 和 body。百分比高度依赖父级高度，想让 body 或应用根节点撑满视口，通常需要同时处理 html、body 和应用根节点。表格固定表头是 CSS 问题，但结构上仍应保留 thead、tbody 等语义。

参考来源 ​