零基礎(chǔ)10天學(xué)會網(wǎng)頁制作第二天(上)之文件路徑

時間：2023-08-31 12:54:02 | 來源：網(wǎng)站運營

時間：2023-08-31 12:54:02 來源：網(wǎng)站運營

零基礎(chǔ)10天學(xué)會網(wǎng)頁制作第二天(上)之文件路徑：Hello，大家好，我是AbnerMing，經(jīng)過第一天的授課，大家是否對網(wǎng)頁制作有了一個初步的了解呢，網(wǎng)頁制作呢，其實并不難，大家一定不要有壓力，對于這門編程語言，應(yīng)該來說是標(biāo)簽語言，它是所有的編程語言里最最簡單的，一定要放寬心，只要亦步亦趨，跟上課程，就一定能夠?qū)W有所成。

第二天的內(nèi)容呢稍微有點多，這里我分了上中下三部分，其實寫教程也蠻累的，因為不僅要對文字的斟酌，還要對授課過程中的代碼，都要自己親自去實現(xiàn)，所以，每一篇文章下來，都要花費很長的時間，既要有過程，也要保證知識點的通順，能夠讓初學(xué)者一目了然，這個是難的，希望大家能夠包容，多點理解，少些指責(zé)。

今天呢，進入《零基礎(chǔ)10天學(xué)會網(wǎng)頁制作》第二天的學(xué)習(xí)，首先呢，我們針對第一天的作業(yè)做一個講解。

作業(yè)呢，是實現(xiàn)下面的新聞列表：

對于這個新聞列表，我們首先來分析一下，它可以分為上中下三部分，上部分的標(biāo)題，我們可以使用h標(biāo)簽，中間部分的圖片，我們可以使用img標(biāo)簽，下面的來源和時間，我們可以使用p標(biāo)簽，不難發(fā)現(xiàn)，這個作業(yè)的練習(xí)，就是針對第一天學(xué)的幾個標(biāo)簽的綜合練習(xí)。

首頁，我們看代碼實現(xiàn)：

圖片呢，我放在和網(wǎng)頁文件的同級目錄中：

對于以上的代碼，我們再次回顧一下，盡量，我在授課的時候，穿插一些對以往知識點的回顧，這樣的做的目的，就是不斷加深大家的印象，以此，讓知識點更加的牢固。

上面的代碼，充分展現(xiàn)了網(wǎng)頁的一個整體結(jié)構(gòu)，用來聲明文檔類型為html，以便于以網(wǎng)頁的形式進行展現(xiàn)，是文檔的開始和結(jié)尾，所有的內(nèi)容都是包含在里面的，標(biāo)簽里，主要放置一些頭部的引用，如網(wǎng)頁的title，網(wǎng)頁的作者，網(wǎng)頁的描述，還有css，javascript的引用等等，標(biāo)簽里，就是網(wǎng)頁的主題內(nèi)容，所有的網(wǎng)頁展示，都是在里面所實現(xiàn)，比我今天的作業(yè)。

還有一個需要注意的，第一天的課程里，已經(jīng)講過了，這里我再強調(diào)一下，那就是，絕大多數(shù)的標(biāo)簽，都是成對出現(xiàn)的，當(dāng)然了也有一部分是單標(biāo)簽，后續(xù)會講到，成對出現(xiàn)的，就是有開始，有結(jié)束，結(jié)束的標(biāo)簽里，一定不要忘記斜杠“/”，還有所有的標(biāo)簽，雖然大小寫不分，但4.0之后，還是建議以小寫為主，這里的，我也建議大家，以后都寫小寫。

作業(yè)的代碼已經(jīng)寫完了，我們看下效果：

這個作業(yè)呢，簡單吧，所以啊，網(wǎng)頁制作啊，并不難，大家千萬不要有任何的壓力。

作業(yè)講過之后，我們簡單地回顧一下昨天的內(nèi)容，其實對于昨天的講述，除了后面的四個小節(jié)，其余的大家都可以作為了解。兩個知識點需要掌握，1、網(wǎng)頁的整體結(jié)構(gòu)，2，h、p、img標(biāo)簽的使用。

第二天的內(nèi)容，我們繼續(xù)來研究html中的標(biāo)簽

