HTML5(Web前端开发笔记第一期)
p.s.这是萌新自己自学总结的笔记,如果想学习得更透彻的话还是请去看大佬的讲解
目录
- 三件套
- 标签
- 标题标签
- 段落标签
- 文本格式化标签
- 图像标签
- 超链接标签
- 锚点链接
- 默认链接地址
- 音频标签
- 视频标签
- HTML基本骨架
- 综合案例->个人简介
- 列表
- 表格
- 表单
- input标签
- 单选框radio
- 上传文件file
- 多选框checkbox
- 下拉菜单
- 文本域
- label标签
- 按钮
- 无语义的布局标签
- 字符实体
- 综合案例->写一个注册信息
三件套
Web三件套功能说明
1. HTML(超文本标记语言)
核心功能:定义网页的内容与结构,如标题、段落、列表、图片等元素的层级关系。
实现方式:通过标签搭建文档骨架,形成树状结构供浏览器解析
2. CSS(层叠样式表)
核心功能:控制网页的外观与布局,包括颜色、字体、间距、响应式设计等视觉效果。
实现方式:通过选择器(如类、ID)和属性(如 color、margin)为HTML元素添加样式规则
3. JavaScript(JS)
核心功能:实现网页的交互与动态功能,如表单验证、数据更新、动画效果等。
实现方式:通过操作DOM(文档对象模型)动态修改页面内容,或通过事件监听(如点击、输入)响应用户行为。
。
HTML负责结构,CSS控制样式,JavaScript处理交互和动态功能。
三者共同构建完整的Web页面:HTML提供内容基础,CSS提升视觉体验,JavaScript增强交互性,形成现代Web开发的核心技术体系。
。
比喻说明,HTML是骨骼,CSS是皮肤,JavaScript是器官
标签
HTML:超文本标记语言
超文本,即链接
标记,也叫标签,即带尖括号的文本
语法:</strong> 需要加粗的文字 <strong>
双标签:标签通常成对出现,中间包裹内容
单标签:只有开始标签,没有结束标签
<>里面 放英文字母(标签名)
结束标签比开始标签多"/"
举例
<strong>Hello World</strong><!-- 这是一个注释,它不会在浏览器中显示 --><!-- 换行(注意!浏览器不识别代码中的Enter换行) --><br><strong>Hello World</strong><!-- 添加水平线 --><hr>
嵌套关系:一个标签里面包含了其他标签的写法
并列关系:两个平级别的标签
举例
<html><!-- 嵌套关系 --><head></head><body></body><!-- 平级关系 -->
</html>
标题标签
标签名:h1~h6(双标签)
特点:文字加粗、字号逐渐缩小、独占一行(换行)
h1标签在一个网页中尽量只用一次,用来放新闻标题或网页logo
h2之后的无限制使用
<body><h1>Hello World</h1><h2>Hello World</h2>
</body>
段落标签
一般用在新闻段落、文章段落、产品描述信息等
标签名:p(双标签)
特点:独占一行、段落之间存在间隙
<body><p>这是萌新自己自学总结的笔记,如果想学习得更透彻的话还是请去看大佬的讲解</p><!-- 段落之间有间隙 --><p>这是萌新自己自学总结的笔记,如果想学习得更透彻的话还是请去看大佬的讲解</p>
</body>
文本格式化标签
为文本添加特殊格式,以突出重点。常见的文本格式:加粗、倾斜、下划线、删除线等
<body><strong>加粗</strong>
<br>
<em>倾斜</em>
<br>
<ins>下划线</ins>
<br>
<del>删除线</del></body>
图像标签
在网页中插入图片
标签名<img src="图片的URL">
src用于指定图像的位置和名称,是图像标签的必须属性
属性名=“属性值”
属性写在尖括号里,标签名后面,标签名和属性之间用空格分开,不区分先后顺序
<body><img src="./1.1.jpg" alt="123" title="我老婆" width="50" height="50" >
<img src="./1.1.jpg" alt="123" title="我老婆" width="100" height="100"></body>
超链接标签
点击跳转其他页面
<!-- 将此窗口跳转到b站 -->
<a href="https://www.bilibili.com/">点击此处跳转b站</a><!-- 新开一个窗口跳转 -->
<a href="1.1.jpg" target="_blank">点击此处跳转</a><!-- herf写#,表示一个空连接 -->
<a href="#" >点击</a>
锚点链接
锚点链接
默认链接地址
默认链接地址
音频标签
标签名<audio src="音频的URL"></audio>
src用于指定音频的位置和名称,是音频标签的必须属性
<body><audio src="2023-09-24%2016-07-36.mp3" controls="controls"></audio>
<audio src="2023-09-24%2016-07-36.mp3" controls></audio>
<!-- 二者等同,这时因为如果属性名和属性值完全一样,可以简写为一个单词--></body>
视频标签
标签名<video src="视频的URL"></video>
src用于指定视频的位置和名称,是视频标签的必须属性
<body><video src="2023-09-24%2016-07-36.mp4" controls width="500" height="500"></video>
<!-- 想要自动播放,就必须要有muted属性 --></body>
HTML基本骨架
HTML的基本骨架是网页模板
html:整个网页
head:网页头部,存放给浏览器看的代码,例如CSS
body:网页主题,存放给用户看的代码,,例如图片、文字
title:网页标题
综合案例->个人简介
网页制作思路:从上到下、先整体再局部,逐步分析制作
分析内容->写代码->保存->刷新浏览器,看效果
声明:简介及图片完全虚构,如有雷同纯属巧合
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>个人简介</title>
</head>
<body><h1>张三</h1><hr><p>张三(1992年出生),中国<a href="#">人工智能</a>领域青年专家,现任中国<a href="#">人工智能</a>产业发展联盟理事、XX大学客座教授。</p><img src="./img.png" alt="张三照片" title="张三" width="200" height="200"><h2>学习经历</h2><p>2010-2014年:就读于XX大学计算机科学与技术专业,获学士学位, 期间连续四年获学术奖学金,并在核心期刊发表多篇人工智能领域论文 。<br>2014-2017年:攻读同校人工智能方向硕士学位,研究领域聚焦机器学习与自然语言处理,参与多项国家级科研项目</p><h2>主要成就</h2><p>技术创新:<ins>主导开发基于AI的医疗诊断系统,应用于三甲医院,显著提升早期疾病筛查准确率至95%以上</ins>。<br>行业影响:在金融领域推动智能风控模型落地,协助某银行降低30%信贷风险,相关成果获省级科技进步一等奖。<br>学术贡献:发表20余篇SCI论文,出版专著《人工智能跨领域实践》,被多所高校列为教材。</p><h2>社会任职</h2><p>2022年至今:<strong>担任中国人工智能产业发展联盟理事</strong>,参与制定行业技术标准与伦理规范。<br>2024年起:受聘为XX大学客座教授,联合培养硕博研究生,并主导校企合作实验室建设。<br>2025年:入选“青年科技领军人才计划”,兼任市政府数字化转型顾问团成员,推动智慧城市建设。</p></body>
</html>
列表
列表
列表作用:布局内容排列整齐的区域
列表分为:无序列表、有序列表、定义列表
无序列表:布局整齐的不需要规定顺序的区域
标签:ul嵌套li,ul是无序列表,li是列表条目
ul标签里面只能包含li标签;li标签里面可以包裹任何内容
<ul><li>第一项</li><li>第二项</li><li>第三项</li>
</ul><hr><ul><li>这是第一条新闻</li><li>这是第二条新闻</li><li>这是第三条新闻</li>
</ul>
有序列表:布局整齐的需要规定顺序的区域
标签:ol嵌套li,ol是无序列表,li是列表条目
ol标签里面只能包含li标签;li标签里面可以包裹任何内容
<ol><li>第一项</li><li>第二项</li><li>第三项</li>
</ol><hr><ol><li>这是第一条新闻</li><li>这是第二条新闻</li><li>这是第三条新闻</li>
</ol>
定义列表
标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述/详情
dl里面只能包含dt和dd
dt和dd里面能包裹任何内容
表格
网页中的表格于Excel表格类似,用来展示数据
标签:table嵌套tr,tr嵌套td/th
在网页中表格默认没有边框线,使用border属性可以为表格添加边框线
<table border="1"><tr><th>姓名</th><th>班级</th><th>年龄</th><th>名次</th></tr><tr><td>张三</td><td>2</td><td>18</td><td>4</td></tr><tr><td>李四</td><td>2</td><td>19</td><td>26</td></tr><tr><td>王五</td><td>1</td><td>17</td><td>1</td></tr><tr><td>赵六</td><td>2</td><td>18</td><td>10</td></tr></table>
表格结构标签:用表格结构标签把内容划分区域,让表格结构更加清晰,语义更清晰
<table border="1"><thead><tr><th>姓名</th><th>班级</th><th>年龄</th><th>名次</th></tr></thead><tbody><tr><td>张三</td><td>2</td><td>18</td><td>4</td></tr><tr><td>李四</td><td>2</td><td>19</td><td>26</td></tr><tr><td>王五</td><td>1</td><td>17</td><td>1</td></tr></tbody><tfoot><tr><td>总结</td><td>总结</td><td>总结</td><td>总结</td></tr></tfoot></table>
合并单元格:将多个单元格合并成一个单元格,以合并同类信息
合并单元格的步骤:
1:明确合并的目标
2:保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)
跨行合并:保留最上单元格,添加属性rowspa
跨列合并:保留最左单元格,添加属性colspan
3:删除其他单元格
<table border="1"><tr><th>姓名</th><th>班级</th><th>年龄</th><th>名次</th></tr><tr><td>张三</td><td rowspan="2">2</td><td>18</td><td>4</td></tr><tr><td>李四</td><td>19</td><td>26</td></tr><tr><td>王五</td><td>1</td><td>17</td><td>1</td></tr><tr><td colspan="4">总结</td></tr></table>
表单
表单
表单:收集用户信息
使用场景:登陆页面、注册页面、搜索区域
标签:<form></form>
input标签
input标签type属性值不同,则功能不同
标签:<input type = "...">
<!-- 特点:输入什么就显示什么-->
文本框:<input type="text">
<br>
<!-- 特点:不显示输入-->
密码框:<input type="password">
<br>
单选框:<input type="radio">
<br>
多选框:<input type="checkbox">
<br>
上传文件:<input type="file">
input标签占位文本:提示信息
标签:<input type = "..." placeholder="提示信息">
多用于文本框和密码框
文本框:<input type="text" placeholder="请输入用户名">
<br>
密码框:<input type="password" placeholder="请输入密码">
单选框radio
<input type="radio" checked name="gender">男
<input type="radio" name="gender">女
上传文件file
默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能
上传文件:<input type="file" multiple>
多选框checkbox
多选框也叫复选框;默认选中:checked
<input type="checkbox" checked>选项A
<input type="checkbox" checked>选项B
<input type="checkbox">选项C
下拉菜单
标签:select嵌套option,select是下拉菜单整体,option是下拉菜单的每一项
<select><option>高一</option><option selected>高二</option><!-- 加了selected,默认选中 --><option>高三</option><option>大一</option>
</select>
文本域
作用:多行输入文本的表单控件
标签:<textarea>默认提示文字</textarea>
label标签
作用:网页中,某个标签的说明文本
用label标签绑定文字和表单控件的关系,增大表单控件的点击范围
label标签-增大点击范围
写法一:label标签只包含内容,不包裹表单控件
设置label标签的for属性值和表单控件的id属性值相同
<input type="radio" id="man">
<label for="man">男</label>
写法二:使用label标签包裹文字和表单控件,不需要属性
<label><input type="radio">男</label>
支持label标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等
按钮
标签:<button type="">按钮</button>
<!-- form表单区域 -->
<form>用户名:<input type="text"><br>密码:<input type="password"><br><button type="submit">提交</button><button type="reset">重置</button></form>
无语义的布局标签
作用:布局网页(划分网页区域,摆放内容)
div:独占一行
span:不换行
两个都是双标签
<div>这是div标签</div><!--独占一行-->
你好,世界!
<span>这是span标签</span><!--不会换行-->
字符实体
作用:在网页中显示预留字符(显示出特殊符号,如<、>)
<!--在网页中敲键盘的空格,网页只识别一个-->
你好 世界!
<br>
<>
综合案例->写一个注册信息
<body>
<!----------------------><h1>注册信息</h1><!---------表单控件-->
<form><!--个人信息-->
<h2>个人信息</h2><label>姓名:</label> <input type="text" placeholder="请输入姓名"><br><label>密码:</label> <input type="password" placeholder="请输入密码"><br><label>确认密码:</label> <input type="password" placeholder="请输入确认密码"><br><br><label>性别:</label><label><input type="radio" name="gender" checked>男</label><label><input type="radio" name="gender">女</label><br><br><label>居住城市:</label><select><option>乐山</option><option>重庆</option><option selected>成都</option><option>资阳</option><option>眉山</option></select><br><br><!--教育经历-->
<h2>教育经历</h2><label>最高学历</label><select><option>大学</option><option>博士</option><option selected>硕士</option><option>高中</option></select><br><br><label>学校:</label> <input type="text" placeholder="请输入学校"><br><label>专业:</label> <input type="text" placeholder="请输入专业"><br><br><label>在校时间</label><select><option>2015</option><option>2016</option><option selected>2017</option><option>2018</option></select>--<select><option>2019</option><option>2020</option><option selected>2021</option><option>2022</option></select><br><br><!--工作经历-->
<h2>工作经历</h2><label>公司名称:</label><input type="text" placeholder="请输入公司名称"><br><label>工作描述:</label> <br> <textarea></textarea><br><br><!--协议--><input type="checkbox"><label>已阅读并同意下协议</label><ul><li><a href="#"><ins>《用户服务协议》</ins></a></li><li><a href="#"><ins>《隐私政策》</ins></a></li></ul><br><br><br><br><!--按钮--><button type="submit">免费注册</button><button type="reset">重新填写</button></form>
<!---------------------->
</body>
相关文章:

