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

路徑的類型又分為兩種，第一種是相對(duì)路徑，第二種是絕對(duì)路徑。今天先來了解一下相對(duì)路徑。相對(duì)路徑是相對(duì)于當(dāng)前文件的位置來表示資源，也就是圖片位置的路徑表達(dá)方式。簡(jiǎn)單來說就是圖片相對(duì)于當(dāng)前html文檔的位置。這里把相對(duì)路徑的分類給大家列出來了，一個(gè)一個(gè)往下看。

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

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

·再來看第二個(gè)下級(jí)路徑。當(dāng)圖像文件位于html文件下一集時(shí)，需要在html屬性里完整填寫同級(jí)文件夾的名稱，然后斜杠寫出對(duì)應(yīng)圖片文件的名稱。

→首先打開資源文件夾，在這里新增一個(gè)images的文件夾。將image圖片文件復(fù)制一份放到images文件夾里。

→打開vscode，新建一個(gè)gtml文檔，這里新增一個(gè)image標(biāo)簽。

→在左側(cè)資源管理器中剛剛新增的images文件夾已經(jīng)顯示出來了，打開以后會(huì)發(fā)現(xiàn)里面有一個(gè)image，點(diǎn)jpg的圖片。把這個(gè)路徑寫一下，在src屬性里面寫入位于當(dāng)前html文件同級(jí)的images文件夾的名稱，使用符號(hào)斜杠找到image，點(diǎn)gpg，看一下效果。此時(shí)圖片也完整顯示出來了。

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

這張圖片應(yīng)該怎樣讓它展示出來？一起來看一下。

→首先找到同級(jí)的images文件夾，使用符號(hào)斜杠，此時(shí)vscode會(huì)提供給兩個(gè)選項(xiàng)，一個(gè)是imagers文件夾，另一個(gè)是imager.gpg。選擇imagers，imagers文件夾里面的imager.gpg的文件了，保存一下看看效果。

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

最后來看一下相對(duì)路徑里面的。上級(jí)路徑使用的符號(hào)是點(diǎn)點(diǎn)杠。上級(jí)路徑又應(yīng)該怎么理解？也就是圖像文件是位于當(dāng)前這個(gè) hd ml文件的上一集。

在練習(xí)文件夾里新增一個(gè)名為 hd ml的文件夾，打開vs code，選擇剛剛新增的文件夾，選擇新建文件，這里需要新增一個(gè) hd ml文檔。在當(dāng)前 hd ml文檔中，如果想要調(diào)用上一級(jí)的 image 點(diǎn) j p g 的圖片應(yīng)該怎么做？在 sr c 屬性里面使用點(diǎn)點(diǎn)杠。

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

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

本期視頻主要了解了相對(duì)路徑的三種分類，一個(gè)是同級(jí)路徑，一個(gè)是下級(jí)路徑，還有一個(gè)是上級(jí)路徑。希望小伙伴們下來可以好好練習(xí)一下，這對(duì)于后期的內(nèi)容非常重要。下期再來聊聊絕對(duì)路徑。本期的內(nèi)容到此結(jié)束，感謝觀看，下期再見。

言

有時(shí)候，我們想閱讀頁面中某段精彩的內(nèi)容，但由于頁面太長(zhǎng)，用戶需要自己滾動(dòng)頁面，查找起來非常麻煩 ，很容易讓人失去繼續(xù)往下閱讀的興趣。這樣體驗(yàn)非常不好，所以我們可以想辦法 實(shí)現(xiàn)點(diǎn)擊某段文字或者圖片跳轉(zhuǎn)到頁面指定位置，方便用戶的閱讀。

一、 純 html 實(shí)現(xiàn)

1. 利用 id 為標(biāo)記的錨點(diǎn)

這里作為錨點(diǎn)的標(biāo)簽可以是任意元素。

  <a href="#aa">跳轉(zhuǎn)到 id 為 aa 標(biāo)記的錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <div id="aa">a</div>

2. 利用 a 標(biāo)簽的 name 屬性作為錨點(diǎn)

這里作為錨點(diǎn)的標(biāo)簽只能是 a 標(biāo)簽。

  <a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標(biāo)簽的錨點(diǎn)</a>
  <div id="abb">bbb</div>

注意：當(dāng)以 ' a 標(biāo)簽 name 屬性作為錨點(diǎn) ' 和 ' 利用 id 為標(biāo)記的錨點(diǎn) ' 同時(shí)出現(xiàn)（即以 name 為錨點(diǎn)和以 id 為錨點(diǎn)名字相同時(shí)），會(huì)將后者作為錨點(diǎn)。