1、圖片的路徑選擇及屬性的使用

2、a標(biāo)簽及屬性的使用

3、表格標(biāo)簽，table，tr，td

4、文本格式化的使用

5、總結(jié)及回顧




1、圖片的路徑選擇及屬性的使用

在昨天的講述及作業(yè)中，我們在寫圖片的時候，基本上都把圖片放在的本地的同級目錄，那么如果不在同級目錄，我們該如何拿到這個圖片地址呢？

我們先看同級目錄，圖片和網(wǎng)頁都在一起：

代碼里圖片地址書寫，src里直接書寫文件全名：

效果：

上級目錄

我們新建文件夾，名字為上級目錄，文件里放上一個圖片，在上級目錄文件夾里新建一個目錄為網(wǎng)頁文件夾，網(wǎng)頁目錄文件夾里存放展示圖片的html。

那么針對這個“路徑上級.html”l文件，對于圖片的路徑，我們還能直接書寫圖片的全名嗎？顯然是不能的，因為不在同一個目錄下。

關(guān)于這個路徑的選擇，就好比一套房子，自己房間里的東西，我們可以自己直接拿來去用，但是客廳里的東西，我們?nèi)绻f要拿來使用，是不是得先打開門，走到客廳里，然后再去拿我們需要的東西。

而當(dāng)前這個“路徑上級.html”l文件，就好比在臥室里，而圖片呢就好比在客廳里，我們?nèi)绻肽脕硎褂玫脑?，需要走到客廳去拿，怎么去拿？大家記住了，使用“../”，寫法如下：

效果：

下級目錄

這一次呢，我們新建一個目錄為“下級目錄”文件夾，目錄里，新建一個“路徑下級.html”，再新建一個文件夾為“image”,image文件夾里存放一張圖片。

存放圖片

那么在“路徑下級.html”這個文件里，我們對這張如何書寫地址呢？

書寫如下：

效果如下：

對于路徑的選擇，這個我們一定要掌握，很多剛?cè)腴T的朋友，對這個路徑總是很難掌握，不知道為什么要這樣去寫，所以大家下去一定多練習(xí)練習(xí)，因為在實際開發(fā)中，不僅圖片，其它文件，如css，javascript,等等很多文件的引入，或者是頁面的跳轉(zhuǎn)，都會牽扯到路徑，這里我做一個總結(jié)：

同級別目錄，路徑的選擇，我們可以直接書寫文件全名,也可以“./”，后面跟文件全名，效果是一樣的，一般同級的話，這個“./”可以省略，大家看清楚，這是一個點一個斜杠。

上級目錄，也就是父級目錄，文件全名前我們添加“../”，也就是兩個點一個斜杠，這里延伸一下，那么多個父級呢？也就是有多個目錄呢？大家記住，每多一個目錄，就要多一個“../”，比如兩個，那么就是“../../”，三個就是“../../../”，依次類推。

下級目錄，也就是子目錄，這個就要全路徑，有幾個文件夾，我們就寫幾個文件夾的名字，比如上面的下級目錄練習(xí)當(dāng)中，只有一個“image”文件夾，那么書寫就是“image/image.png”。

當(dāng)然了，除了上面的幾個路徑選擇外，還有一個根目錄的選擇，直接用“/”來表示，所謂的根目錄，就是第一個目錄，比如下圖，那么根目錄，就是C盤。

比如，我們在根目錄下方一張圖片，image.png：

代碼里我們就可以這樣去書寫，直接斜杠+文件全名：

效果：

同樣的，因為所有的文件都在根目錄下，我們也可以舉一反三，比如上述中的同級目錄文件夾下有一個image圖片：

我們要在根目錄文件夾下的網(wǎng)頁里，怎么才能拿到這個路徑呢？

有兩種方式，第一種通過根目錄，其實就是全路徑了，這個應(yīng)該明白吧。

第二種方式，先找到父級目錄，在父級目錄里找：

通過“../”，我們到了父級目錄

發(fā)現(xiàn)根目錄文件夾和同級目錄文件夾是同級別，那么書寫如下：

文件的路徑尋找呢，這個可能剛接觸的朋友稍微有點懵，不過，多練習(xí)幾遍也就懂了，無非就是文件地址的一個尋找。