Consejos HTML5 1: La velocidad del desarrollo de la tecnología hoy es sorprendente. Si no tiene cuidado, es posible que no pueda mantenerse al día. El desarrollo de la nueva generación de HTML-HTML5 continúa brindándonos nuevas sorpresas. Le presentaremos algunas técnicas HTML a través de este artículo.
1. Nuevo tipo de documento (DOCTYPE)
<! Doctype html público -// w3c // dtd xhtml 1.0 transición // es
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd>
¿Sigues usando el tipo de documento XHTML anterior que es problemático y difícil de recordar? Si este sigue siendo el caso, es hora de cambiar al nuevo tipo de documento HTML5.
<! Doctype html>
Ahora solo requiere 15 caracteres tan simples. (Nota: su declaración de doctype debe aparecer en la primera línea de su archivo HTML).
2. Elementos gráficos (figura)
¿Todavía está considerando usar el siguiente código para marcar imágenes?
<mg src = path/to/image alt = sobre imagen/>
<p> Imagen de Marte. </p>
El código anterior no se puede asociar con el título del gráfico de una manera simple y semántica, ya que simplemente está envuelto con marcas de párrafo y elementos de imagen, y HTML5 mejora esto al introducir elementos <figura>. Cuando se usa junto con el elemento <FigCaption>, podemos emparejar el título gráfico con el gráfico. El código es el siguiente:
<figura>
<img src = path/to/image alt = sobre imagen/>
<Caption>
<p> Esta es una imagen de algo interesante. </p>
</figcaption>
</figura>
3. Redefine <Small>
Resulta que puede usar el elemento <small> para crear subtítulos estrechamente relacionados con el logotipo. Sin embargo, ahora HTML5 ha modificado este uso, y el elemento <small> ha sido redefinido, o más apropiadamente, ahora se usa para representar palabras pequeñas u otras notas secundarias (como el aviso de derechos de autor en la parte inferior del sitio web).
4. No se necesitan más scripts o tipos de enlaces
Lo más probable es que todavía esté agregando propiedades de tipo a sus enlaces y etiquetas de script como el código a continuación.
<link rel = stylesheet href = rath/to/stylesheet.css type = text/css/>
<script type = text/javaScript src = path/to/script.js> </script>
En HTML5, esto ya no es necesario. Significa que estas dos etiquetas representan estilos y scripts respectivamente. Por lo tanto, podemos eliminar todos sus atributos de tipo. El código es el siguiente:
<link rel = stylesheet href = rath/to/stylesheet.css/>
<script src = path/to/script.js> </script>
5. Use o no use cotizaciones
Recuerde, HTML5 es diferente de XHTML, y no tiene que envolver los atributos en citas si no le gusta. Sin embargo, si cree que usar citas lo hará sentir más cómodo, por supuesto, no habrá problemas.
<p class = myclass id = someId> iniciar el reactor.
6. Haz que tu contenido sea editable
Una de las características muy poderosas de HTML5 está contenta, lo que, como su nombre lo indica, permitirá al usuario editar cualquier contenido de texto contenido dentro de un elemento (incluidos los elementos de sus hijos). Tiene una amplia gama de usos, como listas de tareas simples o sitios basados en wiki, y una de sus ventajas es que utiliza el almacenamiento local.
<! Doctype html>
<html lang = en>
<Evista>
<meta charset = utf-8 ″>
<title> sin título </title>
</ablo>
<Body>
<H2> LISTA DE TODOS </H2>
<ul contento = true>
<li> Romper el controlador de cabina mecánico. </li>
<li> conducir a la fábrica abandonada
<li> Mira el video de Self </li>
</ul>
</body>
</html>
O, como dice el quinto truco, también puede escribir el código en la línea nueve como este (sin citas):
<ul contento = true>
7. Entrada por correo electrónico
Si aplicamos el tipo de correo electrónico para especificar el formulario de la entrada, podemos ordenar al navegador que permita solo la entrada de cadena que se ajusta a la estructura de dirección de correo electrónico válida. Aunque la verificación de formulario incorporada llegará pronto, no podemos confiar completamente en esto. Los navegadores más antiguos no entienden este tipo de correo electrónico, simplemente vuelven al cuadro de texto normal.
<! Doctype html>
<html lang = en>
<Evista>
<meta charset = utf-8 ″>
<title> sin título </title>
</ablo>
<Body>
<form de acción = método = get>
<etiqueta para = correo electrónico> correo electrónico: </selabel>
<ID de entrada = nombre de correo electrónico = Tipo de correo electrónico = correo electrónico />
<button type = enviar> Enviar formulario </boton>
</form>
</body>
</html>
Cuando se trata de elementos y atributos que el navegador admite y no admite, debe saber que todos los navegadores no son tan confiables en la actualidad. Por ejemplo, Opera solo admite la verificación de correo electrónico si especifica el atributo de nombre. Sin embargo, no respalda el atributo de marcador de posición (como se discutirá a continuación). Finalmente, si bien puede usar esta forma de verificación, no confíe demasiado en ella.