Innovación HTML5: la belleza de la estructura

Autor：Eve Cole Fecha de actualización：2025-03-27 16:00:04

HTML 5 es como una revolución, y está en pleno apogeo en la era posterior a Web2.0.

Qué es HTML 5, no necesito entrar en detalles aquí. Según mi entendimiento, la innovación de HTML 5 se puede resumir como un sistema de etiquetas semánticas, un soporte de medios simplificado y rico, una tecnología mágica de almacenamiento de datos local, una animación rica (lienzo) que no requiere complementos y un poderoso soporte API. En resumen, HTML 5 hace que la interacción de la computadora y la interacción de la red humana sean más cómodas y se adapten a los usuarios. La falta previa de soporte para aplicaciones de medios ricos y este almacenamiento ya no es un dolor para los navegadores. La intención original de la revolución HTML 5 es promover la web de una plataforma de contenido a una plataforma de aplicación estandarizada y unificar los estándares de cada campamento de plataforma.

Este artículo explica una de las innovaciones de HTML 5: una estructura más clara y concisa.

Empiece desde el principio

Un código de encabezado XHTML estándar debería verse así:

</ablo>

¿Puedes recordar? ¿Lo memorizarás por memoria? ¡Por supuesto que no! Solo necesitamos copiar y pegar mecánicos.

Echemos un vistazo a cómo es un encabezado HTML 5 estándar:

<! Doctype html>

No necesito decir cuál es más complicado y cuál es simple. Sí, el encabezado HTML 5 puede ser tan simple que se puede recordar fácilmente. Además, se puede ignorar el caso, las citas y las versas traseras antes del último soporte de ángulo.

¿Por qué puede estar tan suelto? De hecho, si XHTML se envía como texto/HTML, el navegador también puede analizarlo bien, y al navegador no le importa la sintaxis del código. Entonces, HTML 5 es metafísico, puede romper algunos de los estándares originales, pero aún puede funcionar bien en el navegador.

Por supuesto, para la comodidad de la asistencia del equipo y el mantenimiento posterior, aún debemos unificar el estilo de escritura que le guste, como:

<! Doctype html>

<html>

...

</ablo>

<Body>

...

</body>

</html>

Además, aunque HTML 5 no es compatible actualmente por todos los navegadores, este encabezado que puede ahorrar más de 100 bytes (para sitios con niveles diarios de PV o más de un millón, puede ahorrar mucho tráfico). Si ha investigado en el modo de resolución del navegador, debe saber que las páginas activarán el modo extraño sin definir DOCTYPE, y mientras se definirá el navegador <! Doctype HTML> HTML, puede analizar las páginas en modo estándar sin especificar un cierto tipo de DTD.

Nuevo sistema de etiquetado semántico

La codificación semántica es una habilidad necesaria para los desarrolladores de front-end calificados, pero a medida que las páginas web se vuelven cada vez más ricas, es obvio que no pueden hacerlo simplemente utilizando la etiqueta XHTML original para desanimarse. Dios dijo: ¡Debe haber luz! Luego está la luz. Por lo tanto, HTML 5 proporciona una serie de etiquetas nuevas y atributos correspondientes para reflejar la semántica típica de los sitios web modernos. Práctica para producir la verdad. Vamos a escribir un ejemplo:

<h1> Título del sitio web </h1>

<h1> Subtítulo del sitio </h1>

</div>

<ul>

<li> JavaScript </li>

</ul>

</div>

<!-// encabezado final->

<p> Este es un artículo sobre las nuevas etiquetas de estructura HTML 5. </p>

</div>

<p> Este es también un artículo sobre las nuevas etiquetas de estructura HTML 5. </p>

</div>

<!-// Left End->

<h1> Perfil de autor </h1>

<p> Mr.Think, una persona común que se centra en la tecnología de front-end web. </p>

</div>

<!-// extremo lateral->

La parte inferior de la página

</div>

<!-// Footer End->

