企业展示主页应采用语义化HTML结构（如<header><main><section>），避免深层div嵌套；图片须设width/height和loading="lazy"，并配准确alt文本；表单需required校验、type属性优化及提交防重机制。
企业展示主页不需要复杂框架，用纯 HTML + CSS 就能快速上线，关键是结构清晰、语义正确、加载不卡——否则访客三秒就关掉页面。
用 <header> 和 <main> 而不是一堆 <div>
很多新手一上来就写满 <div class="wrap"><div class="container"><div class="content">，结果搜索引擎抓不到重点，手机端也容易错乱。
-
<header>放 logo、导航栏，最多一个<h1>（企业名） -
<main>包住核心内容：公司简介、服务列表、案例区块、联系表单 - 每个区块用
<section>，带id（如id="services"），方便锚点跳转和 CSS 定位 - 避免嵌套超过 3 层
<div>，否则调试时连自己都找不到样式生效位置
img 标签必须加 width、height 和 loading="lazy"
不设宽高的图片会触发浏览器重排（reflow），导致页面“抖动”；没加懒加载的首屏外图片拖慢整体 LCP（最大内容渲染时间）。
- 写成：
<img src="about.jpg" width="800" height="450" loading="lazy" alt="公司办公环境"> -
width/height值要和原图一致，CSS 里再用max-width: 100%适配响应式 -
alt文字不能空，也不能写“图片1”，得描述实际内容（SEO 和无障碍访问都依赖它） - 别用 base64 编码大图——10KB 以内小图标可以，Banner 图一编码就让 HTML 文件暴涨几百 KB
联系表单别只靠 <form>，至少加一层基础校验
纯前端表单没有后端处理，用户点提交后毫无反馈，等于白做。哪怕只做最简校验，也能筛掉一半乱填数据。
立即学习“前端免费学习笔记（深入）”；
- 必填字段加
required属性：<input type="email" required> - 邮箱用
type="email"，手机号用type="tel"，触屏设备会自动调出对应键盘 - 提交按钮加
disabled状态 + JS 点击后置灰：btn.disabled = true;，防止重复提交 - 别写
<form action="mailto:xxx@xx.com">——90% 的邮件客户端不支持，且暴露邮箱地址易被爬虫抓取
真正难的不是写完页面，而是让每个链接可点击、每张图有尺寸、每个输入框有反馈。这些细节不修，首页再好看也没人愿意多看两秒。