HTML5(Web前端开发笔记第一期)
p.s.这是萌新自己自学总结的笔记,如果想学习得更透彻的话还是请去看大佬的讲解 目录 三件套标签标题标签段落标签文本格式化标签图像标签超链接标签锚点链接默认链接地址 音频标签视频标签 HTML基本骨架综合案例->个人简介列表表格表单input标签单选框radio上传…...
Windows控制台函数:标准输入输出流交互函数GetStdHandle()
目录 什么是 GetStdHandle? 它长什么样? 怎么用它? 它跟 std::cout 有什么不一样? GetStdHandle 是一个 Windows API 函数,用于获取标准输入、标准输出或标准错误设备的句柄。它定义在 Windows 的核心头文件 <…...
Vue3 中 Computed 用法
Computed 又被称作计算属性,用于动态的根据某个值或某些值的变化,来产生对应的变化,computed 具有缓存性,当无关值变化时,不会引起 computed 声明值的变化。 产生一个新的变量并挂载到 vue 实例上去。 vue3 中 的 com…...
常见的三种锁
一、互斥锁 互斥锁 Mutex 保证在任意时刻只有一个线程能够进入被保护的临界区。当一个线程获取到互斥锁后,其他线程若要进入临界区就会被阻塞,直到该线程释放锁。 互斥锁是一种阻塞锁,当线程无法获取到锁时,会进入阻塞状态。 应…...

