2012年10月1日 星期一

HTML <u> Tag


定義及用法 Definition and Usage

當文本內容中有需要特別標記的文字時,特別是文體上的區別,使用<u>標籤,例如拼寫錯誤的單詞(misspelled words),或是可以代表中文標點符號的專名號(或稱私名號)。


使用技巧及注意事項 Tips and Notes

在HTML5以前,<u>代表的是 underlined text ,需要畫底線的文字,就可以使用。不過HTML5重視語義甚於格式,所以建議使用者,不是想畫底線的文字都要用<u>,<u>在HTML5代表的不只是格式,只有像上面定義的情況,才使用<u>。

另外,在預設樣式上,加了底線的文字很容易和 hyperlinks 標記混在一起,造成識讀上的阻礙。所以底線要慎用。


可使用的屬性 Attributes

支援全域屬性(Global Attributes)事件屬性(Event Attributes)


範例 Examples
範例 1 example:
牛郎星在銀河之東,織女星在銀河之西。<br /> 
神話中<u>牛郎</u>、<u>織女</u>因勤奮工作被天帝許配為夫妻,<br /> 
但<u>織女</u>嫁給<u>牛郎</u>後,就荒廢紡織工作,天帝大怒,<br /> 
令他們分居在銀河兩岸,每年七夕才能渡河一會。  <br /> 
以上資料來自:<a href="#">神話故事網</a>     

Demo結果如下

牛郎星在銀河之東,織女星在銀河之西。
神話中牛郎織女因勤奮工作被天帝許配為夫妻,
織女嫁給牛郎後,就荒廢了紡織工作,天帝大怒,
令他們分居在銀河兩岸,每年七夕才能渡河一會。
以上資料來自:神話故事網

上面範例特別用了中文標點符號的專名號來說明,定義中的<u>底線和超連結的底線是不是容易搞混就自由心證了。

HTML <var> Tag


定義及用法 Definition and Usage

當文字是屬於variable,則可使用<var>,瀏覽器會呈現其預設的樣式。像是寫一些數學表達式(mathematical expression)、程式(programming context),在網頁上要清楚呈現哪些是變數的話,就可以加上<var>。另外像常數的ID、功能參數…等也可以使用,讓瀏覽者更容易識別。


技巧及備註 Tips and Notes

像這類著重在以文字樣式區別字義的HTML標籤,叫 phrase tags ,除了<var>以外,還有<em><strong><dfn><code><samp><kbd>。HTML的瀏覽器為這些標籤都預先設定了簡單的樣式,當然如果要更有效果的話,還是透過CSS再加以設定。


可使用的屬性 Attributes

支援全域屬性(Global Attributes)事件屬性(Event Attributes)


範例 Examples
範例 1 example:
<p> 
若假設5元硬幣為 X 枚,1元為 甲 枚,則:<br /> 
有5元與1元的硬幣共18枚,可列得二元一次方程式: <var>X</var> + <var>甲</var> =18。 
</p>        

Demo結果如下

若假設5元硬幣為 X 枚,1元為 甲 枚,則:
有5元與1元的硬幣共18枚,可列得二元一次方程式: X =18。

範例 1 ,X和甲是變數,所以在列式時,加上了<var>,加上後的樣式其實就是在CSS裡用Tag Selection把有<var>標籤的字體給設定成斜體 (font-style: italic),在辨識上是有一些些的效果。

不過,若是我們在網頁上是要呈現大量的程式碼,要針對一個個的變數來設定<var>標籤太不明智了,通常使用量大的話,我們會使用高亮程式碼(SyntaxHighlighter),數學方程式也是一樣的,若是要在HTML上顯示大量的數學方程式,那麼最好的做法還是使用數學置標語言(Mathematical Markup Language,MathML),以下舉例說明。

範例 2 example:
<figure> 
  <math>
     <mi>a</mi>
     <mo>=</mo>
 	<msqrt>
       <msup>
         <mi>b</mi>
         <mn>2</mn>
       </msup>
         <mi>+</mi>
       <msup>
         <mi>c</mi>
         <mn>2</mn>
       </msup>
      </msqrt>
   </math>
   <figcaption>
     Using Pythagoras' theorem to solve for the hypotenuse _
     <var>a</var> of a triangle with sides <var>b</var> _
     and <var>c</var> 
   </figcaption>
</figure>

Demo結果如下

a = b2 + c2
Using Pythagoras' theorem to solve for the hypotenuse a of a triangle with sides b and c

