Introducción al artículo de Wulin.com (www.vevb.com): una página web es como una casa, la estructura HTML es paredes una por una y las etiquetas son ladrillos. Los ladrillos deben colocarse de manera ordenada y ordenada para que las paredes sean firmes. Finalmente, el CSS es el material decorativo, y depende de ella si es hermosa o no. Por lo tanto, necesitamos tener una excelente página web, que no solo proporciona una estructura limpia y clara HTML, sino también inseparable del embellecimiento final de CSS.
Hace algún tiempo, al navegar en línea, descubrí que las preguntas de reclutamiento de desarrollo front-end de varias compañías gigantes nacionales de Internet todavía mencionaron un problema de semántica de etiquetas. Este tema ya es un cliché, pero todavía hay muchos problemas. Todo se reduce a un hábito. Soy demasiado vago cuando tengo tiempo, así que solo escribo código sin considerarlo. ¡Sé que estaba equivocado! Zapatos para niños, ¡tenemos que hacer que la semántica de etiquetas sea un hábito! ¡Hoy popularizaré la semántica de las etiquetas y me animaré a no confundirme todo el día!
En el diseño web, a menudo escuchamos el término etiqueta semántica. El diseño que piensa en la semántica de la etiqueta HTML en realidad es utilizar la etiqueta más apropiada y apropiada para una determinada pieza de contenido. De esta manera, no importa quién sea, puedes entender cuál es este contenido.
Una página web es como una casa. La estructura HTML es paredes una por una, y las etiquetas son ladrillos. Los ladrillos deben colocarse de manera ordenada y ordenada para que las paredes sean firmes. Finalmente, el CSS es el material decorativo, y depende de ella si es hermosa o no. Por lo tanto, necesitamos tener una excelente página web, que no solo proporciona una estructura limpia y clara HTML, sino también inseparable del embellecimiento final de CSS.
Lo anterior también muestra que la semántica de la etiqueta es extremadamente importante. Cada etiqueta en HTML tiene su propia semántica y su propio alcance de aplicación. Pero a menudo es ignorado o abusado por nosotros. Por ejemplo: en una página, hay docenas o incluso cientos de ellos. Esta es una etiqueta sin sentido, que solo representa una capa, que es muy desfavorable para el mantenimiento posterior; Mientras que la etiqueta <Able> es una etiqueta de datos, y cuando es hora de usarla, debemos usarla con valentía.
Beneficios de la semántica de la etiquetaHay innumerables razones para que use la semántica de etiquetas:
Resumen de semántica de la etiqueta HTMLPara usar la semántica de etiquetas más rápido y mejor, el siguiente formulario enumera todas las etiquetas HTML y las descripciones de etiquetas. La siguiente lista se organiza alfabéticamente, donde es nueva: es la nueva etiqueta en html5.
Descripción de la etiqueta
<!-...-> Definir comentarios.
<! Doctype> Define el tipo de documento.
<a> Defina el hipervínculo.
<BBR> Defina la abreviatura.
<AcronyM> No es compatible en HTML 5. Defina el acrónimo.
<Dirección> Define el elemento de dirección.
<Applet> no es compatible en HTML 5. Defina el applet.
<Siclo> Define el área en el mapa de imágenes.
<Artículo> Definir artículo.
<Sectante> Define contenido fuera del contenido de la página.
<Audio> Define el contenido de sonido.
<b> Definir texto en negrita.
<sase> Define la URL base para todos los enlaces en la página.
<caseFont> no es compatible en HTML 5. Utilice CSS en su lugar.
<bdi> Defina la orientación del texto del texto para que se establezca desde la dirección del texto circundante.
<BDO> Defina la dirección de la pantalla de texto.
<Big> no es compatible en HTML 5. Defina texto grande.
<LockQuote> Defina largas referencias.
<Body> Define el elemento del cuerpo.
<br> Insertar ruptura de línea.
<botón> Define el botón.
<Vas> Define el gráfico.
<tittition> Define el título de la tabla.
<Center> HTML 5 no es compatible. Define el texto centrado.
<cite> Define una referencia.
<código> Define el texto del código de la computadora.
<COL> Define las propiedades de una columna de tabla.
<COLGROUP> Define la agrupación de columnas de tabla.
<Command> Define el botón de comando.
<Stalist> Define la lista desplegable.
<dd> Defina la descripción de la definición.
<El> Define el texto Eliminar.
<talls> Define los detalles del elemento.
<dfn> Definición define el proyecto.
<Dir> no es compatible en HTML 5. Defina una lista de directorio.
<Viv> Define una parte del documento.
<dl> Lista de definición de definición.
<dt> Define el elemento definido.
<em> Definición enfatiza el texto.
<ROBRIT> Definir contenido interactivo externo o complemento.
<FieldSet> Define FieldSet.
<Caption> Define el título del elemento de figura.
<figura> Define la agrupación del contenido de los medios, así como sus títulos.
<font> no es compatible en HTML 5.
<Tooter> Define el pie de página de la sección o página.
<Form> Define el formulario.
<Frame> HTML 5 no es compatible. Define una subwindow (marco).
<Frameset> no es compatible en HTML 5. Define el conjunto de marcos.
<h1> a <h6> Definir el Título 1 al Título 6.
<Evado> Define información sobre el documento.
<ciebe> Define el encabezado de sección o página.
<hgroup> Define información sobre las secciones en el documento.
<hr> Defina la línea horizontal.
<html> Defina el documento HTML.
<i> Definir texto en cursiva.
<Iframe> Define la ventana infantil (marco) dentro de la fila.
<IMG> Defina la imagen.
<put> Define el campo de entrada.
<S INS> Define el texto de inserción.
<Keygen> Define la clave generada.
<SIndex> no es compatible en HTML 5. Define el campo de entrada para una sola línea.
<KBD> Define el texto del teclado.
<Label> Define la etiqueta del control de formulario.
<Legend> Define el título en el Fieldset.
<li> Defina el elemento de la lista.
<Nink> Define la referencia de recursos.
<mapa> Defina el mapa de imágenes.
<Kark> Define el texto marcado.
<Menú> Definir la lista de menú.
<seta> Define meta información.
<serer> Define la métrica dentro del rango predefinido.
<AV> Definir enlaces de navegación.
<Noframes> no es compatible en HTML 5. Defina la parte noframe.
<roscript> Define la parte Noscript.
<S Object> Define el objeto incrustado.
<Ol> Define una lista ordenada.
<PtGroup> Define el grupo de opciones.
<Cection> Define las opciones en la lista desplegable.
<Puttout> Define algunos tipos de salida.
<p> Definir párrafos.
<amam> Define los parámetros para el objeto.
<pre> Definir texto preformado.
<GRESSS> Define el progreso de cualquier tipo de tarea.
<Q> Define referencias cortas.
<RP> Defina el contenido que se muestra por el elemento Ruby si el navegador no admite el navegador.
<RT> Define la explicación de los comentarios de Ruby.
<Suby> Define los comentarios de Ruby.
<s> no es compatible en HTML 5. Define el texto con Strikethrough.
<samp> Defina el código de computadora de muestra.
<script> Define el script.
<Sección> Define la sección.
<Select> Define una lista opcional.
<Small> Rendere Comments como texto pequeño.
<sever> Define la fuente de medios.
<Span> Define la sección en el documento.
<Strike> no es compatible en HTML 5. Define el texto con Strikethrough.
<strong> Definición enfatiza el texto.
<Syle> Define la definición de estilo.
<Sub> Define el texto de la subíndice.
<summary> Define el título del elemento de detalles.
<sup> Definir texto superíndice.
<Table> Define la tabla.
<Tbody> Define el cuerpo de la mesa.
<TD> Define la celda de la tabla.
<ExteAea> Definir TextAREA.
<Tfoot> Define las notas al pie de la mesa.
<TH> Define el encabezado.
<Art> Define el encabezado.
<Time> Definir fecha/hora.
<title> Define el título del documento.
<tr> Define las filas de tabla.
<Track> Define la pista de texto utilizada en el reproductor multimedia.
<TT> no es compatible en HTML 5. Define el texto de la máquina de escribir.
<U> no es compatible en HTML 5. Definir texto subrayado.
<ul> Defina una lista desordenada.
<arv> Define la variable.
<Dídide> Define el video.
<xmp> no es compatible en HTML 5. Defina el texto preformado.