[Conceptos básicos de front-end] Introducción a HTML5 + CSS3

Descripción general de HTML5

La quinta revisión principal del Lenguaje de marcado de hipertexto (HTML), el lenguaje central de la World Wide Web, una aplicación del Lenguaje de marcado generalizado estándar (este es un estándar recomendado, original en idioma extranjero: Recomendación W3C)

HTML5 es la última versión revisada de HTML, que fue completada en octubre de 2014 por el World Wide Web Consortium (W3C).
HTML5 está diseñado para admitir multimedia en dispositivos móviles.
HTML5 es fácil de aprender.

Desde 2010, HTML5 y CSS3 han sido los dos temas de mayor preocupación en la tecnología de Internet. En 2010, cuando los ingenieros de Microsoft presentaron ie9 en la conferencia MIX10, dividieron el desarrollo de Internet en tres etapas desde la perspectiva de la tecnología front-end:

La primera etapa es una etapa de red basada en web 1.0, y las principales tecnologías front-end son HTML y CSS.
La segunda etapa es la etapa de aplicación ajax de la web 2.0, y la tecnología popular es javascript/DOM/solicitud de datos asincrónicos.
La tercera etapa es la etapa html5 + css3 Las dos se complementan y llevan a Internet a una nueva era.

Consejos:
HTML5 es el resultado de la cooperación entre W3C y WHATWG, WHATWG se refiere al grupo de trabajo de tecnología de aplicación de hipertexto web [tek'nɒlədʒɪ]. WHATWG trabaja en formularios y aplicaciones web, mientras que W3C se enfoca en XHTML2.0. En 2006, las dos partes decidieron colaborar para crear una nueva versión de HTML. Está basado en HTML4 y ha realizado muchas modificaciones a HTML4. HTML5 es todavía un trabajo en progreso. Sin embargo, la mayoría de los navegadores modernos ya tienen compatibilidad con HTML5.

Plataforma de gestión digital
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue sistema de permisos
dirección de blog personal del caso

Descripción general de las nuevas características de HTML5

Se han agregado algunas características nuevas e interesantes a HTML5:

elemento de lienzo para dibujar
elementos de video y audio para la reproducción de medios
Mejor soporte para el almacenamiento local fuera de línea
Se han agregado algunas etiquetas semánticas, como artículo (artículo, como un blog), pie de página, encabezado, navegación, sección (división de región)
Nuevos controles de formulario, como fecha, hora, correo electrónico, URL, búsqueda, etc.
Nuevos atributos de formulario, como marcador de posición requerido, etc.
Atributo de valor booleano agregado (abreviatura), como: se puede omitir el valor de atributo múltiple de enfoque automático invertido

1.1 Nuevas características de HTML

HTML5 es la última evolución del estándar HTML. Este término representa dos conceptos diferentes:

Es una nueva versión del lenguaje HTML con nuevos elementos, atributos y comportamientos.
También incluye una serie de técnicas que se pueden utilizar para hacer que los sitios web y las aplicaciones sean más diversos y potentes.
- Semántica: Te permite describir de forma más adecuada cuál es tu contenido.
- Conectividad: la capacidad de comunicarse entre usted y el servidor a través de nuevos métodos tecnológicos innovadores.
- Sin conexión y almacenamiento: permite que las páginas web almacenen datos localmente en el cliente y se ejecuten sin conexión de manera más eficiente.
- Multimedia: Hacer ciudadanos de primera clase de video y audio en toda la Web.
- Pintura y efectos 2D/3D: proporciona una gama más diferenciada de opciones de renderizado.
- Rendimiento e integración: ofrece optimizaciones de rendimiento muy significativas y un uso más eficiente del hardware de la computadora.
- Acceso a dispositivos Acceso a dispositivos: capaz de manejar varios dispositivos de entrada y salida.
- Estilo: ¡Deje que los autores creen temas más complejos!

Los cambios en HTML5 cubren algunas características nuevas de CSS3 y JS, que se conocen colectivamente como tecnología HTML5.
Lo que aprendimos antes es HTML4.01 (XHTML1.0). El 29 de octubre de 2014, el World Wide Web Consortium anunció entre lágrimas que, después de casi ocho años de arduo trabajo, la especificación del estándar HTML5 finalmente se finalizó y se hizo pública.

Reglas gramaticales de HTML5 (más fáciles de usar)

DOCTYPE y codificación de caracteres
Tanto mayúsculas como minúsculas
booleano comprobado invertido
omitir comillas alinear = centro
Etiquetas que se pueden omitir
- Etiquetas que no permiten escribir terminadores (es decir, etiquetas individuales):
  hr, img, input, link, meta, area, basebr col command incrustar kegen param source track wbr
- Las etiquetas con terminadores se pueden omitir:
  li dt dd p rt optgroup option colgroup thead tbody tr td th
- Etiquetas que se pueden omitir por completo:
  html head body colgroup tbody

HTML5 <!DOCTYPE> y su estructura básica

<!DOCTYPE html>
	<html lang="zh-CH">
	<html>
		<head>
			<meta charset="utf-8">
			<title>文档标题</title>
		</head>
			 
		<body>
			文档内容......
		</body>
</html>

Sugerencias:
1. La declaración <!doctype> debe estar en la primera línea del documento HTML5 y es muy fácil de usar:
2. Para las páginas web chinas, debe usar la codificación de la declaración; de lo contrario, habrá caracteres distorsionados. .
3. Especifique el idioma del documento

Semántica estructurada añadida

La semántica son etiquetas significativas (etiquetas estructurales (elementos de bloque) - pueden entenderse como divisiones significativas): principalmente responsables de la definición de la estructura del contexto web, asegurando la integridad del documento html, definiendo el encabezado de una página o un área, y definición de enlaces
<header>de navegación
<nav>Sección
<section>define la sección (sección, sección) en el documento
<footer>define la parte inferior de una página o un área
<article> define el área de contenido independiente de la página

Posibles ejemplos de artículos: publicación en foro, artículo de periódico, entrada de blog, comentario de usuario

etiquetas semánticas no estructuradas

Principalmente completar la división de las áreas de la página web para asegurar una separación efectiva del contenido
<aside>Definir el contenido de la barra lateral de la página
<hgroup>Se utiliza para combinar los títulos de las páginas web o secciones (sección)
<figure>Definir contenido de flujo independiente (imágenes, gráficos, fotos, códigos, etc.) .)
<figcaption>definición

