首頁 > web前端 > html教學 > html圖片怎麼插入

html圖片怎麼插入

藏色散人
發布: 2023-01-05 16:12:12
原創
16397 人瀏覽過

在HTML中可以透過標籤插入圖片,插入的程式碼如“<img src="dinosaur.jpg">”,其中src屬性包含了指向我們想要引入的圖片的路徑,可以是相對路徑或絕對URL。

html圖片怎麼插入

本文操作環境:windows7系統、HTML5&&CSS3版,DELL G3電腦。

我們可以用 元素來把圖片放到網頁上。它是一個空元素(它不需要包含文字內容或閉合標籤),最少只需要一個 src (一般讀作其全名為 source)來使其生效。 src 屬性包含了指向我們想要引入的圖片的路徑,可以是相對路徑或絕對URL,就像 元素的 href 屬性一樣。

注意:在繼續之前,你應該閱讀快速入門URL和路徑來複習一下相對和絕對URL。

舉例來看,如果你有一幅檔案名稱為dinosaur.jpg 的圖片,並且它與你的HTML 頁面存放在相同路徑下,那麼你可以這樣嵌入它:

<img src="dinosaur.jpg">
登入後複製

如果這張圖片儲存在和HTML 頁面同路徑的images 資料夾下(這也是Google推薦的做法,利於SEO/索引),那麼你可以採用如下形式:

<img src="images/dinosaur.jpg">
登入後複製

以此類推。

注意:搜尋引擎也讀取影像的檔案名稱並把它們計入SEO。因此你應該給你的圖片取一個描述性的檔名:dinosaur.jpg 比 img835.png 好。

你也可以像下面這樣使用絕對路徑:

<img src="https://www.example.com/images/dinosaur.jpg">
登入後複製

但是這種方式是不被推薦的,這樣做只會使瀏覽器做更多的工作,例如重新通過DNS再去尋找IP 位址。通常我們都會把圖片和 HTML 放在同一個伺服器上。

【推薦學習:HTML影片教學

#

以上是html圖片怎麼插入的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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