如何用HTML语义化标签打造符合标准的个人主页-html教程-PHP中文网

不能包着写，因与语义不同：前者表头部内容（如logo、主标题），后者为独立导航模块，混用会导致屏幕阅读器误读且降低css可维护性。

如何用html语义化标签打造符合标准的个人主页

为什么
不能包着
写？

很多人写成 <header><nav>...</nav></header>，看似整洁，但语义错位了。<header></header> 表示页面或区段的“头部内容”，比如站点 logo、主标题；而 <nav></nav> 是独立的功能模块——导航，浏览器和辅助技术会分别识别它。混在一起会导致屏幕阅读器误读为“logo 和导航是一体的”，也影响后续用 CSS 选中导航时的可维护性。

正确做法是并列同级：

<header><h1>张三的个人主页</h1>
</header><nav><ul>
<li><a href="#about">关于我</a></li>
  </ul></nav>

<header></header> 里只放本页最顶层标识（<h1></h1>、logo 图片等），不塞导航、搜索框
多个导航（如顶部主菜单 + 页脚快捷链接）应各自用 <nav></nav> 包裹，加 aria-label 区分，例如 <nav aria-label="主导航"></nav>
如果导航嵌在页头右侧，用 CSS 布局对齐即可，结构上仍保持并列

main 和 section 的边界在哪？

<main></main> 是页面唯一主体内容容器，一个 HTML 文档里只能有一个；<section></section> 是它内部的逻辑分块，比如“技能”“项目”“博客摘要”。常见错误是把整个 <main></main> 当成“一个 section”，或者反过来，在 <main></main> 外又套一层 <section></section> —— 这会让语义层级断裂，SEO 和辅助技术无法判断哪部分才是真正的核心内容。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

典型结构应是：

<main><section id="about"><h2>关于我</h2>
    <p>...</p>
  </section><section id="projects"><h2>近期项目</h2>
    <article><h3>项目A</h3></article></section></main>

每个 <section></section> 必须有明确主题，且带 <h2></h2> 或更高级别标题（不能跳级，比如 <h2></h2> 后直接 <h4></h4>）
@#@#@#@#@#@#@#@#@#@0
本地路径注意大小写和斜杠：macOS/Linux 下 Images/avatar.jpg ≠ images/avatar.jpg；用相对路径时统一用 ./images/ 开头，避免 /images/（根路径在 file:// 协议下会失效）