範例中,畢式定理的方程式,裡頭雖然用了變數,但是並沒有加上<var>,若是刻意加上,那麼程式碼上面反而更加紊亂的。而在方程式說明的地方(<figcaption>標籤內),才加上了<var>來突顯變數的地位。

HTML <small> Tag


定義及用法 Definition and Usage

在字體樣式上,<small>定義的就是文本中需呈現較小文體的文字 (smaller text)。
在文義上,<small>定義的則是文本中一些偏離主題的文字敘述 ( side comments )。
在用法上,常使用在一些免責聲明 ( disclaimers )、注意事項 ( caveats )、法律限制 ( legal restrictions )、版權宣告 ( copyrights )等。


使用技巧及注意事項 Tips and Notes

small 元素的相對元素是 <big>,不過 big 元素在HTML5裡已經不支援了,原因很簡單,因為 big 真的只是為「樣式」設計的標籤(font-style tags),這類的標籤現在都建議改用CSS設計。small 在HTML5 沒有被刪掉,主因在它還有文義上的功能 (如上面定義),可能是制定規範者不知道要怎麼為這個種類的標籤命名,所以暫切不更動,但使用者一定要注意的是,small 元素不只是把字體 small 而已。

small 元素常常被拿來和定義重要文字的<strong> 或是定義強調文字的<em>做比較。因此容易讓人搞混,認為small就是定義一些不重要的、可以被忽視的文字。所以使用時一定要注意,在語言層級上,<small>和主題一般敘述文字的程度是一樣的。


可使用的屬性 Attributes

支援全域屬性(Global Attributes)事件屬性(Event Attributes)


範例 Examples
範例 1 example:
<p>DNOWBA 豬腦爸-力行豬腦哲學的資訊部落格</p>
<p><small>Copyright 1999-2050 by d.now.ba</small></p>

Demo結果如下

DNOWBA 豬腦爸-力行豬腦哲學的資訊部落格

Copyright 1999-2050 by d.now.ba

上面是很典型的版權宣告,通常就是用<small>來處理。字體雖然變小了,但二個段落的文字敘述的重要程度是一樣的。

範例 2 example:
<dl>
 <dt>單人房
 <dd>1999NT$ <small>含早餐,已含5%營業稅</small>
 <dt>雙人房
 <dd>2999NT$ <small>含早餐,已含5%營業稅</small> 
</dl>

Demo結果如下

單人房
1999NT$ 含早餐,已含5%營業稅
雙人房
2999NT$ 含早餐,已含5%營業稅

範例中,主題是說明飯店的房價,其他附加服務、是否含稅等不算是主題,但是也蠻重要的 (這種文字稱之為 short runs of text,不知道怎麼翻譯比較適合 ),就可以用<samll>來標記。

範例 3 example:
「Google Drive」服務(中文為 Google 雲端硬碟)。 
Google Drive 本質上與其他雲端儲存服務(如 Dropbox)類似,
不過挾帶著Google各項服務,影片、照片、網誌、文件,
包山包海的情形讓Google Drive勢如破竹。 
<small>不過google的強大也是靠我們這些社群用戶,
沒有人用的facebook網頁畫面真是殘不忍睹</small>

Demo結果如下

「Google Drive」服務(中文為 Google 雲端硬碟)。 Google Drive 本質上與其他雲端儲存服務(如 Dropbox)類似,不過挾帶著Google各項服務,影片、照片、網誌、文件,包山包海的情形讓Google Drive勢如破竹。 不過google的強大也是靠我們這些社群用戶,沒有人用的facebook網頁畫面真是殘不忍睹

範例中,主題是介紹「Google Drive」服務的特點。當中挾帶著自已的感想,有點像是murmur碎碎念。所以這類離題的內容(side comments),可以用<small>來標記,此外,範例中的有括號的文字「中文為 Google 雲端硬碟、如 Dropbox」都算是附註說明,和主題內容是有關係的,並不算是一種碎碎念,而括號本身在符號意義上就有附帶一提的意味。從這個範例你可以比較能分辨「附註說明」和「碎碎念」的差別。

範例 4 example:
以下為安裝JAVA教學 
<small><strong>安裝時請關閉防火牆</strong>,以免安裝程序失敗</small>

Demo結果如下

以下為安裝JAVA教學 安裝時請關閉防火牆,以免安裝程序失敗

這個範例說明,標記<small>的文本內容,不代表他不重要,甚至於你覺得很重要的,還可以加上<strong>標籤

