从零搭建企业官网：页面结构与 HTML 实战

尚品优品技术编辑 · 原创教程 · 更新于2026年10月23日 · 约6分钟阅读

做企业官网时，最容易走偏的起点是先挑动画、先堆大图，最后才发现产品介绍没有入口，联系方式藏在页面最底部。这篇教程从一张空白页面开始：先整理内容，再写结构，最后把导航、图片和联系入口连接起来。你只需要一个代码编辑器和浏览器，就能跟着完成第一个版本。

一、先列出访客真正要找的信息

拿一张纸写下三个问题：这家公司做什么，能解决我的什么问题，我下一步怎样联系。把答案分别放在首页开头、业务介绍和明确的行动入口。不要让一句气势很大的口号承担所有解释工作。例如商用设备网站可以先介绍设备类型，再展示代表型号，最后给出询价方式。

接着建立页面清单：首页负责概览；产品列表负责筛选与比较；产品详情解释型号、图片和参数；案例页说明背景、实施过程与成果；关于页介绍公司；联系页提供电话、邮件和表单。并非每个网站都要一次做齐，先把当前最重要的访问路径连通，再扩展内容。

二、把内容变成有层级的 HTML

页面结构可以先不加复杂样式。使用 header 承载页头，nav 承载主要导航，main 放本页内容，footer 放共享信息。标题按内容关系安排，不要为了字号好看就跳着使用标题层级。下面这段代码可以保存为 index.html，用浏览器直接打开。

<header>
  <a href="/">公司名称</a>
  <nav aria-label="主要导航">
    <a href="#products">产品</a>
    <a href="#contact">联系</a>
  </nav>
</header>
<main>
  <h1>为零售场景提供展示设备</h1>
  <p>在这里写清产品类型、适用客户和核心用途。</p>
  <section id="products">
    <h2>产品系列</h2>
  </section>
</main>

三、让每个区块承担一个明确任务

首屏需要让人看懂业务，产品区帮助人继续选择，案例区提供具体项目证据，联系区让沟通变得简单。一个区块只有装饰、没有信息时，可以先删掉；一段内容同时解释产品、团队、价格和流程时，应拆成几个小区块。这样做也方便手机端重新排列。

写卡片文案时，先写明确名称，再写两三句说明。产品卡可以包含型号、用途和详情链接；案例卡可以包含项目名称、实施类型和一句背景。图片必须属于这张卡片对应的项目。不要为了填满网格，把一个项目拆成几个看起来互不相关的案例。

四、给导航和联系入口做一次实际检查

从首页逐个点击入口，确认列表能进入详情，详情能回到相关列表；刷新详情页也应正常打开。站内链接使用链接元素，打开菜单、切换状态使用按钮。电话号码可用 tel 链接，邮件使用 mailto，链接文字要让读者知道点击后会发生什么。

图片替代文本描述图片在当前内容中的用途。产品图可以写型号与外观，纯装饰图片可用空替代文本。重要文字应以网页正文呈现，不要只放在图片里。联系方式也应能复制，避免只能看见一张名片照片。

五、完成一个小而完整的第一版

第一轮练习只做首页、一个产品详情和联系区。先填入真实资料，检查桌面与手机的阅读顺序，再逐步加入样式和动画。每次增加功能都走一次完整路径：进入首页、找到产品、阅读详情、返回、发起联系。能够顺畅完成这条路径，比一次堆很多页面更适合建立后续迭代基础。

练习任务：为一家你熟悉的企业画出页面清单，写出首页的一个主标题、三个区块标题和一个联系入口，然后用上面的 HTML 骨架把内容放进去。完成后请别人只看十秒，说说这家公司提供什么服务；听到的答案能直接帮助你修改首屏。