HTML 5 快速導覽 - 空白字元

空白字元 (space character) 就是空格或換行用的 unicode 符號，包括空格鍵 (space) 、 tab 鍵 (character tabulation) 、輸入鍵 (carriage retuen) 等




我們用以下例子示範 HTML 5 對空白字元的處理
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html> 
<html> 
  <head> 
     <title>HTML 5 DEMO</title>
     <style>
       article {
         display: block;
       }
     </style>
  </head> 
  <body>
    <section>
      <article>
        There is no spoon.
      </article>
      <article>
        There  is  no  spoon.
      </article>
      <article>
        There   is  no  spoon.
      </article>
      <article>
        There
        is
        no
        spoon.
      </article>
    </section> 
  </body> 
</html> 
 
<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：spacetest.html
     功能：示範 HTML 5 標記語言
     作者：張凱慶
     時間：西元 2011 年 12 月 -->


瀏覽器 (broswer) 開啟如下



我們可以看到四個 <article> 裡雖然用了不同的空白字元，第一個每個英文單字間是正常的空格，第二個是兩個空格，第三個用了 tab 鍵，第四個則是每個單字一行，卻得到完全一樣的顯示結果。


這是因為 HTML 規定元素 (element) 內容，也就是兩個成對標籤 (tag) 間的內容，無論有多少個空白字元都只當成一個解讀，所以上面四個 <article> 都是一樣的顯示結果。


標籤中亦可使用空白字元，但第一個角括號，也就是小於符號 < 必須緊鄰標籤名稱，如
?
<article>


這樣瀏覽器才會將兩個角括號當成一個標籤。至於標籤名稱到第二個角括號，也就是大於符號 > ，之間可以有任何空白字元，例如
?
<article   >


這仍是有效的標籤，會有如此的規定，是因為標籤內通常會有不定個數的屬性 (attribute) ，例如
?
<article id="a01" class="c01" title="something">


至於網頁顯示需要換行的話，可以使用 <br / > 標籤， br 標籤內原本不需要反斜線與兩個空格，但是在 Blogger 中沒有加反斜線會被當成一個換行元素，因此我們的例子如果有用到加角括號的 br 都會加上空格、反斜線、空格。


中英文術語對照
空白字元space character
空格鍵space
tab 鍵character tabulation
輸入鍵carriage retuen
瀏覽器broswer
元素element
標籤tag
屬性attribute


您可以繼續參考
基本概念


相關目錄
HTML 5 快速導覽
HTML, CSS 教材
首頁


參考資料
http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#space-character
http://www.w3.org/TR/2011/WD-html5-20110525/common-microsyntaxes.html#space-character
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)