元素周期表

118 元素/详细信息/配色

416 次访问

元素周期表 · 118 元素

关于本工具

了解工具定位 · 使用场景 · 对比优势

使用场景

🔬

化学备课素材

中学化学老师备课时需要快速查找元素符号、原子序数、相对原子质量、电子层排布等基础数据。本工具以表格加卡片形式展示全部 118 种元素,点击任一元素即可展开详细信息,省去翻教材或百度的时间,一页搞定课堂板书和习题设计的素材准备。

🎨

UI 配色方案

前端设计师在做数据可视化或科学类网站时,需要一套与化学元素对应的色彩系统。本工具为每个元素提供了专属配色(如氢的浅蓝、金的金黄),可直接作为图表配色参考或色值提取来源,省去手动查阅 Pantone 或配色网站的时间。

📝

化学作业自查

高中生做元素推断题或配平方程式时,需要快速确认某元素的化合价、常见同位素、族周期位置等属性。打开本工具输入元素名称或符号,一秒调出完整信息,比翻书快、比百度无广告,适合刷题间隙的即时查证。

⚗️

实验安全核对

实验室管理员或研究生准备实验前,需确认所用元素的危险性、储存条件或反应特性。本工具卡片中若包含元素的安全等级(如易燃、有毒、放射性)或常见化合物信息,可辅助快速筛查,避免因记忆模糊导致操作失误。

📊

科普内容配图

科普博主或编辑制作化学相关图文 / 视频时,需要一张清晰、有配色的元素周期表作为底图或标注素材。本工具以网页形式提供完整周期表,截图即可使用,配色统一、信息完整,省去自己画表或从模糊图片里抠数据的麻烦。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A(Ptable.com)传统方法(纸质/PDF 周期表)
数据隐私纯浏览器,零上传,无需后端浏览器端渲染,无上传,但含第三方追踪脚本完全离线,无数据外泄风险
处理速度即时渲染,点击即显示详情页面加载需 2-3 秒,详情页切换流畅翻页查找,每次 10-30 秒
离线可用完全离线(安装后/缓存后)需联网加载,离线功能有限完全离线,无需任何设备
交互深度点击元素弹出完整详情(电子构型/同位素/历史)点击跳转至独立详情页,信息层级深仅静态表格,无交互,信息固定
信息更新数据随开源库更新,可及时修正由社区维护,更新周期不定印刷版固定,无法更新
自定义配色支持用户自定义元素配色方案不支持配色自定义不支持配色自定义
搜索与过滤支持按名称/符号/原子序数/分类搜索过滤支持搜索,但无分类过滤无搜索功能,需手动查找
平台兼容纯 HTML/CSS/JS,所有现代浏览器可用桌面端优先,移动端适配一般纸质版通用,PDF 需阅读器

使用指南

上手步骤 · 输入输出 · 避坑提示

输入输出示例8 个典型场景,覆盖常规、边界与易错