Arriba hay una simple parte de la página de blog HTML, que consiste en el encabezado, el área de visualización del artículo, la columna del lado derecho y la parte inferior. La codificación es ordenada y se ajusta a la semántica de XHTML, que se puede realizar bien incluso en HTML 5. Pero para el navegador, este es un código que no distingue entre pesos, en lugar de una etiqueta que permite que la máquina comprenda la semántica para definir el bloque correspondiente. Por ejemplo, los navegadores estándar (como Firefox, Chrome e incluso la nueva versión de IE) tienen una clave de acceso directo que puede llevar a los clientes a saltar directamente a la navegación de la página, pero el problema es que todos los bloques están definidos por DIV, y el desarrollador determina el valor de ID del DIV, por lo que el navegador no sabe qué bloque debe ser el bloque donde se encuentra el enlace de navegación. La aparición de nuevas etiquetas HTML 5 lo compensa para esta deficiencia. Entonces, si el código anterior se reemplaza con HTML 5, puede escribirlo así:

<h1> Título del sitio web </h1>

<h1> Subtítulo del sitio </h1>

</hgroup>

<Arr>

<ul>

<li> JavaScript </li>

</ul>

</am>

</Header>

<Artículo>

<p> Este es un artículo sobre las nuevas etiquetas de estructura HTML 5. </p>

</artículo>

<Artículo>

<p> Este es también un artículo sobre las nuevas etiquetas de estructura HTML 5. </p>

</artículo>

</div>

<h1> Perfil de autor </h1>

<p> Mr.Think, una persona común que se centra en la tecnología de front-end web. </p>

</aparte>

La parte inferior de la página

</foTer>

Resulta que la estructura de la página HTML puede ser tan hermosa que se puede ver de un vistazo sin comentarios. Para los navegadores, ya no estará perdido cuando encuentre el bloque correspondiente.

Cómo estructurar elementos con HTML 5 nuevas etiquetas:

A través del ejemplo anterior, entendemos las innovaciones de las nuevas etiquetas HTML 5 para la estructura, pero al cambiar al uso real, ¿cómo podemos usarlas adecuadamente? Creo que esta también es una pregunta que muchos alumnos de HTML 5 quieren hacer. Al igual que la semántica XHTML, también se debe seguir el uso de etiquetas semánticas HTML 5: cada etiqueta tiene su significado específico, y la semántica significa que usamos etiquetas apropiadas en el lugar correcto para hacer mejor a las personas y las máquinas (las máquinas pueden enterrarse como los navegadores se pueden entender como los ingenieros de búsqueda). Por ejemplo, la etiqueta de encabezado es generalmente el primer elemento de bloque de la página (la etiqueta del encabezado también se puede usar en el elemento de encabezado de tipo, como el título del bloque del artículo), que contiene la información del tema de la página; La etiqueta NAV generalmente se usa para envolver la información de navegación; El pie de página generalmente se usa para envolver la información inferior de la página; etcétera.

A continuación se muestra la explicación semántica y las pautas de uso para nuevas etiquetas comunes para clases estructurales enumeradas en el manual HTML 5:

<cabecera> etiqueta

Definición manual: define el encabezado de la sección o documento.

Pautas de uso: generalmente se usa para incluir encabezados de página, y también se puede utilizar para otros encabezados del área, como encabezados del artículo:

<h1> Título del sitio web </h1>

<h1> Subtítulo del sitio </h1>

</hgroup>

</Header>

<hgroup> etiqueta

Definición manual: se utiliza para combinar los títulos de una página o sección web.

Directrices para su uso: Utilizado para combinaciones de clases de título, como el título y el subtítulo de un artículo:

<h1> Este es un artículo que presenta etiquetas de estructura HTML 5 </h1>

<h2> html 5 innovación </h2>

</hgroup>

<Al nav> etiqueta

Definición manual: Defina la parte que define el enlace de navegación.

Directrices para su uso: Sección de navegación para definir páginas:

<Arr>

<ul>

<li> JavaScript </li>

</ul>

</am>

<Apuesto> etiqueta

Definir contenido que no sea el artículo. El contenido de aparte debe estar relacionado con el contenido del artículo.

Directrices de uso: utilizada para contenido seccionado, se iniciará una nueva sección en la secuencia de documentos, que generalmente se usa en las barras laterales relacionadas con el contenido del artículo:

