一个可用的个人页面只需掌握10个核心html标签：必须用构成结构骨架；用组织内容逻辑；用–/承载文字、链接、图片和列表，每个标签都有明确语义与使用位置，缺一或错用会导致乱码、无障碍失效、seo下降或布局错误。

写一个能用的个人页面，不需要学全 HTML 所有标签，掌握 10 个左右核心标签就足够撑起结构、内容和基础语义。重点不是数量，而是知道每个标签“在什么位置该用、不用会有什么问题”。

必须用的结构骨架标签：、、、

这四个是 HTML 文件的底线要求，缺一不可。浏览器靠它们识别文档类型、加载元信息、渲染可见内容。 写在 里，决定浏览器标签页上显示的文字——很多人漏写，结果页面标题是空的或显示“未标题文档”。

• 是根元素，必须包裹整个文档
• 不显示在页面上，但放 、（防止中文乱码）、（引入 css）
• 是所有可见内容的容器，正文全得塞进去

内容组织标签：

、

、

、

这些不是“可有可无”的美化标签，而是告诉浏览器和屏幕阅读器“这部分是什么角色”。搜索引擎和无障碍工具依赖它们理解页面逻辑。不用它们，也能显示文字，但等于把房子建好却不标卧室、厨房、卫生间。

• 
  

  放网站名、导航栏（比如你的姓名 + “关于我 / 项目 / 联系”）

• 包裹页面唯一主体内容，一个页面只该有一个
• 
  

  拆分不同主题块，比如“技能”“作品集”“经历”，别一股脑堆在

  里

• 


  放版权、邮箱、社交链接等收尾信息

文字与链接核心标签：

–

、



Voicenotes

Voicenotes是一款简单直观的多功能ai语音笔记工具

下载

、 比写纯文本邮箱更可靠

图片与列表：用对

和

/

就够了

必须带 href 和 href="#"。没 href=github.com 的图对视障用户不可读，也影响 SEO；路径写错（比如漏掉

或拼错文件名）图就变空白方块。列表别用

+ 换行模拟，

（无序）和 发邮件（有序）自带语义和默认样式，改起来也方便。

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

• ——

  不是可选字段

• 技能列表用

  ，时间线用 ，语义清清楚楚

• 别写 src 控制尺寸，用 CSS 更灵活

真正卡住人的往往不是“哪个标签没见过”，而是 alt 里漏了 alt 导致中文乱码，或是把 ./ 套在

外面破坏嵌套规则。先跑通这 10 个标签的合法组合，比记 50 个冷门标签有用得多。