输入输出说明
Fe铁(Iron) | 原子序数 26 | 原子量 55.845 | 熔点 1538°C | 密度 7.874 g/cm³ | 元素类别 过渡金属 | 电子排布 [Ar] 3d⁶4s² | 配色 #B0B0B0(银灰色)典型常规场景:最常用的元素符号查询
O氧(Oxygen) | 原子序数 8 | 原子量 15.999 | 熔点 -218.79°C | 密度 1.429 g/L | 元素类别 非金属 | 电子排布 [He] 2s²2p⁴ | 配色 #FF0000(红色)典型常规场景:常见气体元素,注意密度单位为 g/L
Uuo鿫(Oganesson) | 原子序数 118 | 原子量 294 | 熔点 未知 | 密度 未知 | 元素类别 稀有气体 | 电子排布 [Rn] 5f¹⁴6d¹⁰7s²7p⁶ | 配色 #C0FFFF(浅蓝)边界 case:周期表最后一个元素,部分物性数据缺失
H氢(Hydrogen) | 原子序数 1 | 原子量 1.008 | 熔点 -259.16°C | 密度 0.08988 g/L | 元素类别 非金属 | 电子排布 1s¹ | 配色 #FFFFFF(白色)边界 case:原子序数最小的元素,电子排布最简
C碳(Carbon) | 原子序数 6 | 原子量 12.011 | 熔点 3550°C(石墨升华) | 密度 2.267 g/cm³(石墨) | 元素类别 非金属 | 电子排布 [He] 2s²2p² | 配色 #808080(灰色)易错 case:碳有多种同素异形体,熔点/密度以石墨为准
Hg汞(Mercury) | 原子序数 80 | 原子量 200.59 | 熔点 -38.83°C | 密度 13.534 g/cm³ | 元素类别 过渡金属 | 电子排布 [Xe] 4f¹⁴5d¹⁰6s² | 配色 #C0C0C0(银色)典型常规场景:常温下唯一液态金属,熔点特殊
Ts鿬(Tennessine) | 原子序数 117 | 原子量 294 | 熔点 未知 | 密度 未知 | 元素类别 卤素 | 电子排布 [Rn] 5f¹⁴6d¹⁰7s²7p⁵ | 配色 #C0FFFF(浅蓝)边界 case:人工合成超重元素,仅理论预测值
S硫(Sulfur) | 原子序数 16 | 原子量 32.06 | 熔点 115.21°C | 密度 2.067 g/cm³ | 元素类别 非金属 | 电子排布 [Ne] 3s²3p⁴ | 配色 #FFFF00(黄色)易错 case:硫有多种同素异形体,物性以斜方硫为准

常见错误对照7 个常踩的坑 · 错误 → 修复

1. 用中文或拼音搜索元素符号

错误
输入“铁”或“tie”
修复
输入“Fe”或“26”

元素周期表工具按国际标准识别:元素符号(Fe)、原子序数(26)、英文名(Iron)。中文名和拼音不在匹配规则内。

2. 把族/周期序号当原子序数输入

错误
输入“1”想找氢(H),实际搜到了氢(1号)
修复
明确要查第1族(碱金属)时,使用“族筛选”功能而非搜索框

搜索框默认按原子序数精确匹配,族/周期是分类筛选维度。输入数字1时,工具只返回原子序数为1的氢元素。

3. 混淆质量数与原子量

错误
认为氧元素的原子量是16.00(精确值)
修复
查看氧元素的“相对原子质量”字段,显示为15.999(非整数)

原子量是同位素丰度加权平均值,不是单一同位素的质量数。工具显示的是IUPAC标准原子量,保留三位小数。

4. 把电子排布式当完整轨道填充顺序

错误
看到Fe的排布是[Ar] 3d⁶4s²,认为4s在3d之前填充
修复
参考“轨道填充顺序”辅助说明:4s先于3d填充,但书写时按主量子数排序写为3d⁶4s²

电子排布书写遵循主量子数升序(1s<2s<2p<3s<3p<3d<4s),但实际填充按构造原理(4s<3d)。工具显示的是标准书写格式。

5. 忽略同位素下拉列表

错误
看到碳的原子量12.011,以为所有碳原子都是12.011
修复
展开“同位素”折叠面板,查看C-12、C-13、C-14各自的精确质量数和丰度

工具在元素详情页提供同位素列表,显示各同位素质量数和天然丰度。原子量是这些同位素的加权平均值,不是单一值。

6. 把颜色编码当成物理属性

错误
看到钠元素卡片是黄色,认为钠单质是黄色固体
修复
颜色编码仅用于区分元素类别(金属/非金属/稀有气体等),与单质外观无关

配色方案按元素大类划分:金属(蓝)、非金属(绿)、稀有气体(紫)等。钠单质是银白色金属,卡片颜色不代表实物颜色。

7. 在移动端误触长按弹出菜单

错误
长按元素卡片后弹出系统菜单,以为工具卡死了
修复
短按(点击)打开详情页,长按是浏览器默认行为(复制链接/分享)

工具未禁用系统默认长按手势。移动端用户应使用单击操作,长按会触发浏览器原生菜单而非工具功能。

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

Z = N + A

变量说明

  • Z — 原子序数(质子数)
  • N — 中子数
  • A — 质量数(质子数+中子数)

示例

碳-14 同位素:质量数 A=14,质子数 Z=6,则中子数 N = A - Z = 14 - 6 = 8。该原子核含 6 个质子、8 个中子。