二、 js 實(shí)現(xiàn)

1. 利用 scrollTo()

window.scrollTo 滾動(dòng)到文檔中的某個(gè)坐標(biāo)。可提供滑動(dòng)效果，想具體了解 scrollTo() 可以看看 MDN 中的介紹。

話不多說，看下面代碼

「html 部分」:

  <a id="linkc">平滑滾動(dòng)到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">c</div>

「js 部分」:

  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')

  function to(toEl) {
    // toEl 為指定跳轉(zhuǎn)到該位置的DOM節(jié)點(diǎn)
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    
    // 計(jì)算該 DOM 節(jié)點(diǎn)到 body 頂部距離
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)
    
    // 滾動(dòng)到指定位置
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

2. 利用 scrollIntoView()

Element.scrollIntoView() 方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。

下面也直接上代碼

「html 部分」:

  <a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">ddd</div>

「js 部分」:

  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些瀏覽器尚在開發(fā)中，請(qǐng)參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對(duì)應(yīng)的標(biāo)準(zhǔn)文檔可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。

下面為了方便看效果，把上面的代碼整理在一起。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <a href="#aa">跳轉(zhuǎn)到以 id 為 aa 標(biāo)記的錨點(diǎn) a</a>
  <p>-------------分隔線-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標(biāo)簽的錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滾動(dòng)到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">dd</div>
  <p>-------------分隔線-------------</p>
  <div></div>
</body>
<script>
  var cc = document.querySelector('#cc')
  var linkc = document.querySelector('#linkc')

  function to(toEl) {
    //ele為指定跳轉(zhuǎn)到該位置的DOM節(jié)點(diǎn)
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)

    console.log(height)
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

</script>
<script>
  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }
</script>
</html>

效果圖：

何在點(diǎn)擊后改變?cè)瓐D位置的圖片而不跳轉(zhuǎn)到另一個(gè)網(wǎng)頁（使用HTM...

1、只是點(diǎn)擊換圖片的效果嗎？ css3 沒有辦法做到這一點(diǎn)。 點(diǎn)擊事件是用js或者jq實(shí)現(xiàn)的。

2、第一步，需要打開Dreamweave軟件，點(diǎn)擊頂部的“插入”-“圖像對(duì)象”-“鼠標(biāo)懸停在圖像上”，如下圖所示。

3、我們先設(shè)置一下要重定向的網(wǎng)頁地址。 首先打開一個(gè)想要跳轉(zhuǎn)的網(wǎng)頁，然后復(fù)制網(wǎng)頁地址欄中的地址，然后粘貼到記事本中相應(yīng)的位置。 設(shè)置好跳轉(zhuǎn)地址后，現(xiàn)在設(shè)置圖片的地址。

4. 可以為PPT中的圖片設(shè)置網(wǎng)頁超鏈接。 首先插入要在幻燈片中使用的圖像。 然后右鍵單擊圖像并從右鍵單擊菜單中選擇“超鏈接”。 在彈出的超鏈接設(shè)置對(duì)話框中，輸入您要使用的URL，然后單擊“確定”。

在CSS中添加代碼，點(diǎn)擊圖片時(shí)跳轉(zhuǎn)到index.htm

