2012年10月1日 星期一

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>來突顯變數的地位。

沒有留言:

張貼留言

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