整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          「胖達分享」網頁中的圖片和html文檔的路徑

          嘍大家好,我是胖達。本期視頻來看看路徑相關的內容。我們知道在網頁中存在很多的圖片,如果把這些圖片和html文檔放在一起,這樣不光不美觀,管理起來也非常不方便。通常會新建一個專門用來管理圖像資源的文件夾,當需要查找圖像的時候就會選擇使用路徑的方式來指定圖像文件的位置。

          路徑的類型又分為兩種,第一種是相對路徑,第二種是絕對路徑。今天先來了解一下相對路徑。相對路徑是相對于當前文件的位置來表示資源,也就是圖片位置的路徑表達方式。簡單來說就是圖片相對于當前html文檔的位置。這里把相對路徑的分類給大家列出來了,一個一個往下看。

          ·首先是同級路徑。同級路徑不需要在html里面寫任何符號,只需要將文件名寫到html屬性里就可以了。在代碼里看一下,這里有一個image,點jpg的圖片和html文檔處于同一級,所以在html的屬性里直接寫image,點jpg保存一下看看效果。

          可以看到現在圖片是正常展示的,同級路徑下只需要在html屬性里完整填寫圖像文件的名稱就可以了。

          ·再來看第二個下級路徑。當圖像文件位于html文件下一集時,需要在html屬性里完整填寫同級文件夾的名稱,然后斜杠寫出對應圖片文件的名稱。

          →首先打開資源文件夾,在這里新增一個images的文件夾。將image圖片文件復制一份放到images文件夾里。

          →打開vscode,新建一個gtml文檔,這里新增一個image標簽。

          →在左側資源管理器中剛剛新增的images文件夾已經顯示出來了,打開以后會發現里面有一個image,點jpg的圖片。把這個路徑寫一下,在src屬性里面寫入位于當前html文件同級的images文件夾的名稱,使用符號斜杠找到image,點gpg,看一下效果。此時圖片也完整顯示出來了。

          →如果在amager四文件夾里還有一個amager四文件夾,下級路徑又該怎么寫?在amager文件夾里再新建一個文件夾,打開vscod,在左側的資源管理器中a major s文件夾下面又新增了一個a major s文件夾,在這里面又放了一張圖片。

          這張圖片應該怎樣讓它展示出來?一起來看一下。

          →首先找到同級的images文件夾,使用符號斜杠,此時vscode會提供給兩個選項,一個是imagers文件夾,另一個是imager.gpg。選擇imagers,imagers文件夾里面的imager.gpg的文件了,保存一下看看效果。

          在瀏覽器中這兩張圖片都完美的展現出來了。

          最后來看一下相對路徑里面的。上級路徑使用的符號是點點杠。上級路徑又應該怎么理解?也就是圖像文件是位于當前這個 hd ml文件的上一集。

          在練習文件夾里新增一個名為 hd ml的文件夾,打開vs code,選擇剛剛新增的文件夾,選擇新建文件,這里需要新增一個 hd ml文檔。在當前 hd ml文檔中,如果想要調用上一級的 image 點 j p g 的圖片應該怎么做?在 sr c 屬性里面使用點點杠。

          這里 vs code提供了上一集路徑中存在的文件,選擇 image 點 j p g,在瀏覽器中看下效果,此時圖片也是正常顯示的。如果hd ml文件藏得更深一些,把當前的文件復制一份,新增一個hd ml文件夾,將復制的文檔粘貼一下,打開剛剛復制的文檔,修改sr c屬性里面的值,使用點點杠。

          此時是沒有找到 amage 點 j p g 的文件,這個時候就需要重復剛剛的操作,點點杠就能找到需要到的 amage 點 jbg 的文件了,保存一下看看效果。這里可以看到圖片還是正常顯示出來了。

          本期視頻主要了解了相對路徑的三種分類,一個是同級路徑,一個是下級路徑,還有一個是上級路徑。希望小伙伴們下來可以好好練習一下,這對于后期的內容非常重要。下期再來聊聊絕對路徑。本期的內容到此結束,感謝觀看,下期再見。

          語:有時候在電腦上網的時候看見自己喜歡的網站或特別的頁面,自己已經點擊電腦屏幕上方的星號收藏這個頁面了,但有時候看收藏夾又被密密麻麻的內容弄得頭昏眼花,這時,我的處理方法是把收藏的頁面導出來,新建文件夾分類整理好,這樣下次想看什么內容就不用只看收藏夾里小小的字,而是在文件夾中能夠清楚的,按照自己的習慣,分好類別的,整潔的頁面了。下面是具體操作,根據提示的1、2、3······進行操作,就可以了。

          首先打開瀏覽器。找到自己喜歡的頁面,我打開了自己的收藏夾,找到自己喜歡的頁面。然后點擊文字跳轉到具體的那個喜歡的頁面。

          然后點擊屏幕上方,瀏覽器的三個點“···”。

          然后點擊“更多工具”。

          然后點擊“將頁面另存為”。

          選擇文件夾,把頁面保存下來。

          最后打開電腦你保存文件在什么地方,就能在該地方找到保存的喜歡頁面,該頁面在文件夾里保存的形式為“html”文件。

          .它是一種計算機(PC)的超文本標記語言(Hyper Text Markup Language),縮寫為HTML,HTML是一種標記語言(markup language),是制作網頁所必備的語言,語法較為松散,不嚴格的web語言;標簽可以不閉合,不區分大小寫。

          2.標記標簽通常被稱為HTML標簽,標簽由尖括號包圍的關鍵字組成,通常都是成對出現的,有開始標簽和結束標簽,如<html></html>。

          瀏覽器不會顯示html標簽(白話:瀏覽器只會顯示標簽里邊的內容),而是使用標簽來解釋頁面的內容。

          比如這一行代碼:<body>你好 </body>要放在<html></html>里邊,網頁只展示了你好 其他內容并沒有展示。


          代碼


          頁面


          以下資料均由自己的認知和資料整理所得:

          1989年,歐洲物理量子實驗室(CERN)的信息專家蒂姆·伯納斯·李發明了超文本鏈接語言, 使用此語言能輕松地將一個文件中的文字或圖形連到其它的文件中去,這就是HTML的前身。1991年,蒂姆伯·納斯·李在CERN定義了HTML語言的第一個規范,之后成為W3C組織為專門在互聯網上發布信息而設計的符號化語言規范??梢哉f,HTML(Hypertext Markup Language)是SGML的一個實例,它的DTD作為標準被固定下來。因此,HTML不能作為定義其它符號化語言的元語言。

            作為World Wide Web的一個組成部分,HTML語言發展很快,在短短的幾年里,它已歷經了HTML1.0、HTML2.0和HTML3.0、HTML4.0等多個版本,同時DHTML (動態)、VHTML(虛擬)、SHTML等也飛速發展起來。HTML以簡單精練的語法、極易掌握的通用性與易學性,使Web網頁可以親近于每一個普通人,互聯網因此得以普及發展以至今日輝煌。

          但是,目前的HTML還不穩定,不同的瀏覽器會產生不同的顯示效果。此外,由于HTML對超級鏈接支持不足,并缺乏空間立體描述,處理圖形、圖像、音頻、視頻等多媒體能力較弱,圖文混排功能簡單,不能表示多種媒體的同步關系等缺點,也影響HTML的大規模應用以及用于復雜的多媒體數據處理,一種語言各有各的優點和缺點。

          人們常常贊美蒂姆·伯納斯·李“與其他所有推動人類進程的發明不同,這是一件純粹個人的勞動成果,萬維網只屬于蒂姆·伯納斯·李一個人。”而這個心懷浪漫、獻身科學的英國學者,卻將只屬于他一個人的發明,無償獻給了世界。


          主站蜘蛛池模板: 无码人妻精品一区二区三 | 国产成人欧美一区二区三区| 中文字幕乱码亚洲精品一区| 人妻AV一区二区三区精品 | 欧美日韩精品一区二区在线视频| 日日摸夜夜添一区| 亚洲欧美日韩国产精品一区| 精品国产一区二区三区久久影院 | 久久久国产一区二区三区| 波多野结衣AV无码久久一区| 亚洲bt加勒比一区二区| 日本一区二区三区不卡视频| 精品国产高清自在线一区二区三区| 国产精品一区二区无线| 中文字幕亚洲乱码熟女一区二区| 一区高清大胆人体| 国产精品久久亚洲一区二区| 中文字幕精品一区| 亚洲国产激情在线一区| 视频一区二区中文字幕| 国产精品毛片VA一区二区三区| 一区一区三区产品乱码| 久久精品无码一区二区日韩AV| 亚洲一区电影在线观看| 女人和拘做受全程看视频日本综合a一区二区视频 | 波多野结衣电影区一区二区三区| 国产一在线精品一区在线观看| 91视频一区二区| 亚洲国产精品一区二区第四页| 亚洲韩国精品无码一区二区三区 | 精品视频一区二区三区在线播放| 国偷自产av一区二区三区| 亚洲av成人一区二区三区在线播放| 亚洲国产成人精品久久久国产成人一区二区三区综 | 国产日韩一区二区三免费高清| 亚洲第一区二区快射影院| 国产精品无码不卡一区二区三区| 学生妹亚洲一区二区| 国产一区二区电影| 无码精品人妻一区二区三区影院 | 国产成人综合亚洲一区|