Galería de mapas mentales Puntos de conocimiento de HTML5 y CSS3
Este es un mapa mental sobre los puntos de conocimiento de HTML5 CSS3, incluidos los elementos y atributos de la página HTML, introducción a CSS, modelo de cuadro CSS, flotación y posicionamiento, aplicación de formulario, etc.
Editado a las 2021-07-06 01:12:01,CSS3 HTML
Primera introducción a HTML
etiqueta de control de texto
etiqueta de título
<hn align="alignment">Texto del título</hn>
marca de párrafo
<p align="alignment">Texto del título</p>
marca de línea horizontal
<hr atributo="valor del atributo"/>
marca de nueva línea
<br/>
Etiquetas de formato de texto
El texto <b></b> y <strong></strong> se muestra en negrita (b define el texto en negrita, fuerte define el texto enfatizado)
etiqueta de imagen
<img src="URL de la imagen"/>
texto de reemplazo alternativo cuando la imagen no se puede mostrar
etiqueta de hipervínculo
<a href="Saltar objetivo" target="Cómo aparece la ventana de destino">Texto o imagen</a> target _self es el valor predeterminado, lo que significa abrir en la ventana original, _blank significa abrir en una ventana nueva
Enlace ancla <a href="#id name">Texto del enlace</a>
Elementos y atributos de la página HTML
Elementos de lista
<ul> Lista desordenada <li>Elemento de lista 1</li> (<ul></ul> solo se puede anidar <li> </li>)
<ol> Lista ordenada <li>Elemento de lista 1</li> Cambiar el valor inicial de la numeración de la lista <ol start="2">
El elemento dl se utiliza a menudo para explicar y describir términos o sustantivos. <dl> <dt>Sustantivo 1</dt> <dd>Explicación del sustantivo 1<dd>
Elementos estructurales
elemento de encabezado
elemento de encabezado (un elemento estructural con una función de guía y navegación que puede contener todo el contenido que normalmente se coloca en el encabezado de la página) Formato gramatical básico; <encabezado> <h1>Tema web</h1> …. </encabezado>
elemento de navegación
elemento de navegación (los enlaces con propiedades de navegación se pueden resumir en un área) Formato de sintaxis básica: <nav> <ul> <li><a href=”#”>Página de inicio</li> </ul> </nav>
Elementos interactivos de la página.
elemento de detalles y elemento de resumen
elemento de detalles y elemento de resumen resumen define un título para los detalles y luego aparece el contenido oculto cuando se hace clic <detalles> <summary>Mostrar lista</summary> <ul> <li>Lista 1</li> <li>Lista 2</li> </ul> </detalles>
Comenzando con CSS
hoja de estilo CSS
en línea
<tagname style="Atributo1:Valor de atributo 1";"Atributo2:Valor de atributo 2";>Contenido</tagname>
Incorporado
<cabeza> <tipo de estilo="texto/css"> Selector {Atributo 1: Valor de atributo 1; Atributo 2: Valor de atributo 2} </estilo> </cabeza>
tipo=texto/css
Enlace
<link href="ruta al archivo css" type="text/css" rel="hoja de estilo"> Los tres deben estar presentes.
Selectores básicos CSS
selector de etiquetas
Nombre de etiqueta {Atributo 1: Valor de atributo 1; Atributo 2: Valor de atributo 2}
selector de clase
.Nombre de clase {Atributo 1: Valor de atributo 1; Atributo 2: Valor de atributo 2}
selector de identificación
#id nombre {atributo 1: valor de atributo 1; atributo 2: valor de atributo 2}
selector comodín
*{Atributo 1: Valor de atributo 1; Atributo 2: Valor de atributo 2}
Puede coincidir con todos los elementos de la página.
selector sindical
Los selectores están conectados por comas y cualquier selector se puede utilizar como parte del selector de unión.
Propiedades de estilo de texto
tamaño de fuente: tamaño de fuente
Los píxeles de tamaño de fuente em px son los más utilizados
familia de fuentes: fuente
Los píxeles de tamaño de fuente em px son los más utilizados
peso de fuente: peso de fuente
normal Negrita predeterminada Define caracteres en negrita más negrita Define caracteres en negrita más claro define caracteres más claros (100-900) 400 es igual a normal
estilo de fuente: estilo de fuente
normal valor predeterminado cursiva cursiva oblicua inclinada
Propiedades de apariencia del texto
color: color del texto
interlineado de altura de línea
Generalmente existen tres tipos de unidades de valor de atributo: píxel px valor relativo em porcentaje %
decoración-de-texto decoración-de-texto
ninguno Sin decoración subrayado subrayado sobrerayado sobrerayado renglón tachado
alineación de texto: modo de alineación horizontal
izquierda alineado a la izquierda derecha alineado a la derecha centro centrado
sangría fiscal: sangría de primera línea
Solicitud de formulario
Crear formulario
<de acción="dirección URL" método="método de envío (publicación)" nombre="nombre del formulario"> Varios controles de formulario </de>
elementos de entrada y atributos
Cuadro de entrada de texto de una sola línea ,<tipo de entrada="texto">
Cuadro de entrada de contraseña <tipo de entrada="contraseña">
un solo botón <tipo de entrada="radio">
caja <tipo de entrada="casilla de verificación">
botón de enviar <tipo de entrada="enviar">
Botón de reinicio <tipo de entrada="restablecer">
seleccionar elemento
<seleccionar> <opción>Opciones</opción> <opción>Opciones</opción> <seleccionar>
Flotación y posicionamiento
flotación de elementos
El atributo flotante del elemento flotante. elemento izquierdo flota hacia la izquierda elemento derecho flota hacia la derecha ninguno elemento no flota
Posicionamiento de elementos
Posición: valor del atributo estático posicionamiento estático relativo posicionamiento relativo absoluto posicionamiento absoluto fijo posicionamiento fijo
tipo de elemento
La etiqueta <span> solo puede contener texto y varias etiquetas en línea
modelo de caja CSS
<div>modelo de caja
<div> puede reemplazar elementos a nivel de bloque
El espacio entre <div> y </div> es equivalente a un cuadro. Puede establecer los márgenes, el relleno, el ancho y el alto. Al mismo tiempo, puede acomodar varios elementos de la red como párrafos, títulos, tablas, imágenes. etc.
Propiedades relacionadas con el modelo de caja
Propiedades de borde
estilo de borde
border-style: /Configuración integral del estilo de borde/
ancho del borde
ancho del borde Un valor para cuatro lados.
color del borde
color del borde
Configuración de bordes completa
borde: ancho estilo color
Propiedades de margen
automático
relleno relleno
Acolchado superior acolchado Acolchado inferior acolchado Relleno-izquierda relleno izquierdo Relleno-derecho relleno derecho
margen margen
Acolchado superior con margen superior Acolchado inferior con margen inferior Margen izquierdo relleno izquierdo Margen derecho relleno derecho Margen arriba derecha abajo izquierda
márgenes interiores y exteriores claros
*{ relleno: 0; margen: 0; }
propiedades de fondo
Al agregar imágenes al cuadro Si tanto el ancho como el alto son 100%, la cobertura se puede ajustar automáticamente.
color de fondo Establecer color de fondo
imagen de fondo Establecer imagen de fondo
repetición de fondo Establecer mosaicos de imagen de fondo
mosaicos de repetición de fondo horizontal y verticalmente -no-repetir no hacer mosaicos Repetir x mosaicos horizontalmente Repetir y para colocar en mosaico verticalmente
posición de fondo Valores de píxeles para controlar la posición de la imagen de fondo
tamaño de fondo Establecer tamaño de imagen
Tamaño de fondo: atributo 1 atributo 2; La cubierta es lo suficientemente grande. El tamaño máximo del contenido se ajusta completamente al área de contenido.
Selectores CSS3
:antes del selector
Para insertar contenido antes del contenido del elemento seleccionado, el contenido debe especificarse con el atributo de contenido. <elemento>: antes { Contenido: texto; }
Pseudoclase de enlace
a: enlace {regla de estilo css;} El estado del hipervínculo no visitado
a: visitado {reglas de estilo css;} El estado del hipervínculo después de la visita
a: hover {regla de estilo css;} El estado del hipervínculo cuando el mouse pasa o se desplaza
a: activo {regla de estilo css;} El estado del hipervínculo cuando el mouse no se mueve
izquierda izquierda bien bien centro centro
ancho (ancho) altura título (contenido que se muestra al pasar el mouse)