範例 5 example:
<aside>
 <h4>Example Corp</h4>
 <p>This company mostly creates small software and Web sites.</p>
 <p>The Example Corp company mission is "To provide entertainment
 and news on a sample basis".</p>
 <p><small>Information obtained from <a href="../about.html">example.com</a>
 home page.</small></p> 
</aside>

Demo結果如下

這個範例中,Example Corp的介紹並不是這份網頁文件的主軸,所以用<aside>來標記,不過相對的,Example Corp的介紹內容是這個<aside>下的主要內容。範例中我們可以學習到,<aside>不等同於<small>,<aside>區塊中的內容本身就有一個主題,而當主題下有比較離題的、和主題無關的,就可以用<small>來標記。當一篇文章的一段,甚至於二段以上的段落內容都偏離主題的時候,其實它本身就是一個主體了,所以<small>並不適合寫成<small><p>......</p></small>的形式,這個範例下,也不適合寫成<small><aside>......</aside></small>的形式。

HTML <strike> Tag


定義及用法 Definition and Usage
注意:HTML5不再支援<strike>標籤

樣式上,需要加刪除線的文字可用<strike>,HTML5建議改用<del>元素


範例 Examples
範例 1 example:
<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>

Demo結果如下

Version 2.0 is not yet available! now available!

範例中的文章,敘述了某軟體版本的更新「歷程」,為刪除的字加上刪除線是很適當的。HTML5中廢棄了<stike>這個元素,改用<del>來取代,因為 strike 代表的是樣式、視覺上的名稱,改名為 del 更可以讓語義上更健全。以下是改用成<del>的範例。

範例 2 example:
<p>Version 2.0 is <del>not yet available!</del> 
<ins datetime="2012-10-01">now available!<ins></p>

Demo結果如下

Version 2.0 is not yet available! now available!

HTML <ins> Tag


定義及用法 Definition and Usage

當文本中的部份文字因為「更新」或「修改」,要從文件中插入一些新的內容,但又希望保留原先的篇幅,就可以用 ins 元素。


使用技巧及注意事項 Tips and Notes

使用時可搭配 <del> 元素,<del>用來刪除過時的文字,而<ins>則用來標記新加入的內容。


可使用的屬性 Attributes
屬性 Attribute 值 Value 描述 Description
cite URL 新增內容的原因是什麼?可以用用cite屬性來指定一個網路文件作為原因說明。
Specifies a URL to a document that explains the reason why the text was inserted/changed
datetime YYYY-MM-DDThh:mm:ssTZD 文字被新增的日期甚至是時間,可以用datetime屬性來附帶說明。
Specifies the date and time when the text was inserted/changed

以上為<ins>專有的屬性,點選該屬性會連結到該範例。除了特有屬性外,<ins>還
支援全域屬性(Global Attributes)事件屬性(Event Attributes)


範例 Examples
範例 1 example:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

Demo結果如下

My favorite color is blue red!

範例 1 說明 <ins>常和<ins>元素合用,通常在各瀏覽器的樣式設定,ins 元素是在文字中間用橫線,一般稱之為刪除線,而 ins 元素則是以底線表示。


 HTML <ins> 的 cite 屬性 使用方式
語法 Syntax:
 <ins cite="URL">

屬性值 Value 屬性值描述 Description
URL 指定一網路文件以解釋被標記文字被新增的原因。URL可以是
絕對路徑(absolute URL)或是相對路徑(relative URL)

cite 屬性使用範例A example:
<p>This is a text. 
<ins cite="why_inserted.htm">This is an inserted text.</ins></p>

Demo結果如下

This is a text. This is an inserted text.

 範例結果可以看到,HTML文件並不會顯示 cite屬性所指定的連結,文章讀者是連結不到這個訊息的,只有文章作者自已可以透過後台查到,cite屬性的意義就是這樣,並非提供訊息給讀者,而是讓作者方便自已註釋。


 HTML <ins> 的 datetime 屬性 使用方式
語法 Syntax:
<ins datetime="YYYY-MM-DDThh:mm:ssTZD">

屬性值 Value 屬性值描述 Description
YYYY-MM-DDThh:mm:ssTZD 格式詳見Date and Time Formats (ISO 8601)

datetime 屬性使用範例A example:
<p>我喜歡吃水果。</p>
<aside> 蘋果酸酸甜甜的滋味是我的最愛。 
  <ins datetime="2007-12-19 00:00Z">葡萄柚也是。</ins> 
</aside>        

Demo結果如下

我喜歡吃水果。

