html5语义化标签在现代浏览器中默认可解析渲染，但需验证是否按语义处理：article等有默认块级样式且dom结构清晰，而自定义标签无样式无语义；ie8需用document.createelement()声明支持；css中article{ }生效即识别成功。
直接看浏览器是否识别 <article></article> 这类标签
HTML5 新增的语义化标签（如 <header></header>、<nav></nav>、<section></section>、<article></article>、<aside></aside>、<footer></footer>）在所有现代浏览器中**默认可被解析和渲染**，但关键不在于“能不能用”，而在于“浏览器是否按语义化方式处理它们”。
实际验证方法很简单：
<!DOCTYPE html> <html> <body> <article>这是 article 内容</article> <xyz-tag>这是自定义标签</xyz-tag> </body> </html>打开后用开发者工具检查：
<article></article> 会正常显示为块级元素（有默认 margin/padding），且在 Elements 面板中结构清晰；而 <xyz-tag></xyz-tag> 虽不报错，但默认是 inline 元素、无样式、无语义含义——这就是区别。
用 document.createElement() 检测老浏览器兼容性
IE8 及更早版本不原生支持 HTML5 语义标签，会导致 document.getElementById() 或 CSS 选择器（如 article { }）失效。这时需用脚本“创建”这些标签，让 IE 知道它们是合法元素：
if (!document.createElement('article').canHaveChildren) {
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('footer');
}这个判断逻辑源于：IE8 中未声明的标签，其 DOM 节点的 canHaveChildren 属性为 undefined。现代项目基本不用手写这段，但理解它能帮你快速定位“为什么 IE8 里 article 样式不生效”。
CSS 中直接写 article { } 就算识别成功
只要你在样式表里写了 article { display: block; }（或任何有效声明），并在浏览器中生效，就说明该环境已识别该标签。注意以下常见陷阱：
- 没加
：触发怪异模式（Quirks Mode），HTML5 标签可能退化为未知元素 - 用了 XHTML 语法（如自闭合
<section></section>）：HTML5 不支持，解析失败 - CSS 文件加载失败或被缓存旧版：导致样式未应用，误判为标签未识别
<style>article { background: #eee; padding: 10px; }</style>
<article>背景应变灰</article>
别把 <main></main> 和 <canvas></canvas> 当作“语义化标签”来识别
<main></main> 是语义化标签，但它的识别逻辑稍特殊：它必须是页面**唯一主内容容器**，且不能嵌套在 <article></article>、<aside></aside>、<header></header>、<nav></nav>、<footer></footer> 内，否则辅助技术（如读屏器）可能忽略它。<canvas></canvas>、<video></video>、<audio></audio> 虽属 HTML5 新增，但属于“功能型标签”，不是语义化标签——它们不描述内容结构，而是提供媒介能力。识别它们靠的是 JS API（如 document.getElementById('myCanvas').getContext('2d') 是否返回对象），而非 CSS 或 DOM 结构。
