¿A qué se refiere “./” (barra diagonal) en términos de una ubicación de ruta de archivo HTML?

228

Sé que ../significa ir por un camino, pero ¿qué ./significa exactamente?

Hace poco estuve siguiendo un tutorial y parece referirse solo a un archivo en la misma ubicación, ¿es necesario? ¿No puedo usarlo si eso es todo lo que está haciendo?

Simon Suh
fuente

Respuestas:

136

./es la carpeta en la que se encuentra el archivo de trabajo :

Entonces en /index.htm ./es el directorio raíz
pero en /css/style.css ./es la carpeta css.

Esto es importante de recordar, porque si se mueve de CSS /index.htma /css/style.cssla trayectoria va a cambiar.

Coomie
fuente
45
¿Cómo responde esto a la pregunta? Aparentemente, Simon Suh entiende que ./ se refiere a la misma ubicación donde está el archivo de referencia. La parte principal de la pregunta es: "¿Por qué usarlo y es necesario?". La única razón para preferir la sintaxis de "./file" en lugar de "file" que pude encontrar es que ./ significa la carpeta actual y SOLO la carpeta actual. Entonces, si hay algún tipo de herramienta / compilador / etc. que busca el archivo, entonces './file' buscará SOLAMENTE en la carpeta actual, mientras que 'file' buscará donde sea que esté configurada la herramienta para buscar (por ejemplo, la raíz, la carpeta actual , etc.)
Marcel Toth
12
Entonces, ¿cuál es la diferencia entre ./abc.htmy solo abc.htm?
Teemoh
12
@Teemoh Son iguales en JS, HTML y CSS. El "./" es una antigua convención de programación que se trasladó a estos idiomas más nuevos. En otras circunstancias, podrían significar cosas diferentes. p.ej. si se establece una "ruta" en un sistema operativo, abc.exe podría ser un archivo y ./abc.exe podría no serlo.
Coomie
¡@MarcelToth realmente deberías publicar esto como respuesta!
Adam
285

/ significa la raíz de la unidad actual;

./ significa el directorio actual;

../ significa el padre del directorio actual.

Sourabh
fuente
¿El "encabezado (" Ubicación: ../ ");" redirigir al directorio principal?
belford
3
¿en qué se diferencia ./index.html de solo index.html?
N-ate el
1
Tengo un código de una plantilla que contiene ././¿qué significa esto?
Aaron Franke
120

Puede usar la siguiente lista como referencia rápida:

   /   = Root directory
   .   = This location
   ..  = Up a directory
   ./  = Current directory
   ../ = Parent of current directory
   ../../ = Two directories backwards

Artículo útil: https://css-tricks.com/quick-reminder-about-file-paths/

GibboK
fuente
13
¿Qué diferencia hay entre "Esta ubicación" y "Directorio actual"? Gracias.
WebBrother
2
@WebBrother, como resultó ./ funciona solo en modo doctype no estricto, mientras. funciona en ambos modos, aquí hay un enlace stackoverflow.com/questions/296873/…
Makarov Sergey
Gracias. Esta explicación clara solo resolvió un problema tan básico que me daba vergüenza preguntar en voz alta.
Leaky Eddie
57
.  = This location
.. = Up a directory

Entonces, ./foo.htmles justo foo.html. Y es opcional, pero puede tener relevancia si un script generó la ruta (relevancia para el script que es, no cómo funciona la referencia).

Brad Christie
fuente
38

Sí, ./significa el directorio de trabajo actual. Puede hacer referencia al archivo directamente por su nombre, sin él.

Puntilla
fuente
11

Tienes razón en que puedes omitirlo. Es útil solo por claridad. No hay diferencia funcional entre estar allí y no estar allí.

Yevgeny Simkin
fuente
16
It's useful only for clarity.O confusión, en el caso de OP, y el mío. :)
ANeves
No puede omitirlo cuando importe un archivo javascript en html5. Por ejemplo, si tiene una carpeta js y un archivo index.html en un directorio: El <script src = "./ js / main.js"> </script> declarado en html 5 es correcto, pero si omite el '. ' notación, no cargará el archivo.
MaXi32
44
@ MaXi32: en su ejemplo, <script src="js/main.js"></script>cargará el archivo en HTML5 y también en./js/main.js
pmrotule el
9

Un resumen rápido y pequeño sobre los caminos

Caminos absolutos

http://website.com/assets/image.jpg
SI la imagen no está en su dominio , busque la imagen


//website.com/assets/image.jpg
imagen cargada usando protocolos http o https


Caminos relativos

(Para uso interno si la imagen está en el mismo servidor)


image.jpg
imagen en el mismo lugar que el documento que llama a la imagen!


./image.jpg
¡Igual que arriba, imagen en el mismo lugar que el documento que llama a la imagen!


/assets/image.jpg
Similar a Absolute Paths, solo omitiendo el protocolo y el nombre de dominio
Ir a buscar mi imagen comenzando desde mi carpeta raíz /, que enassets/


assets/image.jpg
esta vez los activos están en el mismo lugar que el documento, así que ingrese los activos para la imagen


../assets/image.jpg
Desde donde está el documento, vaya una carpeta hacia atrás ../ y vaya aassets


../../image.jpg
ir dos carpetas de vuelta , ahí está mi imagen!


../../assets/image.jpg
ir dos carpetas hacia atrás ../../ y luego entrar assets

Roko C. Buljan
fuente
¿Hay alguna manera de decir "ir a la raíz definitiva y luego seguir esta ruta" sin usar el nombre de dominio (es decir, si necesita que el sitio funcione en un entorno de ensayo)? ¿O simplemente tienes que hacer algo como ../../../../../../../../../../../../../ .. /../../../../../../../../../../../../../../../../. ./../../images/image.jpg y espero que cubra todos los escenarios posibles?
Mark Chapel
1
@Mark, si respondí bien a su pregunta, debe "retroceder (tiempos indefinidos) hasta la raíz, luego ingresar images. Vea las rutas relativas y el tercer ejemplo/images/image. jpg
Roko C. Buljan
2

Sí, ./significa el directorio en el que estás actualmente.


fuente
8
Esto es un poco engañoso. ./thisfile.txtno siempre es equivalente a /thisfile.txt. Depende completamente de en qué directorio se esté ejecutando el código.
Jon Newmuis
@JonathanNewmuis tiene razón ./thisfile.txt no es explícitamente /thisfile.txt
Coomie
entonces, si el código se ejecuta en un lugar diferente, ¿ ./se referirá al lugar original?
CodyBugstein 01 de
2

Por ejemplo, los archivos css están en la carpeta llamada CSSy los archivos html están en la carpeta HTML, y ambos están en la carpeta con nombre XYZsignifica que referimos los archivos css en html como

<link rel="stylesheet" type="text/css" href="./../CSS/style.css" />

Aquí se ..mueve hacia arriba HTML
y se .refiere al directorio actualXYZ

--- por esta lógica solo te referirías como:

<link rel="stylesheet" type="text/css" href="CSS/style.css" />
Jenifer Venitta
fuente
3
La segunda referencia "CSS/style.css"no funcionó para mí, ¿quiso decir "../CSS/style.css"?
ajax333221
-1

En referencia a la lista de referencia rápida, específicamente puede usar lo siguiente:

\. \ Directorio raíz + directorio actual (letra de unidad)

Musaranio
fuente