那麼就來介紹插入圖片的標示及其基本屬性有哪些，圖片標示為常見的image(圖片)的縮寫<img>，是屬於單一標示(Single Tag)。其基本屬性當然就是要先告知放上的圖片是哪一張，因此需要"src"來引導圖片的路徑，另外調整圖片的大小可以簡單的應用"width"以及"height"屬性來宣告，圖片大小的預設單位為pixel，馬上就來看看以下的實例吧!
例如: 插入圖片的基本動作
<html>
<head>
<title>筆記4:插入圖片</title>
</head>
<body>
<img src="Image1.jpg">
</body>
</html>
結果:
例如: 調整插入圖片的大小
<html>
<head>
<title>筆記4:插入圖片</title>
</head>
<body>
<img src="Image1.jpg" width="500" height="300">
</body>
</html>
結果:
這裡要特別注意，調整圖片大小會增加瀏覽器載入的時間，當網站有大量的圖片時，若每張圖片都去做Resize，那會造成冗長的載入時間，因此插入圖片最好的方式就是依據圖檔的原始大小插入。
另外原本HTML有圖片排版的屬性，但目前已經不支援HTML 5了，只能依靠CSS來對圖片做排版的動作，若簡單想把圖片置中，可以用<center></center>將圖片標示包住即可。
例如: 應用<center>將圖片置中
<html>
<head>
<title>筆記4:插入圖片</title>
</head>
<body>
<center>
<img src="Image1.jpg" width="500" height="300">
</center>
</body>
</html>
結果:
沒有留言:
張貼留言