乐趣区

关于前端:零基础教你学前端12文本修饰之其他标签

持续学习网页中用于文本润饰的其余标签。首先给文本增加下划线。还是来看百度新闻首页,右上角导航,文本上面有一条润饰线,这条润饰线实质上就是一条下划线。

这个下划线通过 u 标签 来实现,u 是英文单词:underline 的简写,意为下划线,它是一个双标签。u 标签的语法是:<u> 文本 </u>  外面搁置待润饰的文本。

关上编辑器,新建文件,命名为 underline.html,补全根本构造,在 body 外面创立一个 u 标签,在 u 标签里输出:我是 u 标签,在浏览器中关上页面,咱们看到,文本曾经增加了 下划线。

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

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

这些非凡的角标如何制作呢?角标标签能够实现这个成果。角标标签共有两类:别离是 sup 上角标,和 sub 下角标,英文单词 superscript 缩写   sub 是英文单词 subscript 缩写,它们是双标签。上角标标签的语法是:<sup> 文本 </sup>  下角标标签的语法是 :<sub> 文本 </sub>

回到编辑器,实现摄氏度的成果,新建一个 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 标签中书写文本,这里实现的,就是既加粗又歪斜的成果,保留。

在浏览器中关上,成果实现了。

文章配套视频链接

退出移动版