HTML5语义标签默认display: block但无样式，常见“不显示”原因为父容器塌陷、浮动未清除、CSS覆盖display属性、隐藏属性或IE8兼容性问题。
HTML5结构标签本身不渲染内容
HTML5的、、、、、这些语义化标签默认没有样式，既不设宽高，也不设display为block（老版本IE可能更糟）。如果页面上“什么都没显示”，大概率不是代码写错了，而是它们被父容器塌陷、浮动未清除，或CSS意外覆盖了display属性。
- 现代浏览器中，这些标签默认是
display: block，但若父元素是display: flex或display: grid，子元素行为会受容器控制 - 检查是否被
display: none、visibility: hidden或opacity: 0等隐藏属性影响 - 用浏览器开发者工具选中标签，看右侧
Computed面板里display值是否为none或inline（而内容又无width）
Chrome/Firefox开发者工具快速定位隐藏原因
右键目标结构标签 → “检查”，在Elements面板确认DOM是否存在；再切换到Computed标签页，重点查看：
-
display：是否被重置为inline且内部无float或width导致视觉消失 -
height和min-height：是否为0px（常见于父容器未触发BFC或子元素全浮动） -
overflow：是否为hidden且内容溢出被裁剪 - 往上逐级点开父元素，看是否有
display: none或visibility: hidden继承影响
CSS重置时误删display: block的典型场景
很多项目会引入全局CSS重置（如* { margin: 0; padding: 0; }），但更危险的是某些“现代重置”脚本或框架（如某些Tailwind预设、自定义Normalize）会把所有标签统一设为display: inline，导致等内容塌缩。验证方式很简单：
section,
article,
aside,
nav,
header,
footer,
main {
display: block;
}- 把这个规则加到CSS末尾，立即可见——说明问题出在
display被覆盖 - 注意不要只写
section { display: block; }，因为在旧版Safari和部分Android WebView中需要显式声明 - 如果用了CSS-in-JS或Shadow DOM，需确认样式作用域是否覆盖到这些标签
IE8及以下完全不识别HTML5结构标签
如果仍需兼容IE8，仅靠CSS无法解决：这些浏览器根本不会把解析为有效DOM节点，document.querySelector('section')返回null，innerHTML也不生效。必须用document.createElement()注册：
立即学习“前端免费学习笔记（深入）”；
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('main');- 这段代码必须在
中执行，早于任何HTML5标签出现 - 更稳妥做法是引入
html5shiv.js，它自动处理全部标签注册+基础样式注入 - 注意：即使加了shim，IE8仍不支持
flexbox、grid布局，等标签也无法通过CSS设置display: flex来布局
实际开发中，最常被忽略的是：结构标签没内容不等于没渲染——空在开发者工具里存在，但视觉上就是“看不见”。先确认它有没有被撑开（比如加border: 1px solid red），再查样式，比反复改HTML结构高效得多。
