認識換行標簽 br 標簽

在之前的章節(jié)中，我們學習了塊級元素（ p 標簽，h 標簽， div 標簽），行內元素（span 標簽），塊級元素的特點是默認占一整行，會自動換行，行內元素默認是在同一行排列，如果我們想讓兩個行內元素換行顯示，除了設置 CSS 樣式之外，就是使用 換行標簽 br 標簽了。

1. br 標簽的作用

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

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








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

在頁面上會呈現以下效果：

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

如果我們需要達到換行的效果，那么就必須使用 br 標簽了。

2. br 標簽的使用

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

比如我們想實現兩個 span 標簽換行的效果，我們可以編寫一下代碼：

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

我們只需要在兩個 span 標簽中間加上一個 br 標簽，既會產生一下效果：

這樣我們就實現了換行的效果，是不是很簡單呢。

3. br 標簽的特點

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

4. 注意事項

1.由于 HTML 的作用就是用來給文本添加語義，而 br 標簽的語義是不另起一個段落換行，而在企業(yè)開發(fā)中的一般情況下需要換行都是因為需要另起一個段落，所以在企業(yè)開發(fā)中很少使用 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 標簽。