引入
HTML 最佳实践是一些写 HTML 时更推荐的习惯。
它们不一定是强制规则，但能让代码更清楚、更稳定，也更方便后续维护。
正文
定义
定义
HTML 最佳实践是指在结构、语义、可访问性、SEO、代码规范等方面更推荐的写法。
好的 HTML 不只是“能显示”，还应该结构清晰、语义明确、容易维护。
使用标准文档结构
每个 HTML 页面都应该有基本结构。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<h1>页面内容</h1>
</body>
</html>这样浏览器更容易正确解析页面。
使用语义化标签
有明确语义时，优先使用合适的标签。
<main>
<article>
<h1>文章标题</h1>
<p>文章内容。</p>
</article>
</main>不要所有结构都用 <div>。
保持标题层级清晰
标题标签应该表示内容层级。
<h1>网页主标题</h1>
<h2>第一部分</h2>
<h3>第一部分的小节</h3>不要为了字体大小乱用标题标签，样式应该交给 CSS。
图片写好 alt
图片应根据内容写合适的 alt。
<img src="product.jpg" alt="黑色机械键盘">alt 对图片加载失败、SEO 和无障碍都有帮助。
如果图片只是装饰，可以写空 alt。
<img src="decor.png" alt="">表单控件配合 <label>
<label for="username">用户名：</label>
<input id="username" type="text" name="username">这样用户点击文字时也可以聚焦输入框，体验更好。
属性和标签使用小写
HTML 虽然不严格要求标签名必须小写，但更推荐统一小写。
<img src="cat.jpg" alt="猫">统一风格可以减少混乱。
属性值使用双引号
<a href="https://example.com">示例链接</a>虽然有些情况下不写引号也能运行，但统一写双引号更清晰。
正确嵌套标签
HTML 标签要注意嵌套关系。
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>不要写出结构混乱的嵌套。
分离结构和样式
HTML 负责结构，CSS 负责样式。
不推荐大量使用行内 style。
<p class="warning">注意事项</p>样式放到 CSS 中管理更方便。
注意资源路径
图片、CSS、JavaScript 都依赖路径。
<link rel="stylesheet" href="css/style.css">
<script src="js/main.js"></script>
<img src="images/logo.png" alt="Logo">路径写错时，资源就无法加载。
给页面设置合适的标题和描述
<title>HTML 最佳实践</title>
<meta name="description" content="整理 HTML 编写时常见的推荐习惯。">这有助于用户和搜索引擎理解页面。
定期验证和调试
写完页面后，可以用浏览器开发者工具和验证工具检查问题。
常检查：
- 标签是否闭合
- 路径是否正确
- 页面结构是否清楚
- 图片是否有
alt - 表单是否有
label和name
特点
- 最佳实践不是死规则，而是更推荐的写法
- 好的 HTML 结构清楚、语义明确
- HTML 负责内容结构，CSS 负责样式
- 合理的
alt、label、标题层级能提升可访问性 - 清晰的
<title>和description有助于 SEO - 统一代码风格可以减少维护成本
注意事项
- 不要只追求页面能显示，还要关注结构是否合理
- 不要为了样式滥用标签
- 不要把所有内容都塞进
<div> - 不要把重要信息只放在图片里
- 不要把敏感信息写在 HTML 中
- 不要忽略浏览器开发者工具中的错误和警告
- 代码越早保持规范，后面越容易维护
理解
可以把 HTML 最佳实践理解为“写给浏览器，也写给未来的自己看”。
页面能显示只是第一步，结构清晰、语义明确、方便维护才是更好的 HTML。
好的习惯一开始可能显得麻烦，但项目变大后会非常省事。
引出
学完这些基础后，可以继续结合 CSS 和 JavaScript，把 HTML 结构变成真正可用、好看的网页。