离线文本转语音库pyttsx3(目前接触到的声音效果最好的,基本上拿来就能用)
在现代应用程序中,文本转语音(Text-to-Speech, TTS)技术越来越受到重视。无论是为视力障碍人士提供帮助,还是为教育和娱乐应用增添趣味,TTS 都能发挥重要作用。今天,我们将介绍一个简单易用的 Python 库——…...

LeetCode Hot100刷题——反转链表(迭代+递归)
206.反转链表 给你单链表的头节点 head ,请你反转链表,并返回反转后的链表。 示例 1: 输入:head [1,2,3,4,5] 输出:[5,4,3,2,1]示例 2: 输入:head [1,2] 输出:[2,1]示例 3&#…...
JJJ:linux sysfs相关
文章目录 1.sysfs(属性)文件的创建、读、写1.1 创建流程1.2 open流程1.3 read流程 2.补充2.1 sysfs下常见目录介绍2.2 属性相关2.2.1 简介2.2.2 attribute文件的创建 2.3 sysfs目录如何创建的 1.sysfs(属性)文件的创建、读、写 1…...

Leetcode 刷题记录 06 —— 矩阵
本系列为笔者的 Leetcode 刷题记录,顺序为 Hot 100 题官方顺序,根据标签命名,记录笔者总结的做题思路,附部分代码解释和疑问解答。 目录 01 矩阵置零 方法一:标记数组 方法二:两个标记变量 02 螺旋矩阵…...

