HTML用img標籤做圖-css教學-PHP中文網

HTML用img標籤做圖

php中世界最好的语言

發布： 2018-03-08 17:12:14

原創

2049 人瀏覽過

這次帶給大家HTML用img標籤做圖，HTML用img標籤做圖的注意事項有哪些，以下就是實戰案例，一起來看一下。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML:基础img标签 做一个图库</title>
</head>
<body>
 <h1>收藏的图片</h1>
 <img  src="1.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="2.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="3.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="4.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="5.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="6.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="7.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="8.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="9.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="10.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="11.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="12.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="13.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="14.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="15.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="16.jpg"    style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
</body>

登入後複製

HTML用img標籤做圖

</html>
// 源码讲解
src:图片的路径
width:设置图片的宽度
height:设置图片的高度
alt:图片无法显示则显示描述文字（图库例子中并没有用这个属性）
关于路径分为相对路径和绝对路径
 但有盘符的就是绝对路径 比如:file:///C:/Users/windows/Desktop/html/index.html(我的文件放到了桌面html文件夹的地方)

登入後複製

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！