HTML + CSS 总结

1. CSS 相关知识表

类别 属性 说明
盒子模型 作用：控制元素尺寸、内边距、边框、外边距，从而控制页面的布局展示 -
盒子模型 width、height 高度、宽度
盒子模型 box-sizing 高度和宽度的计算方式：content-box、border-box
盒子模型 padding 内边距（上、右、下、左；上下、左右）
盒子模型 border 边框
盒子模型 margin 外边距（上、右、下、左；上下、左右）
flex 弹性布局 作用：是一种一维的布局模型，为元素之间提供强大的空间分布和对齐能力。 -
flex 弹性布局 display flex：使用 flex 布局
flex 弹性布局 flex-direction 设置主轴方向（row：x 轴，水平方向；column：y 轴，垂直方向）
flex 弹性布局 justify-content 子元素在主轴上的对齐方式

2. HTML 相关知识表

类别 标签 说明
文本处理标签 <h1> ~ <h6> 一级标题 ~ 六级标题
文本处理标签 <br>、<p> 换行、段落
文本处理标签 <strong>、<em>、<ins>、<del> 文本加粗、倾斜、下划线、删除线
图片、音视频标签 <a href="..."> 超链接（属性：href、target）
图片、音视频标签 <img src="..."> 图片（路径：绝对路径、相对路径）
图片、音视频标签 <audio src="...">、<video src="..."> 音频、视频
布局标签 <div>、<span> 没有语义的布局标签，配合 CSS 实现页面布局
表格标签 <table>、<thead>、<tbody> 表格、表头、表格主体
表格标签 <tr> / <th>、<td> 行 / 单元格
表单标签 <form> 定义表单（属性：action、method）
表单标签 <input type="text/button"> 表单项（文本输入框、按钮…）
表单标签 <select> / <option> 表单项（下拉列表/选项）

一、学习目标

通过这两张表，可以把 HTML 和 CSS 中最常用、最基础的一部分知识梳理清楚：

  • HTML 负责定义页面内容和结构
  • CSS 负责控制页面样式和布局
  • HTML 决定“有什么”
  • CSS 决定“长什么样、怎么排”

可以把它理解为：

  • HTML 是房子的结构
  • CSS 是房子的装修和摆放方式

二、HTML 基础知识点总结

1. 文本处理标签

h1 ~ h6

作用：表示一级标题到六级标题。

特点：

  • h1 级别最高，通常表示页面主标题
  • h6 级别最低
  • 标题标签本身具有语义，不能只为了字号大而乱用

示例：

<h1>网页主标题</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>

br、p

作用：

  • br 表示换行
  • p 表示段落

区别：

  • br 只是简单换行
  • p 是完整的一段内容，标签本身带有段落语义

示例：

<p>这是第一段内容。</p>
<p>这是第二段内容。</p>
第一行<br>第二行

strong、em、ins、del

作用：

  • strong：加粗，强调重要内容
  • em：倾斜，表示强调
  • ins：下划线，表示插入内容
  • del：删除线，表示删除内容

示例：

<strong>重点内容</strong>
<em>需要强调的内容</em>
<ins>新增内容</ins>
<del>删除内容</del>

2. 图片、音视频标签

a

作用：创建超链接。

常见属性：

  • href：链接地址
  • target：打开方式

常见取值：

  • _self：当前页面打开
  • _blank：新窗口打开

示例：

<a href="https://www.baidu.com" target="_blank">打开百度</a>

img

作用：显示图片。

常见属性：

  • src：图片路径

路径类型：

  • 绝对路径
  • 相对路径

示例：

<img src="images/logo.png" alt="网站logo">

补充说明：

  • src 是必须属性
  • 实际开发中通常还会配合 alt 使用，方便图片无法显示时进行说明

audio、video

作用：插入音频和视频。

常见属性：

  • src：资源路径

示例：

<audio src="music/demo.mp3" controls></audio>
<video src="video/demo.mp4" controls></video>

3. 布局标签

div、span

作用：用于页面布局和内容包裹。

区别：

  • div：块级标签，常用于包裹一整块区域
  • span：行内标签，常用于包裹一小段文字

示例：

<div>这是一个大的布局区域</div>
<p>这是 <span>重点词语</span> 的演示。</p>

