DW如何制作一个HTML5百科页面

用dw写html5页面必须全程代码视图，禁用设计视图和实时预览；语义标签需手动书写，svg和mathml须内联；保存前检查控制台错误并清理不可见字符。

用 DW 直接写 html5 页面，别碰“可视化编辑”

dreamweaver 的设计视图（Design View）对 HTML5 语义标签支持极差，<article></article>、<section></section>、<nav></nav> 常被自动包裹或删改，保存后结构错乱。你不是不会写，是 DW 在背后偷偷改你的代码。

• 新建文件时选「HTML」，然后手动在 后写结构，别点“从模板创建”
• 关闭「设计视图」，全程用「代码视图」——右下角切换按钮标着 Code，不是 Split
• 如果误点了设计视图，哪怕只拖了一个 div，立刻按 Ctrl+Z 撤回，再检查 <header></header> 是否还在原位

百科页面必备的 HTML5 语义结构怎么搭

百科类页面核心是信息分层清晰，不是堆样式。用对语义标签，搜索引擎和屏幕阅读器才能正确理解内容关系，否则再好看的 CSS 也白搭。

• <main></main> 包住所有词条主体，一个页面只出现一次
• 每个词条用 <article></article>，不是 <div class="article">；词条内小节用 <code><section></section>，不是嵌套一堆 <div> <li>侧边栏导航（如“相关词条”“分类索引”）放 <code><aside></aside>，顶部导航栏用 <nav></nav>，别全塞进 <header></header>
• 避免 <div id="content"> 这种万能容器——它没语义，对 seo 和可访问性零帮助 <h3>DW 里插入 SVG 图标和 mathml 公式会出什么问题</h3> <p>DW 默认把 SVG 当作图片处理，直接拖进去会转成 <code><img src="xxx.svg" alt="DW如何制作一个HTML5百科页面" >，导致无法内联样式、不能响应式缩放；MathML 更惨，DW 会直接报错或清空整个标签块。
  • SVG 要手写内联：复制 SVG 源码（以 <svg></svg> 开头），粘贴到代码视图中对应位置，确保没有 <img alt="DW如何制作一个HTML5百科页面" > 包裹
  • MathML 公式必须用原生标签，如 <math><mi>x</mi><mo>=</mo><mn>1</mn></math>，别指望 DW 提供公式面板
  • 保存前检查控制台（F12 → console）有没有 Failed to load Resource: net::ERR_FILE_NOT_FOUND——那是 DW 把相对路径自动改成绝对路径导致的

  CSS Grid 布局在 DW 实时预览里根本不可信

  DW 的实时视图（Live View）用的是旧版 webkit 渲染引擎，不支持 grid-template-areas 自动换行、subgrid，甚至部分 gap 行为会错位。你看到的“对齐了”，浏览器里大概率是错的。

  立即学习“前端免费学习笔记（深入）”；

  • 写 Grid 时关掉 Live View，用 chrome 或 firefox 手动刷新查看效果
  • 避免用 DW 的“CSS Designer”面板生成 Grid 代码——它生成的 grid-column-start 常漏单位，变成 grid-column-start: 2（缺 span 2 或 / 3）
  • 百科页面的多列词条布局，优先用 display: grid + minmax(300px, 1fr)，别依赖 DW 的“响应式网格布局”按钮

  最麻烦的其实是字符编码——DW 默认用 UTF-8 无 bom，但如果你从 word 粘贴过中文标题，可能混入不可见的 Unicode 控制符，导致 <h2></h2> 标签莫名闭合失败。遇到渲染异常，先全选文本 → 右键“清理 HTML” → 勾选“移除不可见字符”。