HTML中用和–规范语义结构：默认空行，标题标签自带margin与缩放；表最高层级，全页限一个，需按→→顺序嵌套；建议CSS重置margin统一控制间距；用于段内视觉换行（如地址），表示主题分隔。
用 <p></p> 和 <h1></h1>–<h6></h6> 控制段落与层级结构
浏览器默认会给 <p></p> 前后加空行，<h1></h1>–<h6></h6> 则自动带 margin 和字体缩放。别用 <h1></h1> 单纯为了“变大”，它代表页面最高语义层级；一个页面通常只该有一个 <h1></h1>，后续用 <h2></h2> 表示章节、<h3></h3> 表示子节。
常见错误是嵌套错乱，比如 <h3></h3> 直接跟在 <h1></h1> 后面跳过 <h2></h2>，这会影响屏幕阅读器和 SEO。实际排版中，建议用 CSS 重置 margin，再统一控制间距，而不是依赖默认行为。
换行与分隔：什么时候用 <br>，什么时候用 <hr>
<br> 是纯视觉换行，不产生新块级上下文，适合地址、诗行这类需保留段落语义但要折行的场景。例如：
<p>北京市朝阳区<br>建国路87号</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<hr> 是语义分隔符，表示主题或内容的逻辑中断。它会独占一行、带默认边距，且现代 HTML 中已移除 color、width 等内联属性——想改样式必须用 CSS。误用 <hr> 当装饰线（比如菜单下划线）会导致语义污染，应改用 <div style="border-bottom: 1px solid #ccc">。
<h3>
<code><b></b>、<i></i>、<strong></strong>、<em></em> 的语义差异不能忽略
视觉上 <b></b> 和 <strong></strong> 都加粗，<i></i> 和 <em></em> 都斜体，但用途完全不同：
-
<strong></strong>表示内容重要性提升，会被屏幕阅读器加重语气读出 -
<em></em>表示强调，读音语调变化，适合表达反语、重点词 -
<b></b>仅用于“视觉加粗但无额外语义”的情况，比如产品名、关键词高亮 -
<i></i>适用于外文术语、船名、生物分类学名等传统斜体场景
搜索引擎和辅助技术依赖这些区别。把所有加粗都写成 <b></b>，等于放弃语义表达能力。
空格、换行与特殊字符的显示问题
HTML 会合并连续空白符（空格、制表符、换行），直接敲多个空格或回车不会生效。需要保留原格式时：
- 用
- 用
<pre class="brush:php;toolbar:false;"></pre>包裹整段预格式化文本（如代码块、ASCII 图） - 用 CSS 的
white-space: pre-wrap在普通元素中模拟换行保留 - 中文标点如顿号、省略号必须用全角字符，否则可能被渲染为半角或乱码
最易被忽略的是：即使写了 <br>，如果父容器设置了 display: flex 或 display: grid，它也可能失效——此时换行逻辑应由布局系统接管，而非靠标签硬换。
