如何html代码_编写HTML代码的基础规范与技巧【教程】

HTML不是编程语言，其规范性关乎渲染、SEO与可维护性；lang属性必须设于标签且符合BCP 47标准，charset需置于最前，容器元素应显式闭合，data-属性用于业务数据而非class，细节决定工程质量。

HTML 不是编程语言，没有“运行错误”，但写得不规范会导致渲染异常、SEO 失效、可维护性崩塌——关键不在“会不会写”，而在“是否按浏览器和协作场景的真实规则来写”。

为什么 标签里必须有 lang 属性

缺 lang 不影响页面显示，但会触发无障碍访问（a11y）工具警告，搜索引擎也可能降低内容可信度。屏幕阅读器依赖它切换语音引擎，中文站点必须设为 lang="zh-CN" 或 lang="zh-Hans"（简体）/ lang="zh-Hant"（繁体）。

• lang 应该写在最外层 标签上，不是 或某个 div
• 若页面含多语言区块（如英文引用），可用局部 lang="en" 覆盖，但主语言不可省略
• 别写成 lang="ch" 或 lang="cn" —— 这些不是合法 BCP 47 标签，浏览器会忽略

必须放在 最前面

如果 出现在 或其他标签之后，部分浏览器（尤其是旧版 IE 和某些移动端 WebView）会在解析到它之前用默认编码（如 ISO-8859-1）解码前面的内容，导致标题乱码、CSS/JS 路径解析失败。

• 不要写 charset= utf-8（带空格）或 charset=UTF8（缺横线）——只有 UTF-8 是标准写法
• 服务端已通过 HTTP Header 发送 Content-Type: text/html; charset=utf-8，仍需保留该 meta 标签：Header 可能被代理覆盖，meta 是最终兜底

哪些 HTML 元素必须闭合，哪些可以省略

HTML5 允许部分标签省略结束符，但省略 ≠ 推荐。混淆会导致嵌套错乱，尤其在动态插入内容时。

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

Image Creator

ImageCreator是Photoshop的免费AI插件，赋予艺术家强大的功能，如TXT2IMG、IMG2IMG、Fill和ControlNet。

下载

• 必须显式闭合：
  、

  、

  、

  、 等所有“容器型”元素
• 可省略但建议写全：
• 、
  、
  （浏览器自动补，但 IDE 和 linter 常报 warning）
• 自闭合标签不能加 />：写 合法；写 虽不报错，但在 XHTML 模式下才需要，现代 HTML5 中多余且易引发模板引擎误解
• 和 标签永远不能自闭合：即使没内容，也必须写

用 class 还是 data- 存业务逻辑数据

把 ID、状态、配置塞进 class 名（如 class="btn btn--primary is-loading data-id-123"）是常见反模式：class 是样式契约，不是数据容器，CSS 选择器无法可靠提取结构化值，且易与 BEM 命名冲突。

• 业务元数据一律走 data- 属性：data-user-id="123"、data-status="pending"
• 避免 data 属性值含空格或引号，否则需转义；推荐只用字母、数字、短横线
• JavaScript 读取时统一用 element.dataset.userId（驼峰自动转换），而非 getAttribute('data-user-id')
• 不要用 data- 存大量 JSON 字符串——应走内联 或 API 加载

真正难的不是写出能渲染的 HTML，而是让同一份代码在 Chrome DevTools 的 Elements 面板里不飘红、被 Lighthouse 打出 90+、被后端模板或前端框架安全接收、被新同事一眼看懂结构意图——这些都藏在看似“无所谓”的空格、换行、属性顺序和大小写里。