当前位置： 首页 > news >正文

html5cssjs代码 023 公制计量单位进位与换算表

news 2026/4/19 13:25:39

html5&css&js代码 023 公制计量单位进位与换算表

  • 一、代码
  • 二、解释

这段HTML代码定义了一个网页，用于展示公制计量单位的进位与换算表。

在这里插入图片描述

一、代码

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="utf-8"/><title>公制计量单位进位与换算表</title><style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;background-color: #222;color: #fff;display: block;text-align: center;}table {margin: 0 auto;border-collapse: collapse;width: 80%;max-width: 1000px;}th, td {text-align: left;padding: 10px;border: 1px solid #444;}th {text-align: center;font-size: 1.5em;background-color: #333;color: #eeeeee;}tr:nth-child(even) {background-color: #282828;}.sh {color: #ffa500;font-size: 1.5em;font-weight: bold;}</style>
</head>
<body>
<h1>公制计量单位进位与换算表</h1>
<table><thead><tr><th>单位</th><th>换算关系</th></tr></thead><tbody><!-- 长度单位 --><tr><td class="sh" colspan="2">长度单位</td></tr><tr><td>公里 (km)</td><td>1 km = 1000 米 (m)</td></tr><tr><td>米 (m)</td><td>1 m = 10 分米 (dm)</td></tr><tr><td>分米 (dm)</td><td>1 dm = 10 厘米 (cm)</td></tr><tr><td>厘米 (cm)</td><td>1 cm = 10 毫米 (mm)</td></tr><tr><td>毫米 (mm)</td><td>1 mm = 1000 微米 (µm)</td></tr><tr><td>微米 (µm)</td><td>1 µm = 1000 纳米 (nm)</td></tr><!-- 面积单位 --><tr><td class="sh" colspan="2">面积单位</td></tr><tr><td>平方公里 (km²)</td><td>1 km² = 1,000,000 平方米 (m²)</td></tr><tr><td>平方米 (m²)</td><td>1 m² = 10,000 平方厘米 (cm²)</td></tr><tr><td>平方厘米 (cm²)</td><td>1 cm² = 100 平方毫米 (mm²)</td></tr><!-- 体积与容量单位 --><tr><td class="sh" colspan="2">体积与容量单位</td></tr><tr><td>立方米 (m³)</td><td>1 m³ = 1000 升 (L)</td></tr><tr><td>升 (L)</td><td>1 L = 1000 毫升 (mL)</td></tr><tr><td>毫升 (mL)</td><td>1 mL = 1 立方厘米 (cm³)</td></tr><!-- 质量单位 --><tr><td class="sh" colspan="2">质量单位</td></tr><tr><td>吨 (t)</td><td>1 t = 1000 千克 (kg)</td></tr><tr><td>千克 (kg)</td><td>1 kg = 1000 克 (g)</td></tr><tr><td>克 (g)</td><td>1 g = 1000 毫克 (mg)</td></tr><tr><td>毫克 (mg)</td><td>1 mg = 1000 微克 (µg)</td></tr><!-- 时间单位 --><tr><td class="sh" colspan="2">时间单位</td></tr><tr><td>年</td><td>1 年 ≈ 365.25 天 (d)</td></tr><tr><td>天 (d)</td><td>1 d = 24 小时 (h)</td></tr><tr><td>小时 (h)</td><td>1 h = 60 分钟 (min)</td></tr><tr><td>分钟 (min)</td><td>1 min = 60 秒 (s)</td></tr><tr><td>秒 (s)</td><td>1 s = 1000 毫秒 (ms)</td></tr><tr><td>毫秒 (ms)</td><td>1 ms = 1000 微秒 (µs)</td></tr><!-- 温度单位 --><tr><td class="sh" colspan="2">温度单位</td></tr><tr><td>摄氏度 (°C)</td><td>K = °C + 273.15 (开尔文温度)</td></tr><tr><td>开尔文 (K)</td><td>°C = K - 273.15 (摄氏度)</td></tr></tbody>
</table>
</body>
<footer style="text-align: center;margin: 30px;font-size: 1.5rem;font-weight: bold;color: #ffcc00;">HTML+CSS+JavaScript编程配套代码 作者：明月看潮生
</footer>
</html>

二、解释