理解：

  • div 更适合搭页面结构
  • span 更适合局部修饰文字

4. 表格标签

table、thead、tbody

作用：定义表格、表头、表格主体。

tr、th、td

作用：

  • tr：表格中的一行
  • th：表头单元格
  • td：普通单元格

示例：

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

理解顺序：

  • table 是整张表
  • tr 是一行
  • th / td 是单元格

5. 表单标签

form

作用：定义表单，用于收集并提交用户输入的数据。

常见属性：

  • action：表单提交地址
  • method：表单提交方式

示例：

<form action="/save" method="post">
  用户名：<input type="text" name="username">
  <input type="button" value="普通按钮">
</form>

input

作用：定义输入控件。

表格中重点提到：

  • type="text"：文本输入框
  • type="button"：普通按钮

扩展理解：

  • input 最核心的属性是 type
  • 不同 type 对应不同功能

示例：

<input type="text" placeholder="请输入内容">
<input type="button" value="点击按钮">

select、option

作用：定义下拉列表和选项。

示例：

<select>
  <option>男</option>
  <option>女</option>
</select>

理解：

  • select 是外层下拉框
  • option 是每一个选项

三、CSS 基础知识点总结

1. 盒子模型

盒子模型是 CSS 中非常重要的概念。页面中的每个元素都可以看成一个盒子。

它主要用来控制：

  • 元素尺寸
  • 内边距
  • 边框
  • 外边距
  • 页面中的布局展示

盒子模型从里到外的顺序是：

content → padding → border → margin

width、height

作用：设置元素的宽度和高度。

说明：

  • 控制内容区域的大小
  • 常用于设置盒子的尺寸

示例：

div {
  width: 200px;
  height: 100px;
}

box-sizing

作用：控制宽度和高度的计算方式。

常见取值：

  • content-box
  • border-box

理解：

  • content-box：设置的宽高只计算内容区
  • border-box：设置的宽高会包含内容、内边距和边框

示例：

.box1 {
  box-sizing: content-box;
}

.box2 {
  box-sizing: border-box;
}

padding

作用：设置内边距，即内容与边框之间的距离。

写法规则：

  • 1 个值：四边相同
  • 2 个值：上下、左右
  • 4 个值：上、右、下、左

示例：

div {
  padding: 20px;
}

border

作用：设置边框。

通常包含：

  • 边框粗细
  • 边框样式
  • 边框颜色

示例：

div {
  border: 1px solid #333;
}

margin

作用：设置外边距，即盒子与其他元素之间的距离。

示例：

div {
  margin: 30px;
}

重点区分：

  • padding：盒子内部留白
  • margin：盒子外部留白

2. Flex 弹性布局

Flex 是一种一维布局模型，适合处理一行或一列元素的排列问题。

作用：

  • 控制子元素的排列方向
  • 控制子元素之间的分布方式
  • 让布局更加灵活

display

当设置为 flex 时，表示使用 Flex 布局。

示例：

.container {
  display: flex;
}

理解：

  • 一般把 display: flex; 写在父元素上
  • 父元素变成弹性容器后，子元素会按照 Flex 规则排列

flex-direction

作用：设置主轴方向。

常见取值：

  • row：水平方向
  • column：垂直方向

示例：

.container {
  display: flex;
  flex-direction: row;
}

理解：

  • row：子元素横着排
  • column：子元素竖着排

justify-content

作用：设置子元素在主轴上的对齐方式。

常见效果：

  • 靠左
  • 居中
  • 两端对齐
  • 平均分布

示例：

.container {
  display: flex;
  justify-content: space-between;
}

常见取值举例：

  • flex-start
  • center
  • flex-end
  • space-between
  • space-around
  • space-evenly

四、HTML 和 CSS 的配合关系

HTML 和 CSS 通常是配合使用的。

例如：

  • 用 HTML 写出标题、段落、图片、表格、表单
  • 用 CSS 设置这些内容的宽高、边距、边框和布局方式

示例：

<div class="card">
  <h2>商品信息</h2>
  <p>这是一个商品介绍区域</p>
  <a href="#">查看详情</a>
</div>

.card {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 20px;
}

理解：

  • HTML 负责结构
  • CSS 负责外观和位置

五、重点易错点总结