什么样的物联网框架适合开展共享自助KTV唱歌项目?
现在物联网的广泛应用,也让更多用户们看到了它的实力,也使得共享经济遍地开花。其中共享自助唱歌设备也备受欢迎,那么适合开展共享自助KTV唱歌项目的物联网框架都应具备哪些特点呢? 智能化与自动化管理 物联网技术在共享KTV中的应…...
【Academy】HTTP Host 标头攻击 ------ HTTP Host header attacks
HTTP Host 标头攻击 ------ HTTP Host header attacks 1. 什么是 HTTP Host 标头?2. 什么是 HTTP Host 标头攻击?3. HTTP Host 标头漏洞是如何产生的?4. 如何测试 HTTP Host 标头漏洞4.1 提供任意 Host 标头4.2 检查有缺陷的验证4.3 发送不明…...

Web基础:HTML快速入门
HTML基础语法 HTML(超文本标记语言) 是用于创建网页内容的 标记语言,通过定义页面的 结构和内容 来告诉浏览器如何呈现网页。 超文本(Hypertext) 是一种通过 链接(Hyperlinks) 将不同文本、图像…...
技术领域,有许多优秀的博客和网站
在技术领域,有许多优秀的博客和网站为开发者、工程师和技术爱好者提供了丰富的学习资源和行业动态。以下是一些常用的技术博客和网站,涵盖了编程、软件开发、数据科学、人工智能、网络安全等多个领域: 1. 综合技术博客 1.1 Medium 网址: ht…...

