应使用<p>和<h1>～<h6>标签显式定义段落与标题，浏览器忽略换行符；<p>自动添加上下空行，<h1>到<h6>逐级减小字号并增大间距，且<h1>全页唯一以保障SEO与语义结构。

怎么用 <p> 和 <h1>～<h6> 控制文字基本排版

浏览器默认忽略换行符，直接敲回车不会起作用；必须用标签显式定义段落和标题。 <p> 自动前后加空行，<h1> 到 <h6> 会自动加更大间距，且字号逐级变小。

• <p align="center"> 这种写法虽能用，但属于过时的 HTML4 属性，现代标准中应改用 CSS：style="text-align:center"
• <h1> 应全页唯一，用于主标题；搜索引擎靠它判断页面核心主题，乱用多个 <h1> 会影响 SEO
• 如果只是想缩进首行，别用空格硬凑，CSS 的 text-indent: 2em 更可靠

插入图片和超链接时常见错误及修复

图片不显示、链接打不开，90% 是路径或属性写错。 <img> 必须带 src 和 alt，<a> 必须带 href，缺一不可。

• src 路径写成 images/photo.jpg 时，要确认文件真在该相对路径下；若图在同级目录，应写 ./photo.jpg 或直接 photo.jpg
• href 值为 contact.html 时，确保该文件存在；想新开窗口，得加 target="_blank" rel="noopener"，否则有安全风险
• alt 不是可选装饰——它是屏幕阅读器读给视障用户的内容，也是图片加载失败时的备用文字，不能为空

用 <ul>、<ol> 和 <table> 排列表格与列表

列表和表格不是“看起来整齐”才用，而是语义正确性的基础：无序内容用 <ul>，有序步骤用 <ol>，二维数据用 <table>。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• <table> 里必须有 <tr>（行）包裹 <td>（单元格），漏掉 <tr> 浏览器会自动补，但结构混乱，后续加样式或 JS 操作容易出错
• <ul> 和 <ol> 内部只能直接放 <li>，不能套 <p> —— 否则语义断裂，辅助技术可能无法识别列表关系
• 纯为了三栏布局而滥用 <table> 是反模式；现在应优先用 display: flex 或 display: grid，表格只用于真正表格数据

为什么加了 <meta charset="UTF-8"> 还出现乱码

这个标签必须放在 <head> 最前面，且文件本身编码也得是 UTF-8。编辑器保存时选错编码，比标签写错更常见。

立即学习“前端免费学习笔记（深入）”；

• VS Code 默认保存为 UTF-8，但记事本保存时常选“ANSI”，导致即使写了 <meta charset="UTF-8">，实际文件仍是 GBK 编码，中文照样乱码
• 检查方法：用浏览器开发者工具（F12）→ “网络” → 点开 HTML 文件 → 查看响应头里的 Content-Type 是否含 charset=utf-8
• 如果服务器返回了 Content-Type: text/html; charset=iso-8859-1，那前端写的 <meta> 就会被无视——此时需改服务器配置或 .htaccess

实际排版中，最容易被跳过的不是语法，而是语义一致性：比如把 <h2> 当样式工具随便加大加粗，却不按逻辑层级组织内容。这会让代码看似能运行，却在可访问性、SEO 和长期维护上埋下硬伤。