<h1> Perfil de autor </h1>

<p> Mr.Think, una persona común que se centra en la tecnología de front-end web. </p>

</aparte>

<Sección> Etiqueta

Definición manual: Defina secciones en el documento. Por ejemplo, capítulos, encabezados, pies de página u otras partes del documento.

Pautas de uso: el contenido utilizado para las secciones iniciará una nueva sección en la secuencia de documentos:

<Sección>

¿Qué es la sección <H1>? </h1>

<h2> Un nuevo capítulo </h2>

<Artículo>

<H2> Acerca de la sección </h1>

<p> Sección Introducción </p>

...

</artículo>

</section>

<ToToTer> etiqueta

Definición manual: define el pie de página de la sección o documento. Por lo general, contendrá el nombre del creador, la fecha de creación del documento y/o información de contacto.

Pautas de uso: generalmente se usa para envolver toda la página con un fondo general, y también se puede usar en la parte inferior de otras áreas, como la parte inferior del artículo:

</foTer>

<Artículo> Etiqueta

Definición manual: definir contenido externo. Por ejemplo, un nuevo artículo de un proveedor de noticias externo, ya sea de un blog o de un foro. O proviene de otras fuentes externas.

Directrices para su uso: como su nombre lo indica, generalmente se usa en bloques de artículos:

<Artículo>

<h1> Este es un artículo que presenta etiquetas de estructura HTML 5 </h1>

<h2> html 5 innovación </h2>

</hgroup>

</Header>

<p> Detalles del contenido del artículo </p>

</artículo>

<figura> etiqueta

Definición manual: se usa para combinar elementos.

Pautas de uso: se usa principalmente para combinar imágenes y descripciones de imágenes:

<Caption> Esta es la información de descripción de la imagen </figCaption>

</figura>

<Menú> Etiqueta

Definición manual: Defina la lista de menú. Use esta etiqueta cuando desee enumerar los controles de formulario.

Guía de uso: Usado en bloques de clase de menú, se usa para definir listas de menú o opciones de menú:

<Menú>

<li> JavaScript </li>

</menú>

Otras nuevas etiquetas en HTML 5 no se explicarán una por una. Por favor revise el manual usted mismo.

De hecho, estas cosas son como el Div, H1, INPU y otras etiquetas en XHTML. Mientras practiques más en la vida diaria, es fácil usarlos libremente.

Sobre la compatibilidad

Si es una persona a la que le gusta estudiar y prestar atención al front-end, debe saber que las nuevas etiquetas HTML 5 se han utilizado en la estructura de la página de Taobao. Entonces, lo que quiero decir es que siempre que te atreques a intentarlo, la compatibilidad no es un problema. Hay muchos métodos de compatibilidad en línea (este artículo trata sobre estructura, ha ~).

Historias posteriores

Cualquier tecnología nueva requiere un proceso de adaptación. Si está listo para ser un excelente desarrollador de front-end web, debe seguir intentando y aceptando la última tecnología frontal.

Sun Wen dijo una vez que si quieres hacer la felicidad de la civilización, tienes que hacer el dolor de la civilización. Esto es cierto para la revolución de la humanidad, y también lo es la revolución de HTML 5. El declive gradual de IE ha permitido que los principales fabricantes de navegadores ingresen al período de los Estados Guerse y compitan entre sí. En cuanto a los desarrolladores, solo esperamos que los principales fabricantes de navegadores sigan el mismo estándar tanto como sea posible, en lugar de dividir a los jugadores después de la competencia. Porque la presentación eficiente y perfecta de la misma aplicación a todo tipo de usuarios es nuestro objetivo final.

De esta manera, este artículo comienza desde el Doctype de la página, hasta el uso de las nuevas etiquetas HTML 5 para construir una estructura de página más semántica, y luego explica las nuevas etiquetas relacionadas con la estructura de la página. Creo que todos tienen una nueva comprensión de las nuevas etiquetas estructurales de HTML 5. Si está interesado, luego abra su IDE, escriba un código construido por las nuevas etiquetas de HTML 5, ¡y luego use CSS para describir su gran plan!