语义化与常用标签
语义化布局（HTML5）
常用结构性标签：header、footer、nav、main、article、section、aside。用于表达页面区域含义，减少无意义多层 <div>。
文本与层级
- 标题：
h1～h6，一页建议单一主要标题（通常一个h1）。 - 段落：
p；换行br；分割线hr。 - 容器：块级
div，行内span（无语义，仅用于包裹样式钩子）。
强调：strong（语气强调）、em（侧重）；视觉粗体/斜体也可用 b/i，但屏幕阅读器语义弱于前者。
图像与链接
html
<img src="/logo.png" alt="站点 Logo" width="120" height="40" loading="lazy" />alt必填语义：图片失败或读屏时替代文案。- 宽高：有助于减少 CLS（布局偏移）。
html
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外链</a>target="_blank" 务必加 rel="noopener noreferrer"，避免新页通过 window.opener 篡改原页。
常用字符实体
| 实体 | 显示 |
|---|---|
< < | > > |
& & | " " |
© © | 不换行空格 |
更多符号可查 MDN「HTML entity」。
小结
先 语义 再样式：标题层级连贯、img 写清 alt、外链新窗口配 noopener。