应使用语义化标签替代div堆砌，如header、nav、main、section、footer；图片需lazy加载和srcset适配；表单method/action须严格匹配后端；字体应在head声明并用font-display:swap。
用语义化标签代替 <div> 堆砌
纯靠 <div> 搭官网，后期维护和 SEO 都会变慢——搜索引擎和屏幕阅读器根本分不清哪块是导航、哪块是正文。必须用 <header>、<nav>、<main>、<section>、<footer> 这类语义标签明确区块职责。
常见错误是把所有内容都塞进 <div class="container">，结果页面结构扁平、无法被辅助技术识别。实际中：
-
<nav>只包主导航链接，不包含 logo 或搜索框（它们属于<header>） -
<section>应有<h2>或更高阶标题作为标题，否则语义断裂 -
<main>必须且只能出现一次，且不能嵌套在<article>或<aside>内
图片加载慢？优先用 loading="lazy" 和 srcset
公司主页首屏图片（如 banner）若没做优化，用户打开就卡住——尤其移动端。原生 HTML 就能解决，不用立刻上框架或懒加载库。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 所有非首屏图片加
loading="lazy"属性，浏览器自动延迟加载 - 首屏大图必须用
<picture>+srcset适配不同 DPR 和视口宽度，例如：<picture> <source media="(min-width: 1024px)" srcset="banner-2x.webp 2x, banner-1x.webp 1x"> <img src="banner-mobile.webp" alt="公司服务概览"> </picture>
- 避免直接丢一张 4MB 的 JPG 到
<img>标签里；WebP/AVIF 格式优先，尺寸按最大显示区域裁切
表单提交失败？检查 <form> 的 method 和 action 是否匹配后端路由
官网联系页的表单点提交没反应，或者跳转到空白页，90% 是前后端约定没对齐。HTML 本身不处理提交逻辑，只负责把数据按规则发出去。
实操注意：
-
method值必须是"GET"或"POST"（大小写敏感），别写成"post"或"Post" -
action要填绝对路径（如"/api/contact"）或完整 URL（如"https://api.example.com/contact"），相对路径容易因当前 URL 变化而失效 - 必填字段必须加
required属性，但别依赖它当唯一校验——它只防误触，不防绕过 - 提交按钮用
<button type="submit">，不是<button onclick="submitForm()">，否则回车提交失效
字体闪动、布局抖动？把 @font-face 提前声明并限制字体加载范围
公司官网常用定制字体（比如品牌黑体），但一刷新就先显示系统字体再跳变成品牌字体，用户感知就是“文字晃一下”——这叫 FOIT/FOUT，根源是字体加载时机失控。
解决方案不在 JS，而在 HTML + CSS 协同：
- 在
<head>最前面引入字体 CSS，确保解析优先级最高 - 用
font-display: swap声明在@font-face中，让浏览器立即用备用字体渲染，等自定义字体加载完再切换 - 避免在 CSS 中用通配符选择器（如
* { font-family: BrandFont; }）全局设字体，只在<body>或具体组件类上设置 - 图标字体已过时，改用 SVG Sprite 或内联
<svg>，减少额外字体请求
复杂点在于字体文件体积和 fallback 链设计，但最易被忽略的是：没验证不同设备下 font-display 的兼容性（iOS Safari 12+ 才完全支持 swap）。