範例A除了說明datetime的使用時機外,另外再提個重點,<aside>和<ins>都算是文章上附加的內容,<aside>的附加是為了補充文章上的不足,<ins>的附加是因為文章因某種緣故的修改更新,二個是不大一樣的性質。

HTML <del> Tag


定義及用法 Definition and Usage

當文本中的部份文字因為「更新」或「修改」,要從文件內容中剔除,但又有其文字保留之價值時,就可以用 del 元素。


使用技巧及注意事項 Tips and Notes

使用時可搭配 <ins> 元素,<del>用來刪除過時的文字,而<ins>則用來標記新加入的內容。


可使用的屬性 Attributes
屬性 Attribute 值 Value 描述 Description
cite URL 文字被刪除的原因是什麼?可以用用cite屬性來指定一個網路文件作為原因說明。
Specifies a URL to a document that explains the reason why the text was deleted
datetime YYYY-MM-DDThh:mm:ssTZD 文字被刪除的時間日期,可以用datetime屬性來附帶說明。
Specifies the date and time of when the text was deleted

以上為<del>專有的屬性,點選該屬性會連結到該範例。除了特有屬性外,<del>還
支援全域屬性(Global Attributes)事件屬性(Event Attributes)


範例 Examples
範例 1 example:
球類有羽毛球、桌球、躲避球等……種類<del>成千上萬</del><ins>五花八門</ins>

Demo結果如下

球類有羽毛球、桌球、躲避球等……種類成千上萬五花八門

範例 1 我舉了一個修改文章修辭的例子,比方說老師透過網路批閱學生文章,建議修改的地方不需直接刪掉,而保留作者原來的文字才會很好作比較,這個時候用<del>元素而不是用按鍵的delete是再合適不過的了。此外範例中也可以看到,<del>常和<ins>元素合用,通常在各瀏覽器的樣式設定,del 元素是在文字中間用橫線,一般稱之為刪除線,而 ins 元素則是以底線表示。


HTML <del> 的 cite 屬性 使用方式
語法 Syntax:
 <del cite="URL">

屬性值 Value 屬性值描述 Description
URL 指定一網路文件以解釋被標記文字被刪除的原因。URL可以是
絕對路徑(absolute URL)或是相對路徑(relative URL)

cite 屬性使用範例A example:
目前比較棒的免費空間有:Dropbox、MediaFire、GoogleDrive、 <br />
<del cite:"SOPA法案與Mega關站事件.htm">MegaUpload</del>

Demo結果如下

目前比較棒的免費空間有:Dropbox、MediaFire、GoogleDrive、
MegaUpload

範例中,我舉出一些網站免空freespace,但你知道的,這些網站服務總是會突如其然的關閉,我們可以先加上 del 元素不要直接刪除了,說不定哪天他又復活了,到時候再加上 ins 元素更新資料,整個就會很完整。


HTML <del> 的 datetime 屬性 使用方式
語法 Syntax:
<del datetime="YYYY-MM-DDThh:mm:ssTZD">

屬性值 Value 屬性值描述 Description
YYYY-MM-DDThh:mm:ssTZD 格式詳見Date and Time Formats (ISO 8601)

datetime 屬性使用範例A example:
要做的事<br />
<ul>
 <li>Empty the dishwasher</li>
 <li><del datetime="2012-10-11T01:25-07:00">Watch lectures</del></li>
 <li><del datetime="2012-10-10T23:38-07:00">Download tracks</del></li>
 <li>Buy a printer</li> </ul>        

Demo結果如下

要做的事
  • Empty the dishwasher
  • Watch lectures
  • Download tracks
  • Buy a printer

範例A是以一個工作清單為例,清單中列出要做的事有哪些,已經完成就刪掉,當然文字還是留著以備忘是最好的,所以用<del>元素,加datetime屬性,則可註記上完成的時間。

HTML <samp> Tag


定義及用法 Definition and Usage

samp 元素可以用來展示程式 ( program ) 或計算機 ( computing system ) 輸出的結果 ( sample)。


使用技巧及注意事項 Tips and Notes

和 samp元素相關的有 <pre> 以及 <kbd> ,<pre>用來表示程式碼、<kdb>表示使用者輸入的內容、<samp>表示程式運算後的結果。


可使用的屬性 Attributes

支援全域屬性(Global Attributes)事件屬性(Event Attributes)


範例 Examples
範例 1 example:
使用Windows命令列工具Ipconfig控制網路連線
<pre><samp><span class="prompt">C:\Users\dnow></span> <kbd>ipconfig /all</kbd>
Windows IP 設定

   主機名稱 . . . . . . . . . . . . .: dnowba-PC
   主要 DNS 尾碼  . . . . . . . . . .:
   節點類型 . . . . . . . . . . . . .: 混合式
   IP 路由啟用 . . . . . . . . . . . : 否
   WINS Proxy 啟用 . . . . . . . . . : 否

