最简单的可用HTML只需5行：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>页面标题</title></head><body>内容</body></html>，其中doctype、html、head、body为必需，charset和title为强推荐。

最简单的 HTML 代码就是能被浏览器正确识别、不报错、一打开就有内容显示的那几行——不需要框架，不用构建工具，连服务器都不用。

从一个能跑起来的最小模板开始

你真正需要写的「完整」HTML，其实只有 5 行左右。浏览器只认 <!DOCTYPE html> 这个声明 + <html> 根容器 + 必须存在的 <head> 和 <body>。其他全是可选的。

• <!DOCTYPE html> 必须放在第一行，缺了它，IE 或旧浏览器可能进“怪异模式”
• <meta charset="UTF-8"> 要写在 <head> 里，否则中文会乱码（尤其 Windows 记事本默认保存为 ANSI）
• <title> 不影响渲染，但没它标签页就显示“无标题文档”，不利于调试和 SEO
• 所有可见内容必须写在 <body> 里面，写在外面（比如 <html> 后直接写文字）属于无效 HTML，部分浏览器会吞掉或错位

只用 3 个标签就能搭出可用页面

别被“100 多个标签”吓住。日常写静态内容，<h1>、<p>、<a> 这三个覆盖 80% 场景：标题、段落、链接。它们语义清晰、自带样式、无需额外 CSS 就能看。

• <h1> 到 <h6> 是层级关系，不是字号关系——<h2> 应该是 <h1> 的子主题，不是“比 <h1> 小一号的标题”
• <p> 自带上下外边距，连续写多个 <p> 会自然分段；用 <br> 强制换行反而容易破坏语义和响应式布局
• <a href="xxx"> 的 href 值如果是相对路径（如 "about.html"），文件必须真实存在，否则点击 404；如果只是占位，先写 "#" 或 "javascript:void(0)"

图片和列表：两个高频但易错的操作点

<img> 和 <ul>/<ol> 看似简单，新手常卡在路径和嵌套上。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

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

• <img src="logo.png" alt="公司 Logo"> 中的 src 是相对当前 HTML 文件的位置，不是相对于项目根目录；如果 HTML 在 /pages/index.html，图片在 /assets/logo.png，就得写 ../assets/logo.png
• <alt> 属性不是可选的——没有它，图片加载失败时页面就留白，屏幕阅读器也读不出内容，WCAG 可访问性直接不达标
• 列表项 <li> 必须严格嵌套在 <ul> 或 <ol> 里，不能直接丢在 <body> 下；浏览器虽会容错渲染，但开发者工具里会标黄警告
• 不要用 <div> 模拟列表（比如一堆 <div class="item">），语义丢失后，键盘 Tab 导航、SEO 抓取、屏幕阅读器都会失效

别碰这些“看起来省事”实则埋雷的写法

有些习惯是早期教程遗留下来的，现在用不仅多余，还会干扰现代浏览器行为。

• 别写 <font color="red"> 或 <center> —— 这些早已废弃，Chrome/Firefox 已不支持渲染，且和语义化背道而驰
• 别依赖 border="1"、cellpadding="5" 这类表格属性——它们属于 HTML4 风格，现代写法应交由 CSS 控制，否则表格在移动端极易溢出
• 别把所有东西都塞进 <div>：比如用 <div><h1>标题</h1></div> 包一层毫无意义，<h1> 本身已是块级元素，加 <div> 只是增加 DOM 深度
• <!-- 注释 --> 可以写，但别写成 <!-- 这里后面要加按钮 --> 这种模糊描述；要写就写清上下文，比如 <!-- 临时禁用登录入口，待 auth v2 上线后移除 -->

真正的“简单”，不是删减标签数量，而是删掉所有非必要假设——比如“用户一定用 Chrome”“图片一定在同目录”“文字不会超长”。每加一行 HTML，都要问一句：这行是否在缺失 CSS/JS/网络的情况下仍能表达准确含义？