术语图鉴/前端基础/HTML
←→切换Esc返回

HTML HyperText Markup Language

你可能会说

帮我搭一个网页的基本结构,要有标题、导航、正文和页脚。

HTML 是网页的骨架语言,用标签(Tag)定义内容的结构和语义。

网页的「骨架」。它用标签(如 <h1>、<p>、<button>)告诉浏览器:这里是标题、这里是段落、这里是按钮。没有 HTML,网页就是一片空白。

也常被叫作超文本标记语言标记语言标签

生活类比

就像盖房子的砖墙结构——决定了哪里有门、哪里有窗、哪里是房间。

🎮 动手试试

我的网站

欢迎来到我的主页

图片

左边是 HTML 标签(给浏览器看的指令),右边是浏览器渲染出的画面。

选择题选择一个你认为最合适的答案

下面哪个标签是 HTML5 新增的语义化标签?

你可以这样告诉 AI

帮我写一个语义化的 HTML 页面结构,包含 header、nav、main、aside、footer,每个区域用合适的标签。

容易混淆?这样区分

HTML HyperText Markup Language≠
CSS Cascading Style Sheets

HTML 决定「有什么内容」,CSS 决定「长什么样子」。HTML 是骨架,CSS 是装修。

HTML HyperText Markup Language≠
JavaScript JS

HTML 是静态结构,JavaScript 让页面能「动起来」——响应点击、动态更新内容。

什么时候用

搭建新页面

任何网页的第一步都是写 HTML 结构

改善 SEO

语义化标签让搜索引擎更好理解页面内容

什么时候不用

控制外观

颜色、字体、布局等视觉效果应该用 CSS,不要用 HTML 的 style 属性硬写

实现交互

点击、滑动、动态更新等行为需要 JavaScript,HTML 本身是静态的

组成结构 · Anatomy

1
标签Tag

用尖括号包裹的关键词,如 <h1>、<p>、<div>,通常成对出现

2
属性Attribute

写在开始标签里的额外信息,如 class="box"、href="/link"

3
嵌套Nesting

标签可以包含子标签,形成树状结构(DOM 树)

4
语义化Semantic

用 <article>、<nav>、<footer> 等表达含义,而非全用 <div>

常见变体 · Variants

HTML5HTML5

当前标准版本,新增 <video>、<canvas>、<section> 等语义标签

XHTMLXHTML

更严格的 HTML 变体,要求所有标签闭合、属性加引号

典型使用场景

新建落地页
告诉 AI「帮我写一个产品落地页的 HTML 结构,包含 hero 区、功能介绍、用户评价、CTA 按钮」
邮件模板
告诉 AI「帮我写一封营销邮件的 HTML,要兼容各大邮箱客户端」

延伸阅读