首頁 > web前端 > css教學 > HTML用img標籤做圖

HTML用img標籤做圖

php中世界最好的语言
發布: 2018-03-08 17:12:14
原創
2118 人瀏覽過

這次帶給大家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中文網其它相關文章!

相關閱讀:

HTML的內嵌樣式改進《三毛經典語錄》

HTML裡的常見問題二

CSS的選擇器有哪些常見問題

以上是HTML用img標籤做圖的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板