2.1 Introducción a las etiquetas
HTML-documentsEl marcado se basa en etiquetas . ¿ Qué es una etiqueta ?
Las etiquetas se inventaron en los años 70 para que las personas pudieran agregar información de servicio a los documentos para los programas que procesan estos documentos.
Tag- esta es una palabra clave (funcional), la mayoría de las veces en inglés, que se enmarcó entre paréntesis angulares (más y menos caracteres) para que los programas no confundan etiquetas y palabras comunes en inglés.
La etiqueta también puede contener diversa información de servicio que puede ser útil para el programa que procesa el documento.
Texto de ejemplo con una etiqueta:
<a href="http://codegym.cc/about">
Link to something interesting
</a>En este ejemplo, vemos el texto, la etiqueta "a", así como la información del servicio: los atributos de la etiqueta. A continuación aprenderás más sobre ellos.
2.2 Tipos de etiquetas: apertura, cierre, etiqueta vacía
Las etiquetas son de diferentes tipos. En primer lugar, son individuales y dobles. Las más comunes son las etiquetas emparejadas . Y como probablemente ya hayas adivinado, siempre van en parejas. También se les llama apertura y cierre.
La etiqueta de apertura es solo una palabra clave entre corchetes triangulares. Ejemplo:
<h1>La etiqueta de cierre es similar a la etiqueta de apertura, pero la palabra clave está precedida por una barra inclinada. Ejemplo:
</h1>La etiqueta de apertura puede contener información de servicio - atributos, la de cierre - no . La etiqueta de inicio es siempre la primera de un par. La etiqueta de cierre NO puede ir primero en el texto y luego la etiqueta de apertura. Esto HTML-documentno será válido.
Las etiquetas individuales no tienen una etiqueta de cierre. La lista de dichas etiquetas está definida por HTML-standard. Ejemplos de tales etiquetas:
<br>- salto de línea;<img>- imagen.
Por cierto, una etiqueta emparejada, si no contiene información dentro, se puede escribir en forma abreviada . Ejemplo:
<h1/>Esta no es una etiqueta única, sino una etiqueta de par vacía. Es como etiquetas cerradas y abiertas al mismo tiempo. Se diferencia de la etiqueta cerrada en que la barra se encuentra al final (antes del segundo corchete triangular).
2.3 Árbol de etiquetas
Y más información importante sobre las etiquetas emparejadas. Puede haber muchos de ellos en un documento y se pueden anidar. ¿Qué significa? Esto significa que cualquier texto dentro HTML-documentse puede enmarcar (envolver) con etiquetas, incluso si contiene otras etiquetas. Ejemplo:
<html>
plain text
<a href="http://codegym.cc/about">
Link to something interesting
</a>
some other text
</html>En términos generales, una secuencia de etiquetas puede ocurrir en el texto html:
<h1> <h2> </h2> </h1>Pero no puede ser:
<h1> <h2> </h1> </h2>Si la etiqueta de inicio <h2>está dentro de un <h1>par de etiquetas, entonces su etiqueta final correspondiente </h2>también debe estar dentro de un <h1>par de etiquetas.
Por lo tanto, todas las etiquetas de documentos forman una especie de árbol de etiquetas . Primero viene la etiqueta de nivel superior que envuelve todo el documento, generalmente llamada <html>, tiene pares de etiquetas secundarias, tienen las suyas propias, y así sucesivamente.
En realidad, el programa que procesa un documento con etiquetas lo ve exactamente así: como un árbol de etiquetas con algo de texto dentro.
2.4 Atributos
La información sobre etiquetas no estaría completa si no habláramos de atributos. Las etiquetas individuales y las etiquetas de inicio de las etiquetas emparejadas pueden tener . Estos atributos contienen información útil sobre el contenido de la etiqueta.
Una etiqueta puede contener varios atributos, y tienen la siguiente forma general:
<tag name1="value1" name2="value2">Cada atributo se especifica como un par de Namey meaning. Puede haber cualquier número de atributos.
«<»Pero un programador experimentado inmediatamente hará la pregunta: ¿qué hacer si necesita usar texto que contiene caracteres o «>»comillas como valor de atributo ?
| Nombre del símbolo | Símbolo | entrada HTML |
|---|---|---|
| comillas dobles | " | " |
| Y comercial | & | & |
| Menos que símbolo | < | < |
| más símbolo | > | > |
| Espacio | ||
| una frase | ' | ' |