Tutoriales básicos de HTML

HTML 媒体

HTML 参考手册

HTML5 Tutoriales básicos

HTML5 API

HTML5 媒体

Reproducción de videos (Video) HTML Enlaces HTML

Anclajes HTML

Cuando el contenido de una página web HTML es muy larga, puede ser incómodo para el usuario navegar por esta página, por ejemplo, después de desplazarse al final, si desea regresar al inicio, solo puede arrastrar la barra de desplazamiento al inicio (o recargar la página, pero esta acción no es buena en términos de experiencia), el método que tiene mejor efecto es configurar un ancla para manejar este problema, logrando saltos internos o entre páginas

Ejemplo de demostración de ancla

Ejemplo

<!DOCTYPE html><html><head>
　　　　<meta charset="UTF-8">
　　　　<title>Tutoriales básicos(oldtoolbag.com), configuración de ancla</title></head><body>
　　　　　<a href="#bottom" name="top">Ir al final</a>
　　　　<div style="alto:　5000px; ancho:　300px; fondo-color: #123">Aquí se muestra cómo saltar al encabezado y al pie de página de la página</div>
　　　　<a href="#top" name="bottom">Volver al inicio</a></body></html>

Prueba y mira ‹/›

Cómo configurar un ancla

(I) Método de configuración de salto en página uno:

Configurar un enlace de ancla <a href="#miao">Buscar a las estrellas de gato</a>；（Nota: El valor de la propiedad href debe comenzar con #）
Configurar un ancla en la posición necesaria en la página <a name="miao"></a>；（Nota: En la etiqueta a debe escribirse una propiedad name, el valor de la propiedad debe coincidir con [1] del valor de la propiedad href, sin agregar #) y complete el texto correspondiente en la etiqueta según sea necesario, generalmente sin escribir contenido。

(II) Método de configuración de salto en página2：

Configurar un enlace de ancla <a href="#miao">Buscar a las estrellas de gato</a>；（Nota: El valor de la propiedad href debe comenzar con #）
Posición de configuración de ancla <h4 id="miao">Base de estrellas de gato</h4>; Agregue una propiedad id en la etiqueta del lugar al que desea saltar, el valor de la propiedad debe ser igual al valor de la propiedad href en ①, sin agregar #

　　 Nota: El método dos no requiere agregar una etiqueta a para configurar el ancla de manera especial, simplemente agregue un id en la etiqueta necesaria.

Ejemplo

<!DOCTYPE html><html><head>
　　　　<meta charset="UTF-8">
　　　　<title>demo de ancla-Tutoriales básicosoldtoolbag.com</title>
</head>
<body>
　　　　<ul>
　　　　　　　　<li><a href="#miao">Buscar a las estrellas de gato</a></li>
　　　　　　　　<li><a href="#wang">Buscar a las estrellas de perro</a></li>
　　　　　　　　<li><a href="#meng">Otras criaturas lindas</a></li>
　　　　</ul>
　　　　<a name="miao"></a><!--Método de configuración de ancla1-->
　　　　<h3　id="miao">Base de estrellas de gato</h3><!--Método de configuración de ancla2-->
　　　　<p>Miaow Miaow Miaow~</p>
　　　　<p>Miaow Miaow Miaow~</p>
　　　　<p>Miaow Miaow Miaow~</p>
　　　　<p>Miaow Miaow Miaow~</p>
　　　　<p>Miaow Miaow Miaow~</p>
　　　　<p>Miaow Miaow Miaow~</p>
　　　　
　　　　<a name="wang"></a>
　　　　<p>Wu Wu Wu~</p>
　　　　<p>Wu Wu Wu~</p>
　　　　<p>Wu Wu Wu~</p>
　　　　<p>Wu Wu Wu~</p>
　　　　<p>Wu Wu Wu~</p>
　　　　<p>Wu Wu Wu~</p>
　　　　<a name="meng"></a>
　　　　<p>Q萌萌萌~</p>
　　　　<p>Q萌萌萌~</p>
　　　　<p>Q萌萌萌~</p>
　　　　<p>Q萌萌萌~</p>
　　　　<p>Q萌萌萌~</p>
　　　　<p>Q萌萌萌~</p>
</body>
</html>

Prueba y mira ‹/›

Reproducción de videos (Video) HTML Enlaces HTML