El capítulo anterior habla sobre las primeras siete habilidades de HTML5, y ahora aprendemos nuevas habilidades.
8. Marcador de posición
Anteriormente, necesitábamos usar JavaScript para crear marcadores de posición para cuadros de texto. Inicialmente, puede establecer el atributo de valor para ver si es apropiado, pero mientras el usuario elimine el texto, el contenido de entrada volverá a vaciar nuevamente. El atributo de marcador de posición compensa efectivamente esto.
<Nombre de entrada = Tipo de correo electrónico = Posición de correo electró[email protected] />
9. Almacenamiento local
Gracias al almacenamiento local de HTML5, podemos dejar que los navegadores avanzados recuerden lo que ingresamos, e incluso si el navegador está cerrado o actualizado más tarde, no se verá afectado. Aunque no todos los navegadores lo admiten, el Internet Explorer 8, Safari 4, Firefox 3.5.
10. Header y pie de página semántico
<Div ID = Header>
…
</div>
<Div ID = Pooter>
…
</div>
Atrás quedaron el código anterior. Los DIV no tienen ninguna estructura semántica fundamentalmente, incluso si se aplica la identificación. En HTML5, podemos usar los elementos <WEADER> y <ToToTer>, y el código anterior puede ser reemplazado por:
<Header>
…
</Header>
<ToToTer>
…
</foTer>
Tenga cuidado de no confundir estos dos elementos con la cabeza y los pies del sitio web. Son solo contenedores que los representan.
11. es decir, html5
Se necesita mucho dinero para comprender los nuevos elementos HTML5. Para garantizar que los nuevos elementos HTML5 se puedan mostrar correctamente como elementos de nivel de bloque, es necesario definir su estilo con el siguiente código:
encabezado, pie de página, artículo, sección, NAV, menú, Hgroup {
Pantalla: bloque;
}
Aun así, IE todavía no sabe cuáles son estos elementos, por lo que ignora estos formatos y necesita usar el siguiente código 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ú);
12. Título del grupo (HGROUP)
Supongamos que un sitio web tiene un nombre y etiquetas de subtítulo para estar marcadas con <h1> y <h2> etiquetas respectivamente. No hay forma en HTML4 que pueda describir la relación entre los dos con una buena relación semántica. Además, cuando se usa H2 para mostrar otros títulos en la página, hay más problemas en términos de jerarquía. Usando el elemento Hgroup del título del grupo, podemos reunir estos títulos sin afectar todo el esquema del documento.
<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 requeridos
El formulario permite las nuevas propiedades necesarias, especificando si es necesaria una entrada específica. Puede declarar este atributo en las siguientes dos formas diferentes de acuerdo con sus propias preferencias para escribir código:
<input type = text name = SomeInput requerido>
O, más riguroso:
<input type = text name = someInput requerido = requerido>
Ambas líneas de código por encima del trabajo. Después de usar esta línea de código y el navegador admite el atributo requerido, no se enviará el formulario en blanco. Aquí hay un ejemplo simple, y también agregamos el atributo de marcador de posición:
<Form Method = Post Action =>
<etiqueta for = someInput> Su nombre: </selabel>
<input type = text id = someInput name = SomeInput PlaceDearter = Douglas Quaid requerido>
<button type = enviar> go </boton>
</form>
Si la entrada está vacía, el formulario no se enviará, resaltando el cuadro de texto.
14. Atributos de enfoque automático
Del mismo modo, con HTML5, las soluciones de JavaScript ya no son necesarias para resolver el problema del enfoque automático. Si se debe seleccionar o enfocar una entrada, ahora podemos usar la propiedad de enfoque automático de HTML.
<input type = text name = someInput PlaceLearTer = Douglas Quaid requerido Autococus>
15. Soporte de audio
Ya no necesitamos confiar en complementos de terceros para proporcionar audio. HTML5 proporciona un elemento de audio <udio>. Actualmente, solo los últimos navegadores admiten audio HTML5. En este punto, es mejor proporcionar cierta compatibilidad con versiones anteriores.
<Audio AutoPlay = AutoPlay Controls = Controls>
<fuente src = file.ogg />
<fuente src = file.mp3 ″ />
<a href = file.mp3 ″> Descargue este archivo. </a>
</audio>
Hablando de formatos de audio, ni Mozilla ni Webkit lo han admitido. Firefox quiere ver un archivo .ogg, y el navegador WebKit solo admite la extensión .mp3 más común. Esto significa que debe crear dos versiones de audio, al menos hasta ahora. Cuando Safari carga la página, no reconoce el archivo de formato .ogg y se omitirá y se moverá a la versión MP3. Tenga en cuenta que IE no lo admite, y Opera 10 o inferior solo admite archivos .WAV.