Introducción al artículo de Wulin.com (www.vevb.com): Recuerdo una experiencia horrible. La página estaba anidada con una docena o docenas de divs. Me hizo sentir mareado cuando lo leí ... algunos de ellos pueden usar etiquetas de tramo, etiquetas P y divs. Aquellos que pueden usar H1 y HX también usan etiquetas DIV. Está realmente sin palabras ... en este momento, espero que el desarrollador tenga algunos conceptos y acciones de "etiquetas semánticas".
Veo que algunos requisitos de reclutamiento están familiarizados con la palabra semántica web y la comprensión/familiarizado con los estándares web. La semántica de la etiqueta es parte de los estándares web, así que modifiqué una publicación que solía publicar en el parque de blogs y luego la publiqué ... Espero que los principiantes front-end puedan saber que existe tal cosa.
Recuerdo una experiencia aterradora. La página estaba anidada con una docena o docenas de divs. Me hizo sentir mareado cuando lo vi ... algunos de ellos pueden usar etiquetas de tramo, etiquetas P y divs. Aquellos que pueden usar H1 y HX también usan etiquetas DIV. Está realmente sin palabras ... en este momento, espero que el desarrollador tenga algunos conceptos y acciones de etiquetas semánticas ...
1: (Teoría) ¿Qué es una etiqueta semántica?
Las etiquetas semánticas deben intentar usar las etiquetas HTML con las estructuras correspondientes tanto como sea posible. Tome la mesa como ejemplo:
<Table>
<tr>
<TD> Elementos del consumidor </td>
<TD> Cantidad de consumo </td>
</tr>
<tr>
<TD> Eat </td>
<TD> 20 yuan </td>
</tr>
</table>
¿Has visto lo que le pasa a la mesa de arriba? Jeje, luego mira esta etiqueta semántica
<Table>
<tittition> Evite la contabilidad </tocktion>
<Evista>
<tr>
<th> Elementos del consumidor </th>
<th> Cantidad de consumo </th>
</tr>
</ablo>
<Tbody>
<TD> Eat </td>
<TD> 20 yuan </td>
</tbody>
</table>
Las etiquetas de estas dos piezas de código son diferentes. Los códigos de etiqueta en la segunda tabla están indudablemente más en línea con los estándares web.
<tititar>: título de la tabla;
<Bead>: el encabezado de una mesa;
<th>: encabezado de columna de una determinada columna de la tabla.
Hablemos de lo que estamos acostumbrados
<title> Introducción a Blog Park </title> <body> Blog Park es un parque de tecnología de desarrollo de software. Fue fundada en 2004, aquí ... </body>
Mira, ¿por qué sabemos dónde está el título cuando leemos un artículo? En la parte superior del navegador. Entonces, ¿por qué pueden arrastrarse los motores de búsqueda? Es que sabe que el título de la etiqueta semántica <title> es el artículo. Si no cumplimos con esto, en su lugar:
<span> Introducción a Blog Park </span> <span> Blog Park es un parque de tecnología de desarrollo de software. Fue fundada en 2004, aquí ... <span>
Entonces, ¿cómo saben los motores de búsqueda quién es el título y quién es el contenido? ¿Cómo se basa para obtener el título? De hecho, la semántica no solo puede ser la semántica de etiquetas, sino también extenderlas a la semántica estructural. Por ejemplo:
#left {float: izquierda; margging-izquierda: 50px;}
#right {float: right; margin-top: 100px;}
<div id = izquierda> contenido .. </div>
<Div id = derecho> contenido .. </div>
En este ejemplo, el nombramiento de ID es un poco exagerado, pero situaciones similares hacen algunas. Cuando queremos poner el #left div en el lado derecho de la página y cambiar la posición con #right, ¿puede cambiar el estilo a esto?
#left {float: right; margen-izquierda: 50px;}
#right {float: izquierda; margin-top: 100px;}
Sería muy incómodo verse así, y sería engañar el diseño de estos dos divs.
Debe escribirse así.
<div id = main> contenido .. </div>
<div id = barra lateral> contenido .. </div>
De esta manera, está claro de un vistazo qué contenidos hay en estos divs y es conveniente modificar los estilos.
2: (Teoría) ¿Qué hay de las etiquetas semánticas?
1. Mejor estructura, más propicio para el rastreo de motores de búsqueda (optimización de SEO) y el mantenimiento del desarrollador (mayor mantenimiento debido a una estructura clara y fácil de leer).
2. Es más propicio para la lectura de terminales especiales (teléfonos móviles, asistentes personales, etc.).
3: (Acción) ¿Qué hacer con las etiquetas semánticas?
Trate de usar significados estructurales y menos semántica, como <span>, <iv> sin sentido, y no puede decir qué es, pero no puede ver qué es lo que es. Puede decir que la etiqueta EM es el contenido que se enfatiza y se distingue de diferentes contenidos.
Entonces, ¿cómo determinar si su página cumple con uno de los estándares web: las etiquetas semánticas? Puede eliminar temporalmente el estilo de su página y ver cuán legibilidad es. Si siente que su página es muy complicada en este momento, significa que la etiqueta semántica de la página no es muy buena. Si su página aún no está desordenada después de eliminar el estilo, significa que la estructura de su página es clara y la etiqueta semántica es mejor.
Esta es solo mi opinión. Espero que las personas que lo han leído también expresen sus ideas para que todos puedan conocer sus ideas y mejorar este artículo.