零基础教你学前端——12、文本修饰之其他标签

继续学习网页中用于文本修饰的其他标签。首先给文本添加下划线。还是来看百度新闻首页，右上角导航， 文本下面有一条修饰线，这条修饰线本质上就是一条下划线。

这个下划线通过 u 标签 来实现，  u 是英文单词： underline 的简写， 意为下划线 ， 它是一个双标签。u 标签的语法是： 文本 里面放置待修饰的文本 。

打开编辑器，新建文件，命名为 underline.html，补全基本结构， 在 body里面创建一个 u 标签，在 u 标签里输入：我是 u 标签，在浏览器中打开页面， 我们看到，文本已经添加了 下划线。

下面来学习角标的制作。这是百度天气的页面， 展示了北京近一周的天气，仔细观察发现： 单位摄氏度 (℃) 中的圆圈，在字母 C 的左上角。

再来看一个例子这是哈药集团官网的一个页面， (http://www.hayao.com/product/...)    我们看到这里有个罗红霉素的分子式： 碳41， 氢76，氮2， 氧15， 原子的个数在元素的右下角显示。

这些特殊的角标如何制作呢？ 角标标签可以实现这个效果。 角标标签共有两类： 分别是 sup上角标，和 sub 下角标，英文单词 superscript 缩写   sub 是英文单词 subscript 缩写，它们是双标签。上角标标签的语法是:文本  下角标标签的语法是 :_文本

回到编辑器，实现摄氏度的效果， 新建一个 sup.html 文件，补全基本结构， 在body中书写一段文本 （11○C ） 11摄氏度，如何让圆圈作为上角标显示呢？我们在圆圈 (○) 前面补上一个 sup 标签， 选中圆圈 ，(○) 把圆圈 (○) 直接拖入到 sup 标签内部 保存。

在浏览器中打开，很清楚的看到，11后面的圆圈 (○) 已经显示为上角标了。回到编辑器， 我们再来实现分子式效果， 新建一个 sub.html 文件， 补全基本代码，在 body 中书写一个 H2O， 水的分子式，在 2 的前面书写一个 sub 标签 ，选中数值2， 把 2 这个数字拖拽到 sub标签 内部 ， 保存。

浏览器中打开， 水分子式效果实现了。如果有一段文本，既有加粗样式，又有倾斜，还带有下划线我们可以通过标签的嵌套来实现样式叠加的效果，嵌套的规则，类似于洋葱一样，一层包裹一层， 比如 b 标签，包裹 i 标签， i 标签包裹 u 标签，  层层嵌套，这里需要注意， 要整个标签包裹 ，   万万不能交叉嵌套。

回到编辑器 。 我们就来实现一个既加粗又倾斜的文本效果。  新建一个nesting.html文件 ，  自动补全基本结构， 在 body 中书写一个 b 标签， 在 b 标签中书写一个 i 标签， 在 i 标签中书写文本，  这里实现的，就是既加粗又倾斜的效果，保存。

在浏览器中打开， 效果实现了。

文章配套视频链接