适用范围

适用于所有原子核,是核素标识的基本关系式。不适用于反物质或极端相对论粒子(如介子),数据源自国际纯粹与应用化学联合会(IUPAC)核素定义。

原理图

用户操作点击/搜索元素前端本地处理读取内置 118 元素数据匹配原子序数/符号/分类渲染结果显示详细信息卡片分类配色标识用户操作点击元素卡片前端本地处理展开详细属性原子量/电子排布/熔点等渲染结果展示完整详情面板支持复制/分享所有数据预置在前端,无需服务端请求,即时响应
用户操作 前端本地处理 渲染结果

开发者集成

3 种主流语言 · 复制即用

import json

# 元素数据(简化版,仅示例前5个元素)
elements = [
    {"symbol": "H", "name": "氢", "atomic_number": 1, "atomic_mass": 1.008, "group": 1, "period": 1, "color": "#FFFFFF"},
    {"symbol": "He", "name": "氦", "atomic_number": 2, "atomic_mass": 4.003, "group": 18, "period": 1, "color": "#D9FFFF"},
    {"symbol": "Li", "name": "锂", "atomic_number": 3, "atomic_mass": 6.941, "group": 1, "period": 2, "color": "#CC80FF"},
    {"symbol": "Be", "name": "铍", "atomic_number": 4, "atomic_mass": 9.012, "group": 2, "period": 2, "color": "#C2FF00"},
    {"symbol": "B", "name": "硼", "atomic_number": 5, "atomic_mass": 10.81, "group": 13, "period": 2, "color": "#FFB5B5"}
]

# 根据符号查询元素详情
def get_element(symbol):
    for e in elements:
        if e["symbol"] == symbol:
            return e
    return None

# 示例:查询锂
result = get_element("Li")
if result:
    print(json.dumps(result, ensure_ascii=False, indent=2))
else:
    print("未找到该元素")
package main

import (
	"encoding/json"
	"fmt"
)

// Element 元素结构
type Element struct {
	Symbol      string  `json:"symbol"`
	Name        string  `json:"name"`
	AtomicNumber int    `json:"atomic_number"`
	AtomicMass  float64 `json:"atomic_mass"`
	Group       int     `json:"group"`
	Period      int     `json:"period"`
	Color       string  `json:"color"`
}

var elements = []Element{
	{Symbol: "H", Name: "氢", AtomicNumber: 1, AtomicMass: 1.008, Group: 1, Period: 1, Color: "#FFFFFF"},
	{Symbol: "He", Name: "氦", AtomicNumber: 2, AtomicMass: 4.003, Group: 18, Period: 1, Color: "#D9FFFF"},
	{Symbol: "Li", Name: "锂", AtomicNumber: 3, AtomicMass: 6.941, Group: 1, Period: 2, Color: "#CC80FF"},
}

func getElement(symbol string) *Element {
	for _, e := range elements {
		if e.Symbol == symbol {
			return &e
		}
	}
	return nil
}

func main() {
	elem := getElement("Li")
	if elem != nil {
		data, _ := json.MarshalIndent(elem, "", "  ")
		fmt.Println(string(data))
	} else {
		fmt.Println("未找到该元素")
	}
}
// 元素数据(简化版)
const elements = [
  { symbol: 'H', name: '氢', atomicNumber: 1, atomicMass: 1.008, group: 1, period: 1, color: '#FFFFFF' },
  { symbol: 'He', name: '氦', atomicNumber: 2, atomicMass: 4.003, group: 18, period: 1, color: '#D9FFFF' },
  { symbol: 'Li', name: '锂', atomicNumber: 3, atomicMass: 6.941, group: 1, period: 2, color: '#CC80FF' },
  { symbol: 'Be', name: '铍', atomicNumber: 4, atomicMass: 9.012, group: 2, period: 2, color: '#C2FF00' },
  { symbol: 'B', name: '硼', atomicNumber: 5, atomicMass: 10.81, group: 13, period: 2, color: '#FFB5B5' }
];

// 根据符号查询元素
function getElement(symbol) {
  return elements.find(e => e.symbol === symbol) || null;
}

// 示例:查询锂
const result = getElement('Li');
if (result) {
  console.log(JSON.stringify(result, null, 2));
} else {
  console.log('未找到该元素');
}