HTML 易错点

  1. a 标签必须重点记住 href
  2. img 标签必须重点记住 src
  3. option 不能脱离 select 单独使用
  4. tr、th、td 容易层级混乱
  5. div 和 span 的使用场景容易混淆
  6. form 的 action 和 method 容易记混
  7. input 的功能主要由 type 决定

CSS 易错点

  1. padding 和 margin 容易混淆
  2. 盒子模型顺序容易记错
  3. box-sizing 的两种计算方式容易混淆
  4. Flex 布局中，很多属性是写给父元素的
  5. row 和 column 容易记反
  6. justify-content 控制的是主轴方向上的对齐

六、速记

HTML 部分

  • 标题用 h1~h6
  • 换行用 br，分段用 p
  • 加粗 strong，倾斜 em
  • 超链接看 a
  • 图片用 img
  • 音频 audio，视频 video
  • 布局常用 div、span
  • 表格记住：table → tr → th/td
  • 表单记住：form + input + select + option

CSS 部分

  • 盒子模型：内容、内边距、边框、外边距
  • 顺序：content → padding → border → margin
  • padding 盒内空，margin 盒外空
  • display: flex 开启弹性布局
  • row 横向，column 纵向
  • justify-content 控制主轴对齐

七、实际应用场景

这些知识点在实际网页开发中非常常见：

  • 用标题、段落、图片搭建文章页面
  • 用超链接实现页面跳转
  • 用 div 和 span 组织页面结构
  • 用表格展示学生成绩、商品信息、员工列表
  • 用表单收集登录、注册、搜索等数据
  • 用盒子模型调整元素间距
  • 用 Flex 布局实现导航栏、卡片排列、按钮对齐

八、总结

根据表格可以看出，HTML 和 CSS 的学习重点主要分为两部分：

  1. HTML：掌握常见标签及其作用，知道页面内容如何组织
  2. CSS：掌握盒子模型和 Flex 布局，知道页面样式如何控制

学习时建议按照下面的顺序来记：

  • 先记住 HTML 标签“是什么、做什么”
  • 再记住 CSS 属性“控制什么效果”
  • 最后通过小案例把 HTML 和 CSS 结合起来练习

只要把这些基础知识点掌握好，后面学习网页布局、表单交互和完整页面开发就会轻松很多。

九、我目前对 HTML 和 CSS 的理解

我现在对一个 HTML 页面的理解是：一个网页通常分成 head 和 body 两部分。head 主要放页面配置、标题和 CSS 样式等信息，body 主要放用户真正看到的内容。

页面中的内容不是零散堆起来的，而是按一个个模块组成的，比如标题区、登录区、列表区、底部区。开发页面时，通常是先用 HTML 把这些模块的结构搭出来，再用 CSS 去设置样式和布局。

其中，大多数 HTML 元素都可以用盒子模型来理解，因为它们都可以看成一个个盒子，包含 content、padding、border、margin 这几部分。盒子模型更像是在理解“单个元素本身长什么样、占多大空间、和周围间距如何”。

而 Flex 更像是一种“排列规则”。当需要让多个元素横着排、竖着排、居中排或者平均分布时，就可以给父元素加 display: flex;，再由父元素去控制子元素的排列方式。所以 Flex 的核心可以概括成一句话：父控子。

我现在也明白了，HTML 不只是负责“把内容显示出来”，还负责定义页面的结构。比如 h1 是标题，p 是段落，a 是链接，form 是表单，table 是表格。也就是说，HTML 先说明“这是什么内容”，CSS 再去控制“它显示成什么样”。

浏览器在解析页面时，可以先理解为：先读取 HTML 结构，再匹配对应的 CSS 样式，最后把页面渲染显示出来。所以一个完整网页，本质上就是结构、样式和布局规则共同作用后的结果。

这就是我目前对 HTML 和 CSS 的整体理解：HTML 负责结构，CSS 负责样式和布局，页面是由一个个模块拼接而成，再通过样式规则统一显示出来。

# html # css # 前端
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

Java程序员速看！转行AI大模型，高薪风口轻松入局_程序员转行AI大模型教程（非常详细）

avatar AtomGit开源社区
cover

Anthropic收购Stainless：AI Agent时代的连接革命

avatar AtomGit开源社区
cover

Java并发编程：内存可见性与synchronized同步机制

avatar AtomGit开源社区