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

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

news 2025/9/11 8:20:33

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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2025/8/31 15:20:40

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2025/9/9 4:26:53

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2025/9/9 10:10:36

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/9/9 10:09:33

LRU 缓存机制详解与实现（Java版） + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

编程新知 2025/7/8 17:57:05

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2025/9/7 8:49:38

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

编程新知 2025/9/10 0:28:06

第八部分：阶段项目 6：构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...

编程新知 2025/7/7 8:32:25

AD学习（3）

1 PCB封装元素组成及简单的PCB封装创建 封装的组成部分&#xff1a; &#xff08;1&#xff09;PCB焊盘&#xff1a;表层的铜 &#xff0c;top层的铜 &#xff08;2&#xff09;管脚序号&#xff1a;用来关联原理图中的管脚的序号&#xff0c;原理图的序号需要和PCB封装一一…...

编程新知 2025/9/9 21:02:41

解析“道作为序位生成器”的核心原理

解析“道作为序位生成器”的核心原理 以下完整展开道函数的零点调控机制&#xff0c;重点解析"道作为序位生成器"的核心原理与实现框架&#xff1a; 一、道函数的零点调控机制 1. 道作为序位生成器 道在认知坐标系$(x_{\text{物}}, y_{\text{意}}, z_{\text{文}}…...

编程新知 2025/9/9 10:04:58