前端笔记1-锐单电子商城

前缀	浏览器	例 border-radius:10px;
-webkit-	chrome和safari	-webkit-border-radius:10px; 兼容chrome和Safari
-moz-	Firefox	-moz-border-radius:10px; 兼容Firefox
-ms-	IE	-ms-border-radius:10px; 兼容IE
-o-	Opera	-o-border-radius:10px; 兼容opera

标准	说明	备注
结构	结构用于整理和分类网页元素，主要是HTML。
表现	用于设置网页元素的布局、颜色、大小等外观风格，主要是指CSS
行为	行为是指网页模型的定义和交互的编写，主要是 Javascript

标签	描述
<!DOCTYPE>	定义文档类型。
	定义 HTML 文档。
	定义文档信息。
	定义文档标题。
	定义文档的主体。
to	定义 HTML 标题。
	定义段落。
	定义简单的折行。
	定义水平线。
<!–…—>	定义注释。

标签	描述
	定义只取首字母的缩写。HTML5 不支持。请使用代替。
	定义缩写。
	定义文档作者或拥有者的联系信息。
	定义粗体文本。
	定义文本的文本方向，使其脱离其周围文本的方向设置。
	定义文字方向。
	定义大号文本。HTML5 中不支持。请使用 CSS 代替。
	定义长的引用。
	定义大号文本。HTML5 中不支持。请使用 CSS 代替。
	定义引用(citation)。
	定义计算机代码文本。
	定义被删除文本。
	定义定义项目。
	定义强调文本。
	定义大号文本。HTML5 中不支持。请使用 CSS 代替。
	定义斜体文本。
	定义被插入文本。
	定义键盘文本。
	定义有记号的文本。
	定义预定义范围内的度量。
	定义预格式文本。
	定义任何类型的任务的进度。
	定义短的引用。
	定义若浏览器不支持 ruby 元素显示的内容。
	定义 ruby 注释的解释。
	定义 ruby 注释。
	定义加删除线的文本。
	定义计算机代码样本。
	定义小号文本。
	定义加删除线文本。HTML5 中不支持。请使用 ~~或 ~~代替。~~~~
	定义语气更为强烈的强调文本。
	定义上标文本。
	定义下标文本。
	定义用作容纳页面加载时隐藏内容的容器。
	定义日期/时间。
	定义打字机文本。HTML5 中不支持。请使用 CSS 代替。
	定义下划线文本。
	定义文本的变量部分。
	定义可能的换行符。

标签	描述
	定义供用户输入的 HTML 表单。
	定义输入控件。同一组radio、checkbox要有相同的name属性
	定义多行的文本输入控件。
	定义按钮。
	定义选择列表（下拉列表）。
	定义选择列表中相关选项的组合。
	定义选择列表中的选项。
	定义 input 元素的标注。“for” 属性可把 label 绑定到另外一个元素。请把 “for” 属性的值设置为相关元素的 id 属性的值
	定义围绕表单中元素的边框。
	定义 fieldset 元素的标题。
	定义与文档相关的可搜索索引。HTML5 中不支持。
	定义下拉列表。
	定义生成密钥。
	定义输出的一些类型。

标签	描述
	定义框架集的窗口或框架。HTML5 中不支持。
	定义框架集。HTML5 中不支持。
	定义针对不支持框架的用户的替代内容。HTML5 中不支持。
	定义内联框架。

标签	描述
	定义图像。
	定义图像映射。
	定义图像地图内部的区域。
	定义图形。
	定义 figure 元素的标题。
	定义媒介内容的分组，以及它们的标题。
	定义 SVG 图形的容器。

标签	描述
	定义声音内容。
	定义媒介源。
	定义用在媒体播放器中的文本轨道。
	定义视频。

标签	描述
	定义锚。锚点链接（页面内跳转）：使用id，如
	定义文档与外部资源的关系。
	定义导航链接。

标签	描述
	定义无序列表。
	定义有序列表。
	定义列表的项目。
	定义大号文本。HTML5 中不支持。请使用 CSS 代替。
	定义定义列表。
	定义定义列表中的项目。
	定义定义列表中项目的描述。
	定义命令的菜单/列表。
	定义用户可以从弹出菜单调用的命令/菜单项目。
	定义命令按钮。

标签	描述
	定义关于文档的信息。
	定义关于 HTML 文档的元信息。
	定义页面中所有链接的默认地址或默认目标。
	定义页面中文本的默认字体、颜色或尺寸。HTML5 中不支持。请使用 CSS 代替。

