【前端(一)】HTML 知识梳理：从结构到常用标签

文章目录

[1. 什么是HTML？](#1. 什么是HTML？)
[2. 标签（元素）](#2. 标签（元素）)
- [2.1 标签属性](#2.1 标签属性)
[3. HTML 的基本结构](#3. HTML 的基本结构)
[4. HTML 的标准结构](#4. HTML 的标准结构)
- [4.1 注释](#4.1 注释)
- [4.2 文档声明（单标签）](#4.2 文档声明（单标签）)
- [4.3 字符编码（单标签）](#4.3 字符编码（单标签）)
- [4.4 设置语言（单标签）](#4.4 设置语言（单标签）)
[5. 块级元素与行内元素](#5. 块级元素与行内元素)
[6. 常用标签详解](#6. 常用标签详解)
- [6.1 排版标签](#6.1 排版标签)
- [6.2 文本标签](#6.2 文本标签)
- [6.3 图片标签](#6.3 图片标签)
- - [6.3.1 路径写法](#6.3.1 路径写法)
  - [6.3.2 常见的图片格式](#6.3.2 常见的图片格式)
- [6.4 超链接](#6.4 超链接)
- - [6.4.1 文件链接](#6.4.1 文件链接)
  - [6.4.2 锚点跳转](#6.4.2 锚点跳转)
  - [6.4.3 特殊链接](#6.4.3 特殊链接)
- [6.5 列表](#6.5 列表)
- [6.6 表格](#6.6 表格)
- - [6.6.1 表格标签](#6.6.1 表格标签)
  - [6.6.2 编写表格的步骤](#6.6.2 编写表格的步骤)
  - [6.6.3 常用属性](#6.6.3 常用属性)
  - [6.6.4 合并单元格](#6.6.4 合并单元格)
- [6.7 表单](#6.7 表单)
- - [6.7.1 常用表单控件](#6.7.1 常用表单控件)
  - [6.7.2 表单控件常用属性](#6.7.2 表单控件常用属性)
  - [6.7.3 <label> 标签](#6.7.3 <label> 标签)
  - [6.7.4 <fieldset>与 <legend>](#6.7.4 <fieldset>与 <legend>)
[7. 通用属性](#7. 通用属性)
[8. HTML 实体（转义字符）](#8. HTML 实体（转义字符）)
[9. 标签分类总结](#9. 标签分类总结)
- [9.1 按标签结构分类（单标签/双标签）](#9.1 按标签结构分类（单标签/双标签）)
- [9.2 按显示类型分类（块级/行内）](#9.2 按显示类型分类（块级/行内）)

前言

前端是学习什么？

计算机 = 硬件 + 软件（系统软件 + 应用软件）

应用软件 = C/S架构 + B/S架构
前端工程师主要负责编写 B/S架构 中的网页，呈现界面并实现交互。不过，如今已是 大前端时代 ，我们可以运用前端技术栈，开发出 C/S架构 的应用，甚至搭建服务器。

浏览器 是网页的运行平台。浏览器内核 就是浏览器的"渲染引擎"，它负责将网页代码（HTML、CSS、JS）解析并绘制成你看到的页面。目前 Chrome 的 Blink 内核市场占有率极高，很多国产浏览器（如 QQ、360、搜狗）也采用 Blink 内核。不同内核渲染存在差异，因此需要考虑兼容性。

html决定网页的结构，css决定网页的样式，javascript决定网页的行为。

1. 什么是HTML？

HTML 的全称是 HyperText Markup Language ，即 超文本标记语言。

超文本 ：意味着它超越了普通文本的限制。它不仅可以包含文字，还可以嵌入图片、视频、音频、动画，甚至交互式的小程序。更重要的是，传统文本需要按顺序阅读，而超文本允许你通过 超链接 瞬间跳转到任意相关内容，从而将全世界的信息联结成一张网。
标记：指通过标签来标注内容，告诉浏览器"这是什么"。例如，<h1> 表示一级标题，<p> 表示段落。

2. 标签（元素）

标签是 HTML 的基本组成单位，也称为元素。它们分为两种：

双标签：由开始标签和结束标签组成，如 <p>...</p>。
单标签：只有开始标签，如 <img>、<br>。

标签名不区分大小写，但推荐全部使用小写。

2.1 标签属性

属性写在 开始标签 或 单标签 中，语法为 键值对 形式：属性名="属性值" 。多个属性之间用空格分隔。

某些属性可以没有属性值（如 disabled）。同样，属性名推荐使用小写。

不同的标签拥有不同的属性，也有一些通用属性（如 id、class、style 等），会在后续章节详细介绍。

注意：学习标签时，应关注标签的语义，而不是它的默认样式。因为样式可以通过 CSS 任意修改，但语义（即这个标签"是什么"）才是 HTML 的核心。例如，<h1> 虽然默认文字很大，但更重要的是它表达了"当前页面最重要的内容"这一语义。

3. HTML 的基本结构

一个 HTML 文档有着固定的骨架，如下图所示:

最外层使用 <html> 标签包裹所有内容。
<head> 标签中的内容不会直接显示在网页中，主要用于存放元数据、引入样式和脚本等。
<title> 定义网页的标题，显示在浏览器标签页上。
<body> 标签中的内容会呈现在网页中，是用户可见的部分。

4. HTML 的标准结构

html 复制代码

<!-- 文档类型说明 -->
<!DOCTYPE html>
<!-- 语言说明 -->
<html lang="zh-CN">
    <head>
        <!-- 编码字符集说明 -->
        <meta charset="UTF-8">
        <title> HTML 的标准结构</title>
    </head>
    <body>
        
    </body>
</html>

4.1 注释

注释用于对代码进行解释说明 ，不会被浏览器渲染，也不会显示在页面中。

html 复制代码

<!-- 这是注释内容 -->

4.2 文档声明（单标签）

html 复制代码

<!DOCTYPE html>

作用：告诉浏览器当前网页使用的 HTML 版本 。这里 <!DOCTYPE html> 表示 HTML5，它可以向下兼容 HTML4 等旧版本。
位置：必须写在网页的第一行，即 <html> 标签的外侧。
解释：doc 是 document 文档，type 是类型。

4.3 字符编码（单标签）

计算机在 存储数据 时进行编码，在 读取数据 时进行解码。编码和解码都依据 字符集 的规则进行。

常见的字符集：

ASCII：包含大写字母、小写字母、数字、符号，共 128 个。
ISO 8859-1：在 ASCII 基础上扩充了希腊字符等，共 256 个。
GB2312：收录了 6763 个常用汉字和 682 个字符。
GBK：收录汉字和符号达 20000+，支持繁体中文。
UTF-8：包含世界上所有语言的文字和符号，目前最常用。

如果 编码失败 ，存储的数据会丢失且无法修复；如果 解码失败（出现乱码），可以通过更改解码字符集来尝试修复。

因此，我们通常使用 UTF-8 存储数据，并明确告诉浏览器使用 UTF-8 进行解码。

html 复制代码

<!-- 通过 meta 标签配合 charset 属性告知浏览器使用 UTF-8 编码 -->
<head>
    <meta charset="UTF-8">
</head>

解释：meta 意为"元"（关于......本身），data 意为"数据"。

4.4 设置语言（单标签）

html 复制代码

<html lang="zh-CN">

作用：有助于浏览器显示对应的翻译提示，帮助屏幕阅读器正确发音，并有利于搜索引擎优化（SEO）。

5. 块级元素与行内元素

HTML 中的元素按显示方式可分为两大类：

块级元素 ：独占一行
行内元素 ：不独占一行，与其他行内元素共享一行，宽度由内容撑开

嵌套原则：

块级元素可以包含行内元素，也可以包含其他块级元素。
行内元素 只能包含行内元素，不能包含块级元素。
特殊规则：例如 <h1>~<h6> 标题标签之间不能相互嵌套；<p> 标签内部不能包含任何块级元素等。

6. 常用标签详解

6.1 排版标签

标签	语义	说明
`<h1>`~`<h6>`	标题	`h1` 最重要，建议每个页面只出现一次；`h2`~`h6` 可多次使用，但不能相互嵌套
`<p>`	段落	用于表示一段文字，内部不能包含任何块级元素
`<div>`	无特殊语义	通用的块级容器，常用于页面布局

6.2 文本标签

标签	语义	说明
`<em>`	强调（语气稍弱）	通常显示为斜体
`<strong>`	强调（语气更强）	通常显示为粗体，表示重要性
`<span>`	无特殊语义	通用的行内容器，常用于包裹一小段文本以便单独设置样式

6.3 图片标签

html 复制代码

<img src="图片路径" alt="图片描述" width="宽度" height="高度">

src（source）：指定图片的 源文件路径。
alt（alternative）：图片的描述。当图片无法正常显示时，显示此替代文本；同时搜索引擎通过 alt 属性了解图片内容，对 SEO 很重要。
width / height：指定图片的宽度和高度，单位默认为像素（px）。

6.3.1 路径写法

相对路径 （推荐）：以当前文件所在位置为参考点。

使用相对路径，项目打包后仍可在不同电脑上正常运行。
绝对路径：以根位置为参考点。
1. 本地绝对路径：E:/a/b/c/奥特曼.jpg（不推荐，换设备后路径可能失效）
2. 网络绝对路径：http://www.example.com/images/logo.png（注意：若服务器开启防盗链，图片可能无法显示）

6.3.2 常见的图片格式

格式	特点	适用场景
jpg	支持颜色丰富，占用空间较小，不支持透明背景，不支持动图	产品宣传图、摄影照片等
png	支持颜色丰富，占用空间较大，支持透明背景，不支持动图	透明背景的 logo、图标、高质量配图
bmp	支持颜色丰富，占用空间极大，不支持透明背景，不支持动图	对图片细节要求极高的场景（如大型游戏中的贴图）
gif	仅支持 256 种颜色，支持简单透明背景，支持动图	简单动图、表情包
webp	谷歌推出，兼顾高压缩率与良好画质，支持透明和动图，但兼容性稍差	现代网页中广泛使用，通常需要搭配兼容方案
base64	将图片编码为文本字符串，直接嵌入 HTML/CSS，无需额外请求	小图标、与网页一同加载的图片

6.4 超链接

html 复制代码

<a href="目标地址" target="打开方式">链接文本</a>

href（hypertext reference）：指定链接的目标地址
target 控制页面打开方式：_self（当前窗口）、_blank（新窗口）
id / name：设置锚点，用于页面内跳转
download：强制触发下载，属性值为下载后的文件名

注意：虽然 <a> 是行内元素，但它可以包裹除自身以外的任何元素（包括块级元素）。

6.4.1 文件链接

html 复制代码

<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">查看自拍</a>
<a href="./resource/小电影.mp4">观看小电影</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>

<!-- 浏览器不能直接打开的文件，会自动触发下载 -->
<a href="./resource/内部资源.zip">下载内部资源</a>

<!-- 强制下载（即使是可预览的文件） -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>

6.4.2 锚点跳转

方式一：使用 name 属性（仅限 <a> 标签）

html 复制代码

<!-- 设置锚点 -->
<a name="section1"></a>

<!-- 跳转到锚点 -->
<a href="#section1">跳转到 section1</a>
<a href="#">回到顶部</a>
<a href="demo.html#section1">跳转到 demo.html 页面的 section1 锚点</a>
<a href="">刷新当前页面</a>

只有<a>标签的name属性可用于锚点跳转（且在HTML5中已废弃）

在HTML 4.01中，<a>标签的name属性用于创建页面内的锚点，通过#name进行跳转。其他标签（如<span>）即使设置了name属性，浏览器也不会将其识别为有效的锚点目标。比如<span name="">

方式二：使用 id 属性（任意标签均可）

html 复制代码

<!-- 设置锚点 -->
<h2 id="section2">我是第二部分</h2>

<!-- 跳转 -->
<a href="#section2">跳转到第二部分</a>

6.4.3 特殊链接

html 复制代码

<!-- 拨号 -->
<a href="tel:10010">电话联系</a>

<!-- 发邮件 -->
<a href="mailto:example@qq.com">邮件联系</a>

<!-- 发短信 -->
<a href="sms:10086">短信联系</a>

6.5 列表

HTML 提供了三种列表结构：

列表类型	标签	说明
无序列表	`<ul>` + `<li>`	项目之间没有顺序关系，默认以圆点标识
有序列表	`<ol>` + `<li>`	项目有顺序关系，默认以数字标识
自定义列表	`<dl>` + `<dt>` + `<dd>`	用于表示术语/描述对，`<dt>` 为术语(标题)，`<dd>` 为描述

注意事项：

<ul> 和 <\ol> 内部只允许放置 <li>，不能在它们内部直接写其他标签。
列表的标题建议放在列表外部，使用 <h2>、<h3> 等标题标签。

🌰示例

html 复制代码

<!-- 无序列表 -->
<h2>城市</h2>
<ul>
    <li>长沙</li>
    <li>太原</li>
    <li>济南</li>
</ul>

<!-- 有序列表 -->
<h2>写代码的步骤</h2>
<ol>
    <li>打开电脑</li>
    <li>打开编辑器</li>
    <li>写代码</li>
</ol>

<!-- 自定义列表 -->
<dl>
    <dt>笔记</dt>
    <dd>笔记可以是电子版，也可以是纸质版</dd>
    <dt>练习</dt>
    <dd>多加练习，只有敲出来的代码才是自己的</dd>
</dl>

6.6 表格

一个标准表格通常包含标题、头部、主体和脚注。

6.6.1 表格标签

标签	语义	说明
`<table>`	表格	整个表格的容器
`<caption>`	表格标题	显示在表格上方
`<thead>`	表格头部	通常放置表头行
`<tbody>`	表格主体	放置数据行
`<tfoot>`	表格脚注	用于展示汇总、总计或注释性信息
`<tr>`	行	表格中的一行
`<th>`	表头单元格	自动加粗居中，语义为"标题单元格"
`<td>`	普通单元格	数据单元格

6.6.2 编写表格的步骤

整体规划
构思表格的样式与结构：
- <caption>：表格标题
- <thead>：表头区域（放置列标题）
- <tbody>：主体数据区域（可包含多行）
- <tfoot>：脚注区域（汇总或附加信息）
搭建框架
按以下顺序编写标签结构（注意虽常写在最后，但HTML中可放在之后、之前，浏览器会将其渲染在底部）：

html 复制代码

<table>
  <caption>...</caption>
  <thead>...</thead>
  <tfoot>...</tfoot>
  <tbody>...</tbody>
</table>

填充行与单元格

<thead>通常只有一行，直接填入<th>作为列标题。
<tbody>和<tfoot>包含多行，先用<tr>定义行数，再在每行内填入<th>或<td>。

细化内容
在对应的<th>或<td>中填入具体数据或文字。

🌰示例

html 复制代码

<table border="1" cellspace="0" >
    <caption>花名册</caption>
    <thead>
        <th>sno</th>
        <th>name</th>
        <th>age</th>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>18</td>
        </tr>
        <tr>
            <td>002</td>
            <td>丽丝</td>
            <td>19</td>
        </tr>
        <tr>
            <td>003</td>
            <td>劳务</td>
            <td>18</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td>共计3人</td>
        </tr>
    </tfoot>
</table>

6.6.3 常用属性

标签	属性	说明
`<table>`	`border`、`cellspacing`、`width`、`height`	`border` 控制表格边框宽度；`cellspacing` 控制单元格间距；`height` 仅为最小高度，实际高度可能被内容撑开
`<thead>`/`<tbody>`/`<tfoot>`/`<tr>`	`align`、`valign`、`height`	控制内容对齐方式及行高
`<td>`/`<th>`	`width`、`height`、`align`、`valign`、`rowspan`、`colspan`	`rowspan` 跨行合并，`colspan` 跨列合并

表格边框 （border属性）
border属性只控制表格外边框的显示，不决定单元格边框的宽度。单元格边框可以由CSS设计控制。

表格高度 （height属性）
height属性在<table>上设置的是最小高度。当<thead>、<tbody>等内部区域的内容总高度超过该值时，表格会撑开，实际高度大于设定值。

单元格尺寸的影响
若为某个<th>或<td>单独设置width或height，会影响其所在的整列的宽度或整行的高度。这是因为表格的列宽和行高由单元格内容共同决定，具有"列对齐、行对齐"的特性。

6.6.4 合并单元格

🌰示例

html 复制代码

 <table border="1" cellspacing="0">
    <caption>课程表</caption>
    <!-- 表头：跨列合并"上课"和"活动与休息" -->
    <thead>
       <tr>
            <th>星期</th>
            <th colspan="5">上课</th>
            <th colspan="2">活动与休息</th>
       </tr>
       <tr>
            <th>星期</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
            <th>星期六</th>
            <th>星期日</th>
       </tr>
    </thead>
    <tbody>
      <!-- 上午，休息：跨3行  -->
       <tr>
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>英语</td>
            <td>物理</td>
            <td>数学竞赛</td>
            <td rowspan="4">休息</td>
       </tr>
       <tr>
            <td>数学</td>
            <td>语文</td>
            <td>化学</td>
            <td>物理</td>
            <td>英语</td>
            <td>篮球比赛</td>  
       </tr>
       <tr>
            <td>化学</td>
            <td>语文</td>
            <td>体育</td>
            <td>历史</td>
            <td>地理</td>
            <td>每周一考</td>
       </tr>
       <tr>
            <td>体育</td>
            <td>化学</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>社会实践</td>
       </tr>
       <tr>
            <!-- 下午，休息：跨3行  -->
            <td rowspan="2">下午</td>
            <td>语文</td>
            <td>英语</td>
            <td>数学</td>
            <td>物理</td>
            <td>数学</td>
            <td>英语角</td>
            <td rowspan="2">休息</td>
       </tr>
       <tr>
            <td>化学</td>
            <td>物理</td>
            <td>地理</td>
            <td>生物</td>
            <td>体育</td>
            <td>自由活动</td>
       </tr>
    </tbody>
</table>

6.7 表单

表单用于收集用户输入数据并提交到服务器。

html 复制代码

<form action="提交地址" method="post" target="_blank">
    <!-- 表单控件 -->
</form>

属性	说明
`action`	数据提交的目标地址
`target`	决定了浏览器在收到服务器返回的响应后，在哪个窗口或框架（iframe）中加载结果，同 `<a>` 标签的 `target`
`method`	请求方式，常用 `get` 或 `post`

6.7.1 常用表单控件

控件类型	标签	示例
文本输入框	<input type="text">	<input type="text" name="username" placeholder="请输入用户名">
密码输入框	<input type="password">	<input type="password" name="pwd">
单选框	<input type="radio">	<input type="radio" name="sex" value="男"> 男
复选框	<input type="checkbox">	<input type="checkbox" name="hobby" value="读书"> 读书
隐藏域	<input type="hidden">	不显示，用于携带固定数据
提交按钮	<input type="submit">/ <button>	<button>提交</button>（默认 type 为 submit）
重置按钮	<input type="reset">/ <button type="reset">	重置表单内所有控件到初始状态
普通按钮	<input type="button"> / <button type="button">	通常配合 JavaScript 使用
文本域	<textarea>	多行文本输入
下拉框	<select> + <option>	选择列表

6.7.2 表单控件常用属性

属性	适用控件	说明
`name`	大部分控件	提交数据的键名
`value`	输入框、按钮、单选/复选框	输入框的默认值；按钮的显示文字；单选/复选框的实际提交值
`disabled`	大部分控件	禁用控件，不可编辑
`maxlength`	文本输入框	最大输入字符数
`checked`	单选/复选框	默认选中
`selected`	`<option>`	下拉框默认选中
`placeholder`	文本输入框、文本域	占位提示文字

<textarea> 的默认内容是写在开始标签和结束标签之间的文本，而不是通过value属性设置。

<input type="text"> 的默认内容通过value属性设置。

🌰示例

html 复制代码

<!-- textarea 默认内容 -->
<textarea>这是默认文本</textarea>

<!-- input 默认内容 -->
<input type="text" value="这是默认文本">

🌰示例代码：

html 复制代码

<!-- 文本输入框 -->
<input type="text" name="username" value="无名" maxlength="11" placeholder="请输入用户名">

<!-- 密码输入框 -->
<input type="password" name="password" placeholder="请输入密码">

<!-- 单选框（name 相同则互斥） -->
<input type="radio" name="sex" value="女" checked> 女
<input type="radio" name="sex" value="男"> 男

<!-- 复选框 -->
<input type="checkbox" name="hobby" value="dance" checked> 跳舞
<input type="checkbox" name="hobby" value="sing"> 唱歌

<!-- 隐藏域 -->
<input type="hidden" name="tag" value="100">

<!-- 提交按钮 -->
<input type="submit" value="提交">
<button>提交</button>   <!-- 默认 type="submit" -->

<!-- 重置按钮 -->
<input type="reset" value="重置">
<button type="reset">重置</button>

<!-- 普通按钮 -->
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>

<!-- 文本域 -->
<textarea name="msg" cols="30" rows="10" placeholder="请输入备注信息">我是文本域</textarea>

<!-- 下拉框 -->
<select name="city">
    <option value="长沙" selected>长沙</option>
    <option value="济南">济南</option>
    <option value="太原">太原</option>
</select>

6.7.3 <label> 标签

<label> 可以将文字与表单控件关联，点击文字即可聚焦对应的控件，提升用户体验。

关联方式：

使用 for 属性，值等于控件的 id。
将控件包裹在标签内部。

html 复制代码

<<!-- 方式一 -->
<input type="radio" name="sex" value="男" id="male">
<label for="male">男</label>

<!-- 方式二 -->
<label>
    <input type="radio" name="sex" value="女" checked> 女
</label>

6.7.4 <fieldset>与 <legend>

用于对表单控件进行分组，<legend> 提供分组标题。

html 复制代码

<fieldset>
    <legend>基本信息</legend>
    姓名：<input type="text"><br>
    年龄：<input type="text">
</fieldset>

7. 通用属性

以下属性适用于大多数 HTML 标签：

属性	含义
`id`	唯一标识符，不可重复。可用于关联 `<label>`、CSS 样式、JavaScript 操作
`class`	类名，常用于 CSS 样式设置，多个元素可共用同一类名
`style`	内联 CSS 样式
`title`	鼠标悬停时的提示文字
`lang`	指定标签内容的语言，如 `lang="en"`
`dir`	文字方向，值：`ltr`（从左到右，默认）、`rtl`（从右到左）

8. HTML 实体（转义字符）

在 HTML 中，某些字符具有特殊含义（如 <、>、&），直接使用可能会被误认为是标签或实体的一部分。此时需要使用 HTML 实体来表示它们。

9. 标签分类总结

下面两张图分别从 标签结构 和 显示类型 两个维度，帮你梳理 HTML 常用标签的分类体系。

9.1 按标签结构分类（单标签/双标签）

双标签
表单系列
<textarea>
<button>
<select>
<option>
<fieldset>
<legend>
表格系列
<table>
<caption>
<thead>
<tbody>
<tfoot>
<tr>
<td>
<th>
列表系列
<ul>
<ol>
<li>
<dl>
<dd>
<dt>
超链接系列
<a>
文本行内系列
<em>
<strong>
<span>
文本容器系列
<p>
<div>
标题系列
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
单标签
<img>
<br>
<hr>
<input>

(text,password,radio,checkbox)
HTML标签

9.2 按显示类型分类（块级/行内）

行内元素
表单行内系列
<input>

(text,password,radio,checkbox)
<textarea>
<button>
<select>
<option>
媒体与换行
<img>
<br>
超链接系列
<a>
文本行内系列
<em>
<strong>
<span>
块级元素
分隔线系列
<hr>
表单块级系列
<fieldset>
<legend>
表格系列
<table>
<caption>
<thead>
<tbody>
<tfoot>
<tr>
<td>
<th>
列表系列
<ul>
<ol>
<li>
<dl>
<dd>
<dt>
文本容器系列
<p>
<div>
标题系列
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
HTML标签

以上为个人学习总结，旨在梳理个人理解。如有疏漏或不当之处，欢迎指正与交流。