Foundation框架不强制依赖HTML5语义标签，但默认样式、JS组件及栅格系统均假设使用HTML5文档类型和语义结构；缺少<!DOCTYPE html>会触发怪异模式致布局错乱，漏写lang属性影响无障碍访问，charset需置于head前三行以确保图标正常显示。
Foundation 框架本身不依赖 HTML5 语义标签才能运行，但它的默认样式、JavaScript 组件（如 off-canvas、dropdown）和响应式栅格系统（grid-container / cell）都**假设你使用 HTML5 文档类型和现代语义结构**。用旧的 <div class="row"><div class="columns"> 写法也能工作，但会错过可访问性增强、CSS 重置一致性，以及部分组件的自动初始化逻辑。
为什么必须声明 <!DOCTYPE html> 和 <html lang="zh-CN">
Foundation 的 CSS 重置（Normalize.css）和部分 JavaScript 行为（比如 foundation.js 对 data-* 属性的扫描）依赖标准模式渲染。没有 <!DOCTYPE html>，IE 或某些旧浏览器会触发怪异模式，导致栅格错位、按钮尺寸异常、reveal 弹窗定位失效。
- 漏写
lang属性：屏幕阅读器可能无法正确切换语言发音规则，影响 WCAG 合规性 -
<meta charset="utf-8">必须放在<head>前三行内，否则 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"> -
grid-margin-x在 cell 间插入水平 margin，但不会影响第一列左边距和最后一列右边距——这是有意设计，避免外边距溢出容器 - 不要嵌套
grid-container：它自带 padding，多层嵌套会导致不可预测的留白
组件初始化失败的常见 HTML5 结构原因
Foundation 的 JS 组件（如 accordion、tabs）依赖特定的 HTML5 属性和父子关系。即使 class 名写对，结构不对也会静默失效。
立即学习“前端免费学习笔记（深入）”；
-
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">包裹全部内容，且off-canvas元素需在 wrapper 内部最前或最后，不能放在grid-container外面 - 用
<button>替代<a href="#">触发reveal，能避免点击后页面跳到顶部（href="#"的默认行为）
Foundation 不强制你用 <header>、<nav> 等语义标签，但如果你用了，就得确保它们不破坏 grid 的 flex 布局流——比如把 <nav class="grid-x"> 直接塞进 <header> 没问题，但给 <header> 自己加 display: flex 就可能和 Foundation 的内部 flex 规则冲突。