这段HTML代码定义了一个网页，用于展示公制计量单位的进位与换算表。网页采用了基本的HTML结构，包括<!DOCTYPE html>声明、<html>标签、<head>标签和<body>标签等。
在<head>部分，设置了网页的语言为简体中文，指定了字符编码为UTF-8，以及定义了一个CSS样式表，用于美化网页的显示效果。
在<body>部分，首先使用<h1>标签显示网页的标题，然后使用<table>标签创建一个表格，用于展示各种计量单位之间的换算关系。表格中包含了长度单位、面积单位、体积与容量单位、质量单位、时间单位和温度单位等。每个单位都用标签表示一行，其中<td>标签用于显示单元格中的内容，而<th>标签则用于显示表头。
此外，还使用了CSS类sh来标识并设置章节标题的样式，使得其在表格中更加突出。最后，在网页的底部使用<footer>标签添加了一个页脚，显示了代码的作者信息。
整体而言，这段HTML代码通过表格和样式的方式，清晰地呈现了公制计量单位之间的进位与换算关系，方便用户查阅和学习。

相关文章：

html5cssjs代码 023 公制计量单位进位与换算表

html5&css&js代码 023 公制计量单位进位与换算表 一、代码二、解释 这段HTML代码定义了一个网页&#xff0c;用于展示公制计量单位的进位与换算表。 一、代码 <!DOCTYPE html> <html lang"zh-cn"> <head><meta charset"utf-8&quo…...

编程日记 2024/3/21 3:46:32

UE5.3 StateTree使用实践

近期浏览UE的CitySample&#xff08;黑客帝国Demo&#xff09;&#xff0c;发现有不少逻辑用到了StateTree学习一下&#xff0c;StateTree是多层状态机实现&#xff0c;以组件的形式直接挂载在蓝图中运行。 与平时常见的一些FSM库不同&#xff0c;StateTree并不会返回给外界当…...

编程日记 2024/3/21 3:44:30

【09】进阶JavaScript事件循环Promise

一、事件循环 浏览器的进程模型 何为进程？ 程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程 每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。 何为线程？ 有了进程后，就可以运行程序的代码了。 运行代码的「人」称之…...

编程日记 2024/3/21 3:40:25

蓝桥备赛----基本语法总结

文章目录 输入输出知识点总结 输入 单个 #单个输入n input() #无参数 默认返回字符串n input("有提示参数的输入") #有提示性输入语句的输入&#xff0c;仍是以str类型返回n int(input()) #根据给定的类型输入&#xff0c;返回值类型intn float(input()) #根据…...

编程日记 2024/3/21 3:37:23

基于 Echarts + Python Flask ，我搭建了一个动态实时大屏监管系统

一、效果展示 1. 动态实时更新数据效果图 2. 鼠标右键切换主题 二、确定需求方案 支持Windows、Linux、Mac等各种主流操作系统&#xff1b;支持主流浏览器Chrome&#xff0c;Microsoft Edge&#xff0c;360等&#xff1b;服务器采用python语言编写&#xff0c;配置好python环…...

编程日记 2024/3/21 3:33:19

针对教育行业的网络安全方案有哪些

智慧校园”是教育信息化进入高级阶段的表现形式&#xff0c;比“数字校园”更先进。集体知识共融、共生、业务应用融合创新、移动互联网物联网高速泛在是其重要特征。特别是在互联网教育的大环境下&#xff0c;为了更好的发挥智慧化教学服务和智慧化教学管理功能&#xff0c;需…...

编程日记 2024/3/21 3:32:18

C++ 编程入门指南：深入了解 C++ 语言及其应用领域

C 简介 什么是 C&#xff1f; C 是一种跨平台的编程语言&#xff0c;可用于创建高性能应用程序。 C 是由 Bjarne Stroustrup 开发的&#xff0c;作为 C 语言的扩展。 C 为程序员提供了对系统资源和内存的高级控制。 该语言在 2011 年、2014 年、2017 年和 2020 年进行了 4…...

编程日记 2024/3/21 3:29:15

latex变量上下加自适应长度箭头

latex变量上下加自适应长度箭头 在变量上加箭头的代码如下 % 在上 \overrightarrow{A B} \overleftarrow{A B} % 在下 \underrightarrow{A B} \underleftarrow{A B}得出的结果依次如下 A B → , A B ← , A B → , A B ← \overrightarrow{A B},\overleftarrow{A B}, \under…...

编程日记 2024/3/21 3:28:14

鸿蒙4.0ArkUI快速入门（一）应用模型

ArkUI篇 应用模型Stage模型FA模型模型对比 应用模型 应用模型是HarmonyOS为开发者提供的应用程序所需能力的抽象提炼&#xff0c;它提供了应用程序必备的组件和运行机制。 HarmonyOS先后提供了两种应用模型&#xff1a; FA&#xff08;Feature Ability&#xff09;模型&…...

编程日记 2024/3/21 3:27:12

C++ UML类图

