Es un gran esfuerzo cambiar las URL en la migración o mantener cada URL en la página cuando ha codificado cada href, por lo que es una mejor opción tener un URI raíz/base y usar rutas relativas a todos los recursos.
Usando la etiqueta <base> :
- La etiqueta <base> debe residir dentro de las etiquetas <head> y </head>.
- Debe usar la etiqueta <base> solo una vez en una página HTML. Si lo usa varias veces, solo se validará la primera y el resto se ignorará.
- La etiqueta <base> es una etiqueta de cierre automático, por lo que no debe usar una etiqueta de cierre
- Se recomienda utilizar la barra inclinada «/» después del URI raíz.
Sintaxis:
<base href="http://example.com/">
o
<base target="_blank" href="http://example.com/">
Ejemplo: si desea abrir un enlace en una nueva pestaña, siga el código a continuación.
En el siguiente código, hemos establecido «https://www.geeksforgeeks.org/» como la URL raíz para cada URL relativa en la página. La «introducción-a-java/» abrirá la página web «https://www.geeksforgeeks.org/introduction-to-java/» y «java-basic-syntax/» abrirá la página web «https:// www.geeksforgeeks.org/java-basic-syntax/” para los navegadores.
HTML
<!DOCTYPE html> <html> <head> <base href="https://www.geeksforgeeks.org/" > </head> <body> <a href="introduction-to-java/">Intro To Java</a> <br> <a href="java-basic-syntax/">Java Basic syntax</a> </body> </html>
Producción:
uso de URL base
Ejemplo 2: En el siguiente ejemplo, la URL base se establece en » http://127.0.0.1:5500/img/ «, por lo que cuando el archivo de imagen se incluye en la etiqueta img , la imagen se carga desde el host local.
HTML
<!DOCTYPE html> <html> <head> <base href="http://127.0.0.1:5500/img/" > </head> <body> <img src="gfg-logo.png" alt="logo"> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, la raíz se establece en » https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/ «, el archivo de imagen «gfg-logo.png» se carga desde el servidor de geeksforgeeks .
HTML
<!DOCTYPE html> <html> <head> <base href= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200617163105/"> </head> <body> <img src="gfg-logo.png" alt="logo"> </body> </html>
Producción:
Por lo tanto, si va a utilizar la etiqueta base, asegúrese de que todos los recursos a los que accederá mediante la ruta relativa estén en el mismo servidor; de lo contrario, los navegadores no entenderán sus recursos.
Publicación traducida automáticamente
Artículo escrito por tauleshwar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA