HTML 4.01 快速導覽 - 圖片 <img>

<img> 為行內元素 (inline element) ,用來在網頁中載入 JPEG 、 GIF 或 PNG 圖片。



起始標籤結束標籤
需要不需要


<img> 有幾個屬性
屬性Deprecated or Obsolete
alignleft
center
right
justify
Deprecated in HTML 4.01, Obsolete in HTML5
borderpixelDeprecated in HTML 4.01, Obsolete in HTML5
alt描述文字
height高度
hspacepixelDeprecated in HTML 4.01, Obsolete in HTML5
ismap0
1
longdescHTML 4 only
name元素名稱Deprecated in HTML 4.01, Obsolete in HTML5
src來源位置
width寬度
usemap來源位置
vspacepixelDeprecated in HTML 4.01, Obsolete in HTML5


舉例如下
<html>
<head>
<title>網頁標題</title>
</head>
<body>
圖片之前
<img src="example.jpg" />
圖片之後
</body>
</html>

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


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



我們可以利用 width 與 height 屬性 (attribute) 設定圖片在瀏覽器視窗中顯示的比例,例如下面將 width 與 height 都設定成 100% ,圖片就會充滿整個視窗
<html>
<head>
<title>網頁標題</title>
</head>
<body>
<img src="example.jpg" height="100%" width="100%" />
</body>
</html>

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


如下



下面將 width 與 height 都設定成 50% ,圖片就會佔視窗的四分之一
<html>
<head>
<title>網頁標題</title>
</head>
<body>
<img src="example.jpg" height="50%" width="50%" />
</body>
</html>

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


如下



中英文術語對照
行內元素inline element
瀏覽器broswer
屬性attribute


您可以繼續參考



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


參考資料

沒有留言: