todas - que es un valor en html

¿Cómo hacer referencia correctamente a los recursos locales en HTML?

Question

Como resultado, hacer referencia a los recursos locales puede ser un punto de fricción para algunos. Estoy buscando una respuesta canónica a las referencias de recursos locales, y lo que significan.

Tomemos estos ejemplos, ¿cuál es la diferencia entre estas rutas de referencia?

• <img src="myfile.png" /> (sin barra diagonal)
• <img src="/myfile.png" /> (con barra diagonal)
• <img src="folder/myfile.png" /> (sin barra diagonal / en la subcarpeta)
• <img src="/folder/myfile.png" /> (con barra o barra en la subcarpeta)
• <img src="../folder/myfile.png" /> (con puntos y una barra diagonal / en la subcarpeta)

Answer 1

• Una barra diagonal indica al navegador que se inicie en el directorio raíz.
• Si no tiene la barra diagonal inicial, está haciendo referencia al directorio actual.
• Si agrega dos puntos antes de la barra diagonal inicial, significa que está haciendo referencia al padre del directorio actual.

Toma la siguiente estructura de carpetas

darse cuenta:

• la marca de verificación ROOT es verde,
• la segunda marca de verificación es naranja,
• la tercera marca de verificación es púrpura,
• la cuarta marca de verificación es amarilla

Ahora en el archivo index.html.en querrá poner el siguiente marcado

<p>
    <span>src="check_mark.png"</span>
    <img src="check_mark.png" />
    <span>I''m purple because I''m referenced from this current directory</span>
</p>

<p>
    <span>src="/check_mark.png"</span>
    <img src="/check_mark.png" />
    <span>I''m green because I''m referenced from the ROOT directory</span>
</p>

<p>
    <span>src="subfolder/check_mark.png"</span>
    <img src="subfolder/check_mark.png" />
    <span>I''m yellow because I''m referenced from the child of this current directory</span>
</p>

<p>
    <span>src="/subfolder/check_mark.png"</span>
    <img src="/subfolder/check_mark.png" />
    <span>I''m orange because I''m referenced from the child of the ROOT directory</span>
</p>

<p>
    <span>src="../subfolder/check_mark.png"</span>
    <img src="../subfolder/check_mark.png" />
    <span>I''m purple because I''m referenced from the parent of this current directory</span>
</p>

<p>
    <span>src="subfolder/subfolder/check_mark.png"</span>
    <img src="subfolder/subfolder/check_mark.png" />
    <span>I''m [broken] because there is no subfolder two children down from this current directory</span>
</p>

<p>
    <span>src="/subfolder/subfolder/check_mark.png"</span>
    <img src="/subfolder/subfolder/check_mark.png" />
    <span>I''m purple because I''m referenced two children down from the ROOT directory</span>
</p>

Ahora, si carga el archivo index.html.en ubicado en la segunda subcarpeta
http://example.com/subfolder/subfolder/

Esta será tu salida.