前端

HTML

你可能会说

AI 写出来的代码里一堆 < > 和英文单词，这些东西是干嘛的？

HTML 是用标签描述网页内容结构、供浏览器渲染页面的标记语言它用标签标出标题、段落、图片、链接和按钮。例如，产品页面的内容层级由 HTML 组织；视觉样式通常交给 CSS，复杂交互需要 JavaScript。

也常被叫作HTML 页面结构超文本标记语言

<html> <head> 元信息 <body> <h1> 标题 <p> 段落 <a> 链接

→

小狸的主页 我喜欢爬山和拍照。看我的相册 →

组成结构 · Anatomy

尖括号加标签名，告诉浏览器「这里开始」

写在开始标签里的附加信息，如链接地址、图片路径

两对尖括号之间的部分，改文案只动这里

多一个斜杠，告诉浏览器「到这里结束」

常见变体 · Variants

div 通用容器div

没有更合适的语义标签时，用它组织内容和布局

h1~h3 与 pHeadings & p

标题和段落，文章的骨架

a 与 imgLink & Image

a 跳网址，img 贴图片

button 与 inputButton & 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> 输入框