字符	实体编号	实体名称	描述
>		&gt
<		&lt
	&#160	&nbsp	非间断空格（non-breaking space）

标签	描述
	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

标签	描述
	定义音频内容
	定义视频（video 或者 movie）
	定义多媒体资源和
	定义嵌入的内容，比如插件。
	为诸如和元素之类的媒介规定外部文本轨道。

标签	描述
	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
	规定用于表单的密钥对生成器字段。
	定义不同类型的输出，比如脚本的输出。

标签	描述
	定义页面独立的内容区域。
	定义页面的侧边栏内容。
	允许您设置一段文本，使其脱离其父元素的文本方向设置。
	定义命令按钮，比如单选按钮、复选框或按钮
	用于描述文档或文档某个部分的细节
	定义对话框，比如提示框
	标签包含 details 元素的标题
	规定独立的流内容（图像、图表、照片、代码等等）。
	定义元素的标题
	定义 section 或 document 的页脚。
	定义了文档的头部区域
	定义带有记号的文本。
	定义度量衡。仅用于已知最大和最小值的度量。
	定义导航链接的部分。
	定义任何类型的任务的进度。
	定义 ruby 注释（中文注音或字符）。
	定义字符（中文注音或字符）的解释或发音。
	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
	定义文档中的节（section、区段）。
	定义日期或时间。
	规定在文本中的何处适合添加换行符。

css

选择器

复合选择器

后代选择器

选取某元素的后代元素。div p { background-color:yellow; }

子选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。div>p { background-color:yellow; }

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not§	选择所有p以外的元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素。和:nth-of-type(n)的区别是：nth-child先选择第n个孩子。再看是不是p标签，nth-of-type是选择p标签的第二个
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个元素的第一个字母
:first-line	p:first-line	选择每个元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的元素
:before	p:before	在每个元素之前插入内容，::before也对
:after	p:after	在每个元素之后插入内容，::after也对
:lang(language)	p:lang(it)	为元素的lang属性选择一个开始值

属性选择器

CSS 属性选择器 | 菜鸟教程 (runoob.com)

下面的例子是把包含属性value的所有元素变为蓝色：

[value] { color:blue; }

下面的例子是把包含属性value的所有input元素变为蓝色：

input[value] { color:blue; }

属性和值选择器

下面的实例改变了属性title='runoob’元素的边框样式:

[title=runoob] { border:5px solid green; }

属性和值的选择器 - 多值

下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:

[title~=hello] { color:blue; }
<h1 title="hello world">Hello world</h1>

下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:

[lang|=en] { color:blue; }

尺寸

px：像素单位

rpx：小程序端常用，1px=2rpx，1rpx=1物理像素

em：当前元素（font-size）1个文字的大小

元素显示模式

display属性设置

块级元素block

div ul ol li dl dt dd h1 h2 h3 h4…p

p和h标签内部不能放其他块级元素

自己独占一行（设置宽高后也是）

行内元素（内联元素）inline

a b span img input select label

行内元素的宽高直接设置时无效

行内元素只能容纳文本或其他行内元素

里面不能放，特殊情况里面可以放块级元素

行内块inline-block

和其他行内或行内块级元素元素放置在同一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

line-height和height

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N6dvfmWF-1646544115479)(C:\Users\王畅\AppData\Roaming\Typora\typora-user-images\image-20220127215745787.png)]

三大特性

层叠性

层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。

举例，这就是样式冲突。

div{
    color:red;
}
div{
    color:blue;
}

原则通常出现样式冲突，会按CSS书写的顺序，以最后的样式为准。

样式不冲突，不会层叠。
样式冲突，遵循就近原则。长江后浪推前浪，后面样式盖前面。

继承性

说明简单的理解为—“子承父业“，是指子标签会继承父标签的==某些==样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
举例

<style>
    div{color:pink;font-size:20px;}
</style>
<div>
    <span>
        我是什么颜色的？
    </span>
</div>

注意

合理使用继承可以简化代码，降低CSS样式的复杂性。对于字体、字号、颜色、行距等**文本类属性**具有继承性，都可以在body中统一设置，然后影响文档中所有文本。
但是，并不是所有的CSS属性都可以继承，如边框、外边距、内边距、背景、定位、元素高度等**与块级元素相关的**属性都不具有继承性

优先级

