←→ 切换·Esc 返回

HTML 页面结构HTML

网页开发入门
用标签组织网页里的内容和结构

HTML 告诉浏览器哪些内容是标题、段落、图片、链接和按钮，并建立清楚的阅读层级。它负责页面结构；视觉样式通常交给 CSS，复杂交互则需要 JavaScript。

<html> <head> 元信息 <body> <h1> 标题 <p> 段落 <a> 链接
→
小狸的主页 我喜欢爬山和拍照。 看我的相册 →

什么时候用

  • 把标题、图片和章节组织成清楚的网页结构
    一份给人看的项目报告清楚的标题、重点、图片和章节
    让读者快速扫到真正关心的内容    HTML 把内容变成阅读体验
  • 制作可直接分享的页面：官网、落地页、图文文章和报告，发一个网址就能在浏览器打开
    🔒 report.example.com/launch
    新品发布报告打开网页
    发一个网址，对方用浏览器就能看
  • 加入图片、链接和交互：内容不只能看，还能跳转、填写表单、播放媒体和触发操作
    ▶ 视频↗ 链接填写表单
    不只展示文字，还能让读者操作
  • 把 Markdown 内容转成需要正式呈现的网页
    # 发布计划
    - 本周上线    →发布计划· 本周上线

什么时候不用

  • 标签打开后没有正确关闭，容易破坏后续结构
    <div> 卡片
    后面的内容全被吞进卡片…    <div> 没写 </div>，结构全乱
  • 标签交叉嵌套，浏览器难以得到预期结构
    <b><i>文字</b></i>标签交叉嵌套，浏览器只能瞎猜
  • 把正文写进 <head> 里：页面上什么都看不到
    <head> 欢迎来到我的网站正文写进 head，页面上什么都看不到
  • 不要用文字处理软件另存 HTML，以免破坏标签结构
    Windex.html → 另存为 .docx
    标签全毁，页面直接打不开
组成结构 · Anatomy
<a href="https://vibe.guide">点我看看</a>
1开始标签Opening Tag尖括号加标签名，告诉浏览器「这里开始」
2属性Attribute写在开始标签里的附加信息，如链接地址、图片路径
3内容Content两对尖括号之间的部分，改文案只动这里
4结束标签Closing Tag多一个斜杠，告诉浏览器「到这里结束」
常见变体 · Variants
div 通用容器div
<div> … </div>
没有更合适的语义标签时，用它组织内容和布局
h1~h3 与 pHeadings & p
<h1> <p>
标题和段落，文章的骨架
a 与 imgLink & Image
<a> <img>
a 跳网址，img 贴图片
button 与 inputButton & Input
<button> <input>
页面上能点能填的交互件
典型使用场景
AI 给你的 index.html
帮我做一个个人主页
好的，这是你的 index.html：
<h1>小狸的主页</h1> <p>我喜欢爬山和拍照。</p> <a href="/photos">看我的相册</a>
浏览器「查看源代码」
view-source:https://my-first-page.vercel.app
1  <h1>小狸的主页</h1>
2  <p>我喜欢爬山和拍照。</p>
3  <a href="/photos">看我的相册</a>
DevTools 检查元素
小狸的主页
我喜欢爬山和拍照。
看我的相册 →
<h1>…</h1>
<p>…</p>
<a>…</a>
常见标签速认小抄
常见标签速认
<div> 通用容器
<p> 段落
<a> 链接
<img> 图片
<button> 按钮
<input> 输入框