el título del elemento

Etiquetas semánticas en línea

Principalmente completa la referencia y la expresión del contenido específico de la página web, que es la base para la visualización de contenido enriquecido.

El progreso se usa para indicar la barra de progreso, que se puede usar para mostrar el progreso de la descarga. Los atributos incluyen max (que define el valor que debe completarse) y value (que define el valor actual del proceso). Ejemplo:<progress max="100" value="50">调整</progress>
audio define audio, como música u otras transmisiones de audio
video define un video, como un clip de película u otra transmisión de video (considere la compatibilidad del navegador)

Nota: Actualmente, el elemento de video admite tres formatos de video:
MP4 = archivo MPEG 4 (.mp4) con codificación de video H.264 y codificación de audio AAC --> tipo = video/mp4
WebM = codificación de video VP8 y archivo WebM codificado de audio Vorbis ( .mkv) --> tipo = video/webm
Ogg = archivo Ogg (.ogg) con codificación de video Theora y codificación de audio Vorbis --> tipo = video/ogg

Agregar contenido relacionado con el formulario (elemento de entrada)

email
tel
búsqueda rango
de números fecha mes hora datetime-local color url: Define el formato del campo para ingresar la URL: http:// o https://<input type = "number" min = "" max = "" step = "" />
<input type = "range" min= "" max = ""/>

El nuevo atributo de entrada

Atributo de enfoque automático: obtener automáticamente el enfoque
atributo de marcador de posición: información de solicitud de texto
atributo requerido: requerido para agregar

Otros nuevos elementos de etiqueta h5 (lo siguiente implica conocimiento de JS, aquí hay una expansión, no demasiada explicación)

Dibujo añadido: el
elemento canvas de HTML5 se usa para dibujar gráficos. Dado que esta etiqueta es solo un contenedor de gráficos, el dibujo de los gráficos debe realizarse a través de scripts (generalmente JavaScript)

<body>
	//1. 创建画布容器
	<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<body>
<script>
	//2. 取到canvas 元素:
	var c=document.getElementById("myCanvas");
	//3. 创建 context 对象，取得上下文；getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
	var ctx=c.getContext("2d");
	//4. fillStyle属性设置填充的样式:可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
	//fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
	//5. 下面的两行代码绘制一个红色的矩形：
	ctx.fillStyle="#FF0000";
	ctx.fillRect(0,0,150,75);
</script>

Almacenamiento local agregado (almacenamiento fuera de línea, almacenamiento web, almacenamiento local, sessionstroge)
API de función de arrastrar y soltar agregada
Soporte para diseño receptivo

Selectores CSS3

selector basico

*Selectores comodín (globales)
Selector de elemento E (etiqueta)
#id Selector de ID
selector de clase
selector1, selectorN selectores de grupo combinan los elementos emparejados por cada selector

Selector jerárquico (relacional)

