零基础教你学前端——13、文本修饰之标签案例

陆荣涛 - 2022-10-13 17:43:23

来完成以下文本修饰标签案例

来分析一下：页面中共有四行文本，考虑使用四个段落标签 p 实现，加粗倾斜下划线上、下角标等文本修饰, 可以分别使用 b 标签、 i 标签、 u 标签、 sup 标签、和 sub 标签来实现。打开编辑器，新建一个 homework.html 文件，使用!配合tab键，补全基本结构，在 body 里先来编写第一行文本代码。使用 Ctrl 配合键盘上面的斜杠 (/) 敲出一行注释。注释是由尖角号叹号中划线杠杠开头由杠杠尖号结尾在中间书写注释的内容，一般在内容的两侧添加一个空格。

注释内部写入，这是第一个段落，保存。注释的作用是用来对代码进行解释说明，注释的内容是不会在浏览器页面中显示，在VSCode中整个注释的部分是灰色的在浏览器中打开页面，浏览器中不会显示注释的内容。返回编辑器，在注释结束位置的后面敲击回车，实现换行，使用 p 标签实现一个段落，在 p 标签的里面，回车，再换行。为了实现加粗和倾斜的效果需要创建一个 b 标签在 b 标签的内部创建一个 i 标签注意嵌套方式在 i 标签内部编写文本圆的面积公式是： s=πr2回到 b 标签的外边写上圆的面积公式 s=πr2 (艾斯等于派乘以R的平方) 很显然数字 2 需要以上角标的形式显示使用 sup 标签把数字 2 括起来，保存。回到浏览器刷新第一行文本就制作完了。

返回编辑器继续实现第二行文本的效果再次使用 ctrl + / 生成一个注释编写注释内容：这是第二个段落在注释外边再写入一个 p 标签，在 p 标签里回车，完成换行。在标签内部输入文本水和二氧化碳发生化学反应的方程式 CO2 + H2O=H2CO3给前面的汉字加上 b 标签实现加粗效果观察这个化学方程式这里每一个分子式都带有数字数字都应该是以下角标的方式显示我们全部使用sub标签，把对应的数字包裹起来，保存。回到浏览器刷新第二行文本也制作完了

返回编辑器再写一行注释这是第三个段落在注释结束的位置换行写入第三个 p 标签在标签里写入千锋教育价值观：初心至善匠心育人注意这里的初心至善匠心育人带有超链接功能所以我们需要使用 a 标签把这段文本包裹起来定义 href 属性属性值为千锋教育的官网地址(http://www.qfedu.com/)回到浏览器，刷新，点击超链接，页面成功跳转。

返回编辑器编写最后一个注释这是第四个段落写入第四个 p 标签在标签里写入前端培训机构有：千锋教育及其他仔细观察，千锋教育有加粗和下划线的效果其他有删除线的效果，如何实现呢书写 b 标签里面包裹 u 标签，把千锋教育放在 u 标签内部。书写 em 标签，里面包裹 del 标签，把其它放在 del 标签内部，保存！回到浏览器，刷新，页面的最终效果都呈现出来了！