Explicación detallada de la experiencia y análisis del código semántico CSS de HTML5

Érase una vez, un hombre publicó un borrador de diseño. Después de publicar el borrador de diseño, abrió un DW y arrastró una página. Después de trabajar duro, tuvo que escribir un fondo. El hombre de artes marciales llamado "artista".

El siguiente es un artículo de tutorial sobre la experiencia y el análisis de la semántica HTML5 y la semántica HTML5. El contenido es un tutorial cuidadosamente seleccionado y compilado por este sitio web. Espero que sea útil para los internautas. El siguiente es el contenido detallado:

Érase una vez, un hombre publicó un borrador de diseño. Después de publicar el borrador de diseño, abrió un DW y arrastró una página. Después de trabajar duro, tuvo que escribir un fondo. El hombre de artes marciales llamado "artista". Lo que es aún más difícil es que cuando cada necesidad cambia, puede modificar mucho entumecimiento.

Entonces Div+CSS fue llevado a la etapa de la era de Internet, y más de un libro de girasol "Div+CSS" nació durante la noche. En ese momento, vivíamos en la era de Div+CSS, y en ese momento, lo usamos.

Después de eso, mi cintura no estaba dolorida, mis piernas no estaban lastimadas y me emocioné más cuando trabajaba horas extras.

Ghost una vez explicó la semántica en el artículo "Semantización en la refactorización de la página" hace dos años, y también el muelle "¿Cuáles son los beneficios de las estructuras HTML semánticas?》

La reconstrucción ha tomado 7 años. Quizás hoy podemos escribir una página hábilmente, pero ¿qué tan fácil es escribir bien una página? Ordenemos nuestras ideas, revisemos los conceptos básicos y las combinemos con las tendencias actuales y luego hablemos sobre el tema de la semántica. ¿Es la semántica de Shenma? ¿Por qué semántico?

La semántica en la reconstrucción se puede dividir básicamente en dos partes: (x) semántica de etiquetas HTML y semántica de nombres de CSS.

(x) Semántica de etiquetas HTML

Sin tonterías:

(Figura 1)

Figura 1 El método de implementación de no semántica: no_emantic_html El método de implementación de semántica: emantic_html

Tienes razón

¿Tienes un gusto especial? Después de obtener un borrador de diseño, ¿innumerables habilidades mágicas han caído en la pantalla inadvertidamente? Si es no_emantic_html, felicidades por tener un fetiche.

Use etiquetas HTML razonables y sus propiedades únicas para formatear el contenido del documento: esta es la explicación de Shuke de las etiquetas semánticas, por lo que no es posible

No es necesario usar el lugar donde se estructura HTML, porque es una etiqueta semántica. La palabra original es la división, lo que significa separación y bloque. Generalmente solo se usa en el lugar donde HTML está estructurado, en la versión anterior de (x) HTML.

Pero, ¿cómo podemos escribir etiquetas semánticas? Comience con lo básico. Los que más tratamos cada día son etiquetas como Div H1-H6 UL-Li P. Me pregunto si tienes alguna comprensión profunda de estas etiquetas. Echemos un vistazo a la mesa a continuación.

Lo anterior solo enumera algunas de las etiquetas que comúnmente usamos. Para obtener más etiquetas, consulte W3C. Básicamente, todas las etiquetas HTML son abreviaturas de una palabra o frase, lo que en realidad significa que es más conveniente para nuestra comprensión de la semántica. De hecho, entre todas las (x) etiquetas HTML, excepto

Y 2 etiquetas sin semánticas, otras etiquetas tienen sus significados. Solo sabiendo qué etiquetas están allí y entendiendo el significado original de cada etiqueta puede saber cómo usarla. No sabes cuándo usarlo

Definir etiquetas de lista? ¿Y si no sabes que hay ^{una etiqueta? Si ve básicamente todos los divs en una página, significa que no comprende muy bien el uso de etiquetas semánticas: obviamente es un título, que se puede implementar con etiquetas, pero debe implementarse sin etiquetas semánticas, o un párrafo, ¿es más semántico usar etiquetas?}

^{Todos conocen el festival anual de desnudos CSS, ¿verdad? Si las etiquetas seleccionadas están casi todas sin semántica, entonces casi no hay información estructural en la página web después del estilo, y la legibilidad es muy pobre; Si las etiquetas seleccionadas son adecuadas para la semántica, la página web todavía tiene muy buena legibilidad después de los estilos; Cada navegador tiene su propio estilo predeterminado, y el estilo predeterminado ofrece diferentes pantallas en cada etiqueta. La corrección de la etiqueta puede reflejar la usabilidad del sitio web, que también es una de las formas más fáciles de probar la usabilidad de un sitio web.}

^{Esto se recomienda para que todos verifiquen el uso de etiquetas de sitio web oficiales de W3C, use el desarrollador web para deshabilitar su CSS para ver cómo ver.}

^{Semántica de nombres de CSS}

^{El nombre semántico de CSS se refiere a la clase o nombre de ID adjunto a la etiqueta HTML con un nombre fácil de entender. El nombramiento semántico implica especificaciones de nombres de equipo. Solo por un mejor nombramiento semántico basado en las especificaciones del equipo es el rey.}

^{A mi opinión, un nombre semántico de CSS debería al menos cumplir con las siguientes convenciones:}

^{Trate de evitar el nombre de Pinyin y use palabras en inglés para nombrarlo}

^{Hay tres formas de conectar las palabras: subrayado, símbolos espaciadores y nombres de camellos . Consulte las especificaciones del equipo para un uso específico, pero personalmente recomiendo no usar más de 2 métodos de conexión al mismo tiempo.}

^{No siga los números sin sentido después de las palabras , como el logo1234 (excepto el acuerdo del equipo)}

^{Para el nombre de las palabras excesivamente largas, puede usar la abreviatura, pero debe asegurarse de que todos los miembros puedan entenderlo.}

^{Algunas palabras acordadas pueden ayudarlo a nombrarlas rápidamente:}

头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column登录条：loginbar标志：logo广告：banner轮转：promo页面主体：main热点：hot新闻：news 下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink版权copyright

^{Hay demasiados de esto, así que no los enumeraré uno por uno aquí. Si te encuentras con palabras que no conoces, ¡agregue un poco de inglés!}

[1] [2] Página siguiente