HTML常用的标签总结

1、文本标题标签

下面是文本的全部标题效果的展示,作用是写出文本中的标题

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

我们在VSCode中编译运行一下,看看在浏览器中的效果
浏览器中的效果
需要注意的是:

  • 文本标题标签有自己的默认样式,比如文字大小,间距,加粗效果,而且它会独占一行,不会和普通的文本一样在一行显示。

可以在浏览器的开发者模式下看到文本标题标签的默认样式
开发者模式下看到文本标题标签的默认样式

2、段落标签

下面是文本的段落标签效果的展示,作用是标识一个文字段落

<p>我是一个段落标签</p>
<p>近期,市民群众拨打北京12345市民服务热线反映进返京问题诉求比较集中。
为此,市民服务热线通过完善答复口径、优化工作流程、24小时不间断协同办理、
拓展“北京12345”微信公众号线上办理渠道,大幅度提升了受理能力和效率。</p>

我们在VSCode中编译运行一下,看看在浏览器中的效果
浏览器中的效果

需要注意的是:

  • 我们可以在p标签中敲入我们要在网页中的显示的文字段落
  • 段落和段落之间有段间距

3.换行标签

下面是换行的标签效果的展示,作用是进行换行,一般情况下配合段落标签使用
还是之前的段落,我们来看一下具体的效果

<p>近期,市民群众拨打北京12345市民服务热线反映进返京问题诉求比较集中。<br>
为此,市民服务热线通过完善答复口径、优化工作流程、24小时不间断协同办理、<br>
拓展“北京12345”微信公众号线上办理渠道,大幅度提升了受理能力和效率。</p>	

在这里插入图片描述

在浏览器中可以很明显的看到和上图的区别,在段落中进行了两次换行,文字没有在一行中显示

需要注意的是:

  • br是一个空标签
  • 会进行强制换行

4.水平线标签

下面是水平线的标签效果的展示,作用是在是浏览器中显示一条水平线

<hr>

为了更明显的展示出水平线的效果,在这里把它写入到两个文字段落之间,起到分割的作用
在这里插入图片描述
可以很明显的看到在浏览器中的两段文字之间有一条水平线

需要注意的是:

  • hr是一个空标签

5.加粗标签

加粗有两个标签
下面是文字加粗标签效果的展示

<b>加粗写在标签中的内容</b>	 <!--加粗内容,只是显示加粗 --> 
<strong>要强调的内容</strong>	 <!--加粗内容,
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值