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

收藏的图片

首頁

web前端

css教學

HTML用img標籤做圖

Mar 08, 2018 pm 05:12 PM

html 標籤

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML:基础img标签 做一个图库</title>
</head>
<body>
 <h1 id="收藏的图片">收藏的图片</h1>
 <img  src="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="2.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="3.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="4.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="5.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="6.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="7.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="8.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="9.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="10.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="11.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="12.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="13.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="14.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="15.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="HTML用img標籤做圖" >
 <img  src="/static/imghw/default1.png"  data-src="16.jpg"  class="lazy"      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中文網其它相關文章！