如何快速了解HTML文字排版功能用法-html教程-PHP中文网

html文字排版需语义标签、默认样式与css微调协同；依赖margin实现分段，重置css后需手动恢复p { margin: 1em 0; }，仅视觉换行，不具语义。

如何快速了解html文字排版功能用法

HTML文字排版不是靠“敲回车就能分段”，而是靠语义标签 + 默认样式 + CSS微调三者协同；不理解这点，直接写 <p></p> 也容易贴在一起、读起来费劲。

为什么 `<p></p>` 写了却没看出分段效果

浏览器会把连续空白（包括换行、多个空格、制表符）压缩成一个空格，所以你在编辑器里回车十次，<p></p> 外面照样连成一行。真正起作用的是 <p></p> 自带的上下 margin，默认约 1em，但一旦用了重置 CSS（如 * { margin: 0; padding: 0; }），这个间距就没了。

检查是否被全局样式清除了 p { margin: 0; }
用浏览器开发者工具看 computed styles，确认 margin-top 和 margin-bottom 是否为 0
快速修复：加一句 p { margin: 1em 0; } 即可恢复呼吸感

`<br>` 和 `<p></p>` 到底什么时候用

<br> 是纯视觉换行，不产生新段落；<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 是语义分段，自带间距和结构意义。混用会导致屏幕阅读器误读、CSS 难控制、打印样式错乱。

用 <br>：地址、诗歌、签名档这类「同一语义块内需分行」的场景，例如 <p>北京市朝阳区建国路1号<br>邮编：100022</p>
用 <p></p>：每段表达独立观点、事实或步骤，比如说明文档、用户协议、新闻正文
危险信号：如果一段内容里塞了 3 个以上 <br>，大概率该拆成多个 <p></p> 或改用 <ul></ul>

中文竖排怎么写才靠谱

别用 transform: rotate(90deg)——它只是图像旋转，文本不可选、不可复制、无障碍支持差。真竖排必须用 writing-mode。

基础写法：.vertical { writing-mode: vertical-rl; }（字符从上到下，行从右到左）
英文字符默认横排，加 text-orientation: upright; 可强制直立，但小写字母易混淆，慎用
竖排时 line-height 要调大（建议 ≥ 1.8），否则上下字挨太近
注意移动端：某些安卓 WebView 对 writing-mode 支持不稳定，可加 @supports (writing-mode: vertical-rl) { ... } 做降级

真正卡住人的从来不是标签怎么拼，而是判断「这段要不要独立成块」「这行换行是语义需要还是纯视觉需要」「这个强调要不要被屏幕阅读器听见」——这些决定藏在内容逻辑里，不在语法手册中。