Galería de mapas mentales Conceptos básicos de programación 4 conceptos básicos de HTML5CSS3
Este es un mapa mental sobre Conceptos básicos de programación 4: Conceptos básicos de HTML5CSS3. Si cambiamos el modelo de caja a tamaño de caja: borde-cuadro, entonces el relleno y el borde no sostendrán el cuadro (siempre que el relleno y el borde no excedan). el ancho) ancho).
Editado a las 2022-12-01 20:08:11,Conceptos básicos de HTML5 CSS3
1: HTML5
HTML agrega etiquetas semánticas
<encabezado> etiqueta de encabezado
<nav>Etiqueta de navegación
<artículo>Etiqueta de contenido
<sección> define un área determinada del documento
<aside>Etiqueta de la barra lateral
<pie de página>Etiqueta de cola
Las etiquetas son semánticas y beneficiosas para los motores de búsqueda de los navegadores.
etiqueta de medios
etiqueta de vídeo vídeo
<controles de vídeo="controles" ancho="300"> <fuente src="move.ogg" tipo="video/ogg" > <fuente src="move.mp4" tipo="video/mp4" > Su navegador actualmente no admite la etiqueta <video> para reproducir videos </vídeo>
reproducción automática reproducción automática
- Nota: En Google Chrome, la reproducción automática está deshabilitada de forma predeterminada. Si desea el efecto de reproducción automática, debe configurar el atributo silenciado.
ancho ancho
altura altura
reproducción en bucle
fuente de reproducción src
reproducción silenciada
etiqueta de audio - audio
< controles de audio="controles" > <fuente src="happy.mp3" type="audio/mpeg" > <fuente src="happy.ogg" tipo="audio/ogg" > Actualmente su navegador no soporta la etiqueta <audio>. </audio>
reproducción automática Si este atributo está presente, el audio se reproducirá tan pronto como esté listo.
controles Si aparece este atributo, muestra controles al usuario, como un botón de reproducción.
loop Si este atributo está presente, la reproducción se reanuda cada vez que finaliza el audio.
src La URL del audio a reproducir.
Nuevo tipo de entrada de formulario
Agregar nuevas propiedades de formulario
El atributo requerido del formulario indica que su contenido no puede estar vacío y es obligatorio.
texto de solicitud de marcador de posición La información de solicitud del formulario, si hay un valor predeterminado, no se mostrará.
atributo de enfoque automático de enfoque automático, la página se enfocará automáticamente en el formulario especificado después de la carga.
autocompletar desactivado/activado Cuando el usuario comienza a escribir en un campo, el navegador debe mostrar opciones para completar el campo en función de los valores escritos previamente.
Está activado de forma predeterminada, como autocompletar="on", y desactivado autocompletar="off"
Debe colocarse en el formulario, agregar el atributo de nombre al mismo tiempo y enviarse correctamente.
múltiple le permite seleccionar múltiples archivos para enviar
2: CSS3
selector de atributos
E[ata] selecciona el elemento E con atributo att
E[att="val"] selecciona elementos E con un atributo att cuyo valor es igual a val
/* Seleccione solo la entrada del tipo =cuadro de texto */ entrada[tipo=texto] { color rosa; }
E[att^="val"] coincide con elementos E que tienen un atributo att y cuyo valor comienza con val
/* Seleccione los elementos que primero son div y luego tienen atributo de clase y el valor del atributo debe comenzar con icono */ div[clase^=icono] { color rojo; }
E[att$="val"] coincide con elementos E con un atributo att cuyo valor termina en val
/*Seleccionamos los elementos que son sección primero y luego tienen atributos de clase y los valores de los atributos deben terminar con datos */ sección[clase$=datos] { color azul; }
E[att*="val"] coincide con elementos E con un atributo att y un valor que contiene val
Selector de pseudoclase estructural
E:primer hijo
Coincide con el primer elemento hijo E del elemento padre
Listar elemento uno Enumere el elemento dos Enumere el elemento tres Enumere el punto cuatro
E: enésimo hijo (n)
ul li:nth-child(2){} coincide con el segundo elemento hijo del elemento padre
ul li:nth-child(odd){} coincide con el elemento secundario impar del elemento principal
ul li:nth-child(-n 3){} coincide con los primeros 3 elementos secundarios del elemento principal
Selector de pseudoelementos
::antes Insertar contenido antes dentro del elemento
::after inserta contenido después dentro del elemento
<estilo> div { ancho: 200px; altura: 200 píxeles; color de fondo: rosa; } /* div::antes de que el peso sea 2 */ div::antes { /* Este contenido debe estar escrito */ contenido: 'yo'; } div::después { contenido: 'Peppa Pig'; } </estilo> <cuerpo> <div> Sí </div> </cuerpo>
modelo de caja
tamaño del cuadro: el tamaño del cuadro del cuadro de contenido es el ancho del borde de relleno (anteriormente predeterminado)
tamaño de la caja: el tamaño de la caja del borde es el ancho
Si cambiamos el modelo de caja a tamaño de caja: caja de borde, entonces el relleno y el borde no expandirán la caja (siempre que el relleno y el borde no excedan el ancho)
margen: 0; relleno: 0 /* Inicializa la configuración de estilo */ tamaño de caja: cuadro de borde
CSS3 agrega otras características
filtro de filtro CSS3
La propiedad CSS de filtro aplica efectos gráficos como desenfoque o cambio de color a los elementos.
filtro: función(); -> Por ejemplo: filtro: desenfoque (5px); - procesamiento de desenfoque. Cuanto mayor es el valor, más borroso es.
función de cálculo
calc() Esta función CSS le permite realizar algunos cálculos al declarar valores de propiedades CSS.
transición CSS3
Animación de transición: Es una transición gradual de un estado a otro.
transición: la propiedad a realizar la transición lleva tiempo y cuándo comienza la curva de movimiento;
1: Atributos: los atributos CSS que desea cambiar, como ancho, alto, color de fondo y márgenes interior y exterior. Si desea que todos los atributos cambien y realicen la transición, simplemente escriba todos
2: Tiempo invertido: la unidad es segundos (la unidad debe escribirse), como 0,5 s
3: Curva de movimiento: el valor predeterminado es facilidad (se puede omitir)
4: Cuándo comenzar: la unidad es segundos (la unidad debe escribirse). Puede configurar el tiempo de activación del retardo. El valor predeterminado es 0 s (se puede omitir).