認(rèn)識換行標(biāo)簽 br 標(biāo)簽

在之前的章節(jié)中，我們學(xué)習(xí)了塊級元素（ p 標(biāo)簽，h 標(biāo)簽， div 標(biāo)簽），行內(nèi)元素（span 標(biāo)簽），塊級元素的特點(diǎn)是默認(rèn)占一整行，會自動換行，行內(nèi)元素默認(rèn)是在同一行排列，如果我們想讓兩個行內(nèi)元素?fù)Q行顯示，除了設(shè)置 CSS 樣式之外，就是使用 換行標(biāo)簽 br 標(biāo)簽了。

1. br 標(biāo)簽的作用

如果我們在編寫代碼時，通過回車讓我們的代碼換行，但是在頁面上并不會產(chǎn)生換行的效果。例如：

  <span>我是第一行的內(nèi)容</span>
  <!-- 中間通過回車換很多行 -->








  <span>我是第二行的內(nèi)容</span>

在頁面上會呈現(xiàn)以下效果：

所以如上圖顯示，我們的內(nèi)容并沒有產(chǎn)生換行的效果，所以瀏覽器并不識別回車換行的寫法。

如果我們需要達(dá)到換行的效果，那么就必須使用 br 標(biāo)簽了。

2. br 標(biāo)簽的使用

BR 標(biāo)簽為單標(biāo)簽， 沒有尾標(biāo)簽，它有兩種寫法， 第一種為 <br>, 第二種寫法為 <br/>, 兩種寫法沒有任何區(qū)別，哪一種都可以使用。

比如我們想實(shí)現(xiàn)兩個 span 標(biāo)簽換行的效果，我們可以編寫一下代碼：

<span>我是第一行的內(nèi)容</span>
<br>
<span>我是第二行的內(nèi)容</span>

我們只需要在兩個 span 標(biāo)簽中間加上一個 br 標(biāo)簽，既會產(chǎn)生一下效果：

這樣我們就實(shí)現(xiàn)了換行的效果，是不是很簡單呢。

3. br 標(biāo)簽的特點(diǎn)

1. br 標(biāo)簽會產(chǎn)生換行的效果；
2. 一個 br 標(biāo)簽代表換一行，如果想要換多行，那么就需要使用多個 br 標(biāo)簽；
3. BR 是單標(biāo)簽，所有沒有尾標(biāo)簽，也沒有內(nèi)容。

4. 注意事項(xiàng)

1.由于 HTML 的作用就是用來給文本添加語義，而 br 標(biāo)簽的語義是不另起一個段落換行，而在企業(yè)開發(fā)中的一般情況下需要換行都是因?yàn)樾枰砥鹨粋€段落，所以在企業(yè)開發(fā)中很少使用 br 標(biāo)簽；

2.如果想達(dá)到換行的效果，我們可以使用塊級元素來布局我們的網(wǎng)頁。

5. 真實(shí)案例分享

BootStrap v3 中文網(wǎng)（部分）

<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 官網(wǎng) 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. 小結(jié)

1. br 標(biāo)簽為空標(biāo)簽，沒有結(jié)束標(biāo)簽，可以寫成<br>，也可以寫成 <br/>；
2. br 標(biāo)簽用于換行；
3. 一個 br 標(biāo)簽代表換一行，如果需要換多行，就需要寫多個 br 標(biāo)簽。