Web知识篇

什么是HTML与CSS

网页的骨架和皮肤

如果把网页比作一栋房子，HTML 是钢筋混凝土的结构，CSS 是装修和外观设计。两者配合，才能呈现出你看到的网页。

💡 类比：HTML 决定"这里放一个标题、那里放一张图片"，CSS 决定"标题用红色、图片加圆角阴影"。

加载图表中...

HTML：超文本标记语言

HTML（HyperText Markup Language） 用标签来描述页面内容的结构。

基本语法

<标签名>内容</标签名>

标签通常成对出现：开始标签 + 内容 + 结束标签。

一个最简单的HTML页面

<!DOCTYPE html>
<html>
<head>
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是一个段落。</p>
  <img src="photo.jpg" alt="一张照片">
  <a href="https://example.com">点我跳转</a>
</body>
</html>

常用HTML标签

标签	作用	示例
`<h1>` ~ `<h6>`	标题（1最大，6最小）	`<h1>大标题</h1>`
`<p>`	段落	`<p>一段文字</p>`
`<a>`	链接	`<a href="url">链接文字</a>`
`<img>`	图片	`<img src="图片地址" alt="描述">`
`<div>`	容器/分区	`<div>一组内容</div>`
`<button>`	按钮	`<button>点我</button>`
`<input>`	输入框	`<input type="text" placeholder="请输入">`
`<ul>` / `<li>`	无序列表	`<ul><li>项目1</li></ul>`

HTML的层级结构

HTML 标签是嵌套的，形成一棵树：

加载图表中...

CSS：层叠样式表

CSS（Cascading Style Sheets） 用来给 HTML 元素添加视觉样式。

基本语法

选择器 {
  属性: 值;
  属性: 值;
}

示例：给标题加样式

h1 {
  color: #F97316;           /* 文字颜色：橙色 */
  font-size: 32px;          /* 字体大小 */
  text-align: center;       /* 居中对齐 */
  margin-bottom: 20px;      /* 下方外边距 */
}

常用CSS属性

属性	作用	示例值
`color`	文字颜色	`#F97316`、`red`、`rgb(255,0,0)`
`background-color`	背景色	`#0F2829`
`font-size`	字体大小	`16px`、`1.5rem`
`margin`	外边距	`20px`、`10px 20px`
`padding`	内边距	`16px`
`border`	边框	`1px solid #ccc`
`border-radius`	圆角	`8px`、`50%`（圆形）
`display`	显示方式	`flex`、`grid`、`block`
`width` / `height`	宽高	`100%`、`200px`

CSS选择器

/* 标签选择器 — 选中所有 p 标签 */
p { color: gray; }

/* 类选择器 — 选中 class="highlight" 的元素 */
.highlight { background-color: yellow; }

/* ID选择器 — 选中 id="title" 的元素 */
#title { font-size: 24px; }

/* 组合选择器 — div 里面的 p */
div p { margin: 10px; }

加载图表中...

盒模型：CSS布局的基础

每个 HTML 元素都是一个"盒子"，由四层组成：

加载图表中...

.card {
  margin: 20px;      /* 外边距：盒子与其他元素的距离 */
  border: 1px solid #ccc;  /* 边框 */
  padding: 16px;     /* 内边距：内容与边框的距离 */
  width: 300px;      /* 内容区宽度 */
}

Flexbox：现代布局利器

Flexbox 是最常用的CSS布局方式，轻松实现水平/垂直排列：

.container {
  display: flex;              /* 启用 Flex 布局 */
  justify-content: center;    /* 水平居中 */
  align-items: center;        /* 垂直居中 */
  gap: 16px;                  /* 元素间距 */
}

加载图表中...

Flex属性	作用	常用值
`justify-content`	主轴对齐（水平）	`center`、`space-between`
`align-items`	交叉轴对齐（垂直）	`center`、`flex-start`
`flex-direction`	排列方向	`row`（横）、`column`（竖）
`gap`	元素间距	`16px`、`1rem`
`flex-wrap`	是否换行	`wrap`、`nowrap`

响应式设计

让网页在手机、平板、电脑上都好看：

/* 默认样式（手机优先） */
.container {
  padding: 16px;
  flex-direction: column;
}

/* 平板以上（768px+） */
@media (min-width: 768px) {
  .container {
    padding: 32px;
    flex-direction: row;
  }
}

/* 电脑（1024px+） */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Tailwind CSS：不用写CSS文件

现代前端项目（如 Next.js）常用 Tailwind CSS，直接在 HTML 的 class 中写样式：

<!-- 传统CSS方式 -->
<div class="card">
  <h2 class="card-title">标题</h2>
</div>

<!-- Tailwind CSS 方式 -->
<div class="rounded-lg border p-4 shadow-md">
  <h2 class="text-xl font-bold text-orange-500">标题</h2>
</div>

Tailwind 类名	等价CSS	效果
`text-xl`	`font-size: 1.25rem`	大号文字
`font-bold`	`font-weight: 700`	粗体
`p-4`	`padding: 1rem`	内边距
`rounded-lg`	`border-radius: 0.5rem`	圆角
`flex`	`display: flex`	Flex布局
`bg-orange-500`	`background-color: #F97316`	橙色背景

🎯 AI编程小贴士：不知道怎么用CSS实现某个效果？直接告诉AI"帮我实现一个卡片布局，有阴影和圆角"或者"把这个按钮改成渐变色"，它会帮你写出完整的CSS或Tailwind代码。

小结

HTML 定义网页的结构（有什么内容）
CSS 定义网页的样式（长什么样）
HTML 用标签描述内容，CSS 用选择器 + 属性控制外观
盒模型是CSS布局的基础：content → padding → border → margin
Flexbox 是最常用的布局方式
Tailwind CSS 让你不用写CSS文件，直接在class中写样式