乙太網路卡 Local Area Connection:

   連線特定 DNS 尾碼 . . . . . . . . :
   描述 . . . . . . . . . . . . . . .: D-Link Gigabit Ethernet Adapter
   實體位址 . . . . . . . . . . . . .: 14-F6-4D-1D-4B-A9
   DHCP 已啟用 . . . . . . . . . . . : 是
   DNS 伺服器 . . . . . . . . . . . .: 192.168.0.1
   NetBIOS over Tcpip . . . . . . . .: 啟用
<span class="prompt">C:\Users\dnow></span> <span class="cursor">_</span></samp></pre>        

Demo結果如下

使用Windows命令列工具Ipconfig控制網路連線
C:\Users\dnow> ipconfig /all
Windows IP 設定

   主機名稱 . . . . . . . . . . . . .: dnowba-PC
   主要 DNS 尾碼  . . . . . . . . . .:
   節點類型 . . . . . . . . . . . . .: 混合式
   IP 路由啟用 . . . . . . . . . . . : 否
   WINS Proxy 啟用 . . . . . . . . . : 否

乙太網路卡 Local Area Connection:

   連線特定 DNS 尾碼 . . . . . . . . :
   描述 . . . . . . . . . . . . . . .: D-Link Gigabit Ethernet Adapter
   實體位址 . . . . . . . . . . . . .: 14-F6-4D-1D-4B-A9
   DHCP 已啟用 . . . . . . . . . . . : 是
   DNS 伺服器 . . . . . . . . . . . .: 192.168.0.1
   NetBIOS over Tcpip . . . . . . . .: 啟用

C:\Users\dnow> _

範例中用windows的命令提示工具(Command Prompt)作示例,表示當使用者輸入了 ipconfig /all 後,windows會依指令 print 出結果,輸出的結果部分,就用<samp>來標記。

範例 2 example:
<p>我在瀏覽Dnow網站介紹HTML的網頁時,傳回
<samp>We are sorry, the page you requested cannot be found.</samp>
的訊息,不知道新的網頁名稱是什麼?該不會移除頁面了吧</p>

Demo結果如下

我在瀏覽Dnow網站介紹HTML的網頁時,傳回 We are sorry, the page you requested cannot be found. 的訊息,不知道新的網頁名稱是什麼?該不會移除頁面了吧

範例 2 則是把瀏覽網頁的錯誤訊息,片段的摘錄寫在文章中。

HTML <sub> Tag


定義及用法 Definition and Usage

當文本中需要使用下標文字 ( suberscript text ) 時使用<sub>標籤,被標記的內容會在文字基線下方建立小型的字母,例如化學式的表示。


使用技巧及注意事項 Tips and Notes

<sub>標籤在使用時還是要注意,不能只是單純的為了格式上的樣式使用(當然像LaTeX這種排版、文字美工軟體,就可以為所欲為的調整文字的基準線),HTML5裡還是強調一個重點,所有格式類的標記目的不是樣式,而是要區別文義。

另外可參考和<sub>標籤有同樣意義的<sup>標籤


可使用的屬性 Attributes

支援全域屬性(Global Attributes)事件屬性(Event Attributes)


範例 Examples
範例 1 example:
澄清石灰水加入二氧化碳產生碳酸鈣和水,化學式為<br /> 
Ca(OH)<sub>2</sub>+CO<sub>2</sub>=CaCO<sub>3</sub>+H<sub>2</sub>O

Demo結果如下

澄清石灰水加入二氧化碳產生碳酸鈣和水,化學式為
Ca(OH)2+CO2=CaCO3+H2O

範例 1 中,化學式元素的原子數就是以下標做為標記符號

範例 2 example:
<p>The coordinate of the <var>i</var>th point is 
(<var>x<sub><var>i</var></sub></var>, <var>y<sub><var>i</var></sub></var>). 
For example, the 10th point has coordinate 
(<var>x<sub>10</sub></var>, <var>y<sub>10</sub></var>).</p>

Demo結果如下

The coordinate of the ith point is (xi, yi). For example, the 10th point has coordinate (x10, y10).

範例 2 中,數範例 2 中,數學式定義變數的部分也可使用<sub>標籤。在數學式中,樣式上會有許多上標、下標的文字樣式,比較建議的用法是使用MathML 來紀錄。

