HTML规范第一步是写和，前者启用标准模式防乱码错位，后者声明简体中文以保障语音读屏与SEO；须置于靠前位置，lang值禁用cn或zh，须用zh-CN或zh-TW。

如何高效编写html代码 html常用标签总结【干货】

写HTML别先敲

，先写doctype和lang

很多人一开编辑器就直接写 <h1></h1>，结果浏览器用怪异模式渲染，中文乱码、样式错位全来了。真正该打的第一行是 ，第二行是 <code>。前者强制标准模式，后者让屏幕阅读器和搜索引擎知道这是简体中文页面——不加 lang，某些语音工具会用英文发音读中文。

常见错误现象：<h1></h1> 字体异常小、<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 上下间距消失、中文标点显示方块。

<meta charset="UTF-8"> 必须放在里靠前位置，晚于它插入的脚本可能取不到正确编码
不要写或，规范值是 zh-CN（中国大陆）或 zh-TW（台湾）
移动端必须配 <meta name="viewport" content="width=device-width, initial-scale=1.0">，否则页面缩成一团

段落用

，换行别滥用

<p></p> 是语义化段落容器，自带上下 margin 和自动换行；<br> 只是强制折行，不带任何语义。把整段文案硬塞进一个 <p></p> 再狂敲 <br>，等于告诉浏览器“这是一段话，但我要手动断句”——既不利于 SEO，也破坏可访问性。

使用场景：新闻正文、用户协议、产品描述等自然分段内容，一律用多个 <p></p>；地址、诗行、简历中的技能列表这种需要精确换行的，才考虑 <br>。

<p></p> 是块级元素，天然独占一行，无需额外 display: block
连续多个 <br>（比如 <br><br><br>）在不同浏览器渲染高度不一致，应改用 CSS 的 margin 控制间距
用 <pre class="brush:php;toolbar:false;"></pre> 保留原始换行和空格时，注意它默认是等宽字体，不适合正文排版

iframe嵌入要设loading和sandbox

直接写 <iframe src="xxx"></iframe> 虽能跑通，但会拖慢首屏加载、暴露 XSS 风险。现代写法必须带上 loading="lazy"（延迟加载）和 sandbox（沙箱隔离）。

参数差异：sandbox="" 是最严格模式（禁用脚本、表单、弹窗），常用的是 sandbox="allow-scripts allow-same-origin"；如果嵌的是视频或地图，还得补上 allow="autoplay; geolocation" 这类能力白名单。

没加 title 属性的 <iframe></iframe> 会被无障碍工具忽略，视障用户完全不知道这里嵌了什么
frameborder="0" 已废弃，用 CSS 的 border: none 替代
嵌第三方页面时，src 域名必须支持 X-Frame-Options: ALLOW-FROM 或 Content-Security-Policy: frame-ancestors，否则浏览器直接拦截

标题层级不是按大小选，而是按结构选

<h1></h1> 到 <h6></h6> 不是“哪个看起来大就用哪个”，而是表达内容的逻辑嵌套关系。一个页面有且仅有一个 <h1></h1>（通常是主标题），<h2></h2> 是它的直接子节，<h3></h3> 是 <h2></h2> 的子节——跳着用（比如 <h1></h1> 后直接 <h3></h3>）会破坏大纲结构，影响 SEO 和键盘导航。

容易踩的坑：用 <h4></h4> 当按钮文字、用 <h2></h2> 做广告语、为了视觉效果把 <h1></h1> 改成小字号再加粗……这些操作让标签只剩样式，丢了语义。