html图像标签、绝对路径和相对路径
生活随笔
收集整理的這篇文章主要介紹了
html图像标签、绝对路径和相对路径
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
僅供學習,轉載請注明出處
html圖像標簽
<img>標簽可以在網頁上插入一張圖片,它是獨立使用的標簽,它的常用屬性有:
- src屬性 定義圖片的引用地址
- alt屬性 定義圖片加載失敗時顯示的文字,搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片,所以此屬性非常重要。
<img src="images/pic.jpg" alt="產品圖片" />
示例代碼如下:
<!DOCTYPE html> <html> <head><title></title> </head> <body><img src="e7525a4a93.jpg" alt="美女圖片"> </body> </html>瀏覽器展示如下:
絕對路徑和相對路徑
像網頁上插入圖片這種外部文件,需要定義文件的引用地址,引用外部文件還包括引用外部樣式表,javascript等等,引用地址分為絕對地址和相對地址。
- 絕對地址:相對于磁盤的位置去定位文件的地址
- 相對地址:相對于引用文件本身去定位被引用的文件地址
絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件,相對路徑就沒有這個問題。相對路徑的定義技巧:
“ ./ ” 表示當前文件所在目錄下,比如:“./pic.jpg” 表示當前目錄下的pic.jpg的圖片,這個使用時可以省略。
“ ../ ” 表示當前文件所在目錄下的上一級目錄,比如:“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
當前文件路勁 ./ 示例
代碼如下:
瀏覽器展示如下:
另一個目錄下 ./images/ 示例
代碼如下:
瀏覽器展示如下:
關注微信公眾號,回復【資料】、Python、PHP、JAVA、web,則可獲得Python、PHP、JAVA、前端等視頻資料。
總結
以上是生活随笔為你收集整理的html图像标签、绝对路径和相对路径的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 约素
- 下一篇: 发表SCI或EI类英文文章的投稿经验