El selector de descendientes EF (contiene selector) selecciona el elemento F coincidente, y el elemento F coincidente se incluye en el elemento E coincidente
El selector secundario E>F selecciona el elemento F coincidente, y el elemento secundario del elemento E coincide con el elemento F coincidente
E+F El selector de hermanos adyacente selecciona el elemento F coincidente, y el elemento F coincidente está inmediatamente detrás del elemento E coincidente
El selector universal E~F selecciona el elemento F coincidente y todos los elementos F coincidentes después del elemento E coincidente

Selector de pseudoclase dinámico

El selector de pseudoclase de enlace E:link selecciona elementos E coincidentes, y el elemento coincidente se define como un hipervínculo y no ha sido visitado. A menudo se usa en puntos de descripción de enlaces
El selector de pseudoclase E:visited link selecciona elementos E coincidentes que están hipervinculados y visitados. A menudo se usa en puntos de descripción de enlaces
E: hover El selector de acción del usuario selecciona el elemento E coincidente y el mouse del usuario permanece en el elemento E. Los navegadores IE6 y anteriores solo admiten a: hover
E:activo El selector de comportamiento del usuario selecciona el elemento E coincidente y se activa el elemento coincidente. Comúnmente utilizado en puntos de enlace y botones.

Selector de pseudoclase de estado de elemento de interfaz de usuario (pseudoclase relacionada con el formulario)

E: marcado El selector de pseudoclase de estado marcado coincide con un botón de verificación marcado o un elemento de formulario de botón de opción
E: habilitado El selector de pseudoclase de estado habilitado coincide con todos los elementos de formulario habilitados
E: el selector de pseudoclase de estado no disponible deshabilitado coincide con todos los elementos de formulario deshabilitados (usado con deshabilitado)

Selector de pseudoclase de estructura

E: primer hijo Elemento E que es el primer hijo del elemento padre. Equivalente a E:nth-child(1)
E:last-child El elemento E que es el último hijo del elemento padre. Equivalente a E:nth-last-child(1)
EF:nth-child(n) selecciona el enésimo elemento secundario F del elemento principal E. Entre ellos, n puede ser un número entero (1, 2, 3), una palabra clave (par, impar) o una fórmula (2n+1), y el valor inicial de n es 1 en lugar de 0.
EF:nth-last-child(n) selecciona el último elemento secundario nth F del elemento principal E, donde: nth-last-child(1) siempre coincide con el último elemento, que es equivalente a last-child

Pseudoclase negativa (entender)

E:not(F) coincide con todos los elementos E excepto el elemento F
Ejemplo: coincide con todas las etiquetas excepto las etiquetas p
```
h1:not(p) {
	color: #ff0000;
}
```

selector de atributos

E[att]{att:value;} coincide con el elemento E con el atributo att
E[att=value] coincide con el elemento E cuyo atributo att value es value
E[att~=value] coincide con el elemento E cuyo atributo att value contiene valor
E[att|=value] coincide con el elemento E cuyo atributo att value comienza con value
E[att^=value] coincide con el elemento E cuyo atributo att value comienza con value
E[att$=value] coincide con el elemento E cuyo atributo att value termina con value

Selector de pseudo-elemento: El efecto de un pseudo-elemento se logra agregando un elemento real

:first-line: aplica estilos a la primera línea de texto de un elemento
:first-letter: aplica estilos a la primera letra o primera palabra del texto en un elemento
:before – inserta algo de contenido antes de un elemento
:después - inserta algo de contenido después de un elemento

CSS3 bordes, fondos, degradados, efectos de texto

propiedades de borde

border-color: establece el color del borde
border-radius: establece las esquinas redondeadas del borde

sombra

box-shadow: Agrega una o más sombras a la caja

语法：box-shadow: h-shadow v-shadow desenfoque recuadro de color extendido;

h-sombra Obligatorio. La posición de la sombra horizontal. Se permiten valores negativos.
v-sombra Obligatorio. La posición de la sombra vertical. Se permiten valores negativos.
difuminar Opcional. distancia borrosa.
esparcir es opcional. El tamaño de la sombra.
el color es opcional El color de la sombra. Ver valores de color CSS.
el recuadro es opcional. Cambie la sombra exterior (al principio) a la sombra interior.

Consejo: box-shadow añade una o más sombras al cuadro. Este atributo es una lista de sombras separadas por comas, cada sombra consta de 2 a 4 valores de longitud,

propiedad de fondo

