关于前端:零基础教你学前端13文本修饰之标签案例

52次阅读

共计 1126 个字符,预计需要花费 3 分钟才能阅读完成。

来实现以下文本润饰标签案例

来剖析一下:页面中共有四行文本,思考应用四个段落标签 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 标签外部,保留!回到浏览器,刷新,页面的最终成果都出现进去了!

文章配套视频:https://www.bilibili.com/vide…

正文完
 0