← 返回文章列表

网站主的 HTML 入门：验收交付时至少需要懂什么

HTML 是页面的"骨架"：标题、正文、按钮、表单、链接。没有它，浏览器不知道主标题在哪、商品价格在哪、询盘表单在哪。作为企业主不必自己写标记，但在验收承包商交付的网站时，懂一点 HTML 能在付款前发现问题：SEO 标题为空、表单损坏、Google 只能看到"图片里的文字"、照片缺少 alt、每页重复的 H1。这不是编程课 - 而是 30 分钟常识清单。

  • HTML - 浏览器和搜索引擎读取的页面结构
  • 对站长的价值 - 有意识验收，不因标记问题损失 SEO 和转化
  • 要检查什么 - 标题、表单、链接、图片 alt、移动端布局
  • 与 CSS、JS 的关系 - HTML 定义"有什么"，CSS 定义"长什么样"，JavaScript 定义"怎么交互"
  • 主要风险 - 屏幕很漂亮，底层标记却是空的或错的

用大白话解释 HTML

HTML（HyperText Markup Language）是标记语言，不是编程语言。它用标签描述页面块：<h1> - 主标题，<p> - 段落，<a> - 链接，<form> - 表单，<img> - 图片。

简化示例：

<h1>塔什干公寓装修</h1>
<p>工期 14 天起。免费上门量房。</p>
<a href="/contacts/">提交咨询</a>

浏览器不会把 HTML 当代码显示 - 它按这些指令构建页面。Google、Yandex 也依赖 HTML：<title> 里是什么、<h1> 是什么、链接有没有文字。

技术 作用 类比
HTML 块的结构和语义 建筑框架
CSS 颜色、字体、间距、响应式 装修和外立面
JavaScript 点击、购物车、轮播、在线客服 电梯、空调、智能家居
PHP / 后端 服务器数据、订单、邮件 墙后的工程系统

要点： WordPress、Tilda、Bitrix 或 Django 网站同样向浏览器输出 HTML。CMS 只是自动生成。验收时检查结果，不必看手写代码。

验收清单

1. 标题与 SEO 标记

  • 每页一个 <h1>
  • H2、H3 层级合理
  • <title>（浏览器标签）唯一、含关键词
  • Meta description 有意义，非空、非复制

2. 文字 vs "带字的图片"

价格、促销若只在 JPG/PNG 里，搜索引擎读不到。SEO 审计 会标红。

规则： 重要文字应在 HTML 中。

3. 图片：alt

  • 每张产品图有 alt
  • Logo 的 alt 含公司名

4. 链接

  • "电话" 指向 tel:+998...
  • 内链无 404
  • 链接文字有意义

5. 表单

  • 字段有 name、id
  • 提交按钮为 <button type="submit">
  • 提交后有明确成功提示
  • 移动端：tel、email 类型正确

6. 移动版

文字可读、菜单可用、表单完整。影响 UX 和 GEO 推广。

7. 语言与编码

  • <html lang="zh">
  • UTF-8 正常显示中文

语义化标签

标签 用途
<header> 页眉
<nav> 导航
<main> 主内容
<article> 文章、新闻
<section> 逻辑区块
<footer> 页脚

语义化帮助 Google 识别正文。全用 <div> 可能看起来正常，但 SEO 更差。

HTML、CSS、JavaScript 谁负责什么

问题 可能原因 找谁
字体颜色丑 CSS 设计师
按钮无效 / 购物车空 JavaScript 前端
Google 看不到文字 HTML / SSR 开发 + SEO
表单邮件不到 后端（PHP） 后端
手机版错位 CSS + HTML 排版

标记里没有文字 - 是 HTML 与内容，不是"设计问题"。

承包商常见错误

  • 各页相同 <title>
  • 泛化的 H1
  • 空的 meta
  • 用建站工具但无法改文案和 meta - 被锁死
  • 隐藏关键词 - 惩罚风险
  • 整页嵌入 PDF iframe - SEO 弱

不会编程如何看 HTML

  1. 查看网页源代码
  2. DevTools (F12) - Elements
  3. SEO 浏览器扩展
  4. Google Search Console
  5. W3C 验证器 - 可选

30 分钟路线： 首页、服务页、联系页、一个产品页 - 各查 title、H1、表单、电话、alt。

何时要求改 HTML

情况 行动
关键页无唯一 title/H1 签字前
价目表只有 PNG 文字进 HTML
表单"成功"但无邮件 查后端和表单 HTML
关 JS 后页面空白 内容须在 HTML 中（见 JavaScript）
产品无 alt 投广告前

要业务结果，不要 CMS 上"完美 W3C"。

总结

HTML 是看不见的地基，浏览器、搜索和承包商质量都依赖它。懂 HTML/CSS/JS 区别、跑短清单、拒绝"图片代文字"、保留 CMS 权限改 title、H1、alt。

差的 HTML 悄悄吃掉排名和线索。

常见问题

企业主需要学 HTML 吗？

日常不必 - CMS 和清单够用。验收和管 SEO 时懂基础值得。花 2-3 小时可能避免首页 title 大错。

HTML 和 CSS 有何不同？

HTML - 页面上有什么。 CSS - 长什么样。结构和文字问题归 HTML；外观归 CSS。

我没写 HTML，WordPress 里从哪来？

CMS 自动生成 HTML。 您在后台改内容，系统组标记。详见 WordPress、Bitrix 与 OpenCart。

怎么判断 HTML 做得差？

各页同 title、无 H1 或多个 H1、重要文字只在图里、表单无标签、死链、产品无 alt。工具：源代码、SEO 扩展、SEO 审计。

HTML 影响 SEO 和销售吗？

直接影响。 title、H1、可索引文字、alt、移动端稳定表单、tel: 可点电话。差 HTML 很少一天搞垮生意，但会数月漏掉流量。

联系方式