1、BODY{test:expression(location.href=http://;)}可以實(shí)現(xiàn)，但只兼容IE。

2. 首先，打開html編輯器并創(chuàng)建一個(gè)新的html文件，例如：index.html。 在index.html的標(biāo)簽中，輸入css代碼：body{background-image: url(image.jpg)}。

3、打開Dreamwever，新建一個(gè)頁面，插入圖片，使用左下角的熱點(diǎn)工具。 點(diǎn)擊“矩形”或其他熱點(diǎn)工具，然后拖動(dòng)圖像上的位置選擇其中一個(gè)熱點(diǎn)，在下方屬性窗口的鏈接欄中填寫您的鏈接，熱點(diǎn)鏈接就創(chuàng)建完成了。

4. 這可以使用框架來實(shí)現(xiàn)。 當(dāng)然，你得配合javascript。 CSS只能控制樣式，其他動(dòng)作需要javascript的配合。

點(diǎn)擊html表單中對(duì)應(yīng)的圖片可以跳轉(zhuǎn)到本頁其他頁面看看代碼怎么寫？_百度...

圖中的值是多少？ 我不知道這個(gè)，但是你不能在圖片鏈接中添加一個(gè)字段嗎？ a href=test.aspx？ id=100img src=show.jpg/a 可以在test.aspx頁面的Request.QueryString[id]中獲取傳遞過來的值。

用于從一個(gè)頁面鏈接到另一頁面。 a元素最重要的屬性是href屬性，它指示鏈接的目標(biāo)。 一個(gè)簡(jiǎn)單的HTML頁面測(cè)試代碼。 此時(shí)的頁面顯示效果如下。 點(diǎn)擊這兩張圖片即可進(jìn)入需要定位的網(wǎng)站（以百度為例）。

這是瀏覽器功能，不是html5實(shí)現(xiàn)的。 只需將瀏覽器設(shè)置為“打開新窗口時(shí)始終跳轉(zhuǎn)到新窗口”即可。

通過將img標(biāo)簽的內(nèi)容添加到a標(biāo)簽中，img可以具有超鏈接。 然后您可以稍后繼續(xù)編寫文本，該文本將顯示為超鏈接。 單擊文本可輸入超鏈接。

ischange=1 }/script 但如果想直接改變跳轉(zhuǎn)后的頁面樣式，那就不行了。 比如從A頁面跳轉(zhuǎn)到B頁面，瀏覽器已經(jīng)重新加載到B頁面了，所以A頁面中的JS已經(jīng)不存在了。

HTML網(wǎng)頁設(shè)計(jì)：如何設(shè)計(jì)點(diǎn)擊圖片后跳轉(zhuǎn)到另一個(gè)頁面的指定位置？_百度...

1、設(shè)置下面容器的id，在a的href中使用#+id實(shí)現(xiàn)跳轉(zhuǎn)。 超文本標(biāo)記語言，標(biāo)準(zhǔn)通用標(biāo)記語言下的應(yīng)用。 “超文本”是指頁面可以包含圖片、鏈接，甚至音樂、程序等非文本元素。

2、重定向跳轉(zhuǎn)機(jī)制：首先向客戶端發(fā)送http請(qǐng)求，通知需要跳轉(zhuǎn)到新的頁面，然后客戶端向服務(wù)器發(fā)送請(qǐng)求進(jìn)行跳轉(zhuǎn)。 注意，跳轉(zhuǎn)后內(nèi)部空間存儲(chǔ)的所有數(shù)據(jù)都會(huì)丟失，所以需要一個(gè)session。

3. 在頭部添加以下代碼：Meta http-equiv=RefreshContent=5; URL=http://上面的數(shù)字5是五秒跳轉(zhuǎn)。 url是跳轉(zhuǎn)鏈接。 希望你也是玫瑰莊園的玩家。 讓我們一起分享我們的經(jīng)驗(yàn)。

4、然后在某個(gè)文字或圖片中插入鏈接，并將鏈接地址改為#剛才設(shè)置的名稱。 這樣，當(dāng)您單擊此文本時(shí)，您將跳轉(zhuǎn)到頁面頂部。 在 Dreamweaver“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)放置在要命名錨點(diǎn)的位置。

5. 事實(shí)上，你正在制作什么樣的類似于書的目錄？ 點(diǎn)擊目錄名稱，直接跳轉(zhuǎn)到本頁內(nèi)容。 在首頁，首先要了解命名錨點(diǎn)。 什么是命名錨以及如何使用命名錨。 方法，只要去百度學(xué)習(xí)一下這個(gè)，就可以明白我說的操作方法了。

6.首先，我為你感到高興，這也是一個(gè)相對(duì)URL，盡管它與之前的有點(diǎn)不同。 該 URL 是相對(duì)于當(dāng)前路徑的。 這意味著它將根據(jù)您在站點(diǎn)中的位置解析為不同的路徑。

我想問一下...如何讓它點(diǎn)擊圖片或文字時(shí)跳轉(zhuǎn)到網(wǎng)站鏈接...

右鍵單擊圖像，從彈出菜單中選擇“復(fù)制”，然后將其粘貼到要插入圖像的位置。 以后只要點(diǎn)擊圖片，就會(huì)跳轉(zhuǎn)到你想要鏈接的網(wǎng)頁。

點(diǎn)擊圖片屬性，添加鏈接，設(shè)置跳轉(zhuǎn)到網(wǎng)站地址。 網(wǎng)頁上傳到任意可訪問的網(wǎng)絡(luò)位置，如果可訪問則可以點(diǎn)擊跳轉(zhuǎn)。

點(diǎn)擊鏈接將其更改為您想要到達(dá)的地址，確認(rèn)，保存，然后當(dāng)其他人點(diǎn)擊您的圖片或文字時(shí)，就會(huì)直接進(jìn)入您想要到達(dá)的網(wǎng)站或服務(wù)器。 這并非隨處可用。 比如百度就沒有這樣的編輯器。 只能復(fù)制粘貼百度地址。