HTML <sup> Tag


定義及用法 Definition and Usage

當文本中需要使用上標文字 ( superscript text ) 時使用<sup>標籤,被標記的內容會在文字基線上方建立小型的字母,例如對某文字的註釋。


使用技巧及注意事項 Tips and Notes

<sup>標籤在使用時還是要注意,不能只是單純的為了格式上的樣式使用(當然像LaTeX這種排版、文字美工軟體,就可以為所欲為的調整文字的基準線),HTML5裡還是強調一個重點,所有格式類的標記目的不是樣式,而是要區別文義。

另外可參考和<sup>標籤有同樣意義的<sub>標籤


可使用的屬性 Attributes

支援全域屬性(Global Attributes)事件屬性(Event Attributes)


範例 Examples
範例 1 example:
<p>The most beautiful women are 
<span lang="fr"><abbr>M<sup>lle</sup></abbr> Gwendoline</span> and 
<span lang="fr"><abbr>M<sup>me</sup></abbr> Denise</span>.</p>  

Demo結果如下

The most beautiful women are Mlle Gwendoline and Mme Denise.

範例 1 中,說明了在某些語言體例(typographical conventions)中,縮寫是上標樣式。

範例 2 example:
透過點數,以分計費,每分鐘新台幣2.5元<sup>[1]</sup>,用多少算多少。<br /> 
無須額外申請帳號密碼,更無須支付任何日租或月租費用。<br /> 
註1:您可隨時透過紀錄視窗,看到您已使用的時數,以及已被扣取的點數。
        

Demo結果如下

透過點數,以分計費,每分鐘新台幣2.5元[1],用多少算多少。
無須額外申請帳號密碼,更無須支付任何日租或月租費用。
註1:您可隨時透過紀錄視窗,看到您已使用的時數,以及已被扣取的點數。

範例 2 中,說明上標的使用時機可以用在註腳 ( footnotes )上。

HTML <time> Tag


定義及用法 Definition and Usage

當文本內容是時間或是日期的時候,加上<time>標籤,雖然樣式上沒有什麼變化,但透過制定的時間日期格式,有助於搜尋引擎或其他的程式資源解譯並加以有效利用。


使用技巧及注意事項 Tips and Notes

可以是時間(24小時制),或是日期(西元曆)的格式。


可使用的屬性 Attributes
屬性 Attribute 值 Value 描述 Description
datetime datetime Gives the date/time being specified. Otherwise, the date/time is given by the element's contents

以上為<time>專有屬性,點選該屬性會連結到範例。除了特有屬性外,<time>還
支援全域屬性(Global Attributes)事件屬性(Event Attributes)


範例 Examples
範例 1 example:
<p>We open at <time>10:00</time> every morning.</p> 
<p>We close at <time>19:00</time> every night.</p> 

Demo結果如下

We open at every morning.

We close at every night.

範例 1將時間加上了<time>標籤,注意格式上的要求,time中規定只能用24小時制而不能用am、pm。這是簡單的範例,有興趣的話,以下範例2列出更多格式的表示方法

範例 2 example:
表示某月份的方式 <time>2011-11</time>
表示某日期的方式 <time>2011-11-12</time> 
每年的某日的方式 <time>11-12</time> 
表示 時 分的方式 <time>14:54</time>
表示時分秒的方式 <time>14:54:39</time>
表示時分秒的方式 <time>14:54:39.929</time>
表示 時區 的方式 <time>-0800</time>
表示 時區 的方式 <time>-08:00</time>
表示 週   的方式 <time>2011-W46</time>
表示連續時間方式 <time>4h 18m 3s</time>

HTML <time> 的 datetime 屬性 使用方式
語法 Syntax:
<time datetime="YYYY-MM-DDThh:mm:ssTZD">        

屬性值 Value 屬性值描述 Description
YYYY-MM-DDThh:mm:ssTZD 以下是每個屬性值中,每個組件的說明:
  • YYYY - year (e.g. 2011)
  • MM - month (e.g. 01 for January)
  • DD - day of the month (e.g. 08)
  • T - a required separator if time is also specified
  • hh - hour (e.g. 22 for 10.00pm)
  • mm - minutes (e.g. 55)
  • ss - seconds (e.g. 03)
  • TZD - Time Zone Designator (Z denotes Zulu, also known as Greenwich Mean Time)

datetime 屬性使用範例A example:
<p>
I have a date on <time datetime="2012-02-14">Valentines day</time>.
</p> 
<p>我在 <time datetime="02-14">情人節</time>有個約會。</p>

