本站電子書

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

HTML 4.01 快速導覽 - 文字標記與樣式

HTML 4.01 提供給文字一些結構性的標籤 (tag) ,也有單純文字樣式 (style) 的標籤,例如

  • <h?> - 標題
  • <em> - 強調
  • <strong> - 強調
  • <dfn> - 定義
  • <code> - 程式碼
  • <samp> - 簡單文字
  • <kbd> - 鍵盤符號
  • <var> - 變數
  • <cite> - 作品名稱
  • <abbr> - 英文縮寫
  • <acronym> - 頭字母縮寫詞 Obsolete
  • <q> - 行內引用
  • <sub> - 下標
  • <sup> - 上標
  • <ins> - 插入
  • <del> - 刪除
  • <tt> - 細小字型 Obsolete
  • <i> - 斜體字型
  • <b> - 粗體字型
  • <big> - 放大字型 Obsolete
  • <small> - 縮小字型
  • <strike> - 刪除線 Obsolete
  • <s> - 刪除線 Obsolete
  • <u> - 底線 Obsolete
  • <font> - 字型樣式 Obsolete
  • <basefont /> - 預設字型樣式 Obsolete


凡是以 Obsolete 附註的,就表示該標籤在 HTML 5 已不再使用,因此我們在設計網頁時,也應該盡量避免使用 Obsolete 的標籤。


舉例如下
<html>
<head>
<title>網頁標題</title>
</head>
<body>
<h1>第一個標題</h1>
<strong>強調標籤</strong>
<h2>第二個標題</h2>
<cite>作品名稱</cite>
<h3>第三個標題</h3>
<q>引用文字</q>
<h4>第四個標題</h4>
<del>刪除</del>
<h5>第五個標題</h5>
<ins>插入</ins>
<h6>第六個標題</h6>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:textexample59.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


利用瀏覽器 (broswer) 開啟,如下



此例中,我們分別在第 6 、 8 、 10 、 12 、 14 、 16 行使用 <h1> 到 <h6> 的標題標籤,將標題文字以不同大小的粗體顯示,以下為第 6 行
<h1>第一個標題</h1>


<h1> 到 <h6> 都是區塊元素 (block element) ,其他的標籤都是行內元素 (inline elememt) 。


第 7 行的 <strong> 標籤,這與 <b> 的文字樣式效果相同
<strong>強調標籤</strong>


第 9 行的 <cite> 標籤,這與 <i> 的文字樣式效果相同
<cite>作品名稱</cite>


第 13 行的 <del> 標籤,這與 <s> 的文字樣式效果相同
<del>刪除</del>


第 15 行的 <ins> 標籤,這與 <u> 的文字樣式效果相同
<ins>插入</ins>


HTML 提供的是網頁結構的標記語言,所以使用 HTML 應以網頁結構為軸心,可是早期 CSS 尚未發展完備,所以到 HTML 4.01 的時候, HTML 中仍留有許多屬於文字樣式的標籤。


因此,我們都應該避免使用被 Obsolete 的標籤,樣式的部份就交給 CSS 樣式表 (style sheet) 囉!


中英文術語對照
標籤tag
樣式style
區塊元素block element
行內元素inline elememt
樣式表style sheet


您可以繼續參考



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


參考資料

沒有留言: