Como desarrollador, todos queremos mostrar cosas atractivas para el usuario, eso también debe ser útil. En este artículo, discutiremos esos trucos que harán que su desarrollo sea agradable. Todos los trucos se describen a continuación con el ejemplo adecuado.
Los 5 mejores trucos y consejos de HTML:
- El selector de color: este truco es para el selector de color en la etiqueta de entrada, puede colocar la propiedad «tipo» con el valor de «color» para que el campo de entrada actúe como un selector de color.
- Ejemplo:
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Color picker in input field</title>
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Color picker in input filed: </b>
<input type="color">
</div>
</body>
</html>
- Producción:
- La actualización del documento: este truco es para actualizar el documento automáticamente después del tiempo mencionado. Se utiliza cuando la inactividad afecta a su sitio web. Al usar la propiedad http-equiv= “refresh” , podemos definir el tiempo para la actualización también en la propiedad de contenido .
- Ejemplo:
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Document Refresher</title>
<meta http-equiv="refresh" content="10">
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Document will refresh after 10sec</b>
</div>
</body>
</html>
- Producción:
- Cambiador de color del tema: este truco es para cambiar el color del tema de su sitio web, usando la propiedad name = «theme-color» , pero tenemos que definir el código de color en la propiedad de contenido . Esto cambiará el color de la barra de encabezado y abordará la barra en la versión más reciente de Chrome en Lollipop de Android.
Nota: Esto solo funcionará en dispositivos móviles (Lolipop).- Ejemplo:
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Theme color changer</title>
<meta name="theme-color" content="#26F809">
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Theme color changer</b>
</div>
</body>
</html>
- Sumador de íconos: este truco se usa para agregar íconos en lugar de favicon. Solo necesita una ruta para el archivo fuente. Incluya la etiqueta de enlace dentro de la etiqueta del cuerpo, esto colocará un ícono en su lugar de favicon.
- Ejemplo:
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Icon adder</title>
<meta name="theme-color" content="green;">
<link rel="icon" href="/icon.ico"
type="image/x-icon"/>
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Icon adder</b>
</div>
</body>
</html>
- Producción:
- Reconocimiento de voz: este truco se usa para agregar búsqueda por voz en el campo de entrada. Al igual que la búsqueda de Google, busca por reconocimiento de voz.
Nota: Esto solo funcionará en dispositivos móviles (Lolipop solo Google Chrome).- Ejemplo:
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Voice recognition</title>
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<b>Voice recognition</b>
<input type="text" x-webkit-speech>
</div>
</body>
</html>
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA