學習誌

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      顯示圖片
    </title>
  </head>
  <body>
    <p>
      <img src="http://www.nctu.edu.tw/img/newphoto1.gif" title="國立交通大學" alt="沒圖沒真相" />
    </p>
    <p>
      <img src="http://www.nctu.edu.tw/img/newphoto2.gif" title="國立交通大學" alt="沒圖沒真相" />
    </p>
  </body>
</html>

以上的範例說明：要顯示圖檔就用<img />，由此可知img是一個空元素。img有個屬性src，用來指定圖檔的URI；title也是img的屬性之一，當滑鼠指標移到圖片上時，會在滑鼠指標附近，顯示title所指定的屬性值。除了html、head、meta、title、base、param、script，幾乎所有HTML元素都有title。

alt是img的必要屬性之一；用img而沒有alt，會讓網頁無法通過validator.w3.org檢驗的喔；當無法顯示圖片時，會顯示alt的屬性值。

範例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      顯示圖片
    </title>
  </head>
  <body>
    <p>
      <img src="http://www.w3.org/Icons/w3c_main.png" height="240" width="320" title="W3C" alt="w3c_main" />
    </p>
    <p>
      <img src="http://www.w3.org/Icons/w3c_main.png" title="W3C" alt="w3c_main" />
    </p>
  </body>
</html>

以上的範例說明：img還有兩個屬性：height、width 。分別用來設定圖片的高度和寬度。可以利用這兩個屬性做出放大或縮小圖片的效果。