k8s概念及k8s集群部署(Centos7)
Centos7部署k8s集群 部署之前,先简单说下k8s是个啥: 一、k8s简介: k8s,全称:kubernetes,它可以看作是一个分布式系统支撑平台。k8s的作用: 1、故障自愈: k8s这个玩意可以监控容器…...
《DeepSeek-V3:动态温度调节算法,开启推理新境界!》
在人工智能领域不断探索的征程中,DeepSeek-V3以其卓越的创新技术,尤其是动态温度调节算法,成为了备受瞩目的焦点。这项算法犹如一把神奇的钥匙,巧妙地开启了推理速度与精度动态平衡的大门,为大语言模型的发展开辟了新的…...

Python从入门到精通1:FastAPI
引言 在现代 Web 开发中,API 是前后端分离架构的核心。FastAPI 凭借其高性能、简洁的语法和自动文档生成功能,成为 Python 开发者的首选框架。本文将从零开始,详细讲解 FastAPI 的核心概念、安装配置、路由设计、请求处理以及实际应用案例&a…...

fastapi+angular停车管理系统可跨域
说明: 我计划用fastapiangular做一款停车管理系统,支持跨域 1.设计mysql数据库表, 2.建表,添加测试数据,多表查询, 3.在fastapi写接口查询数据, 4.用postman测试, 5.在angular前端展…...
前端题目类型
HTMLCSS常见面试题 HTML标签有哪些行内元素 img、picture、span、input、textarea、select、label 说说你对元素语义化的理解 元素语义化就是用正确的元素做正确的事情。虽然理论上所有html元素都可通过css样式实现相同效果,但这样会使事情复杂化,所以需…...
openwrt路由系统------lua、uci的关系
1. Luci 的核心组成 (1) Lua 简介:Luci 的界面和逻辑几乎完全使用 Lua 脚本语言编写。Lua 是一种轻量级、高效的嵌入式脚本语言,适合在资源受限的路由器环境中运行。作用: 生成动态 Web 页面(与后端交互渲染 HTML)。处理用户提交的表单数据(如修改 Wi-Fi 密码)。调用系…...

Elastic:AI 会开始取代网络安全工作吗?
作者:来自 Elastic Joe DeFever 不会,但它正在从根本上改变这些工作。 生成式 AI (GenAI) 正迅速成为日常安全工作流程中的一个重要组成部分。那么,它是合作伙伴还是竞争对手? GenAI 技术在安全堆栈几乎每个方面的广泛应用&#…...

Linux安装升级docker
Linux 安装升级docker Linux 安装升级docker背景升级停止docker服务备份原docker数据目录移除旧版本docker安装docker ce恢复数据目录启动docker参考 安装找到docker官网找到docker文档删除旧版本docker配置docker yum源参考官网继续安装docker设置开机自启配置加速测试 Linux …...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
day52 ResNet18 CBAM
在深度学习的旅程中,我们不断探索如何提升模型的性能。今天,我将分享我在 ResNet18 模型中插入 CBAM(Convolutional Block Attention Module)模块,并采用分阶段微调策略的实践过程。通过这个过程,我不仅提升…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率,…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么?1.1.2 感知机的工作原理 1.2 感知机的简单应用:基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

群晖NAS如何在虚拟机创建飞牛NAS
套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...
go 里面的指针
指针 在 Go 中,指针(pointer)是一个变量的内存地址,就像 C 语言那样: a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10,通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

nnUNet V2修改网络——暴力替换网络为UNet++
更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...

AD学习(3)
1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分: (1)PCB焊盘:表层的铜 ,top层的铜 (2)管脚序号:用来关联原理图中的管脚的序号,原理图的序号需要和PCB封装一一…...