Demo結果如下

I have a date on .

我在 有個約會。

範例的結果裡,不會把時間給render出來,底下舉出的例子也是一樣,寫出datetime屬性值的目的只是為了方便機器識讀。另外,範例A中第一句的datetime值(2012-02-14)和第二句datetime值(02-14),在意義上也不同,第一句單指某一年的情人節,而第二句則是每年的情人節。

datetime 屬性使用範例B example:
<span class="summary">豬腦學HTML研討會</span>: 
<time class="dtstart" datetime="2012-10-18">October 18</time> - 
<time class="dtend" datetime="2012-10-21">21</time>

Demo結果如下

豬腦學HTML研討會: -

範例B的結果裡,不會把時間給render出來,這類的用途大多是拿來做行事曆等互動網頁設計,才會用到這個屬性。下面的範例C也是同樣的意思。

datetime 屬性使用範例C example:
Today is <time datetime="2011-11-12">Tuesday</time>. 
Next meeting is at <time datetime="2011-11-12 15:00-08:00">3pm</time>.

Demo結果如下

Today is . Next meeting is at .

HTML <tt> Tag


定義及用法 Definition and Usage
注意:HTML5不再支援<tt>標籤

當要輸出像 teletype text 那樣的「等字距」文字時,使用<tt>標籤


使用技巧及注意事項 Tips and Notes

HTML5裡廢棄了<tt>標籤,建議使用CSS的方法去設定就可以了。範例裡頭我再詳細說明


範例 Examples
範例 1 example:
<p><tt>This text is teletype text.</tt></p>
<p>This text is not teletype text.</p> 

Demo結果如下

This text is teletype text. 這是電傳文字樣式,有差別嗎?

This text is not teletype text. 這不是電傳文字樣式,有差別嗎?

範例 1 中,第一行文字用了<tt>,和第二行比較起來,第一行文字中的每個符號都是等距寬 (monospaced )的,尤其是標點符號、空格這二個很明顯。這種需求多半是針對為了輸出列印,很講究排版的人所制定的。

HTML5中,棄置了這種單純調整樣式的標籤,樣式統一交給CSS來設定。所以若是習慣使用<tt>的人,要改成以下的方式來處理。

範例 2 example:
<style type="text/css">
p.serif{font-family:"Times New Roman",Georgia,Serif}
p.sansserif{font-family:Arial,Verdana,Sans-serif}
p.monospace{font-family:"Courier New","Lucida Console",Monospace}
</style>
<p class="serif">Text shown in the TimesNewRoman font.</p>
<p class="sansserif">Text shown in the Arial font.</p>
<p class="monospace">Text shown in the Courier New font.</p>
        

Demo結果如下

This is a paragraph, shown in the Times New Roman font.

This is a paragraph, shown in the Arial font.

This is a paragraph, shown in the Courier New font.

範例二就是CSS設定font-family的方式

HTML <wbr> Tag


定義及用法 Definition and Usage

<wbr>標籤定義了字元自動換行( line-break )的時機。


技巧及備註 Tips and Notes

當一個字太長的時候,瀏覽器會因解析寬度的不同,在不同的字句中斷行,若是你擔心這樣會影響排版,或是讓文字顯示不正常,那麼就可以適時的加入<wbr>來控制換行時機。目前除了IE不支援,其他的瀏覽器都可以使用<wbr>元素。


可使用的屬性 Attributes

支援全域屬性(Global Attributes)事件屬性(Event Attributes)


範例 Examples
範例 1 example:
<p> 
To learn Asynchronous JavaScript And XML, you have to _
be familiar with the XML<wbr>Http<wbr>Request Object. </p>
<p> 
To learn Asynchronous JavaScript And XML, you have to _
be familiar with the XMLHttpRequest Object. </p>

Demo結果如下

To learn Asynchronous JavaScript And XML, you have to be familiar with the XMLHttpRequest Object.

To learn Asynchronous JavaScript And XML, you have to be familiar with the XMLHttpRequest Object.

上面範例中的二個句子,在瀏覽器中文字是一樣的,但第一句中加入了<wbr>,所以即便「XMLHttpRequest」是一個word,在自動換行時也會依<wbr>標籤位置去切割。

範例 2 example:
<p> 錦瑟無端五十弦,一弦一柱思華年。_
    莊生曉夢迷蝴蝶,望帝春心托杜鵑。_
    滄海月明珠有淚,藍田日暖玉生煙。_
    此情可待成追憶,只是當時已惘然。_<br /> 
    I want to demo the old question about word-wrap,_
   "Imthefirstwordthatisntexistintheworld _
    Iamthesecondwordthatisntexistintheworld _
    Imthelastwordthatisntexistintheworld"
 </p>

