1. Estructura básica de la etiqueta HTML hr
<html>
<cabeza>
<title>Mi primera página</title>
</cabeza>
<cuerpo>
¡Hola Mundo!
</cuerpo>
</html>
Nota:
<html></html> es la etiqueta más grande de la página, llamada etiqueta raíz
<head></head> El encabezado del documento, tenga en cuenta que la etiqueta que debemos establecer en la etiqueta del encabezado es el título
<title></title>El título del documento, para que la página tenga su propio título de página web
<body></body>El cuerpo principal del documento, el elemento contiene todo el contenido del documento, y el contenido de la página se coloca básicamente en el cuerpo
2. El significado de las etiquetas relevantes en el archivo HTML
1. La declaración de tipo de documento <!DOCTYPE> se usa para decirle al navegador qué versión de HTML usar para mostrar la página web
Nota: a. La declaración <!DOCTYPE> está al principio del documento, antes de la etiqueta <html>
b. <!DOCTYPE> no es una etiqueta HTML, es la etiqueta de declaración de tipo de documento
2.lang tipo de idioma, utilizado para mostrar el idioma del documento actual
a.en se define como inglés
b.zh-CN define el idioma como chino
3. Conjunto de caracteres (Conjunto de caracteres), para que la computadora pueda reconocer y almacenar varios caracteres
<juego de caracteres meta="UTF-8">
UTF-8: código universal, básicamente contiene los caracteres que todos los países necesitan usar
Nota: La sintaxis anterior es el código que debe escribirse; de lo contrario, puede causar caracteres ilegibles.
3. Semántica de etiquetas
Se refiere al significado de la etiqueta, es decir, para qué sirve la etiqueta.
De acuerdo con la semántica de la etiqueta, dar la etiqueta más razonable en el lugar apropiado puede hacer que la estructura de la página sea más clara.
4. Etiquetas de uso común
1. Etiquetas de encabezado <h1> - <h6> (importante)
h es la abreviatura de cabeza, dividida en 6 niveles
Semántica de la etiqueta: se utiliza como etiqueta y en orden descendente de importancia
Características: El texto con títulos será en negrita y más grande; cada título ocupa una línea separada
2. Etiquetas de párrafo y salto de línea (importante)
La etiqueta <p> se usa para definir párrafos, que pueden dividir toda la red en varios párrafos
<p>Soy una etiqueta de párrafo</p>
Características: el texto de un párrafo se ajustará automáticamente según el tamaño de la ventana del navegador; habrá espacios entre párrafos
<br /> Etiqueta de nueva línea, forzar una nueva línea
Características: <br /> es una sola etiqueta;
3. Etiquetas de formato de texto
Texto establecido en negrita, cursiva y otros efectos, para que el texto se muestre de una manera especial
Negrita: <strong></strong> o <b></b>
Inclinación: <em></em> o <i></i>
Tachado: <del></del> o <s></s>
Subrayado: <ins></ins> o <u></u>
4. Etiquetas <div> y <span>
Estas dos etiquetas no tienen semántica, son solo un cuadro de contenido.
Características: la etiqueta <div> se usa para el diseño, pero ahora solo se puede colocar un <div> en una fila
La etiqueta <span> se usa para el diseño y puede haber varios <span> en una línea
5. Etiquetas de imagen y rutas (énfasis)
a. Etiqueta de imagen: en la etiqueta HTML, la etiqueta <img> se usa para definir la imagen en la página HTML
<img src="URL de la imagen" />
src es un atributo obligatorio de la etiqueta <img>, que se utiliza para especificar la ruta y el nombre del archivo de imagen
alt es el texto de reemplazo, reemplácelo con texto cuando la imagen no se pueda mostrar
<img src="URL de imagen" alt="Ayanami"/>
El título es el texto del mensaje, cuando el mouse se coloca sobre la imagen, el texto que se muestra
ancho establece el ancho de la imagen
altura establece la altura de la imagen
borde establece el grosor del borde de la imagen
6. Etiquetas de imagen
a. Las etiquetas de imagen pueden tener varios atributos, pero deben escribirse después de la etiqueta.
b. Los atributos no están en ningún orden en particular, el nombre de la etiqueta y los atributos, y los atributos y los atributos están todos separados por espacios.
c. El atributo toma el formato de un par clave-valor, es decir, el formato de clave = "valor", atributo = "valor de atributo"
7. Camino relativo
Las rutas en el mismo nivel se pueden referenciar directamente
Obtener la ruta del siguiente nivel Preguntar precio disponible :/
<img src = "imágenes/img.png" />
Para obtener el archivo principal disponible: ../
<img origen = "../img.png " />
8. Etiqueta de hipervínculo (énfasis)
La etiqueta <a> se usa para definir un hipervínculo, que se usa para conectarse de una página a otra
a. Formato de sintaxis:
<a herf = "Objetivo de salto" target = "Método emergente de la ventana de destino">texto o imagen</a>
href: la dirección URL utilizada para especificar el destino del enlace (atributo obligatorio) cuando la etiqueta aplica el atributo href, tiene la función de un hipervínculo
destino: se utiliza para especificar el método de apertura de la página del enlace, donde _self es el valor predeterminado (abrir en la ventana actual) y _blank es el método de apertura en una nueva ventana
El href en el enlace externo debe escribir http
<a href = "http://www.baidu.com"> Baidu</a>
Enlace interno, solo enlace al nombre de la página interna directamente
<a href = "index.html">Página de inicio</a>
Conexión vacía: si no se determina el destino del enlace en ese momento
<a href = "#">Página de inicio</a>
Enlace de descarga: si la dirección en el href es un archivo o paquete comprimido, el archivo se descargará
Hipervínculos a elementos de la página web: se pueden agregar hipervínculos a texto, imágenes, tablas, audio, video, etc.
Enlace de anclaje: haga clic en el enlace para navegar rápidamente a una determinada posición en la página
En el texto del enlace href, establezca el valor del atributo en forma de #name
<a href = "#two">Segunda temporada</a>
Encuentre la etiqueta de ubicación de destino, agregue un atributo de identificación = el nombre justo ahora
<h3 id = "two">Introducción a la segunda temporada</h3>
9. Etiquetas de comentarios y caracteres especiales
Tecla de acceso directo: ctrl + / para comentar rápidamente
Los caracteres especiales significan:
Carácter de espacio:
Signo menor que: <
Signo mayor que: >
10. Uso básico de etiquetas de formulario
A. Gramática básica
<tabla>
<tr>
<td> Texto dentro de la celda</td>
...
</tr>
...
</tabla>
Nota: <tabla> se usa para definir la etiqueta de la tabla
La etiqueta <tr> se usa para definir las filas en la tabla y debe anidarse en la etiqueta <table>
La etiqueta <td> se utiliza para definir las celdas de la tabla y debe anidarse en la etiqueta <tr>
b. La celda del encabezado <th> generalmente se encuentra en la primera fila o columna de la tabla, y el contenido del texto en la celda del encabezado está en negrita y centrado.
c. Atributos de la tabla (no se usan comúnmente, CSS se usará más adelante)
alinear: valor del atributo: izquierda, centro, derecha. Especifica la alineación de la tabla en relación con los elementos circundantes.
borde, 1 o "": Especifica si la unidad de tabla tiene un borde, el valor predeterminado es "", lo que significa que no tiene borde
cellpadding: valor de píxel, especifica el espacio entre el borde de la celda y su contenido, el valor predeterminado es 1
ancho: valor de píxel o porcentaje, el ancho de la tabla
espacio entre celdas: valor de píxel, especifica el espacio entre celdas, el valor predeterminado es 2
D. Etiqueta de estructura de formulario
La etiqueta <thead> representa el área de encabezado de la tabla, y la etiqueta <tbody> representa el área del cuerpo principal de la tabla, que puede distinguir mejor la estructura de la tabla
E. Combinar celdas
Fusionar entre filas: rowspan = "número de celdas fusionadas"
Combinar entre columnas: colspan = "el número de celdas combinadas"
Celda de destino (escriba el código de combinación):
Fila cruzada: la celda superior es la celda de destino, escriba el código de combinación
Columna cruzada: la celda más a la izquierda es la celda de destino, escriba el código de combinación
Fusionar trilogía celular:
a. Primero determine si fusionar filas o columnas
B. Encuentre primero la celda de destino y escriba el método de combinación = el número de celdas combinadas. Por ejemplo: <td colspan = "2"></td>
c. Eliminar celdas redundantes
11. Etiqueta de lista
a. Lista desordenada (importante)
La etiqueta <ul> representa una lista desordenada de elementos en una página HTML, y los elementos de la lista generalmente se presentan con viñetas, mientras que los elementos de la lista se definen mediante la etiqueta <li>
El formato de sintaxis básica de una lista desordenada:
<ul>
<li>Elemento 1 de la lista</li>
<li>Artículo 2 de la lista</li>
<li>Artículo 3 de la lista</li>
......
</ul>
Nota: No hay nivel de orden en cada elemento de la lista desordenada, son paralelos;
<ul></ul> solo puede anidar <li></li>, no puede ingresar directamente otras etiquetas o texto en la etiqueta <ul>;
Entre <li> y </li> es equivalente a un contenedor, que puede albergar todos los elementos;
La lista desordenada tendrá su propio estilo, pero en el uso real, usaremos CSS para configurarlo;
b. Lista ordenada (comprensión)
La etiqueta <ol> se usa para definir una lista ordenada, la etiqueta de lista se muestra con números y usa <li>
C. Lista personalizada (énfasis)
La etiqueta <dl> se usa para definir una lista de descripción, que se usará junto con <dt> (que define el elemento/nombre) y <dd> (que describe cada elemento/nombre)
Sintaxis básica:
<dl>
<dt>sustantivo1</dt>
<dd> sustantivo 1 explicación 1</dd>
<dd> Sustantivo 1 Explicación 2</dd>
</dl>
Nota: <dl> solo puede contener <dt> y <dd>;
No hay límite para el número de <dt> y <dd>, a menudo un <dt> corresponde a múltiples <dd>
12. Etiqueta de formulario
En HTML, un formulario completo generalmente consta de tres partes: campos de formulario, controles de formulario (elementos de formulario) e información de solicitud
a. Campos de formulario, un área que contiene elementos de formulario, las etiquetas <form> se utilizan para definir campos de formulario para recopilar y transmitir información del usuario
<form> enviará la información del elemento de formulario dentro de su alcance al servidor
<acción de formulario = "dirección de URL" método = "método de envío" nombre = "nombre de campo de formulario">
Varios controles de elementos de forma
</formulario>
Atributos comunes:
acción: dirección URL
método: get/post, utilizado para establecer el método de envío de los datos del formulario
nombre: se utiliza para especificar el nombre del formulario para distinguir varios campos de formulario en la misma página
B. Controles de formulario (elementos de formulario)
El elemento de formulario <input> contiene un atributo de tipo. De acuerdo con los diferentes valores de atributo de tipo, el campo de entrada tiene varias formas (puede ser un campo de texto, una casilla de verificación, un control de texto enmascarado, un botón de radio, un botón, etc. )
Formato de gramática:
<tipo de entrada = "valor de atributo" />
El valor de atributo del atributo de tipo y su descripción:
botón: define un botón en el que se puede hacer clic (en la mayoría de los casos, el script se inicia a través de JavaScript)
casilla de verificación: definir casillas de verificación (opciones múltiples)
archivo: define los campos de entrada y un botón "Examinar" para cargar archivos
oculto: define un campo de entrada oculto
imagen: define el botón de envío como una imagen
contraseña: define el campo de contraseña, los caracteres en este campo están enmascarados
radio: define el botón de radio
reinicio: defina el botón de reinicio, el botón de reinicio borrará todos los datos en el formulario
enviar: defina el botón enviar, que enviará los datos del formulario al servidor
texto: define un campo de entrada de una sola línea en el que el usuario puede ingresar texto, con un ancho predeterminado de 20 caracteres
Además del atributo de tipo, otros atributos de uso común:
nombre: el valor del atributo está definido por el usuario y define el nombre del elemento de entrada
valor: El valor del atributo lo define el usuario, especificando el valor del elemento de entrada
marcado: especifica que el elemento de entrada debe seleccionarse cuando se carga por primera vez (marcado de forma predeterminada cada vez que se abre una página web)
longitud máxima: especifica la longitud máxima de caracteres en el campo de entrada
Nota: el nombre y el valor son los valores de los atributos de cada elemento del formulario, que son utilizados principalmente por el personal de fondo;
nombre El nombre del elemento de formulario, que requiere que el botón de radio y la casilla de verificación tengan el mismo valor de nombre
c. Etiqueta <etiqueta>: utilizada para vincular un elemento de formulario, cuando se hace clic en el texto de la etiqueta <etiqueta>, el navegador cambiará automáticamente el foco (cursor) o seleccionará el elemento de formulario correspondiente para aumentar la experiencia del usuario
Gramática:
<label for = "sex">Masculino</label>
<tipo de entrada = "radio" nombre = "sexo" id = "sexo" />
Núcleo: el atributo for de la etiqueta <label> debe ser el mismo que el atributo id del elemento relacionado
d.<seleccionar> elemento de formulario desplegable
gramática:
<seleccionar>
<opción>Opción 1</opción>
<opción>Opción 2</opción>
<opción>Opción 3</opción>
...
</seleccionar>
Nota: cuando se define seleccione = "seleccionado" en <opción>, el elemento actual es la opción predeterminada
E. <área de texto> etiqueta de campo de texto:
Cuando el usuario ingresa una gran cantidad de contenido, esta etiqueta se puede usar para definir un control de entrada de texto de varias líneas
Nota: cols = "Número de caracteres en cada línea", filas = "Número de filas mostradas". Pero no se utilizará en el desarrollo real.
Ambos usan CSS para cambiar el tamaño.