Extensión del elemento HTML de HTML5 (Parte 1): elementos recién agregados y descripción general de uso

Autor：Eve Cole Fecha de actualización：2025-04-17 23:32:03

Considere nuestro proceso de desarrollo de una página :

1. Diseñe la estructura de la página - HTML: este proceso es utilizar varios elementos HTML para construir la estructura de la página web.

2. Diseñe la apariencia de la página: CSS: este proceso es usar CSS para mejorar la apariencia de la página web.

3. Comportamiento de la página de diseño - JavaScript: este proceso es dar cierto comportamiento a los elementos de la página web.

Además de CSS, HTML5 se ha ampliado a diversos grados en otros dos aspectos. Esta serie se centra en el primer aspecto. En la sección anterior, hemos aprendido los complejos elementos de lienzo y SVG, y los siguientes capítulos resumirán otros elementos agregados HTML5.

Elementos estructurales

HTML5 ha agregado nuevos elementos estructurales, como encabezado, pie de página, navegación NAV, artículo de contenido, sección de capítulos, etc. El significado se muestra en la figura a continuación:

Además de los elementos estructurales de toda la página, HTML5 también agrega elementos semánticos a nivel de bloque, como los elementos auxiliares auxiliares, la figura de los elementos de imagen, la descripción detallada de los detalles de los elementos, etc. Además de mostrar mejor el significado de diseño de la página, estos elementos no son diferentes de los divs ordinarios y aún necesitan depender de CSS para mostrar estos elementos. Aquí hay un breve ejemplo:

<html>

</ablo>

<Body>

</Header>

<Sección>

<Artículo>

<h2> <a href = "http://www.vevb.com/dxy1982/"> Artículo 1 </a> </h2>

<p> Introducción </p>

</artículo>

<Artículo>

<h2> <a href = "http://www.vevb.com/dxy1982/"> Artículo 2 </a> </h2>

<p> Introducción </p>

</artículo>

<Arr>

</am>

</section>

<Arr>

<ul>

<li> <h2> información </h2>

<ul>

<li> <a href = "http://www.vevb.com/dxy1982/"> Política </a> </li>

</ul> </li>

<li> <h2> Artículo </h2>

<ul>

<li> <a href = '/blog/2007/04/'> enero </a> </li>

<li> <a href = '/blog/2007/03/'> febrero </a> </li>

</ul>

</li>

</ul>

</am>

</foTer>

</body>

</html>

Aunque estos elementos son relativamente simples de usar, todavía hay algunos puntos a tener en cuenta :

1. No use la sección como sustituto de Div

La sección no es un contenedor de estilo. El elemento de sección representa la parte semántica del contenido utilizado para ayudar a construir un resumen de documentos. Debe contener un encabezado. Por lo general, existe como la mayor cantidad de artículo (por supuesto, también es posible para el artículo como su parte). Si desea encontrar un elemento que se use como contenedor de página o que necesite un contenedor de estilo adicional, continúe usando Div.

2. Solo use encabezado y hgroup cuando sea necesario

No tiene sentido escribir etiquetas que no necesiten ser escritas. Los escenarios de uso de Header y HGroup suelen ser los siguientes:

• El elemento encabezado representa un conjunto de texto auxiliar introductorio o navegatorio, a menudo utilizado como encabezado de la sección.

• Cuando la cabeza tiene una estructura de múltiples capas, como subtítulos, subtítulos, varios textos del logotipo, etc., use HGROUP para combinar elementos H1-H6 como la cabeza de la sección.

Aquí, si el encabezado o HGROUP solo tiene unos pocos elementos de cabeza, es mejor eliminar estas dos etiquetas inútiles, por ejemplo:

<Artículo>

<h1> Mi mejor publicación de blog </h1>

</Header>

<!-Contenido del artículo->

</artículo>

Modificar directamente a:

<Artículo>

<h1> Mi mejor publicación de blog </h1>

<!-Contenido del artículo->

</artículo>

Lo mismo ocurre con:

<h1> Mi mejor publicación de blog </h1>

</hgroup>

<p> Por Rich Clark </p>

</Header>

Cambiarlo directamente a:

<h1> Mi mejor publicación de blog </h1>

<p> Por Rich Clark </p>

</Header>

3. No abuses de Nav

El elemento NAV representa un bloque en la página que vincula a otras páginas u otras partes de esta página; Un bloque que contiene enlaces de navegación.

Pero no todos los enlaces en la página deben colocarse en el elemento NAV: este elemento está destinado a ser utilizado como el bloque de navegación principal. Para dar un ejemplo específico, a menudo hay muchos enlaces en el pie de página, como términos de servicio, página de inicio, página de aviso de derechos de autor, etc. El elemento de pie de página en sí es suficiente para hacer frente a estas situaciones. Aunque el elemento NAV también se puede usar aquí, generalmente se considera innecesario.

4. No abuses de la figura

La figura debe ser un contenido de fluido, y a veces habrá una descripción del título contenida en ella. En general, se referenciará como una unidad independiente en la secuencia de documentos. Este es el mejor escenario para la figura: se puede mover de la página de contenido principal a la barra lateral sin afectar el flujo de documentos. La figura solo debe referenciarse en el documento, o rodeada por elementos de sección.

Si es puramente para la representación de la imagen (como el logotipo), no citado en otra parte del documento, y no hay necesidad de mover la ubicación, entonces no use la figura.

5. No use atributos de tipo innecesarios

En HTML5, los elementos de script y estilo ya no requieren atributos de tipo. Por supuesto, no hay problema con la escritura, pero desde la perspectiva de las mejores prácticas, no hay necesidad de escribir.

Elementos de audio

