使用​<sub>​ 标签和 ​<sup>​ 标签, 让数学等式成立。

本文详细介绍了HTML中的<sub>和<sup>标签,它们分别用于创建下标和上标文本。下标常用于化学公式如H2O,上标则用于脚注或数学公式,如Log<sub>2</sub>16=2<sup>2</sup>。通过这两个标签,可以轻松地在网页中展示专业的内容。

添加 <sub> 标签 和 <sup> 标签

 <sub>​ 标签定义下标文本。

下标文本将会显示在当前文本流中字符高度的一半为基准线的下方,但是与当前文本流中文字的字体和字号都是一样的。

下标文本能用来表示化学公式,比如 H2O。

<sup>​ 标签定义上标文本。

上标文本将会显示在当前文本流中字符高度的一半为基准线的上方,但是与当前文本流中文字的字体和字号都是一样的。

上标文本能用来添加脚注,比如 WWW[1]

实例:

<p>这个文本包含 <sub>下标</sub>文本。</p>
<p>这个文本包含 <sup>上标</sup> 文本。</p>

运行结果:

闯关:

使用​<sub>​ 标签和 ​<sup>​ 标签, 让数学等式成立。

提示:

这题做出来的同学, 说明脑袋瓜子很好用!

Log<sub>2</sub>16=2<sup>2</sup>

运行结果:

Log216=22

在 HTML 中,`<sub>` `<sup>` 是用于定义**下标****上标**的文本格式化标签。它们通常用于数学公式、化学式、脚注等场景。 - `<sub>`:显示为 **下标**(文字位置低于基线) - `<sup>`:显示为 **上标**(文字位置高于基线) 例如: ```html H<sub>2</sub>O <!-- 显示为 H₂O --> x<sup>2</sup> <!-- 显示为 x&sup2; --> ``` --- ### 类似 `<sub>` `<sup>` 的内联文本格式化标签 以下是与 `<sub>`、`<sup>` 类似的 HTML 文本级(行内)元素,常用于语义化或样式控制: #### ✅ 1. `<strong>` —— 表示重要性(加粗显示) ```html <p>这是一段强调<strong>重要内容</strong>。</p> ``` - 语义:内容很重要 - 默认样式:加粗 #### ✅ 2. `<em>` —— 强调(斜体) ```html <p>你真的要这么做吗?</p> ``` - 语义:强调语气 - 默认样式:斜体 #### ✅ 3. `<small>` —— 较小字体,常用于旁注、版权信息 ```html <p>版权所有 © 2025 <small>保留所有权利</small></p> ``` - 常用于次要文本 #### ✅ 4. `<mark>` —— 高亮文本 ```html <p>搜索结果:<mark>HTML</mark> 是超文本标记语言。</p> ``` - 类似荧光笔效果,默认黄色背景 #### ✅ 5. `<del>` —— 删除线(表示已删除内容) ```html <p>原价:<del>99.99</del> 现价:49.99</p> ``` #### ✅ 6. `<ins>` —— 插入内容(带下划线) ```html <p><ins>新增内容</ins>已被添加。</p> ``` - 常与 `<del>` 搭配使用,表示修订 #### ✅ 7. `<code>` —— 代码片段 ```html <p>使用 <code>console.log()</code> 输出日志。</p> ``` - 通常用等宽字体显示 #### ✅ 8. `<var>` —— 变量 ```html <p>圆的面积公式:A = π<var>r</var><sup>2</sup></p> ``` - 语义化表示变量名 #### ✅ 9. `<samp>` —— 程序输出样例 ```html <p>程序输出:<samp>Hello, World!</samp></p> ``` #### ✅ 10. `<kbd>` —— 用户输入(键盘输入) ```html <p>请按 <kbd>Ctrl</kbd>+<kbd>C</kbd> 复制。</p> ``` #### ✅ 11. `<time>` —— 时间/日期(机器可读) ```html <p>会议时间:<time datetime="2025-04-05T09:00">明天上午9点</time></p> ``` #### ✅ 12. `<dfn>` —— 定义术语 ```html <p><dfn>HTML</dfn> 是超文本标记语言。</p> ``` --- ### 🧩 组合使用示例(结合 `<sup>`、`<sub>` 其他标签) ```html <p> 水的化学式是 H<sub>2</sub>O。 爱因斯坦质能方程:E = mc<sup>2</sup>。 其中 <var>c</var> 是光速,约为 <code>3e8 m/s</code>。 更精确值为 <del>299792457</del> <ins>299792458</ins> m/s。 计算时间:<time datetime="2025-04-05">2025年</time>。 </p> ``` --- ### 💡 提示:CSS 替代方案(更灵活控制) 虽然 `<sub>` `<sup>` 有默认样式,但也可以用 CSS 自定义: ```css .my-sup { vertical-align: super; font-size: smaller; } .my-sub { vertical-align: sub; font-size: smaller; } ``` ```html <p>自定义上标:<span class="my-sup">上标</span></p> ``` --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值