必须以开头，使用HTML5语义标签（header/nav/main/section/article/footer），viewport需完整写width=device-width,initial-scale=1.0，资源路径规范，title与description须唯一精准。
index.html 文件必须存在，且以 开头——这是现代企业网站能被所有浏览器正确解析的底线。没有它，CSS 响应式布局、Flex 容器、甚至部分 <code>nav 语义标签都可能降级或失效。
HTML5 语义化结构怎么写才不踩 SEO 和可访问性坑
很多模板直接套用 <div id="header">，但搜索引擎和读屏软件更信任原生语义标签。真实生产环境里，必须用：<code><header></header>、<nav></nav>、<main></main>、<section></section>、<article></article>、<footer></footer> 这六类标签组织主体内容。
常见错误现象：
<div class="nav"> 替代 <code><nav></nav>→ 屏幕阅读器无法识别导航区域-
<section></section>内没嵌<h2></h2>～<h6></h6>→ 搜索引擎认为该区块无主题，降低权重 -
<main></main>缺失或重复 → 多个<main></main>会让辅助技术混乱，SEO 也只抓第一个
正确骨架示例（精简版）：
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公司名称 - 核心服务简介</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>公司名称</h1>
<nav aria-label="主导航">
<ul><li><a href="index.html">首页</a></li><li><a href="about.html">关于我们</a></li></ul>
</nav>
</header>
<main>
<section>
<h2>我们的服务</h2>
<p>……</p>
</section>
</main>
<footer><p>© 2026 公司名称. 保留所有权利.</p></footer>
</body>
</html>为什么 meta viewport 必须写全，不能只写 width=device-width
只写 <meta name="viewport" content="width=device-width"> 是常见省略陷阱。iOS Safari 和部分安卓 WebView 会忽略缩放控制，导致用户双指缩放失效、字体渲染模糊、表单控件点击区域变小。
必须包含 initial-scale=1.0，且不能加空格或换行：
- ✅ 正确：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - ❌ 错误：
<meta name="viewport" content="width=device-width,initial-scale = 1.0">（等号前后空格） - ❌ 错误：
<meta name="viewport" content="width=device-width">（缺缩放声明）
这个标签的位置也有要求：必须在 内，且越靠前越好，最好紧跟 <meta charset> 后面。
静态资源路径怎么组织才方便后期维护
企业网站一旦上线，图片、CSS、JS 路径写死在 HTML 里会导致迁移困难、CDN 切换失败、本地调试报 404。推荐采用以下固定结构：
- CSS 文件统一放在
css/style.css（不建议拆成多个 CSS，首屏加载优先） - 图片统一放在
images/下，子目录按类型分，如images/logo.png、images/banner.jpg - JS 仅在必要时引入，放
js/main.js，且用defer属性：<script src="js/main.js" defer></script> - 所有路径用相对路径，从
index.html所在目录出发计算，避免../嵌套超过两层
特别注意：favicon.ico 必须放在网站根目录（即和 index.html 同级），否则多数浏览器不会加载；若用 .png 格式，则需显式声明：<link rel="icon" type="image/png" href="images/favicon.png">。
企业官网对 title 和 meta description 的硬性要求
不是“有就行”，而是每页必须唯一、精准、带关键词。搜索引擎现在对重复 <title></title> 的站点会降权。
-
<title></title>长度控制在 28–32 个中文字符（含空格），优先把核心业务词前置，例如：<title>工业自动化系统集成｜XX科技有限公司</title> -
<meta name="description" content="...">必须写，长度 70–110 字符，不能堆砌关键词，要像一句真实介绍，例如：<meta name="description" content="XX科技提供工业自动化系统集成、PLC编程与智能产线改造服务，已为37家制造企业提供定制化解决方案。"> - 禁止所有页面共用同一段 description，哪怕只是改一个数字，也要体现页面差异
这些字段看着小，但上线后第一周内就被百度、360 等国内主流搜索收录——没填或填错，等于主动放弃自然流量入口。