参考文章&#xff1a; &#xff08;1&#xff09;C UML类图详解 &#xff08;2&#xff09;C基础——用C实例理解UML类图 &#xff08;3&#xff09;C设计模式——UML类图 &#xff08;4&#xff09;[UML] 类图介绍 —— 程序员&#xff08;灵魂画手&#xff09;必备画图技能之…...

编程日记 2024/3/21 3:25:10

Java SE入门及基础（44）

目录 I / O流(上) 1. 什么是I / O流 过程分析 I / O的来源 Java 中的 I / O流 2. 字节流 OutputStream 常用方法 文件输出流 FileOutputStream 构造方法 示例 InputStream 常用方法 文件输入流 FileInputStream 构造方法 示例 综合练习 字节流应用场景 Java SE文…...

编程日记 2024/3/21 3:20:05

基于Wechaty的微信机器人

git地址&#xff1a;GitHub - wechaty/getting-started: A Starter Project Template for Wechaty works out-of-the-boxhttps://github.com/wechaty/getting-started 在 Terminal中npm install 下载node包 加载完成后。npm start 启动 扫描二维码&#xff0c;即可登录微信web端…...

编程日记 2024/3/21 3:17:02

【C++ leetcode】双指针问题（续）

3. 202 .快乐数 题目 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变不到 1。如果这个过程 结…...

编程日记 2024/3/21 3:16:01

51单片机-蜂鸣器

1.蜂鸣器的介绍 无源蜂鸣器不能一直通电&#xff0c;无源蜂鸣器内部的线圈较小&#xff0c;易烧坏 蜂鸣器的驱动 达林顿晶体管&#xff08;npn型&#xff09; 应用&#xff1a; 按下独立按键同时蜂鸣器响起提示音&#xff0c;数码管显示对应的独立按键键码 #include <REG…...

编程日记 2024/3/21 3:15:00

