HTML圖片元素（標記）

<html>
<head>
<title>第一個網頁</title>
</head>
<body>
***************圖片元素******************</br>
<img src='mm.jpg' />
</body>
</html>

新建一個文件夾“text”,在text文件夾內新建index.html并放入一張圖片mm.jpg

在index.html中寫入 <img src="a.jpg" /> 保存

打開index.html

?更改圖片大小<img src='mm.jpg' width=170px />只需寫width,height會隨著width自動比例變換

另外我們使用“../”來表示上一級目錄，“../../”表示上上級的目錄，以此類推。

<img src="" />
如果圖片和html文件在同一目錄，就直接寫*.jpg
如果圖片的文件夾和html在同一目錄，就寫/../*.jpg


說明，圖片可以鏈接外部網絡的URL
例如百度頁面上百度的logo，在logo上右鍵復制圖片地址，將圖片地址復制到src中

<img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png' width=120px />
<img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png' width=120px border=1 />

觀察上面兩行，第二個多了border，圖片顯示的效果是圖片外面一圈有黑色框，border的屬性值可以更改

<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />
<img src='mm.jpg' width=170px />

觀察效果，相同的圖片可以顯示多次

轉載于:https://www.cnblogs.com/Yimi/p/5847639.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/254503.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/254503.shtml
英文地址，請注明出處：http://en.pswp.cn/news/254503.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！