HTML基础标签重在掌握语义与规范：必须用<html><head><body>三大骨架，分清<h1>–<h6>层级、<p>段落与<br>换行区别，善用<strong>/<em>表意而非样式。

HTML基础标签不是“学完就忘”的清单，而是你写每一页网页时真正会敲出来的那十几个。掌握它们的关键不在于背全，而在于分清哪些必须用、哪些已淘汰、哪些看似简单却常被误用。

必须掌握的三大骨架标签：<html>、<head>、<body>

所有合法 HTML 页面都从这三者开始。缺一不可，且顺序不能乱：<html> 是根容器；<head> 里放 <title>、<meta charset="UTF-8">、<link> 等元信息；<body> 才是用户看得见的内容区域。

常见错误现象：

• 把 <title> 写在 <body> 里 —— 浏览器可能渲染，但不符合标准，SEO 和无障碍访问会出问题
• 漏掉 <meta charset="UTF-8"> —— 中文乱码几乎必然发生，尤其在本地打开 .html 文件时
• 用 <body bgcolor="#f0f0f0"> 设背景色 —— bgcolor 属性早已被废弃，现代浏览器虽兼容但不推荐，应改用 CSS

文本排版核心四件套：<h1>–<h6>、<p>、<br>、<hr>

<h1> 到 <h6> 不是“字号大小排序”，而是语义层级：一个页面有且仅有一个 <h1>（主标题），其余按内容逻辑嵌套，搜索引擎和读屏软件都依赖这个结构。

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

<p> 是段落容器，不是“换行工具”；<br> 才是强制换行，只适合诗歌、地址等需保留原格式的场景；<hr> 是水平分隔线，语义上表示主题或章节切换，不是装饰性线条。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

容易踩的坑：

• 为控制间距滥用多个 <br> —— 这会让结构松散、响应式布局失效，应交由 CSS 的 margin 或 padding 处理
• 用 <h2> 标题直接跟在 <p> 后面，中间跳过 <h1> —— 语义断裂，影响可访问性和 SEO 权重传递
• 把 <hr> 当作“画线装饰”塞进按钮旁或卡片底部 —— 它本意是内容分隔，滥用会干扰屏幕阅读器对文档流的理解

注释与语义化起点：<!-- --> 和 <strong>/<em>

<!-- --> 看似简单，但它是协作和调试的基础设施。别只在代码开头写一句“TODO”，要把临时禁用的模块、关键逻辑说明、甚至版本标记都塞进去，比如：<!-- v2.1: 支持暗色模式切换，暂未上线 -->。

<strong> 和 <em> 不是 <b> 和 <i> 的翻版：<strong> 表示内容重要性提升（如警告、关键结论），<em> 表示语气强调（如反讽、重点词），而 <b> 和 <i> 仅保留纯样式含义（如产品名、外语词）。

使用场景差异：

• 错误写法：<b>危险操作</b>，确认后不可撤销 —— “危险”是语义重点，该用 <strong>
• 正确写法：这个方案<em>其实</em>并不节省成本 —— “其实”是语气转折，<em> 更准确
• 兼容性注意：老项目中若还用 <font color="red"> 控制颜色，务必替换为 CSS 类，该标签在 HTML5 中已被完全移除

真正难的不是记住标签名，而是每次敲下 <h3> 时，下意识问一句：“它在这个上下文中，是不是真的第三级标题？”——语义一旦错位，后续加样式、做适配、接 JS，都会多绕半圈。