【MySQL】学习和总结使用列子查询查询员工工资信息

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-5odctDvQ0AHJJc1C {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…...

编程日记 2024/3/21 3:12:59

突破编程_C++_STL教程（ stack 的实战应用）

1 std::stack 应用于自定义数据结构 通常&#xff0c;std::stack 用于存储基本数据类型&#xff0c;如 int、float、char 等。然而&#xff0c;std::stack 同样可以存储自定义的数据结构&#xff0c;只要这些数据结构满足一定的要求。 &#xff08;1&#xff09;存储自定义数…...

编程日记 2024/3/21 3:10:57

Spring Data访问Elasticsearch----其他Elasticsearch操作支持

Spring Data访问Elasticsearch----其他Elasticsearch操作支持 一、索引设置二、索引映射三、Filter Builder四、为大结果集使用滚动Scroll五、排序选项六、运行时字段6.1 索引映射中的运行时字段定义6.2 在查询上设置的运行时字段定义 七、Point In Time (PIT) API八、搜索模板…...

编程日记 2024/3/21 3:09:55

代码随想录算法训练营第60天 | 84.柱状图中最大的矩形

单调栈章节理论基础&#xff1a; https://leetcode.cn/problems/daily-temperatures/ 84.柱状图中最大的矩形 题目链接&#xff1a;https://leetcode.cn/problems/largest-rectangle-in-histogram/description/ 思路&#xff1a; 本题双指针的写法整体思路和42. 接雨水是一…...

编程日记 2024/3/21 3:05:52

【讲解Node.js常用的命令】进阶版

Node.js常用命令 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境&#xff0c;它使得可以在服务器端运行 JavaScript 代码。Node.js 采用了事件驱动、非阻塞 I/O 模型&#xff0c;非常适用于构建高效的网络应用程序。以下是一些Node.js开发中常用的命令&#xff1…...

编程日记 2024/3/21 2:59:45

软考81-上午题-【面向对象技术3-设计模式】-行为型设计模式01

一、行为型设计模式一览 二、责任链模式 2-1、意图 使多个对象都有机会处理请求&#xff0c;从而避免请求的发送者和接收者之间的耦合关系。将这些对象连成一条链&#xff0c;并沿着这条链传递该请求&#xff0c;直到有一个对象处理它为止。 1-2、结构 1-3、代码实现 1-4、适…...

编程日记 2024/3/21 2:57:43

从论文到代码：手把手复现CVPR2019人体解析冠军模型SCHP

从论文到代码&#xff1a;手把手复现CVPR2019人体解析冠军模型SCHP 在计算机视觉领域&#xff0c;人体解析&#xff08;Human Parsing&#xff09;一直是极具挑战性的研究方向。这项技术需要将人体图像中的每个像素精确分类到不同语义部位&#xff0c;如头发、上衣、裤子等。20…...

编程新知 2026/4/19 13:18:34

小心数据被‘卷’没！玩转24C02页写时必须搞懂的地址翻转与边界检查

小心数据被‘卷’没&#xff01;玩转24C02页写时必须搞懂的地址翻转与边界检查 在嵌入式开发中&#xff0c;I2C EEPROM存储器的使用频率极高&#xff0c;而24C02作为经典型号&#xff0c;其页写功能既能提升效率又暗藏风险。许多开发者都曾遭遇过这样的噩梦&#xff1a;明明写入…...

编程新知 2026/4/19 12:49:15

java面试必问14：MySQL 索引类型：从基础到优化，面试官给你点赞

MySQL 索引类型&#xff1a;从基础到优化&#xff0c;一篇讲透面试官&#xff1a;“MySQL 有哪些索引类型&#xff1f;” 你&#xff1a;“主键索引、唯一索引、普通索引、复合索引、全文索引。索引能大大加快查询速度&#xff0c;但会降低增删改的性能。” 面试官&#xff1a;…...

编程新知 2026/4/19 12:49:15

AD9361实战笔记：手把手教你配置Tx功率监控（TPM）与RSSI校准

AD9361实战笔记&#xff1a;手把手教你配置Tx功率监控&#xff08;TPM&#xff09;与RSSI校准 在射频系统设计中&#xff0c;精确的功率监控和信号强度测量是确保通信质量的关键环节。AD9361作为一款高度集成的射频收发器&#xff0c;其内置的发射功率监控&#xff08;TPM&…...

编程新知 2026/4/19 12:15:22

为什么你的手写笔记在高分辨率屏幕上总是模糊？Xournal++渲染优化终极指南

为什么你的手写笔记在高分辨率屏幕上总是模糊&#xff1f;Xournal渲染优化终极指南 【免费下载链接】xournalpp Xournal is a handwriting notetaking software with PDF annotation support. Written in C with GTK3, supporting Linux (e.g. Ubuntu, Debian, Arch, SUSE), ma…...

编程新知 2026/4/19 11:48:40

软考架构设计师论文 —— 论系统性能测试技术及其应用（1）

论题 随着互联网应用规模化、业务场景复杂化，系统在高并发、大数据量场景下的性能表现直接影响用户体验与业务连续性 —— 响应延迟、并发处理能力不足、资源耗尽等问题可能导致用户流失或重大业务损失。性能测试作为软件质量保障的核心环节，通过模拟真实业务负载验证系统的…...

编程新知 2026/4/19 11:34:29

别再死记硬背了！用‘借书还书’的例子，5分钟搞懂数据库1NF到BCNF

图书馆借阅系统里的数据库范式&#xff1a;从1NF到BCNF的实战推演 想象你走进一家老式图书馆&#xff0c;木质书架散发着油墨香气&#xff0c;管理员正用纸质登记簿记录借阅信息。某天&#xff0c;馆长决定数字化管理&#xff0c;请你设计数据库。当你翻开《数据库系统概论》&a…...

编程新知 2026/4/19 9:57:12

如何用Python实现剪映自动化：10倍提升视频剪辑效率的完整指南

如何用Python实现剪映自动化&#xff1a;10倍提升视频剪辑效率的完整指南 【免费下载链接】JianYingApi Third Party JianYing Api. 第三方剪映Api 项目地址: https://gitcode.com/gh_mirrors/ji/JianYingApi 还在为重复的视频剪辑工作烦恼吗&#xff1f;每天手动添加水…...

编程新知 2026/4/19 8:03:32

智能代码生成与代码推荐结合的7层融合架构（工业级落地白皮书首次公开）

第一章&#xff1a;智能代码生成与代码推荐结合的7层融合架构&#xff08;工业级落地白皮书首次公开&#xff09; 2026奇点智能技术大会(https://ml-summit.org) 该架构已在头部云厂商DevOps平台完成全链路验证&#xff0c;日均支撑超280万次代码补全请求&#xff0c;平均延迟…...

编程新知 2026/4/19 7:38:50

Qwen2.5-7B-Instruct出版行业应用：图书简介+营销推文+审校意见生成

Qwen2.5-7B-Instruct出版行业应用&#xff1a;图书简介营销推文审校意见生成 如果你在出版行业工作&#xff0c;每天是不是都在为这些事头疼&#xff1f;一本新书要上市了&#xff0c;得写几百字的简介&#xff0c;既要吸引人又不能剧透&#xff1b;社交媒体上得发推文&#x…...

编程新知 2026/4/19 5:45:03