background-size: especifica el tamaño de la imagen de fondo
- Valor de atributo: valor de píxel: establezca la altura y el ancho de la imagen de fondo; el primer valor establece el ancho y el segundo valor establece la altura; si solo se establece un valor, el segundo valor se establecerá en "automático"
- Porcentaje: establezca el ancho y el alto de la imagen de fondo como un porcentaje del elemento principal. El primer valor establece el ancho y el segundo valor establece el alto. Si solo se establece un valor, el segundo valor se establecerá en "auto "
- cubierta: Amplíe la imagen de fondo para que sea lo suficientemente grande para que la imagen de fondo cubra completamente el área de fondo; es posible que algunas partes de la imagen de fondo no se muestren en el área de posicionamiento del fondo.
- contener: expande la imagen de la imagen a su tamaño máximo para que su ancho y alto encajen perfectamente dentro del área de contenido.
Múltiples fondos: múltiples imágenes de fondo, puede colocar diferentes imágenes de fondo en un solo elemento de bloque;
las URL de varias imágenes se pueden separar con comas; si hay varias imágenes de fondo, pero solo otro atributo (como fondo, repita solo uno), indicando que todas las imágenes de fondo aplican este valor de atributo. En el fondo multicapa de CSS3 en el contenedor, cada subpropiedad está separada por una coma

Propiedad de degradados (IE9 y versiones anteriores no admiten degradados)

Los degradados de CSS3 le permiten mostrar transiciones suaves entre dos o más colores específicos; anteriormente, tenía que usar imágenes para lograr estos efectos. Sin embargo, al usar gradientes CSS3, puede reducir los eventos de descarga y el uso del ancho de banda. Además, los elementos con degradados se ven mejor cuando se acercan porque el navegador genera el degradado.

CSS3 define dos tipos de gradientes:

Degradados lineales
Para crear un degradado lineal, debe definir al menos dos nodos de color (es decir, los colores que desea que presenten una transición suave). Además, puede establecer un punto de inicio y una
sintaxis de dirección (o ángulo):background: linear-gradient(direction, color-stop1, color-stop2, ...);

Sugerencias: El valor de la dirección se escribe como abajo, arriba, a la derecha, a la izquierda, abajo a la derecha, etc.

Degradados radiales: definidos por sus centros
Para crear un degradado radial, también debe definir al menos dos nodos de color. Los nodos de color son los colores que desea que tengan una transición suave. Al mismo tiempo, también puede especificar el centro, la forma (círculo o elipse) y el tamaño del degradado. De forma predeterminada, el centro del degradado es el centro (es decir, en el punto central), la forma del degradado es elipse (es decir, una elipse) y el tamaño del degradado es la esquina más alejada (es decir, hasta la esquina más alejada).
gramática:background: radial-gradient(center, shape size, start-color, ..., last-color);

Por ejemplo (aquí se omiten atributos de compatibilidad como -webkit):

Los nodos de color se distribuyen uniformemente (por defecto) fondo: degradado radial (rojo, verde, azul);
Distribución desigual del fondo de los nodos de color: degradado radial (5 % rojo, 15 % verde, 60 % azul);
Establecer forma (elipse elipse predeterminada) fondo: degradado radial (rojo, amarillo, verde);
Establezca el fondo del círculo (círculo): degradado radial (círculo, rojo, amarillo, verde);

sombra de texto

text-shadow Especifica el efecto de sombra agregado al texto
Descripción: El atributo text-shadow agrega una o más sombras al texto. Esta propiedad es una lista de tonos separados por comas, cada uno especificado con dos o tres valores de longitud y un valor de color opcional. Una longitud omitida es 0.
Sintaxis: text-shadow: h-shadow v-shadow blur color;

h-sombra Obligatorio. La posición de la sombra horizontal. Se permiten valores negativos.
v-sombra Obligatorio. La posición de la sombra vertical. Se permiten valores negativos.
difuminar Opcional. Distancia borrosa.
el color es opcional El color de la sombra.

Propiedad de color (transparencia)

Atributo de opacidad [ə(ʊ)'pæsɪtɪ]: especifica el nivel de opacidad del elemento; el valor del atributo value especifica la opacidad, de 0,0 (completamente transparente) a 1,0 (completamente opaco)
rgba: establece la transparencia del color.
El modo de color RGB (también traducido como "rojo, verde y azul", que es menos utilizado) es un estándar de color en la industria. Se basa en los tres colores rojo®, verde (G) y azul (B). Los cambios de canal y su superposición mutua para obtener una variedad de colores,
RGB es el color que representa los tres canales de rojo, verde y azul. Este estándar incluye casi todos los colores que la visión humana puede percibir. Actualmente es uno de los sistemas de color más utilizados.
RGBA tiene más parámetros para controlar la transparencia alfa sobre la base de RGB. Para los tres parámetros anteriores R, G y B, el rango de valores enteros positivos es: 0 - 255. El rango de valores del valor porcentual es: 0,0% - 100,0%. Los valores fuera del rango se redondearán al límite de valor más cercano. No todos los navegadores admiten el uso de valores porcentuales. Un parámetro, el valor está entre 0 y 1, y no puede ser negativo.
Ejemplo: background-color: rgba(0,0,0,0.5); == Establecer el fondo negro con un valor alfa (transparencia) de 0.5