La tecnología web se está desarrollando demasiado rápido, y si no sigue el ritmo de los tiempos, será eliminado. Por lo tanto, para lidiar con el próximo HTML5, este artículo resume 22 habilidades básicas de HTML5, y espero que sea útil para usted aprender aún más HTML5.
1. Nueva declaración de doctype La declaración XHTML es demasiado larga, y creo que hay pocos desarrolladores frontales que pueden escribir a mano esta declaración de doctype.<! Doctype html público "-// w3c // dtd xhtml 1.0 transitional // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
La declaración DOCTYPE de HTML5 es muy corta. Creo que puedes recordarlo inmediatamente después de ver esta declaración. No tiene que desperdiciar células cerebrales para recordar la declaración de Doctype ligeramente pervertida de XHTML.
<! Doctype html>
La breve declaración de doctype de HTML5 es permitir que los navegadores modernos como Firefox y Chrome y navegadores como IE6/7/8 para ingresar (cuasi) estándar. Puede preguntarse que IE6/7 también puede admitir HTML5 DOCTYPE. De hecho, IE ingresará al modo estándar siempre que el Doctype cumpla con este formato.
2. <Figura> etiquetaEche un vistazo al siguiente código simple:
<img src = "ruta/a/imagen">
<h6> Imagen de Marte. </h6>
Desafortunadamente, la etiqueta H6 aquí parece no tener nada que ver con la etiqueta IMG, y la semántica no es lo suficientemente clara. HTML5 se dio cuenta de esto y adoptó la etiqueta <figura>. Cuando la <figura> combinada con la etiqueta <fig -Caption>, la etiqueta H6 y la etiqueta IMG se pueden combinar, y el código será más semántico.
<figura>
<img src = "ruta/a/imagen">
<Caption>
<h6> Esta es una imagen de algo interesante. </h6>
</figcaption>
</figura>
3. Redefine <Small> No hace mucho, utilicé la etiqueta <small> para crear subtítulos relacionados con el logotipo. Sin embargo, la etiqueta <small> se redefine en HTML5 para hacerlo más semántico, y el tamaño de fuente de <small> se volverá más pequeño. Piénselo, sigue siendo una buena idea usar esta etiqueta para información de derechos de autor en la parte inferior del sitio web. 4. Eliminado los atributos de tipo de las etiquetas JavaScript y CSS Por lo general, agregará atributos de tipo a <link> y <script>:<link rel = "stylesheet" type = text/css href = "ruta/a/stylesheet.css">
<script type = "text/javaScript" src = "ruta/a/script.js"> </script>
En HTML5, el atributo de tipo ya no es necesario, porque esto parece un poco redundante y puede hacer que el código sea más conciso después de que se elimine.
<link href = "ruta/a/stylesheet.css">
<script src = "path/to/script.js"> </script>
5. Si usar cotizaciones dobles Esto es un poco confuso, HTML5 no es XTHML, puede guardar las cotizaciones dobles en las etiquetas. Creo que la mayoría de los camaradas, incluido yo, están utilizados para agregar citas dobles, porque esto hace que el código se vea más estándar. Sin embargo, esto se puede determinar en función de sus preferencias personales si usar cotizaciones dobles.<h6 id = "SomeId"> Inicie el reactor. </h6>
6. Haga que el contenido web sea editable 7. Cadena de entrada de correo electrónicoSe ha agregado un nuevo atributo de correo electrónico de un cuadro de entrada a HMTL5, que puede detectar si el contenido de entrada cumple con el formato de escritura del correo electrónico. La función se está volviendo cada vez más poderosa. Antes de HTML5, solo puede confiar en JS para detectarlo. Aunque la función de verificación de formulario incorporada pronto se convertirá en realidad, muchos navegadores no admiten esta propiedad y solo serán tratados como un cuadro de entrada de texto normal.
<Método de formulario = get>
<etiqueta para = "correo electrónico"> correo electrónico: </selet>
<input id = "correo electrónico" type = "correo electrónico" name = "correo electrónico">
<button type = "enviar"> Enviar formulario </botón>
</form>
Hasta ahora, este atributo no es compatible, incluidos los navegadores modernos, por lo que este atributo aún no es confiable por el momento.
8. Marcador de posiciónEl marcador de posición en el cuadro de texto (consulte el efecto de cuadro de búsqueda de este blog) es propicio para mejorar la experiencia del usuario. Antes, solo podíamos confiar en JS para lograr el efecto de los marcadores de posición, y agregar un marcador de posición de atributo de marcador de posición en HTML5.
<input type = "correo electrónico" name = "correo electrónico" placeHolder = "[email protected]">
Del mismo modo, los navegadores modernos principales actuales no admiten muy bien esta propiedad. Por el momento, solo Chrome y Safari admiten esta propiedad, y Firefox y Opera no admiten esta propiedad.
9. Almacenamiento localLa función de almacenamiento local de HTML5 permite a los navegadores modernos recordar lo que escribimos, e incluso si el navegador está cerrado y actualizado, no se verá afectado. Aunque algunos navegadores no admiten esta función, IE8, Safari 4 y Firefox 3.5 todavía admiten esta función, puede probarla.
10. Más encabezado y pie de página semánticoEl siguiente código ya no existirá en HTML5
<Div ID = Header>
...
</div>
<Div ID = Pooter>
...
</div>
Por lo general, definimos un DIV para el encabezado y el pie de página y luego agregamos una ID, pero en HTML5 puede usar las etiquetas <adeer> y <footer> directamente, por lo que el código anterior puede reescribirse como:
<Header>
...
</Header>
<ToToTer>
...
</foTer>
Tenga cuidado de no confundir estas dos etiquetas con el encabezado y el pie de página del sitio web, son solo contenedores que las representan.
11. es decir, soporte para html5El navegador IE actualmente no es compatible con HTML5, que también es un gran obstáculo que bloquea la popularización más rápida de HTML5. Sin embargo, el apoyo de IE9 para HTML5 sigue siendo muy bueno.
IE analiza todas las etiquetas recién agregadas de HTML5 en elementos en línea, pero de hecho son elementos de nivel de bloque, por lo que es necesario definir un estilo para ellos:
encabezado, pie de página, artículo, sección, NAV, menú, Hgroup {
Pantalla: bloque;
}
A pesar de esto, IE todavía no puede analizar estas etiquetas HTML5 recientemente agregadas. En este momento, JavaScript debe usarse para resolver este problema:
document.createElement ("artículo");
document.createElement ("pie de página");
document.createElement ("encabezado");
document.createElement ("hgroup");
document.createElement ("Nav");
document.createElement ("menú");
Puede usar este código JavaScript para corregir, es decir, mejor parse html5
<script mce_src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
12. Grupo de título (HGROUP) Esto es similar al segundo truco. Si las etiquetas H1 y H2 se utilizan para representar el nombre y el subtítulo del sitio web, no se relacionan con los dos títulos que están estrechamente relacionados en su significado original. En este momento, puede usar la etiqueta <hgroup> para combinarlos, para que el código sea más semántico.<Header>
<hgroup>
<H1> RECUERDA PÁGINA DEL FAN </H1>
<h2> Solo para las personas que desean el recuerdo de su vida. </h2>
</hgroup>
</Header>
13. Atributos requeridosEl personal delantero debe haber realizado muchos proyectos de verificación de formularios. Uno de los puntos importantes es que se deben completar algunos cuadros de entrada, por lo que es necesario verificar JavaScript aquí. En HTML5, se agrega un nuevo atributo que debe completarse: se requiere. Hay dos formas de usar el atributo requerido. El segundo método parece más estructural, mientras que el primer método es más simple.
<input type = "text" name = "someInput" requerido>
<input type = "text" name = "someInput" required = "required">
Con esta propiedad, facilita la verificación de envío del formulario, eche un vistazo al siguiente ejemplo simple:
<Método de formulario = post>
<etiqueta for = someInput> Su nombre: </selabel>
<input id = someInput type = text name = someInput placeLApader = "Douglas Quaid" requerido = "requerido">
<button type = "enviar"> Go </boton>
</form>
Si el cuadro de entrada está vacío, el formulario no se enviará correctamente.
14. Obtenga automáticamente el enfoqueDel mismo modo, HTML5 ya no necesita JavaScript para resolver la adquisición automática de foco de cuadros de entrada. Si se debe seleccionar un cuadro de entrada o se obtiene el enfoque de entrada, HTML5 ha agregado el enfoque automático de la propiedad de adquisición de enfoque automático:
<input type = "text" name = "SomeInput" PlaceHolder = "Douglas Quaid" requerido = "requerido" AutOfocus = "Autofocus">
El enfoque automático también se puede escribir como Autococus = Autofocus, que parece más estándar, dependiendo de su preferencia personal.
15. Soporte de reproducción de audioHTML5 proporciona una etiqueta <udio>, que resuelve el problema que en el pasado, tenía que confiar en complementos de terceros para reproducir archivos de audio. Hasta ahora, solo unos pocos navegadores más recientes admiten esta etiqueta.
<Audio Controls = "Controls" AutoPlay = "Autoplay">
<fuente src = "file.ogg" _fcksavedurl = "" file.ogg "" />
<fuente src = "file.mp3" />
<a href = "file.mp3"> Descargue este archivo. </a>
</audio>
¿Por qué hay dos formatos de archivos de audio? Debido a que existen diferencias en los formatos compatibles con los navegadores Firefox y WebKit, Firefox solo puede admitir archivos .Ogg, mientras que WebKit solo admite archivos .mp3. La solución es crear dos versiones de archivos de audio, para que pueda ser compatible con los navegadores Firefox y WebKit. Cabe señalar que IE no admite esta etiqueta.
16. Soporte de reproducción de video Al igual que la etiqueta <udio>, HTML5 también proporciona soporte para reproducir archivos de video mediante la etiqueta <Deo>. YouTube también ha anunciado una nueva incrustación de video HTML5. Pero es un poco lamentable que la especificación HTML5 no especifique un decodificador de video específico, pero permite que el navegador decida por sí mismo. Esto crea un problema de compatibilidad del navegador. Aunque Safari e IE9 admiten videos H.264 (los reproductores Flash pueden jugar), Firefox y Opera admiten los formatos de teoría de código abierto y vorbis. Por lo tanto, al mostrar videos HTML5, también debe preparar dos formatos.<Video Controls Preload>
<fuente src = "cohagenphonecall.ogv" type = "video/ogg"; Codecs = 'Vorbis, Theora' " />
<fuente src = "cohagenphonecall.mp4" type = "video /mp4; 'codecs =' avc1.42e01e, mp4a.40.2 '" />
<Div> Tu navegador es viejo. <a href = "cohagenphonecall.mp4"> Descargue este video en su lugar. </a> </div>
</video>
Cabe señalar que, aunque el atributo de tipo se puede omitir, si se agrega, el navegador puede analizar el archivo de video más rápido y con precisión. No todos los navegadores admiten videos HTML5, por lo que debe usar la versión Flash. Por supuesto, la decisión se encuentra contigo.
17. Video de precargaAtributo de precarga: precarga, en primer lugar, debe determinar si el video debe ser precargado. Si un visitante está visitando una página con muchos videos, es necesario precargar un video, que puede ahorrar el tiempo de espera de los visitantes y mejorar la experiencia del usuario. Puede agregar una propiedad de precarga a la etiqueta <RODEAR> para implementar funciones de precarga.
<Video Preload = Preload>
...
</video>
[/código]
18. Controles de visualización Las propiedades de control de visualización pueden agregar un control de pausa de reproducción al video. Cabe señalar que el efecto mostrado por cada navegador puede ser algo diferente.<Video Controls = "Controls" Preload = "Preload">
...
</video>
19. Uso de expresiones regularesEn HTML5, podemos usar expresiones regulares directamente.
<Form Method = Post Action =>
<etiqueta for = username> Crear un nombre de usuario: </etiqueta>
<input id = username type = text name = username placeHOLDER = 4 <> 10 requerido = requerido AutOfocus = AutoFocus Pattern = [A-Za-Z] {4,10}>
<button type = enviar> go </boton>
</form>
20. Detectar el soporte del navegador para los atributos HTML5Dado que cada navegador tiene un soporte diferente para los atributos HTML5, esto crea algunos problemas de compatibilidad. Sin embargo, se pueden usar métodos para detectar si el navegador admite estas propiedades. Si el código en el ejemplo anterior quiere detectar si el navegador reconoce el atributo del patrón, puede usarse para detectarlo utilizando el código JavaScript.
alerta ('patrón' en document.createElement ('input')) // boolean;
De hecho, este es un método comúnmente utilizado para determinar la compatibilidad del navegador, y la biblioteca jQuery a menudo usa este método. Se crea una etiqueta de entrada en el código anterior y verifica si el atributo de patrón es compatible con el navegador. Si puede ser compatible, el navegador admitirá esta función, de lo contrario no será compatible.
<script>
if (! 'patrón' en document.createElement ('input')) {
// Validación del lado del cliente/servidor
}
</script>
21. Marcas etiquetas La etiqueta <Mark> se usa para resaltar el texto que necesita resaltar visualmente su importancia para el usuario. La cadena envuelta en esta etiqueta debe estar relacionada con el comportamiento actual del usuario. Por ejemplo, si busco abrir su mente en algunos blogs, puedo envolver cada acción usando JavaScript en la etiqueta <Mark>.<h3> Resultados de búsqueda </h3>
<H6> Fueron interrumpidos, justo después de que Quato dijo, <Mark> "Abre tu mente" </sk>. </h6>
22. Cómo usar la etiqueta Div correctamenteAlgunas personas pueden tener preguntas. Con etiquetas como <curebe> y <footer>, ¿la etiqueta <div> seguirá funcionando en html5? La respuesta es sí. Por ejemplo, si desea crear un contenedor que pueda envolver contenido especial, el <div> gratuito y flexible es definitivamente la primera opción. Si desea crear un artículo o un menú de navegación, se recomienda que use más etiquetas semánticas <artículo> y <AV>.
Muchas personas piensan que HTML5 aún puede ser mucho tiempo, por lo que lo ignoran directamente. De hecho, muchos sitios web han comenzado a usar HTML5 ahora. De hecho, algunos nuevos atributos y funciones de HTML5 son hacer que el código sea más conciso. Esto siempre es algo bueno y debería ser digno de nuestros elogios. Finalmente, gracias por leer este artículo de nivel de entrada en HTML5, con la esperanza de brindarle ayuda para que aprenda más a HTML5.