Los elementos de audio se utilizan para identificar contenido de sonido, como música o cualquier otra transmisión de audio. Los formatos compatibles con este elemento se muestran en la siguiente tabla:

	Es decir, 9	Firefox 3.5	Ópera 10.5	Chrome 3.0	Safari 3.0
Vorbis ogg		√	√	√
Mp3	√			√	√
Wav		√	√		√

La etiqueta de audio tiene algunos atributos utilizados para controlar el contenido, cuándo y cómo se reproduce el audio, etc. Estos atributos son: src (nombre de archivo), precarga (cargar cuando se carga la página), controles (control de visualización), bucle (bucle) y autoplay (autoplay). En el siguiente ejemplo, la página se reproducirá tan pronto como se cargue el audio, y continuará jugando. Los controles proporcionados pueden permitir al usuario detener o reiniciar la reproducción del audio:

Su navegador no admite elementos de audio.

</audio>

Si el navegador no admite el elemento, se muestra la información de texto del elemento.

Si se establece el elemento automático, la propiedad de precarga se ignora automáticamente. Si se establece preload = Auto, el audio se cargará después de cargar la página.

El elemento de audio permite especificar múltiples elementos de origen para ser compatibles con el navegador. El elemento fuente puede vincular diferentes archivos de audio. El navegador usará el primer formato reconocible:

<audio>

Su navegador no admite elementos de audio.

</audio>

Elemento de video

El elemento de video te permite reproducir videoclips o transmitir medios visuales. Los formatos compatibles con este elemento se muestran en la siguiente tabla:

Formato	ES DECIR	Firefox	Ópera	Cromo	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
Webm	No	4.0+	10.6+	6.0+	No

Tiene todos los atributos del elemento de audio, más: apagado, póster (espera de imagen), ancho y altura. No hace falta decir que los dos últimos significados. Cuando el video se está cargando o el video está en un estado sin carga, el atributo del póster (especificando una URL absoluta o relativa) le permite encontrar una imagen para tratarlo primero; apagado significa silenciado.

El video también admite el uso de elementos de origen para resolver problemas de compatibilidad. Ver un pequeño ejemplo:

Su navegador no admite elementos de video.

</video>

Si no quieres reproducir el sonido de video, establezca apagado = apagado.

Además, el elemento de video también proporciona algunos métodos, propiedades y eventos para respaldar el proceso de control de la reproducción en las operaciones DOM. Por ejemplo, llamar a elementos para jugar, pausar, cargar y otros métodos. También hay propiedades como volumen y tiempo de reproducción que se pueden leer o establecer directamente. Además, hay eventos que inician reproducción, pausa, finalización, etc. que se pueden usar. Vea el siguiente ejemplo:

<! Doctype html>

<html>

<Body>

<Button onClick = "PlayPause ()"> Play/PAUSE </boton>

<button onClick = "MakeMall ()"> Small </boton>

<botón onClick = "makenormal ()"> normal </boton>

Su navegador no admite elementos de video.

</video>

</div>

var myVideo = document.getElementById ("Video1");

función playpause ()

{

if (myVideo.pacused)

myVideo.play ();

demás

myVideo.Pause ();

}

función makeBig ()

{

myvideo.width = 560;

}

función hachmall ()

{

myvideo.width = 320;

}

función makenormal ()

{

myvideo.width = 420;

}

</script>

</body>

</html>

De hecho, debemos prestar atención a una nueva forma de escribir: en el ejemplo anterior, escribimos elementos de audio como este:

Su navegador no admite elementos de audio.

</audio>

De hecho, se introducen muchos controles de elementos, autospelería y bucle en HTML5. Estas propiedades están bien para que las escriba como la anterior, pero la forma recomendada es escribirlas de la siguiente manera:

Su navegador no admite elementos de audio.

</audio>

Debido a que el navegador encuentra estas propiedades, significa que estas propiedades están habilitadas. Es decir, si escribe estas propiedades y se establece con fuerza en falso, el efecto sigue siendo equivalente a verdadero, por lo que generalmente se recomienda escribir solo el nombre del atributo.

Este problema de escritura también existe en forma. Muchas nuevas propiedades de forma y entrada son propiedades booleanas, y se debe utilizar el método de escritura recomendado.

Elementos que indican la métrica

No todos los navegadores admiten los siguientes elementos, pero básicamente puede ver los efectos en el cromo.

Elemento de la barra de progreso

Use este elemento para mostrar la barra de progreso descargada, con solo dos atributos: valor y max, que es muy simple. Chrome y Firefox son apoyados.

<p> Descargar progreso:

</p>

Elementos métricos

Use este elemento para mostrar el valor dado en la clase de rango estándar que indica el diagrama de indicación, y los valores dentro de diferentes rangos mostrarán diferentes colores. Algunos sitios web usan esto para mostrar el valor de experiencia actual del usuario. Cuando el navegador no admite este elemento, el texto en el medio del elemento se mostrará directamente. Chrome actualmente es compatible.

<p> Tu puntaje es:

<Valor de metro = "88.7" min = "0" max = "100" Low = "65" High = "96" Optimum = "100"> B+</ meter>.

</p>

Ejecute y verá una cosa amarilla de barra de desplazamiento; Si cambia el valor a 50, encontrará que el color de la barra de indicadores está programado rojo.

Hay tantas presentaciones de elementos nuevos. Para obtener más descripciones de elementos, consulte la lista de etiquetas completa en W3C.

Referencia práctica:

Tutorial W3C: http://www.w3schools.com/html5/default.asp

Guía oficial de HTML5: http://dev.w3.org/html5/html-author/

Un sitio web de guía bastante buena: http://html5doctor.com/

HTML5 Tutorial chino: http://www.html5china.com/

Un buen blog delantero: http://www.pjhome.net/default.asp?cateid=1