• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html/xhtml > html标签:sub标记和sup标记

html标签:sub标记和sup标记

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-05

本文主要包含标记,标签,<,",html,>,sub,sup,sub>,/sub>等相关知识,佚名 希望在学习及工作中可以帮助到您

今天来认识一下两个我不太常用到的html标签:sub标记和sup标记。
相关文章:HTML标记:optgroup、sub、sup和bdo
今天来认识一下两个我不太常用到的html标签:sub标记和sup标记。
定义和用法:
<sub> 标签可定义下标文本。<sup> 可定义上标文本。都属于行内元素,默认比当前字体稍小。
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html中的sub与sup标签</title>
<style type="text/css">
* { font-size:12px; font-family:Tahoma}
</style>
</head>
<body>
<div>
这个标签是<sub>sub</sub>
这个标签是<sup>sup</sup>
</div>
</body>
</html>





举一反三:

我们来看看数学方程式这种效果怎么实现?





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html中的sub与sup标签</title>
<style type="text/css">
* { font-size:12px; font-family:Tahoma}
</style>
</head>
<body>
<div>
x<sub>1</sub> y<sub>2</sub><sup>3</sup>=15
</div>
</body>
</html>
其他应用:
偶然的机会,发现前段时间的淘宝网在价格上做了点修饰(不知道什么原因,现在又复原了),和以前传统的价格表现不一样。










<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html中的sub与sup标签</title>>
</head>
<style type="text/css">
<!--
body { font:12px/1.8 Tahoma}
span.price { font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:700; color:red;}
span.price sub { vertical-align:baseline; font-size:12px;}
span.price sup { vertical-align:text-bottom; color:#555}
-->
</style>
<body>
<span class="price"><sup>¥</sup>43.<sub>26</sub></span>
</body>
</html>
相信sub和sup标签的应用不止局限于此,其他html标签也如此,只要你了解了它们,发动我们的思维和想象,就可以熟练的运用它们、展现它们独特魅力的一面。

您可能想查找下面的文章:

  • 浅谈Html网页表格结构化标记的应用
  • 浅谈HTML中的标记
  • 【HTML 元素】标记文字详解
  • 详解HTML编程的标记与文档结构
  • html body标签详解与html常用的控制标记
  • html入门教程 html标记符号快速掌握
  • 用INS和DEL标记文档改变用法详解
  • 表格(TABLE)标记(TAGS)详细介绍
  • html中的meta标记简单对照
  • HTML标记一览表及用法说明

相关文章

  • 2017-08-05W3C教程(13):W3C WSDL 活动
  • 2017-08-05链接A的语义、写法和最佳实践
  • 2017-08-05HTML 基本语法 方便刚开始学习html的朋友
  • 2017-08-05浅谈HTML中的标记
  • 2017-08-05HTML表格布局实例讲解
  • 2017-08-05HTML 网页头部代码全清楚
  • 2017-08-05HTML的checkbox和radio样式美化的简单实例
  • 2017-08-05html标签全称和功能介绍
  • 2017-08-05html超级链接标记A的TARGET属性详解
  • 2017-08-05英文:A链接标记ie下会自动补全href

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Html,sHtml,XHtml区别分析小结
    • iframe标签用法详解(属性、透明、自适应高度)
    • HTML blockquote 标签使用与美化
    • 5种方法快速去掉HTML中Inline-Block的空白
    • IE网页弹出窗口的常用参数整理可自行设定
    • 输入一个网址的时候,后台到底发生了一件件什么样的事
    • a标签是否新开一个页面的问题各大网站的打开情况整理
    • 用图片作为label,for属性IE下不起作用
    • 5个酷炫、实用的HTML标签和属性介绍
    • iframe截取网站部分内容实现思路及代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有