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

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

news 2026/6/3 15:53:01

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

第三幕 御酒掺土，江山为祭

金牌监制&#xff0c;您这一刀改得极其精准&#xff0c;直接把整部戏的格局从“江湖恩怨”拉升到了“家国博弈”的层面&#xff01;确实&#xff0c;如果只谈慈悲&#xff0c;唐三藏只是个高僧&#xff1b;但如果加上李世民的重托和大唐的国运&#xff0c;他就是一个背负着沉重…...

编程新知 2026/5/26 3:09:54

ARM PMU外部接口与性能监控寄存器详解

1. ARM性能监控寄存器外部接口深度解析性能监控单元(PMU)是现代处理器架构中用于硬件性能分析的核心模块&#xff0c;它通过一组可编程计数器实时捕获处理器微架构层面的各类事件。在ARMv8/v9架构中&#xff0c;PMU不仅可以通过系统寄存器访问&#xff0c;还提供了标准化的外部…...

编程新知 2026/5/26 2:31:36

新能源车轻量化为什么开始盯上高强镁合金？

续航&#xff0c;是悬在每一台纯电动汽车头上的达摩克利斯之剑。多充一度电、多堆一些正极材料&#xff0c;是一条路&#xff1b;但还有另一条路——把车造得更轻。 SAE&#xff08;美国汽车工程师学会&#xff09;的测算已经被反复引用&#xff1a;整车每减重100千克&#xff…...

编程新知 2026/5/26 0:32:21

Unity iOS构建报错SDK version is 0的根因与精准修复

1. 这个报错不是Unity在“发脾气”&#xff0c;而是工程配置在“装死”刚接手一个老项目&#xff0c;打开Unity编辑器&#xff0c;点Build Settings准备打包iOS&#xff0c;结果弹出一行红字&#xff1a;“SDK version is 0, cannot build”。我第一反应是——这什么鬼&#xf…...

编程新知 2026/5/25 22:42:38

深度解析：JetBrains IDE试用期重置机制的技术实现

深度解析&#xff1a;JetBrains IDE试用期重置机制的技术实现 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 在软件开发工作流中&#xff0c;JetBrains IDE试用期管理是一个常见的技术挑战&#xff0c;尤其是在多…...

编程新知 2026/5/25 18:03:56

【RT-DETR实战】070、模型分析工具：PyTorch Profiler性能分析

上周在部署RT-DETR到边缘设备时遇到一个诡异现象：模型推理时延波动极大，有时30ms，偶尔突然跳到200ms。 盯着代码看了半天没发现逻辑问题，数据流也正常。这种时候，靠猜是没用的，必须上性能分析工具——PyTorch Profiler。 今天我们就来聊聊怎么用它揪出那些藏在细节里的…...

编程新知 2026/5/25 17:36:33

智能烹饪助手：基于传感器融合与AI的厨房自动化实践

1. 项目概述&#xff1a;一个让厨房小白也能自信下厨的智能伙伴每次站在灶台前&#xff0c;你是不是也经历过这样的场景&#xff1a;一边手忙脚乱地翻着菜谱&#xff0c;一边担心锅里的菜是不是快糊了&#xff0c;还要分心去计算各种调料该放多少&#xff1f;对于很多刚接触烹饪…...

编程新知 2026/5/27 6:38:35

关于内卷，几个值得深想的洞察

首先声明&#xff1a;这篇不劝躺平&#xff0c;也不教内卷——只是想说清楚&#xff0c;你到底在一个什么样的游戏里。 你以为内卷是“资源不足”&#xff0c;其实是“分配方式” 很多人对内卷有个本质上的认知错误&#xff1a;以为内卷是因为资源不够&#xff0c;大家为了抢资…...

编程新知 2026/5/27 11:12:08

BurpSuite+SqlMap深度集成：构建高可信SQL注入检测流水线

1. 这不是“点几下就出结果”的玩具&#xff0c;而是你真正能放进渗透流程里的SQL注入检测流水线很多人第一次看到“BurpSuiteSqlMap插件5分钟搞定SQL注入检测”这个标题&#xff0c;第一反应是&#xff1a;又一个标题党&#xff1f;点开全是截图堆砌、参数照抄、报错就卡住的半…...

编程新知 2026/5/25 14:38:37

UE5 GPU崩溃终极解决方案：Windows TDR注册表调优指南

1. 这不是玄学&#xff0c;是显卡驱动与UE引擎的底层握手失败 你刚点下Play&#xff0c;编辑器还没完全加载完场景&#xff0c;屏幕突然黑一下&#xff0c;然后弹出“GPU has stopped responding and has recovered”——或者更糟&#xff0c;直接蓝屏、黑屏死机、编辑器无响应…...

编程新知 2026/5/25 14:02:20