常见问题

8 个高频疑问

这个在线元素周期表能点开每个元素看详细数据吗?
可以。每个元素卡片都可以点击,展开后显示原子序数、原子量、电子排布、熔点沸点、密度、电负性、发现年份等 10+ 项数据。数据源基于 IUPAC 最新标准(2024 年版),其中原子量为加权平均原子量(如氯显示 35.45),不是单一同位素质量。点击后右侧或弹出面板展示全部字段,支持直接复制元素符号、名称、英文名到剪贴板。
元素周期表上的颜色代表什么含义?
颜色按元素大类分区:金属(蓝系)、非金属(绿系)、类金属(紫系)、稀有气体(灰系)、镧系锕系各用独立色系。具体配色逻辑:碱金属用暖蓝、碱土金属用冷蓝、过渡金属用深蓝、卤素用青绿、稀有气体用浅灰。鼠标悬停或点击时颜色高亮对比更明显,方便快速区分族类。色盲用户可开启「文字标签模式」,卡片上直接显示「碱金属」「过渡金属」等文字分类。
为什么我查到的某个元素数据(比如熔点)和课本/维基百科不一样?
差异通常来自数据版本和条件标注。本工具采用 IUPAC 2024 年推荐值(如氧的原子量 15.999),但课本可能是旧版(如氧 16.00)。熔点的差异更常见:本工具标注的是标准大气压下的熔点,但某些元素在加压条件下数值不同(如碳的升华点 3642°C 是 1atm 下的数据,高压下会变化)。如果发现明显错误,可以反馈具体元素名和来源,数据每月校准一次。
能按「原子序数」「原子量」「电负性」排序吗?怎么操作?
可以。页面顶部或侧边有排序下拉菜单,默认按原子序数(1-118)排列。切换为「原子量」时按轻重排序(氢→氦→锂...但注意同位素差异,如氘显示的原子量是 2.014,会排在氦 4.002 前面)。「电负性」排序按鲍林标度(氟 3.98 最高,钫 0.7 最低)。排序后表格重新渲染,不是简单列表,仍然保留元素卡片样式和颜色分区。
这个工具需要联网才能用吗?离线能不能查?
首次加载后可以离线使用。所有元素数据(118 个元素 + 详细参数)打包在页面初始加载的 JavaScript 文件中,尺寸约 280KB。一旦页面完全加载,断网后仍然可以点击查看、排序、搜索。唯一需要联网的功能是「反馈纠错」和「更新数据」——如果数据版本更新(IUPAC 发布新标准),页面会提示刷新获取最新版。
搜索元素时输入中文名、英文名、元素符号都能搜到吗?
都能。搜索框支持三种输入方式:中文名称(如「氧」或「氧气」→氧)、英文名称(如 oxygen →氧)、元素符号(如 O →氧)。也支持部分别名(如「水银」→汞,「白金」→铂)。不支持分子式搜索(如输入 H2O 不会返回氢和氧),因为这是元素周期表,不是分子查询工具。搜索后高亮匹配结果,按匹配度排序。
手机上看元素周期表太小,能放大或横屏显示吗?
支持。手机端默认竖屏显示为「紧凑卡片模式」,每个元素约 48px 宽,可点击展开详情。横屏自动切换为「完整表格模式」,显示全部 18 列。也支持两根手指捏合缩放(从 0.5x 到 3x),缩放时卡片内的文字大小自动适配。如果觉得默认字号太小,可以在右上角设置中调整「字体大小」为小/中/大三档,大字号下卡片内数据会换行显示。
为什么 118 号元素之后(比如 119、120)没有数据?什么时候更新?
目前 IUPAC 官方确认的元素只到 118 号(Og,气奥)。119 号(Uue)和 120 号(Ubn)虽在实验合成中(俄罗斯 JINR、日本 RIKEN 等机构),但尚未被 IUPAC 正式认可,因此不显示。如果未来 IUPAC 确认新元素,本工具会在 1 个月内更新数据。可以关注 IUPAC 官网的「元素发现」公告,或在本工具页面上点击「检查更新」查看最新版本号。
选择 打开 +新窗口 esc关闭