常用的文本标签都有哪些呢?

一、

1.标题标签 h1-h6
——(1)双标签
——(2)标题标签自带加粗效果,有自己的默认字体大小
——(3)默认独占一行显示
——(4)标题标签自带间距

举例:

标题在HTML中的书写形式,如下:

1.找到body

2.输入标题标签

3.输入完成直接敲击enter键,即可生成

4.然后在标题标签中输入你需要的标题

5.即可得到如下效果(标题标签自带加粗效果) 

h1: 我是一级标题

h2: 我是二级标题

h3:我是三级标题

h4:我是四级标题

h5:我是五级标题

h6:我是六级标题

二、

2.文本段落标签 p
——(1)双标签
——(2)默认独占一行显示
——(3)段落标签自带间距

1.生成标签方法同上,注意,此处前两个p标签内都加入了空格

 2.如下,无论输入多少空格最终都只显示一个空格

 三、

3.空格符   &符号为shift+7
——没有固定的大小,跟字号有关

1.引用p标签的例子,直接把 加入需要间隔的文本内容处

 2.如下,在第三个p标签中加入了很多 的效果

 四、

4.换行 br
——他是一个单标签,作用是让文本换行显示

1.引用p标签,给p标签添加br,从添加br处开始换行

 2.如下,把br放置在同一行内或者下一行,效果都是一样的

 五、

5.水平线/分割线 hr
——单标签

1.如图,给p标签下添加hr标签

2.结果如下,添加hr能帮助更好的去区分不同的内容区域

 

 六、

6.加粗 b strong
——双标签,b和strong均可加粗,但是strong具有一个强调和突出的语气

1.分别给第一个和第二个p标签内的内容添加了b和strong标签

2.这里可以看到,得到的效果是一样的,但是相比b来说,strong具有强调和突出的语气

 

七、

7.倾斜 i em
——双标签 i和em均可倾斜,但是em具有一个强调和突出的语气

1.分别给第一个和第二个p标签内的内容添加了i和em标签

2.效果是相同的, 但是相比i来说,em具有强调和突出的语气

八、

下划线 u ——双标签

1.给内容添加u标签

2.添加u标签的内容就会显示下划线了

 

九、

删除线 s del 双标签,其中del具有强调语气 

1.分别给第一个和第二个p标签内的内容添加了s和del标签

 2.得到的效果是一样的,但是相比s来说,del具有强调和突出的语气

十、

sub 下标 双标签
sup 上标 双标签

 1.分别给第一个和第二个p标签内的内容添加了sup和sub标签

 2.效果如下,被sup标签包裹的内容位居与偏上的位置,被sub标签包裹的内容位居与偏下的位置

 以上就是常用的文本标签的内容了

 

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以封装一个文本组件,组件接收一个字符串类型的文本数据和一个布尔类型的 bold 属性,用于控制是否添加粗体样式。 以下是一个简单的文本组件的代码示例: ``` <template> <span :class="{ 'bold': bold }"> {{ text }} </span> </template> <script> export default { name: 'MyText', props: { text: { type: String, required: true }, bold: { type: Boolean, default: false } } } </script> <style> .bold { font-weight: bold; } </style> ``` 在上面的代码中,我们定义了一个名为 MyText 的组件,组件接收两个 props:text 和 bold。text 表示要显示的文本,bold 表示是否添加粗体样式,默认为 false。 在组件的模板中,我们使用一个 span 标签来显示文本,并通过 :class 绑定 bold 属性来控制是否添加粗体样式。最后,我们在组件的样式中定义了一个名为 bold 的类,用于添加粗体样式。 使用该组件的示例代码如下: ``` <template> <div> <MyText :text="message" :bold="isBold" /> </div> </template> <script> import MyText from '@/components/MyText.vue' export default { name: 'App', components: { MyText }, data() { return { message: 'Hello World!', isBold: false } }, methods: { toggleBold() { this.isBold = !this.isBold } } } </script> ``` 在上面的代码中,我们将 MyText 组件引入到了 App 组件中,并通过 :text 和 :bold 绑定了 message 和 isBold 两个数据属性。当用户点击按钮时,会调用 toggleBold 方法来切换 isBold 的值,从而实现动态添加或取消粗体样式的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是嚼嚼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值