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

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

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>标签则用于显示表头。
此外,还使用了CSSsh来标识并设置章节标题的样式,使得其在表格中更加突出。最后,在网页的底部使用<footer>标签添加了一个页脚,显示了代码的作者信息。
整体而言,这段HTML代码通过表格和样式的方式,清晰地呈现了公制计量单位之间的进位与换算关系,方便用户查阅和学习。

相关文章:

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

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

UE5.3 StateTree使用实践

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

【09】进阶JavaScript事件循环Promise

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

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

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

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

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

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

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

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

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

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…...

鸿蒙4.0ArkUI快速入门(一)应用模型

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

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;必备画图技能之…...

Java SE入门及基础(44)

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

基于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端…...

【C++ leetcode】双指针问题(续)

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

51单片机-蜂鸣器

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

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

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

突破编程_C++_STL教程( stack 的实战应用)

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

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

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

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

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

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

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

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

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

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

Python爬虫实战:研究Restkit库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的有价值数据。如何高效地采集这些数据并将其应用于实际业务中,成为了许多企业和开发者关注的焦点。网络爬虫技术作为一种自动化的数据采集工具,可以帮助我们从网页中提取所需的信息。而 RESTful API …...

DriveGPT4: Interpretable End-to-end Autonomous Driving via Large Language Model

一、研究背景与创新点 (一)现有方法的局限性 当前智驾系统面临两大核心挑战:一是长尾问题,即系统在遇到新场景时可能失效,例如突发交通状况或非常规道路环境;二是可解释性问题,传统方法无法解释智驾系统的决策过程,用户难以理解车辆行为的依据。传统语言模型(如 BERT…...

scan_mode设计原则

scan_mode设计原则 在进行mtp controller设计时&#xff0c;基本功能设计完成后&#xff0c;需要设计scan_mode设计。 1、在进行scan_mode设计时&#xff0c;需要保证mtp处于standby模式&#xff0c;不会有擦写、编程动作。 2、只需要固定mtp datasheet说明的接口即可&#xf…...

【大厂机试题+算法可视化】最长的指定瑕疵度的元音子串

题目 开头和结尾都是元音字母&#xff08;aeiouAEIOU&#xff09;的字符串为元音字符串&#xff0c;其中混杂的非元音字母数量为其瑕疵度。比如: “a” 、 “aa”是元音字符串&#xff0c;其瑕疵度都为0 “aiur”不是元音字符串&#xff08;结尾不是元音字符&#xff09; “…...

20250607在荣品的PRO-RK3566开发板的Android13系统下实现长按开机之后出现插入适配器不会自动启动的问题的解决

20250607在荣品的PRO-RK3566开发板的Android13系统下实现长按开机之后出现插入适配器不会自动启动的问题的解决 2025/6/7 17:20 缘起&#xff1a; 1、根据RK809的DATASHEET&#xff0c;短按开机【100ms/500ms】/长按关机&#xff0c;长按关机。6s/8s/10s 我在网上找到的DATASHE…...