在复杂CSS样式表，往往并不是相同样式不同值的堆叠这么简单，经常出现两个或多个不同样式规则应用在同一元素上，这时到底采用哪个样式呢？这就是典型的CSS优先级问题。

处理优先级问题，就是考虑样式权重的高低。这里先给大家介绍一些特殊的情况：

**继承样式的权重为0。**也就是说，在嵌套结构中，无论父元素样式权重多大，子元素继承时，应用在子元素上的权重都为0，即子元素定义的样式会覆盖所有继承来的样式。
**行内样式优先。**应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

CSS特殊性

说明或称非凡性，是需要用一套计算公式来去计算CSS的权重。CSS的权重是一个衡量CSS值优先级的一个标准，规则如下：用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

注意

继承的权重为 0。
数值之间没有进制计算，比如： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div等于一个类选择器的状况。
权重是用来计算优先级的，层叠是来表现优先级的。

总结优先级 !important>行内样式> ID 选择器>类(伪元素、伪类、属性)选择器>元素选择器>通用选择器

使用了 !important声明的规则。
内嵌在 HTML 元素的 style属性里面的声明。
使用了 ID 选择器的规则。
使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
使用了元素选择器的规则。
使用了通配符的规则。
同一类选择器则遵循就近原则。

盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。

行内元素可以设置左右margin

margin-left:auto 可以使元素居中

Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。

行内元素可以设置padding，但无法撑开盒子

Content(内容) - 盒子的内容，显示文本和图像。

元素的宽度和高度

重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

box-sizing 属性

值	说明
content-box	默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box	告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。注：border-box 不包含 margin。
inherit	指定 box-sizing 属性的值，应该从父元素继承

margin塌陷

任何元素都可以设置border 设置宽高可能无效行内元素设置padding，margin上下是无效的，左右是有效的

外边距合并：指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：如果这个外边距遇到另一个元素的外边距，它还会发生合并：

解决垂直外边距合并问题

为父元素定义上边框或者内边距
给父元素添加overflow:hidden
给最后面的元素加上浮动（left/right）
给最后一个元素加上display:inline-block;但是IE6和IE7下不完全支持display:inline-block，所以要加上*display:inline;zoom:1即可解决IE6、7的bug;

宽高属性设置百分比

子元素宽高设置百分比，是相对于父元素的包含块（一般是content区）来计算，即百分比*父元素包含块宽高

指出错误观念

许多开发者认为一个元素的包含块就是他的父元素的内容区，其实这是错误的（至少不完全正确）！一个元素的尺寸和位置经常受其包含块的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。下面我们看看盒模型：当浏览器展示一个文档的时候，对于每一个元素，它都产生了一个盒子。每一个盒子都被划分为四个区域： \1. 内容区 \2. 内边距区 \3. 边框区 \4. 外边距区

根元素html的包含块是一个矩形,叫做初始化包含块(initial containing block)。可以看到html外面还有空间，这个包含html的块就被称为初始包含块(initial containing block)，它是作为元素绝对定位和固定定位的参照物。对于连续媒体设备（continuous media），初始包含块的大小等于视口viewpor的大小，基点在画布的原点（视口左上角）；对于分页媒体（paged media），初始包含块是页面区域（page area）。初始包含块的direction属性与根元素的相同。

其他元素的包含块

大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样，下面就来学习如何确定这些元素的包含块。

如何确定元素的包含块？

