HTML
一样能看见的文字，为什么链接要用链接、按钮要用按钮？
HTML 是用于组织网页内容的标记语言。元素表达标题、段落、链接、表格与表单等含义，属性补充地址、标签关联和状态等信息；浏览器解析后形成可供呈现与操作的文档结构。
先告诉浏览器这段内容是什么、各部分是什么关系。浏览器知道它是链接，才能帮人复制地址、用键盘访问或在新标签打开。
像一份产品说明书：目录、章节标题、规格表和注意事项都有自己的身份，不能只靠字号让人猜。
类比到这里为止：网页不只是纸张。原生链接和表单还带有可操作行为，所以“HTML 只是一副完全不会动的骨架”也不准确。
把产品名称写成标题，规格用有表头的表格，资料下载用真实链接，询盘输入配上可见标签。样式调整以后，这些含义仍应保留。
从一行标记读出含义
- 元素
- <h1>产品规格</h1> 表达一级标题，内容是“产品规格”。
- 属性
- <a href="/contact">咨询课程</a> 中，href 说明要前往的地址。
- 关联
- label 的 for 对应输入框的 id，让标签与字段连接起来；占位提示不能代替始终可见的标签。
- 嵌套
- 章节包含标题与段落。合理嵌套建立层级，不能把一个可操作按钮随意塞进另一可操作按钮。
在产品页上验收结构
先不看颜色：能否沿标题读懂产品、规格、用途和联系入口？规格若只做成图片，复制、查找和辅助阅读会更困难；有意义的图片仍需要合适的文字替代。
再用键盘走一遍：下载是否是可以到达的链接，询盘按钮是否真的有对应动作？样式漂亮与结构正确需要同时检查。
一样能看见的文字，为什么链接要用链接、按钮要用按钮？
可以操作，也可以重试。数据为虚构示例，不连接真实业务系统。
正在准备当前演示，正文可以继续阅读。
继续看项目应用与交付检查
HTML 在项目中负责什么
- 什么时候用
- 组织产品页、教程、资料下载和表单，并需要浏览器与辅助技术正确理解结构时。
- 它解决什么
- 让内容层级、操作目的与输入关系清楚，减少仅靠外观猜测界面含义的问题。
- 它不负责什么
- HTML 不负责保存后台询盘，也不保证搜索排名。原生控件有部分行为，复杂状态和远程业务仍需要其他代码配合。
- 放进真实项目
- 把产品名称、参数表、MOQ、询盘字段和提交按钮组织成可理解的页面结构。
用元素表达产品内容的身份与关系
产品页的标题、参数、说明、下载资料和询盘按钮都用 div 拼起来，视觉暂时没问题，搜索、辅助技术和后续维护却难以判断谁是谁。
- 01
先用语义标签写内容骨架。
- 02
再用 CSS 处理样式和布局。
- 03
用键盘和阅读顺序检查主要信息。
先表达内容的身份，再决定它的样子。
容易混淆的地方
h1 是正文标题，title 是整页的元信息；链接用于前往地址，按钮用于动作。把 div 染成蓝色并不会自动变成链接。
产品资料页的“下载规格书”是一段可点击的文字。怎样让浏览器明确知道它会前往一个文件地址？
产品页先有结构，搜索和读屏才看得懂
一个产品页视觉很完整，实际全靠普通 div 堆出来；标题层级乱，图片没有说明，采购商用键盘也找不到询盘入口。
你可以这样告诉 AI Agent
我在处理这件事：把产品名称、参数表、MOQ、询盘字段和提交按钮组织成可理解的页面结构。请以“HTML”为主线，先说明它在这里负责什么、不负责什么；再列出必要输入、建议动作和可验证结果。用外贸独立站的业务语言回答，不确定的信息标为待确认。
内容依据与延伸
本站用原创中文解释把专业概念映射到外贸独立站；定义和机制继续以官方资料为准，业务例子再回到 外贸独立站询盘优化实战 验证。
本站整理说明：站内案例：工业品产品页的语义结构