一个可用的个人页面只需掌握10个核心HTML标签：必须用<html><head><body><title>构成结构骨架；用<header><main><section><footer>组织内容逻辑；用<h1>–<h6><p><a><img><ul>/<ol>承载文字、链接、图片和列表，每个标签都有明确语义与使用位置，缺一或错用会导致乱码、无障碍失效、SEO下降或布局错误。
写一个能用的个人页面，不需要学全 HTML 所有标签，掌握 10 个左右核心标签就足够撑起结构、内容和基础语义。重点不是数量，而是知道每个标签“在什么位置该用、不用会有什么问题”。
必须用的结构骨架标签：<html>、<head>、<body>、<title>
这四个是 HTML 文件的底线要求，缺一不可。浏览器靠它们识别文档类型、加载元信息、渲染可见内容。<title> 写在 <head> 里，决定浏览器标签页上显示的文字——很多人漏写，结果页面标题是空的或显示“未标题文档”。
-
<html>是根元素，必须包裹整个文档 -
<head>不显示在页面上，但放<title>、<meta charset="UTF-8">（防止中文乱码）、<link rel="stylesheet">（引入 CSS） -
<body>是所有可见内容的容器，正文全得塞进去
内容组织标签：<header>、<main>、<section>、<footer>
这些不是“可有可无”的美化标签，而是告诉浏览器和屏幕阅读器“这部分是什么角色”。搜索引擎和无障碍工具依赖它们理解页面逻辑。不用它们，也能显示文字，但等于把房子建好却不标卧室、厨房、卫生间。
-
<header>放网站名、导航栏（比如你的姓名 + “关于我 / 项目 / 联系”） -
<main>包裹页面唯一主体内容，一个页面只该有一个 -
<section>拆分不同主题块，比如“技能”“作品集”“经历”，别一股脑堆在<div>里 -
<footer>放版权、邮箱、社交链接等收尾信息
文字与链接核心标签：<h1>–<h6>、<p>、<a>
这是用户真正看到的内容载体。标题层级不能跳着用（比如从 <h1> 直接到 <h3>），否则语义断裂；<p> 不是装饰，它自带上下边距和段落语义；<a> 必须带 href 属性，空链接（href="#"）或忘了加引号（href=github.com）会导致点击无效。
立即学习“前端免费学习笔记（深入）”；
-
<h1>全页只能有一个，通常是你的姓名或站点名 - 用
<h2>做一级模块标题（如“我的技能”），<h3>做子项（如“前端开发”） -
<a href="mailto:you@example.com">发邮件</a>比写纯文本邮箱更可靠
图片与列表：用对 <img> 和 <ul>/<ol> 就够了
<img> 必须带 src 和 alt。没 alt 的图对视障用户不可读，也影响 SEO；路径写错（比如漏掉 ./ 或拼错文件名）图就变空白方块。列表别用 <div> + 换行模拟，<ul>（无序）和 <ol>（有序）自带语义和默认样式，改起来也方便。
-
<img src="avatar.jpg" alt="张三的头像">——alt不是可选字段 - 技能列表用
<ul>，时间线用<ol>，语义清清楚楚 - 别写
<img src="..." width="200" height="200">控制尺寸，用 CSS 更灵活
真正卡住人的往往不是“哪个标签没见过”，而是 <head> 里漏了 <meta charset="UTF-8"> 导致中文乱码，或是把 <main> 套在 <header> 外面破坏嵌套规则。先跑通这 10 个标签的合法组合，比记 50 个冷门标签有用得多。
