最简单的可用html只需5行：页面标题内容，其中doctype、html、head、body为必需，charset和title为强推荐。
最简单的 HTML 代码就是能被浏览器正确识别、不报错、一打开就有内容显示的那几行——不需要框架，不用构建工具，连服务器都不用。
从一个能跑起来的最小模板开始
你真正需要写的「完整」HTML，其实只有 5 行左右。浏览器只认 这个声明 + <code> 根容器 + 必须存在的 和 。其他全是可选的。
必须放在第一行，缺了它，IE 或旧浏览器可能进“怪异模式”-
<meta charset="UTF-8">要写在里，否则中文会乱码（尤其 Windows 记事本默认保存为 ANSI） -
<title></title>不影响渲染，但没它标签页就显示“无标题文档”，不利于调试和 SEO - 所有可见内容必须写在
里面，写在外面（比如后直接写文字）属于无效 HTML，部分浏览器会吞掉或错位
只用 3 个标签就能搭出可用页面
别被“100 多个标签”吓住。日常写静态内容，<h1></h1>、<p></p>、<a></a> 这三个覆盖 80% 场景：标题、段落、链接。它们语义清晰、自带样式、无需额外 CSS 就能看。
-
<h1></h1>到<h6></h6>是层级关系，不是字号关系——<h2></h2>应该是<h1></h1>的子主题，不是“比<h1></h1>小一号的标题” -
<p></p>自带上下外边距，连续写多个<p></p>会自然分段；用<br>强制换行反而容易破坏语义和响应式布局 -
<a href="xxx"></a>的href值如果是相对路径（如"about.html"），文件必须真实存在，否则点击 404；如果只是占位，先写"#"或"javascript:void(0)"
图片和列表：两个高频但易错的操作点
<img> 和 <ul>/</ul>
<ol></ol> 看似简单，新手常卡在路径和嵌套上。
-
<img src="logo.png" alt="公司 Logo">中的src是相对当前 HTML 文件的位置，不是相对于项目根目录；如果 HTML 在/pages/index.html，图片在/assets/logo.png，就得写../assets/logo.png -
<alt></alt>属性不是可选的——没有它，图片加载失败时页面就留白，屏幕阅读器也读不出内容，WCAG 可访问性直接不达标 - 列表项
<li>必须严格嵌套在<ul></ul>或<ol></ol>里，不能直接丢在下；浏览器虽会容错渲染，但开发者工具里会标黄警告 - 不要用
<div> 模拟列表（比如一堆 <code><div class="item">），语义丢失后，键盘 Tab 导航、SEO 抓取、屏幕阅读器都会失效<h3>别碰这些“看起来省事”实则埋雷的写法</h3> <p>有些习惯是早期教程遗留下来的，现在用不仅多余，还会干扰现代浏览器行为。</p> <ul> <li>别写 <code><font color="red"></font>或<center></center>—— 这些早已废弃，Chrome/Firefox 已不支持渲染，且和语义化背道而驰 - 别依赖
border="1"、cellpadding="5"这类表格属性——它们属于 HTML4 风格，现代写法应交由 CSS 控制，否则表格在移动端极易溢出 - 别把所有东西都塞进
<div>：比如用 <code><div><h1>标题</h1></div>包一层毫无意义，<h1></h1>本身已是块级元素，加<div> 只是增加 DOM 深度<li> <code><!-- 注释 -->可以写，但别写成<!-- 这里后面要加按钮 -->这种模糊描述；要写就写清上下文，比如<!-- 临时禁用登录入口，待 auth v2 上线后移除 -->
真正的“简单”，不是删减标签数量，而是删掉所有非必要假设——比如“用户一定用 Chrome”“图片一定在同目录”“文字不会超长”。每加一行 HTML，都要问一句：这行是否在缺失 CSS/JS/网络的情况下仍能表达准确含义？