Demo結果如下

錦瑟無端五十弦,一弦一柱思華年。莊生曉夢迷蝴蝶,望帝春心托杜鵑。滄海月明珠有淚,藍田日暖玉生煙。此情可待成追憶,只是當時已惘然。
I want to demo the old question about word-wrap, "ImthefirstwordthatisntexistintheworldIamthesecondwordthatisntexistintheworldImthelastwordthatisntexistintheworld"

在上面這個例子中,英文字的部分超出了我設計的框架外,並沒有自動換行,我只是要試圖說明,<wbr>這個標籤其實應該要和 CSS3 中制定的 word-wrap 一起討論會更讓人了解 (當然,如果你還沒有研究 CSS 的話,這裡就跳過吧。純屬個人意見)

文字自動換行,是一個老生常談的問題了。這是瀏覽器會面對的問題,所以設計了相應的能力,把超出頁面的文字自動傳到下一行,這個就是「word wrap」。

不過,這種設計只限於拼音文字,像中文這樣單體成字的語言系統是沒有這種準則的,範例中,我貼了一首中文詩,理論上我當然希望詩以「句」的方式呈現,不要在句中斷行,但對應的處理程式並沒有針對這樣的設計,當然除非你給他剛剛好的寬度(一行8個全形字),它自然可以自動切得整齊。

像這樣單體成字的系統,還有日本、韓國,這三個文字被統稱為 CJK(Chinese, Japanese, and Korean),CJK 在文字呈現的規則上,和非 CJK 有些差別,舉例來說,非 CJK 的通則為(1)單詞不能在中間不合法斷開(除非在斷開處加連接符(2)標點符號不能成為行首;而 CJK 的通則為(1)雙字長的標點符號不能斷開,像破折號、省略號 (2)標點符號不能為行首。

所以<wbr>對於中文來說是不必要的存在。其實對我而言,對英語也是不必要的存在。
範例 2,我還特地寫了一個很長的英文字,可以很清楚的看到,這串英文單字已經超出我用CSS畫的框架中,瀏覽器在預設中設定了規則,為了保證完整的呈現字義,程式上寧可破壞美觀,不因換行自動拆字。就我的觀點來說,這個設計很合理。不過CSS裡頭也可以允許使用者去破壞這個規則,就是設定 word-break 或是 word-wrap 來強行斷開單詞,版面就不會因為文字跑掉。但是用過這類 CSS 的就知道,這是很不必要的舉止。現在 HTML5 裡也新增了類似用途的元素,就是<wbr>。

當然英文單字裡應該不會有像範例 1 中這麼變態長的英文單字,但倘若存在這種單字呢?也許我們要想的,應該不是多設計一個<wbr>元素來把不合理的事情給合理化(如範例 1 ,我覺得不妥),相反的我們應該想的是,如果有這麼長的單字,你怎麼可以設計一個窄的容器來放他呢?

所以,我猜想IE瀏覽器沒有接納這個標籤的原因,應該是在於這個問題。這個標籤對我來說也是非必要的存在。

HTML <strong> Tag


定義及用法 Definition and Usage

當文本中部分內容有強烈的重要性,就用<strong>。


可使用的屬性 Attributes

支援全域屬性(Global Attributes)事件屬性(Event Attributes)


範例 Examples
範例 1 example:
<p><strong>Warning.</strong> This dungeon is dangerous. 
<strong>Avoid the ducks.</strong> Take any gold you find. 
<strong><strong>Do not take any of the diamonds</strong>, 
they are explosive and <strong>will destroy anything within 
ten meters.</strong></strong> You have been warned.</p>   

Demo結果如下

Warning. This dungeon is dangerous. Avoid the ducks. Take any gold you find. Do not take any of the diamonds, they are explosive and will destroy anything within ten meters. You have been warned.

<strong>的意義就是把文本中重要的內容給標記,所以一則敘述中,若是<strong>元素愈多,代表著這則敘述佔文章的地位愈重。範例 1 是一個遊戲的警告訊息,這個範例有趣之處在於,其中在描述「Do not take any of the diamonds」這個地方嵌進了 2 個<strong>,代表這段文字是「重要中的重要」,不過在視覺上是沒有什麼差別的啦。

Related Posts Plugin for WordPress, Blogger...
// Dnow Function