本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

HTML 5 快速導覽 - 空白字元

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




我們用以下例子示範 HTML 5 對空白字元的處理
<!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

沒有留言: