Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
嘍大家好,我是胖達(dá)。本期視頻來看看路徑相關(guān)的內(nèi)容。我們知道在網(wǎng)頁中存在很多的圖片,如果把這些圖片和html文檔放在一起,這樣不光不美觀,管理起來也非常不方便。通常會新建一個專門用來管理圖像資源的文件夾,當(dāng)需要查找圖像的時候就會選擇使用路徑的方式來指定圖像文件的位置。
路徑的類型又分為兩種,第一種是相對路徑,第二種是絕對路徑。今天先來了解一下相對路徑。相對路徑是相對于當(dāng)前文件的位置來表示資源,也就是圖片位置的路徑表達(dá)方式。簡單來說就是圖片相對于當(dāng)前html文檔的位置。這里把相對路徑的分類給大家列出來了,一個一個往下看。
·首先是同級路徑。同級路徑不需要在html里面寫任何符號,只需要將文件名寫到html屬性里就可以了。在代碼里看一下,這里有一個image,點(diǎn)jpg的圖片和html文檔處于同一級,所以在html的屬性里直接寫image,點(diǎn)jpg保存一下看看效果。
可以看到現(xiàn)在圖片是正常展示的,同級路徑下只需要在html屬性里完整填寫圖像文件的名稱就可以了。
·再來看第二個下級路徑。當(dāng)圖像文件位于html文件下一集時,需要在html屬性里完整填寫同級文件夾的名稱,然后斜杠寫出對應(yīng)圖片文件的名稱。
→首先打開資源文件夾,在這里新增一個images的文件夾。將image圖片文件復(fù)制一份放到images文件夾里。
→打開vscode,新建一個gtml文檔,這里新增一個image標(biāo)簽。
→在左側(cè)資源管理器中剛剛新增的images文件夾已經(jīng)顯示出來了,打開以后會發(fā)現(xiàn)里面有一個image,點(diǎn)jpg的圖片。把這個路徑寫一下,在src屬性里面寫入位于當(dāng)前html文件同級的images文件夾的名稱,使用符號斜杠找到image,點(diǎn)gpg,看一下效果。此時圖片也完整顯示出來了。
→如果在amager四文件夾里還有一個amager四文件夾,下級路徑又該怎么寫?在amager文件夾里再新建一個文件夾,打開vscod,在左側(cè)的資源管理器中a major s文件夾下面又新增了一個a major s文件夾,在這里面又放了一張圖片。
這張圖片應(yīng)該怎樣讓它展示出來?一起來看一下。
→首先找到同級的images文件夾,使用符號斜杠,此時vscode會提供給兩個選項(xiàng),一個是imagers文件夾,另一個是imager.gpg。選擇imagers,imagers文件夾里面的imager.gpg的文件了,保存一下看看效果。
在瀏覽器中這兩張圖片都完美的展現(xiàn)出來了。
最后來看一下相對路徑里面的。上級路徑使用的符號是點(diǎn)點(diǎn)杠。上級路徑又應(yīng)該怎么理解?也就是圖像文件是位于當(dāng)前這個 hd ml文件的上一集。
在練習(xí)文件夾里新增一個名為 hd ml的文件夾,打開vs code,選擇剛剛新增的文件夾,選擇新建文件,這里需要新增一個 hd ml文檔。在當(dāng)前 hd ml文檔中,如果想要調(diào)用上一級的 image 點(diǎn) j p g 的圖片應(yīng)該怎么做?在 sr c 屬性里面使用點(diǎn)點(diǎn)杠。
這里 vs code提供了上一集路徑中存在的文件,選擇 image 點(diǎn) j p g,在瀏覽器中看下效果,此時圖片也是正常顯示的。如果hd ml文件藏得更深一些,把當(dāng)前的文件復(fù)制一份,新增一個hd ml文件夾,將復(fù)制的文檔粘貼一下,打開剛剛復(fù)制的文檔,修改sr c屬性里面的值,使用點(diǎn)點(diǎn)杠。
此時是沒有找到 amage 點(diǎn) j p g 的文件,這個時候就需要重復(fù)剛剛的操作,點(diǎn)點(diǎn)杠就能找到需要到的 amage 點(diǎn) jbg 的文件了,保存一下看看效果。這里可以看到圖片還是正常顯示出來了。
本期視頻主要了解了相對路徑的三種分類,一個是同級路徑,一個是下級路徑,還有一個是上級路徑。希望小伙伴們下來可以好好練習(xí)一下,這對于后期的內(nèi)容非常重要。下期再來聊聊絕對路徑。本期的內(nèi)容到此結(jié)束,感謝觀看,下期再見。
語:有時候在電腦上網(wǎng)的時候看見自己喜歡的網(wǎng)站或特別的頁面,自己已經(jīng)點(diǎn)擊電腦屏幕上方的星號收藏這個頁面了,但有時候看收藏夾又被密密麻麻的內(nèi)容弄得頭昏眼花,這時,我的處理方法是把收藏的頁面導(dǎo)出來,新建文件夾分類整理好,這樣下次想看什么內(nèi)容就不用只看收藏夾里小小的字,而是在文件夾中能夠清楚的,按照自己的習(xí)慣,分好類別的,整潔的頁面了。下面是具體操作,根據(jù)提示的1、2、3······進(jìn)行操作,就可以了。
首先打開瀏覽器。找到自己喜歡的頁面,我打開了自己的收藏夾,找到自己喜歡的頁面。然后點(diǎn)擊文字跳轉(zhuǎn)到具體的那個喜歡的頁面。
然后點(diǎn)擊屏幕上方,瀏覽器的三個點(diǎn)“···”。
然后點(diǎn)擊“更多工具”。
然后點(diǎn)擊“將頁面另存為”。
選擇文件夾,把頁面保存下來。
最后打開電腦你保存文件在什么地方,就能在該地方找到保存的喜歡頁面,該頁面在文件夾里保存的形式為“html”文件。
.它是一種計算機(jī)(PC)的超文本標(biāo)記語言(Hyper Text Markup Language),縮寫為HTML,HTML是一種標(biāo)記語言(markup language),是制作網(wǎng)頁所必備的語言,語法較為松散,不嚴(yán)格的web語言;標(biāo)簽可以不閉合,不區(qū)分大小寫。
2.標(biāo)記標(biāo)簽通常被稱為HTML標(biāo)簽,標(biāo)簽由尖括號包圍的關(guān)鍵字組成,通常都是成對出現(xiàn)的,有開始標(biāo)簽和結(jié)束標(biāo)簽,如<html></html>。
瀏覽器不會顯示html標(biāo)簽(白話:瀏覽器只會顯示標(biāo)簽里邊的內(nèi)容),而是使用標(biāo)簽來解釋頁面的內(nèi)容。
比如這一行代碼:<body>你好 </body>要放在<html></html>里邊,網(wǎng)頁只展示了你好 其他內(nèi)容并沒有展示。
代碼
頁面
以下資料均由自己的認(rèn)知和資料整理所得:
1989年,歐洲物理量子實(shí)驗(yàn)室(CERN)的信息專家蒂姆·伯納斯·李發(fā)明了超文本鏈接語言, 使用此語言能輕松地將一個文件中的文字或圖形連到其它的文件中去,這就是HTML的前身。1991年,蒂姆伯·納斯·李在CERN定義了HTML語言的第一個規(guī)范,之后成為W3C組織為專門在互聯(lián)網(wǎng)上發(fā)布信息而設(shè)計的符號化語言規(guī)范。可以說,HTML(Hypertext Markup Language)是SGML的一個實(shí)例,它的DTD作為標(biāo)準(zhǔn)被固定下來。因此,HTML不能作為定義其它符號化語言的元語言。
作為World Wide Web的一個組成部分,HTML語言發(fā)展很快,在短短的幾年里,它已歷經(jīng)了HTML1.0、HTML2.0和HTML3.0、HTML4.0等多個版本,同時DHTML (動態(tài))、VHTML(虛擬)、SHTML等也飛速發(fā)展起來。HTML以簡單精練的語法、極易掌握的通用性與易學(xué)性,使Web網(wǎng)頁可以親近于每一個普通人,互聯(lián)網(wǎng)因此得以普及發(fā)展以至今日輝煌。
但是,目前的HTML還不穩(wěn)定,不同的瀏覽器會產(chǎn)生不同的顯示效果。此外,由于HTML對超級鏈接支持不足,并缺乏空間立體描述,處理圖形、圖像、音頻、視頻等多媒體能力較弱,圖文混排功能簡單,不能表示多種媒體的同步關(guān)系等缺點(diǎn),也影響HTML的大規(guī)模應(yīng)用以及用于復(fù)雜的多媒體數(shù)據(jù)處理,一種語言各有各的優(yōu)點(diǎn)和缺點(diǎn)。
人們常常贊美蒂姆·伯納斯·李“與其他所有推動人類進(jìn)程的發(fā)明不同,這是一件純粹個人的勞動成果,萬維網(wǎng)只屬于蒂姆·伯納斯·李一個人。”而這個心懷浪漫、獻(xiàn)身科學(xué)的英國學(xué)者,卻將只屬于他一個人的發(fā)明,無償獻(xiàn)給了世界。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。