确定包含块的过程完全依赖于这个包含块的 position 属性，大致分为下列场景： \1. 如果 position 属性是 static 或 relative 的话，包含块就是由它的最近的祖先块元素（比如说inline-block, block 或 list-item元素）或格式化上下文BFC(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘组成的。 \2. 如果 position 属性是 absolute 的话，包含块就是由它的最近的 position 的值不是 static （fixed, absolute, relative, or sticky）的祖先元素的内边距区的边缘组成的。 \3. 如果 position 属性是 fixed 的话，包含块就是由 viewport (in the case of continuous media) or the page area (in the case of paged media) 组成的。 \4. 如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的： A transform or perspective value other than none A will-change value of transform or perspective A filter value other than none or a will-change value of filter (only works on Firefox).

元素包含块的作用？

元素的尺寸和位置经常受其包含块的影响。对于一个绝对定位的元素来说（他的 position 属性被设定为 absolute 或 fixed），如果它的 width, height, padding, margin, 和 offset 这些属性的值是一个比例值（如百分比等）的话，那这些值的计算值就是由它的包含块计算而来的。简单来说，如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性： \1. height, top, bottom 这些属性由包含块的 height 属性的值来计算它的百分值。如果包含块的 height 值依赖于它的内容，且包含块的 position 属性的值被赋予 relative 或 static的话，这些值的计算值为0。 \2. width, left, right, padding, border，margin这些属性由包含块的 width 属性的值来计算它的百分值。说了这么多，其实只有在为当前元素设置百分比的长度样式时就必须要搞清楚当前元素的包含块是谁，然后再根据包含块元素的长度样式作为基数来计算当前元素的样式。

下面示例公用HTML代码

<body>
<section>
  <p>This is a paragraph!</p>
</section>
</body>

示例一

CSS代码

body {
background: beige;
}

section {
display: block;
width: 400px;
height: 160px;
background: lightgray;
}

p {
width: 50%;   /* == 400px * .5 = 200px */
height: 25%;  /* == 160px * .25 = 40px */
margin: 5%;   /* == 400px * .05 = 20px */
padding: 5%;  /* == 400px * .05 = 20px */
background: cyan;
}

在这里，这个P标签position为默认的static，所以它的包含块为Section标签，通过我们的判断规则一来确定。

示例二

CSS代码

body {
background: beige;
}

section {
display: inline;
background: lightgray;
}

p {
width: 50%;     /* == half the body's width */
height: 200px;  /* Note: a percentage would be 0 */
background: cyan;
}

在这里，这个P标签position为默认的static且它的父标签Section的display为inline，所以P标签的包含块为body标签，通过我们的判断规则一来确定。

示例三

CSS代码

body {
background: beige;
}

section {
transform: rotate(0deg);
width: 400px;
height: 160px;
background: lightgray;
}

p {
position: absolute;
left: 80px;
top: 30px;
width: 50%;   /* == 200px */
height: 25%;  /* == 40px */
margin: 5%;   /* == 20px */
padding: 5%;  /* == 20px */
background: cyan;
}

在这里，这个P标签position为absolute且它的父标签Section的transform不为none，所以P标签的包含块为Section标签，通过我们的判断规则四来确定。

示例四

CSS代码

body {
background: beige;
}

section {
position: absolute;
left: 30px;
top: 30px;
width: 400px;
height: 160px;
padding: 30px 20px;
background: lightgray;
}

p {
position: absolute;
width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
background: cyan;
}

在这里，这个P标签position为absolute且它的父标签Section的position不为static，所以P标签的包含块为Section标签的padding边缘算起（前提是不能 box-sizing设置为border-box），通过我们的判断规则二来确定。

示例五

CSS代码

body {
background: beige;
}

section {
width: 300px;
height: 300px;
margin: 30px;
padding: 15px;
background: lightgray;
}

p {
position: fixed;
width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
background: cyan;
}

在这里，这个P标签position为fixed,所以P标签的包含块为初始包含块（viewport），通过我们的判断规则三来确定。

网页布局

标准流（普通流/文档流）

浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

**由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样（脱标，不占标准流的空间）。**具有行内块的特性；注意只能压住标准流盒子，不能压住标准流的文字，标准流文字会环绕浮动元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-79d4Mon8-1646544115489)(C:\Users\王畅\AppData\Roaming\Typora\typora-user-images\image-20220129163512848.png)]

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

浮动不占标准流的空间，但是当要浮动的元素上方有不浮动的元素时，浮动元素不会覆盖上面的元素，即浮动只会影响浮动盒子后面的标准流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7PxrAXYM-1646544115491)(C:\Users\王畅\AppData\Roaming\Typora\typora-user-images\image-20220128172306925.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QmlkaiYL-1646544115491)(C:\Users\王畅\AppData\Roaming\Typora\typora-user-images\image-20220128172846547.png)]

特点

盖不住文本
浮动元素后面不是块级元素，后面的元素将会和它并排（除非设置了元素的宽度，并且屏幕放不下时将会换行）
浮动元素的上一个元素如果没有浮动，浮动只在当前行浮动；当浮动遇到浮动，它们将在一行排序，除非没有位置了
当元素设置定位值为absolute

标签： 16zs矩形连接器

锐单商城拥有海量元器件数据手册、 IC替代型号，打造电子元器件IC百科大全！

前端笔记1

元素定义一个大标题

to

最近热搜

历史搜索 清除历史记录

历史搜索清除历史记录