Las etiquetas en HTML son como palabras clave. Cada etiqueta tiene su propia semántica (es decir, la etiqueta <p> representa un párrafo y la etiqueta <b> representa negrita). Dependiendo de la etiqueta, el navegador mostrará el contenido de la etiqueta de diferentes maneras.
En el desarrollo real, a veces también llamamos etiquetas HTML elementos HTML.
propiedad
↓
<div class=foo>Red en lenguaje C</div>
↑ ↑ ↑
etiqueta inicial contenido etiqueta final
Además del atributo de clase, la etiqueta de inicio también puede contener otra información de atributo, como identificación, título, etc., que explicaremos más adelante.
Nota: Aunque las etiquetas HTML no distinguen entre mayúsculas y minúsculas en su sintaxis, en aras de la estandarización y la profesionalidad, se recomienda encarecidamente utilizar minúsculas al definir etiquetas.
(1) Semántica de etiquetas
Aprender etiquetas es complicado, la atención se centra en recordar la semántica de cada etiqueta. Una comprensión simple se refiere al significado de la etiqueta, es decir, para qué se utiliza la etiqueta. Según la semántica de la etiqueta. Dar la etiqueta más razonable en el lugar correcto puede aclarar la estructura de la página.
(2) Etiqueta de título h1-h6
Para hacer que las páginas web sean más semánticas, solemos utilizar etiquetas de título en las páginas. HTML proporciona 6 niveles de títulos de páginas web, a saber, <h1> - <h6>
<h1>Soy una etiqueta de primer nivel</h1>
h es la abreviatura de la palabra head, que significa título principal.
Semántica de etiquetas: se utiliza como título y en orden de importancia descendente.
● Características:
1. El texto con el título aparecerá en negrita y el tamaño de fuente también aumentará en secuencia.
2. Un título ocupa su propia línea.
(3) Etiquetas de párrafo y etiquetas de salto de línea
Quiere que el texto se muestre en secciones en una página web. La etiqueta <p> se utiliza para definir estilos de párrafo.
<p>Soy una etiqueta de párrafo</p>
p significa párrafo, lo que significa párrafo; HTML se puede dividir en varios párrafos y las líneas se ajustarán automáticamente de acuerdo con el tamaño de la ventana del navegador, dejando espacios entre los párrafos.
En HIML, el texto de un párrafo se organiza de izquierda a derecha hasta llegar al extremo derecho de la ventana del navegador y luego se ajusta automáticamente. Si desea que una determinada sección de texto se vea obligada a ajustarse en una nueva línea, debe utilizar la etiqueta de salto de línea <br/>.
break fuerza una nueva línea con un espacio pequeño entre líneas de etiquetas individuales.
Casos noticiosos:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Noticias internacionales</title></head><body><h1>Noticias internacionales</h1><h4>Ucrania envió drones para atacar aeropuertos militares en las provincias rusas de Riazán y Saratov esa mañana</ h4><p> El 5 de diciembre, hora local, el Ministerio de Defensa ruso emitió un comunicado diciendo que Ucrania envió drones para atacar aeropuertos militares en las regiones rusas de Ryazan y Saratov esa mañana, pero fueron interceptados por el sistema de defensa aérea ruso. En el ataque murieron tres soldados rusos y otros cuatro resultaron heridos. </p><p>Además, el accidente de un dron ucraniano sobre un aeropuerto militar provocó daños en las carrocerías de dos aviones de combate rusos. Unas horas más tarde, Ucrania informó que Rusia había lanzado una nueva ronda de ataques con misiles. </p><h4>Es imposible que Rusia entregue el control de la central nuclear de Zaporozhye</h4><p>La portavoz del Ministerio de Asuntos Exteriores ruso, Zakharova, dijo a la agencia de noticias Sputnik que es imposible que Rusia entregue el control de Zaporozhye Central Nuclear Control de centrales termonucleares. </p><h4>Biden no considerará utilizar petróleo ruso para reponer reservas estratégicas de petróleo</h4><p>La Casa Blanca dijo que no le sorprendió la reacción de Rusia al precio máximo. Biden no considerará utilizar petróleo ruso para reponer la Reserva Estratégica de Petróleo. El enviado estadounidense de seguridad energética, Hochstein, dijo que Estados Unidos todavía tiene suficientes reservas estratégicas de petróleo (SPR) para hacer frente a emergencias. La administración Biden celebrará una reunión en línea con ejecutivos de la industria petrolera estadounidense el 8 de diciembre para discutir cómo apoyar la infraestructura energética de Ucrania. El secretario de Energía de Estados Unidos se reunirá el día 14 con numerosos ejecutivos de compañías petroleras. </p><p>Red de lenguaje C<br/>2022-12-6</p></body></html>
Se muestra de la siguiente manera:
(4) Etiquetas de formato de texto
En las páginas web, a veces es necesario establecer efectos de negrita, cursiva o subrayado para el texto. En este caso, es necesario utilizar etiquetas de formato de texto en HTML. Haz que el texto aparezca de una manera especial.
Semántica de etiquetas: resaltar la importancia es más importante que el texto normal.
<strong>Negrita</strong><b>Negrita</b><em>Cursiva</em><i>Cursiva</i><del>Tachado</del><s>Tachado</ s><ins >Subrayado</ins><u>Subrayado</u>
Se muestra a continuación:
(5) etiquetas div y span
<div> y <span> no tienen semántica. Son solo cuadros que se utilizan para contener contenido.
división dividir partición abarcar abarcar abarcar
● Características:
La etiqueta <div> se usa para el diseño, pero ahora solo se puede colocar un <div> en una fila. El cuadro grande ocupa una fila.
La etiqueta <span> se utiliza para el diseño. Puede haber varios <span> en una línea. Puede haber varios cuadros pequeños en una línea.
(6) Etiquetas y rutas de imagen
1. Etiquetas de imagen
En las etiquetas HTML, la etiqueta <img> se utiliza para definir imágenes en páginas HTML.
<img src=URLimagen />
Abreviatura de la palabra imagen. Imagen de significado.
src es un atributo obligatorio de la etiqueta <img>. Se utiliza para especificar la ruta y el nombre del archivo de imagen.
Los llamados atributos: una comprensión simple son las características de esta etiqueta de imagen.
<imgsrc=bg.pngalt=/>
Propiedades adicionales para etiquetas de imágenes
Cosas a tener en cuenta al usar etiquetas de imagen
(1) Las etiquetas de imagen pueden tener múltiples atributos, que deben escribirse después del nombre de la etiqueta.
(2) Los atributos no están en ningún orden particular. Los nombres de etiquetas y atributos, y los atributos están separados por espacios.
(3) Los atributos toman el formato de pares clave-valor, es decir, formato clave = "valor", atributo = valor de atributo"
2. Camino
(1) Carpeta de directorio y directorio raíz:
En el trabajo real, nuestros archivos no se pueden colocar al azar; de lo contrario, será difícil encontrarlos rápidamente, por lo que necesitamos una carpeta para administrarlos.
Carpeta de directorio: es una carpeta normal, que solo almacena los materiales relevantes que necesitamos para crear páginas, como archivos html, imágenes, etc.
Directorio raíz: el primer nivel de la carpeta del directorio abierto es el directorio raíz.
(2) VSCode abre la carpeta del directorio
Archivo: abra la carpeta Seleccionar la carpeta del directorio es muy conveniente para administrar archivos más adelante o arrástrelo directamente.
Habrá muchas imágenes en la página. Por lo general, crearemos una nueva carpeta para almacenar estos archivos de imagen (imágenes). Cuando busquemos imágenes, debemos usar el método de "ruta" para especificar la ubicación de los archivos de imagen.
Los caminos se pueden dividir en:
(1) Ruta relativa, una ruta de directorio establecida en función de la ubicación del archivo al que se hace referencia.
(2) La ruta absoluta se refiere a la posición absoluta en el directorio, que llega directamente a la ubicación de destino, generalmente la ruta que comienza desde la letra de la unidad.
(7) Etiquetas de hipervínculo
1. Formato de sintaxis del enlace
<ahref=objetivo de salto target=método emergente de la ventana de destino>texto o imagen</a>
Abreviatura de la palabra ancla: ancla
Los dos atributos funcionan de la siguiente manera
2. Clasificación de enlaces
(1) Enlaces externos, como <a href=http://www.baidu.com>baidu<a>.
(2) Los enlaces internos, los enlaces mutuos entre las páginas internas del sitio web, pueden vincular directamente los nombres de las páginas internas, como <a href=index.html>Página de inicio<a>.
(3) Enlace vacío, cuando el destino del enlace no está determinado, <a href=#>Página de inicio<a>.
(4) Enlace de descarga, si la dirección en href es un archivo o paquete comprimido, el archivo se descargará.
(5) Enlaces de elementos de la página web Se pueden agregar varios elementos de la página web en la página web, como imágenes de texto, tablas, audio, video, etc., mediante hipervínculos.