HTML排版应遵循语义化原则：段落用，容器用；标题严格按–层级使用；列表必须用/+；表格仅用于二维数据，需含等结构。
用 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill9263" title="Html2md">Html2md</a>
<p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 和 <div> 区分段落与区块
<p>HTML 排版不是靠空格或换行，而是靠语义化标签表达内容结构。<code><p></p> 专用于文字段落，浏览器默认上下有外边距；<div> 是无语义容器，适合 grouping 或布局包裹。混用会导致样式不可控——比如把标题塞进 <code><p></p> 里，既违反语义，又可能被 CSS 的 p + h2 选择器意外影响。
常见错误现象：
– 粘连文字（没用 <p></p> 或 <br>，只靠回车）
– 段间距忽大忽小（多个 <p></p> 套嵌或用了 <div> 模拟段落）<br>– 屏幕阅读器读不出段落边界（全用 <code><div>）
<p>实操建议：<br>– 正文段落一律用 <code><p></p>
– 需要整体浮动、居中或加背景的区域，用 <div> 包一层<br>– 别用 <code><p></p> 包 <h1></h1>、<ul></ul> 等块级元素（HTML5 不允许）
标题必须用 <h1></h1>–<h6></h6>，且保持层级连续
搜索引擎和辅助工具依赖标题层级理解页面结构。<h1></h1> 应全页唯一，代表主主题；<h2></h2> 是其直接子级，以此类推。跳着用（比如 <h1></h1> 后直接 <h4></h4>）会让大纲断裂，CSS 的 h2 + h3 规则也可能失效。
立即学习“前端免费学习笔记（深入）”；
使用场景举例：
– 文章页：<h1></h1> 标题 → 多个 <h2></h2> 小节 → 每小节内用 <h3></h3> 细分
– 产品列表页：<h1></h1> “全部商品” → 每个商品卡片用 <h2></h2> 商品名（注意：同一页面可有多个 <h2></h2>，但不能没有 <h2></h2> 就上 <h3></h3>）
容易踩的坑：
– 为“看起来大一点”滥用 <h1></h1>（一页多个 <h1></h1> 会稀释 SEO 权重）
– 用 <span style="font-size: 2em"></span> 冒充标题（丢失语义、无法被大纲提取）
– 在 <li> 里嵌 <h3></h3>（合法但通常没必要，优先用 <strong></strong> 或 CSS 控制）
列表排版：用 <ul></ul>/<ol></ol>，别用 <div> + <code><br>
无序列表用 <ul></ul> + <li>，有序列表用 <ol></ol> + <li>。浏览器默认渲染带缩进和标记，CSS 也针对这些标签预设了 margin、padding 和 list-style 行为。手写 <div class="item">● 第一项</div> 看似省事，实则破坏可访问性（屏幕阅读器读不出这是列表），也增加维护成本（换序号类型得改 HTML 而非仅 CSS）。
参数差异注意点：
– <ol></ol> 支持 start 属性（如 start="5"），<ul></ul> 不支持
– list-style-type 可设为 none、square、lower-roman 等，但仅对 <ul></ul>/<ol></ol> 生效
– <li> 可单独设 value（仅 <ol></ol>），覆盖自动编号
性能影响很小，但兼容性要注意：
– 旧版 IE 对 list-style-position: inside 渲染错位
– 移动端 Safari 在 <ul></ul> 内嵌 <div> 时，缩进可能异常（应把内容包在 <code><li> 内，而非 <li> 外）
表格排版：只用于真正二维数据，别当“布局神器”
用 <table> 排版文字块（比如三栏简介）是上世纪做法。它导致 HTML 膨胀、响应式困难、语义混乱（屏幕阅读器会逐行逐单元格播报，用户迷失上下文）。现代替代方案是 <code>display: grid 或 display: flex。
什么时候该用 <table>？<br>– 成绩单、财务报表、API 参数对照表等行列明确、需表头关联的数据<br>– 必须兼容不支持 CSS Grid 的环境（极少见，且可用 <code>@supports 降级）
必须包含的标签：
– <thead> 包 <code><tr><th>（列标题）<br>– <code><tbody> 包数据行（即使只有一行）<br>– 每个 <code><th> 加 <code>scope 属性（如 scope="col"）提升可访问性
容易被忽略的细节：
– <caption></caption> 是表格的标题，不是 <h3></h3>，它会被读屏软件识别为表格描述
– <colgroup></colgroup> 可统一设置列宽/背景，比给每个 <td> 加样式更高效<br>– 表格跨页打印时，<code><thead> 会自动重复，但需确保 <code>thead 在 tbody 前
