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

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

来剖析一下:页面中共有四行文本 , 思考应用四个段落标签 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…

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据