html網頁中的圖片代碼用img標簽來寫


html網頁中的圖片代碼用img標簽來寫:

把img放入符號<>中,寫成<img>,但是由于<img>沒有結束標簽,規范的寫法是要加上空格和/來結束這個標簽,寫成這樣<img />

然后,在img后面加上屬性和對應的值即可,img的屬性非常多,例圖:

img標簽的屬性和值對應表格圖示

除了必須的屬性alt和src以外,一般常用的屬性還有width和height,新手網友看到這里,估計已經看迷糊了,范如樂舉例說明,你就懂了,比如這張圖片:

如樂建站之家創始人范如樂

這張圖片的代碼是這樣的:

<img src=”http://www.lmaocr.com/tupian/rule.jpg” alt=”如樂建站之家創始人范如樂” width=”200″ height=”200″ />

解讀如下:

在標簽<img />中每加入一個屬性,需要先用空格隔開,然后添加屬性,比如添加src屬性,這個src屬性是規定顯示圖像的URL,也就是連接的地址,用=連接對應的值,值放入符號””中間,寫成這樣:

<img src=”http://www.lmaocr.com/tupian/rule.jpg” />

其中”http://www.lmaocr.com/tupian/rule.jpg”就是src的值,也就是這張圖片的地址,如果是站內地址,也可以寫成這樣”/tupian/rule.jpg”

這個地址具體是什么,取決于你的圖片放在什么地方,例圖:

圖片地址取決于圖片存放的位置

接著再用空格隔開,然后添加屬性alt,這個alt屬性是規定圖像的替代文本,也就是當圖片無法顯示的時候,用來顯示的一段說明的文字,同樣用=連接對應的值,值放入符號””中間,寫成這樣:

<img src=”http://www.lmaocr.com/tupian/rule.jpg” alt=”如樂建站之家創始人范如樂”? />

其中”如樂建站之家創始人范如樂”就是alt的值,當圖片無法顯示的時候,會顯示這段文字。

每一張圖片,你都可以寫上一段文字來描述這張圖片。

接著再用空格隔開,然后添加屬性width和height,width屬性用來設置圖片的寬度,height屬性用來設置圖片的高度,同樣用=連接對應的值,值放入符號””中間,寫成這樣:

<img src=”http://www.lmaocr.com/tupian/rule.jpg” alt=”如樂建站之家創始人范如樂” width=”200″ height=”200″ />

其中”200″就是他們的值,改變這個數值,就會改變圖片顯示的大小,一般高和寬是不修改的,因為當你做好一張圖片的時候,你就已經把圖片的大小定好了,如果改變其中的值,會導致圖片變形。

值得注意的是,不要直接使用過大的圖片,然后通過width和height來改變圖片在網頁顯示中的大小,因為網頁加載圖片的時候,越大的圖片加載的時間越長。

有些網站打開慢,并不是網站本身出了什么問題,而可能是你上傳了很多很大的圖片,導致網頁加載的時間過長導致的。

還記得上節課講的p標簽嗎?img標簽是可以放入p標簽中的哦,寫成這樣:

<p><img src=”rule.jpg” width=”200″ height=”200″ alt=”如樂建站之家創始人范如樂” /></p>

還有一個跟p標簽和img標簽常用的是a標簽,可以讓文字和圖片被點擊,也就是超鏈接,詳情點擊:《html網頁中的超鏈接代碼用a標簽來設置》。

轉載時需注明來源!首發:如樂建站之家;原文鏈接:
http://www.lmaocr.com/html/7737.html
如樂建站之家創始人——范如樂:

如樂建站之家創始人范如樂  聯系Q Q:349142701
  聯系微信:349142701
  聯系電話:13189611692

【如樂建站之家】由范如樂于2013年創建至今,立志于解決新手不會快速自己建網站的痛苦,讓你也能零基礎快速學會自己建網站!詳細教程點擊下圖:




熱門文章: