认识换行标签 br 标签

在之前的章节中,我们学习了块级元素( p 标签,h 标签, div 标签),行内元素(span 标签),块级元素的特点是默认占一整行,会自动换行,行内元素默认是在同一行排列,如果我们想让两个行内元素换行显示,除了设置 CSS 样式之外,就是使用 换行标签 br 标签了。

1. br 标签的作用

如果我们在编写代码时,通过回车让我们的代码换行,但是在页面上并不会产生换行的效果。例如:

  <span>我是第一行的内容</span>
  <!-- 中间通过回车换很多行 -->








  <span>我是第二行的内容</span>

在页面上会呈现以下效果:

图片描述

所以如上图显示,我们的内容并没有产生换行的效果,所以浏览器并不识别回车换行的写法。

如果我们需要达到换行的效果,那么就必须使用 br 标签了。

2. br 标签的使用

BR 标签为单标签, 没有尾标签,它有两种写法, 第一种为 <br>, 第二种写法为 <br/>, 两种写法没有任何区别,哪一种都可以使用。

比如我们想实现两个 span 标签换行的效果,我们可以编写一下代码:

<span>我是第一行的内容</span>
<br>
<span>我是第二行的内容</span>

我们只需要在两个 span 标签中间加上一个 br 标签,既会产生一下效果:

图片描述

这样我们就实现了换行的效果,是不是很简单呢。

3. br 标签的特点

  1. br 标签会产生换行的效果;
  2. 一个 br 标签代表换一行,如果想要换多行,那么就需要使用多个 br 标签;
  3. BR 是单标签,所有没有尾标签,也没有内容。

4. 注意事项

1.由于 HTML 的作用就是用来给文本添加语义,而 br 标签的语义是不另起一个段落换行,而在企业开发中的一般情况下需要换行都是因为需要另起一个段落,所以在企业开发中很少使用 br 标签;

2.如果想达到换行的效果,我们可以使用块级元素来布局我们的网页。

5. 真实案例分享

BootStrap v3 中文网(部分)

<div>
    .col-xs-4
    <br>
    Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
</div>
<div>
    .col-xs-6
    <br>
    Subsequent columns continue along the new line.
</div>

Vue 官网 Api(部分)

<li>
    <code>required</code>: <code>Boolean</code>
    <br>
    Defines if the prop is required. In a non-production environment, a console warning will be thrown if this value is truthy and the prop is not passed.
</li>
<li>
    <code>validator</code>: 
    <code>Function</code>
    <br>
    Custom validator function that takes the prop value as the sole argument. In a non-production environment, a console warning will be thrown if this function returns a falsy value (i.e. the validation fails). You can read more about prop validation 
    <a>here</a>.</li>

6. 小结

  1. br 标签为空标签,没有结束标签,可以写成<br>,也可以写成 <br/>
  2. br 标签用于换行;
  3. 一个 br 标签代表换一行,如果需要换多行,就需要写多个 br 标签。

图片描述