Rumah hujung hadapan web html tutorial html的绝对路径和相对路径怎么使用

html的绝对路径和相对路径怎么使用

Nov 23, 2017 pm 04:29 PM
html secara relatifnya mutlak

当我们引用文件的时候,每一个路径都是不同的,今天我们就来讨论一下绝对路径和相对路径的共同以及不同之处,让我们以后能够分清引用路径的利弊。

相对路径:以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对。

绝对路径:以Web 站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。

其实绝对路径与相对路径的不同处,只在于描述目录路径时,所采用的参考点不同。由于对网站上所有文件而言,根目录这个参考点对所有文件都是一样的,因此,运用以根目录为参考点的路径描述方式才会被称之为绝对路径。

路径特殊符号

以下为建立路径所使用的几个特殊符号,及其所代表的意义。

"." -- 代表目前所在的目录,相对路径。 如:文本

".." -- 代表上一层目录,相对路径。 如:文本

"../../" -- 代表的是上一层目录的上一层目录,相对路径。 如:

"/" -- 代表根目录,绝对路径。 如:文本

"D:/abc/" -- 代表根目录,绝对路径。

在使用相对路径时,我们用符号“.”来表示当前目录,用符号“..”来表示当前目录的父目录。

通俗讲解路径  

绝对路径顾名思义,填写绝对目录路径地址那就叫绝对路径,通常我们直接使用"/"代表从根目录开始的目录路径,这个叫绝对路径。

相对路径顾名思义,填写目录时候以填写目录文件为参考,使用“../”或"./"指向上一级 或 使用"../../"指向上上一级叫相对路径。

引用者       被引用者                    相对路径                                                    绝对路径

url1.htm     divcss5.gif                ../SubDir2/BeRef1.gif                            /Dir1/SubDir2/BeRef1.gif

url2.htm     divcss5.gif              ../../Dir1/SubDir2/ BeRef1.gif                  /Dir1/SubDir2/ BeRef1.gif

url3.htm     abc1.htm                ../../Dir2/ abc1.htm                                 /Dir2/abc1.htm

url4.htm     abc2.htm                 ../abc2.htm                                            /Dir2/abc2.htm

说明:

我们使用“/”、“../”、“../../”分别样式和介绍图片路径和网址路径之间 相对于绝对路径关系。

绝对路径和相对路径的作用是什么?

相对路径和绝对路径都可相互转换,转换时候注意正确路径即可,作用在于有效链接路径。

相对路径与绝对路径与CSS关系?

1、我们在CSS中引入图片地址的时候就可能用到相对路径与绝对路径

2、我们在DIV+CSS的html中在HTML引入CSS文件、引入添加图片的时候 就会用到相对路径与绝对路径

以上就是绝对路径和相对路径的关系,相信大家通过我们的介绍已经了解的比较清楚了。更多精彩请关注php中文网其它相关文章!


相关阅读:

HTML5

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles