foundation框架不强制依赖html5语义标签，但默认样式、js组件及栅格系统均假设使用html5文档类型和语义结构；缺少会触发怪异模式致布局错乱，漏写lang属性影响无障碍访问，charset需置于head前三行以确保图标正常显示。
Foundation 框架本身不依赖 HTML5 语义标签才能运行，但它的默认样式、JavaScript 组件（如 off-canvas、dropdown）和响应式栅格系统（grid-container / cell）都**假设你使用 HTML5 文档类型和现代语义结构**。用旧的 <div class="row"><div class="columns"> 写法也能工作，但会错过可访问性增强、CSS 重置一致性，以及部分组件的自动初始化逻辑。<h3>为什么必须声明 <code> 和 <code>
Foundation 的 CSS 重置（Normalize.css）和部分 JavaScript 行为（比如 foundation.js 对 data-* 属性的扫描）依赖标准模式渲染。没有 ，IE 或某些旧<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://www.php.cn/zt/16180.html" target="_blank">浏览器</a>会触发怪异模式，导致栅格错位、按钮尺寸异常、<code>reveal 弹窗定位失效。
- 漏写
lang属性：屏幕阅读器可能无法正确切换语言发音规则，影响 WCAG 合规性 -
<meta charset="utf-8">必须放在前三行内，否则 Foundation 的图标字体（如foundation-icons）可能显示为方块
grid-container 与 grid-x 的实际布局差异
Foundation 6+ 推荐用 grid-container 包裹整个内容区，再用 grid-x（水平流）或 grid-y（垂直流）定义子容器方向。这比旧版 row 更明确地分离了「容器宽度控制」和「内部排列逻辑」。
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell small-12 medium-8">主内容</div>
<div class="cell small-12 medium-4">侧边栏</div>
</div>
</div>-
grid-container默认最大宽度 75rem（1200px），居中；若需全宽，加fluid类：<div class="grid-container fluid"> <li> <code>grid-margin-x在 cell 间插入水平 margin，但不会影响第一列左边距和最后一列右边距——这是有意设计，避免外边距溢出容器 - 不要嵌套
grid-container：它自带 padding，多层嵌套会导致不可预测的留白 -
dropdown要求触发元素有data-toggle属性，且目标元素 id 必须完全匹配：<a data-toggle="my-menu">菜单</a> <div id="my-menu" data-dropdown-menu>…</div> -
off-canvas必须用<div class="off-canvas-wrapper"> 包裹全部内容，且 <code>off-canvas元素需在 wrapper 内部最前或最后，不能放在grid-container外面 - 用
<button></button>替代<a href="#"></a>触发reveal，能避免点击后页面跳到顶部（href="#"的默认行为）
组件初始化失败的常见 HTML5 结构原因
Foundation 的 JS 组件（如 accordion、tabs）依赖特定的 HTML5 属性和父子关系。即使 class 名写对，结构不对也会静默失效。
立即学习“前端免费学习笔记（深入）”；
Foundation 不强制你用 <header></header>、<nav></nav> 等语义标签，但如果你用了，就得确保它们不破坏 grid 的 flex 布局流——比如把 <nav class="grid-x"></nav> 直接塞进 <header></header> 没问题，但给 <header></header> 自己加 display: flex 就可能和 Foundation 的内部 flex 规则冲突。
