综合最佳实践
SEO 友好结构、性能优化、移动优先、完整检查清单
HTML 最佳实践
写好 HTML 不只是标签正确——还要考虑 SEO、可访问性、代码规范。
学完本章你将： 掌握 SEO 友好结构、可访问性 aria、代码规范、DOCTYPE。
SEO 友好结构
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>有意义的标题 | 网站名</title>
<meta name="description" content="150字以内的页面描述">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 每页只有一个 h1 -->
<h1>页面主题</h1>
<!-- 使用语义标签 -->
<article>
<h2>章节标题</h2>
<p>内容...</p>
</article>
</body>
</html>可访问性 aria
html
<!-- 给屏幕阅读器提供额外信息 -->
<button aria-label="关闭弹窗">✕</button>
<!-- 标记导航角色 -->
<nav aria-label="主导航">
<a href="/">首页</a>
</nav>
<!-- 图片的 alt 是基础 -->
<img src="chart.png" alt="2024年各季度销售柱状图，Q4增长30%">代码规范
html
<!-- ✅ 标签小写 -->
<p>正确</p>
<!-- ❌ <P>避免大写</P> -->
<!-- ✅ 属性用双引号 -->
<a href="https://example.com">链接</a>
<!-- ✅ 正确嵌套 -->
<ul>
<li>项目 1</li>
<li>项目 2</li>
</ul>
<!-- ✅ 始终声明 DOCTYPE -->
<!DOCTYPE html>
<!-- ✅ 设置语言 -->
<html lang="zh-CN">检查清单
- 声明
<!DOCTYPE html> - 设置
lang属性 - 设置
meta charset="UTF-8" - 设置 viewport meta 标签
- 每页只有一个
<h1> - 图片都有
alt属性 - 用语义标签而非全 div
- 代码缩进统一