1. Introducción a HTML
1. ¿Qué es HTML?
HTML es un lenguaje utilizado para describir páginas web.
- HTML se refiere al lenguaje de marcado de hipertexto
- HTML no es un lenguaje de programación, sino un lenguaje de marcado, un lenguaje de marcado es un conjunto de etiquetas de marcado
- HTML usa etiquetas de marcado para describir páginas web
- Los documentos HTML contienen etiquetas HTML y su contenido de texto ** (las etiquetas HTML son análogas a las llaves en lenguaje C, y el contenido de texto es como el resultado de la escritura de código en lenguaje C) **
- Los documentos HTML también se denominan páginas web.
2. Etiquetas HTML
- Las etiquetas HTML son palabras clave entre paréntesis angulares, como <html>
- Las etiquetas HTML suelen aparecer en pares, como <b> y </b>
- La primera etiqueta del par de etiquetas es la etiqueta de inicio y la segunda etiqueta es la etiqueta de fin ** (sí, es similar a las llaves en lenguaje C) **
- Las etiquetas de inicio y finalización también se denominan etiquetas abiertas y etiquetas cerradas.
3. Elemento HTML
Las "etiquetas HTML" y los "elementos HTML" suelen describir el mismo significado.
Pero estrictamente hablando, un elemento HTML contiene una etiqueta de inicio y una etiqueta de finalización
4. Estructura de la página HTML
A continuación se muestra una estructura de página HTML visual
Solo el área <body> (parte blanca) se mostrará en el navegador
Ejemplos:
<html>
<head>
<title>大佬做的第一个网页</title>
</head>
<body>
<h1>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</html>
resultado de la operación:
5. Declaración <! DOCTYPE>
- Esta declaración ayuda al navegador a mostrar la página web correctamente.
- La declaración de tipo de documento no distingue entre mayúsculas y minúsculas
- Esta declaración se utiliza para declarar la versión de HTML, <! DOCTYPE HTML> se declara como un documento HTML5
6. codificación china
En la actualidad, en la mayoría de los navegadores, aparecerán caracteres confusos en chino cuando se imprime directamente en chino. En este momento, debemos declarar los caracteres como UTF-8 o GBK en el encabezado.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大佬做的第一个网页</title>
</head>
<body>
<h1>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</html>
7. Análisis de algunas de las etiquetas HTML que aparecen arriba
- El elemento <html> es el elemento raíz de la página HTML.
- El elemento <head> contiene los metadatos del documento. Por ejemplo, <meta charset = "utf-8"> define el formato de codificación de la página web como utf-8
- El elemento <title> describe el título del documento ** (es decir, "la primera página web del tipo grande" arriba) **
- El elemento <body> contiene el contenido de la página visible
- El elemento <h1> primero tiene un título ** (de manera similar, <h2>, <h3> ... <h6> representa el siguiente nivel de encabezado, similar al encabezado calificado en el lenguaje Markdown) **
- El elemento <p> define un párrafo
2. Conceptos básicos de HTML
1.título HTML
El título HTML se define mediante etiquetas <h1> - <h6>
2. Párrafo HTML
Los párrafos HTML están definidos por la etiqueta <p>
3. Enlace HTML
Los enlaces HTML están definidos por la etiqueta <a>
Ejemplos:
<a href="http://www.baidu.com">啥也不知道就问百度</a>
(Especifique la dirección del enlace en el atributo href y ajuste este enlace entre <a> y </a>, lo que equivale a agregar un hipervínculo a un párrafo de texto)
Tres elementos HTML
1. Elemento HTML
2. Sintaxis del elemento HTML
- Los elementos HTML comienzan con una etiqueta de apertura
- Los elementos HTML terminan con etiquetas de cierre
- El contenido del elemento es el contenido entre la etiqueta inicial y la etiqueta final.
- Algunos elementos HTML tienen contenido vacío
- El elemento vacío se cierra en la etiqueta de apertura (termina con el final de la etiqueta de apertura)
- La mayoría de los elementos HTML pueden tener atributos
3. Elementos HTML anidados
- La mayoría de los elementos HTML se pueden anidar (los elementos HTML pueden contener otros elementos HTML)
- Los documentos HTML se componen de elementos HTML anidados
4. Elementos HTML vacíos
- Los elementos HTML sin contenido se denominan elementos vacíos. El elemento vacío está cerrado en la etiqueta de apertura.
- <br> es un elemento vacío sin etiqueta de cierre (la etiqueta <br> define el salto de línea)
- Agregar una barra en la etiqueta de apertura, como </br>, es la forma correcta de cerrar elementos vacíos.
5. Sugerencias de HTML: use etiquetas en minúsculas
Las etiquetas HTML no distinguen entre mayúsculas y minúsculas:
Equivalente a
Cuatro. Atributos HTML
1. Atributos HTML [^ los atributos son información adicional proporcionada por elementos HTML]
- Los elementos HTML pueden establecer atributos
- Los atributos pueden agregar información adicional al elemento
- Los atributos se describen generalmente en la etiqueta de apertura.
- Los atributos siempre aparecen en forma de pares de nombre / valor, como: nombre = "valor"
2. Ejemplos de atributos
Los enlaces HTML se definen mediante etiquetas. La dirección del enlace se especifica en el atributo href:
3. Los atributos HTML suelen hacer referencia a valores de atributos.
- El valor del atributo siempre debe estar entre comillas
- Las comillas dobles son las más utilizadas, pero las comillas simples no son un problema.
- En algunos casos individuales, como el valor del atributo en sí tiene comillas dobles, se deben usar comillas simples, como: name = 'John “ShotGun” Nelson'
Cinco. HTML parte de las etiquetas básicas
| etiqueta | descripción |
|---|---|
| <html> | Definir documento HTML |
| <cuerpo> | Definir el cuerpo del documento |
| <h1> - | Definir título HTML |
| <hr> | Definir la línea horizontal |
| <! -… -> | Comentario de definición |
| <p> | Definir un párrafo |
| <br> | Insertar un solo salto de línea (salto de línea) |
Explique las dos etiquetas no mencionadas anteriormente.
1. <hr> define la línea horizontal, los ejemplos son los siguientes
2. <! - ->, comentario (no aparecerá en el navegador)
3. <br>, inserte una sola línea dividida (salto de línea)
Tenga en cuenta que el navegador ignora la composición tipográfica en el código fuente (se omiten los espacios adicionales y los saltos de línea). Por
ejemplo
, el resultado es
6. Formato de texto
1. Etiquetas de formato HTML
HTML usa etiquetas <b> y <i> para dar formato al texto de salida, como negrita o cursiva . Estas etiquetas HTML se denominan etiquetas de formato.
