Desarrollo de Python/Spring Cloud Alibaba: notas de revisión del front-end (1) ———— conceptos básicos de html5 y css3.html
1) Descripción general y estructura básica
Lenguaje de marcado de hipertexto. Hipertexto se refiere a hipervínculos y marcado se refiere a etiquetas.
estructura basica:
<!DOCTYPE html> 文档声明
<html lang=”en”> 定义网页的语言 en为英文，zh-CN为中文
<head>
<meta charset=”UTF-8”>
<title>网页标题</tiltle>
</head>
<body>
你好！欢迎访问我的个人网页！
</body>
</html>
2) clasificación HTML
El tipo de documento xhtml1.0 tiene
una declaración de documento larga, una declaración de codificación y una declaración de idioma de página web.
Diferencia: a. Declaraciones de documentación y declaraciones de codificación b. HTML5 agrega nuevos elementos de etiqueta y atributos de elementos
3) Comentarios
<!--这是注释--> 两个横杆
4) Etiqueta de título
<h1><h2><h3><h4><h5><h6>
Se pueden definir seis niveles de títulos en una página web. Los seis niveles de títulos representan la jerarquía de directorios de seis niveles del documento.
5) Etiquetas de párrafo
<p>文字</p>
En las etiquetas de párrafo no se reconocen espacios al principio y sólo se reconoce un espacio en el contenido.
Identificador: es un espacio < es un signo menor que < > es un signo mayor que>
nueva línea
6) Bloquear etiquetas, etiquetas con estilos.
1>Bloquear etiqueta
2> Etiquetas con estilo y semántica.
<em>Las etiquetas representan palabras enfatizadas en el tono.
<i>Las etiquetas en cursiva representan vocabulario profesional.
<b>Las etiquetas en cursiva representan palabras clave o nombres de productos en el documento.
<strong>Las etiquetas en negrita representan contenido muy importante. Las etiquetas en negrita representan contenido muy importante.
3>Etiquetas semánticas
título h1; párrafo p; lista ul, li; un enlace; lista de definiciones dl, dt, dd
7) Etiquetas de imagen, rutas absolutas y rutas relativas
1>Etiqueta de imagen
<img src=”images/001.jpg” alt=”产品图片” />
El atributo src define la dirección de referencia de la imagen
y el atributo alt define el texto que se muestra cuando la imagen no se carga. Los motores de búsqueda utilizarán este texto para incluir la imagen y el software de lectura de pantalla para ciegos leerá este texto para permitir que las personas ciegas para identificar la imagen, por lo que este atributo es muy importante.
2>Ruta absoluta y trayectoria relativa
Ruta absoluta: ubique la ubicación del archivo en relación con la ubicación del disco
Ruta relativa: ubique la ubicación del archivo en relación con la ubicación del archivo actual./
representa el directorio actual, que se puede omitir
.../ representa el directorio anterior.
8) Etiquetas de enlace
Defina un atributo común de una dirección de enlace. El atributo href define la dirección de salto. El atributo de título define el cuadro de texto emergente que aparece cuando se pasa el mouse. El atributo de destino define la posición donde se abre la ventana de enlace. target=”self” Valor predeterminado: la nueva página reemplaza la página original. Abra target="_blank" en la ubicación original y la nueva página se abrirá en una nueva ventana del navegador y saltará a la parte superior de la página.
9) Listar etiquetas
La lista ordenada
agregará automáticamente números de serie al contenido,
lo que se puede <ol>, <li>lograr usándolos juntos.
<ol>
<li>listcontent1</li>
<li>listcontent2</li>
<li>listcontent3</li>
</ol>
Definición de la tecla de acceso directo: ol>li*3luego presione la tecla de tabulación.
La lista desordenada
se puede usar para crear títulos de noticias, etc.
Se puede <ul>, <li>lograr usándola en conjunto.
Utilice List-style:none en CSS para eliminar el punto antes de la lista.
<ul>
<li><a href=”#”>news1</a></li>
<li><a href=”#”>news2</a></li>
<li><a href=”#”>news3</a></li>
</ul>
Definición de la tecla de método abreviado: ul>(li>a{新闻标题})*3luego presione la tecla de tabulación
para definir la
<dl>etiqueta de la lista para representar la lista completa, <dt>la etiqueta define el título del término y <dd>la etiqueta es la explicación del término.
2. Etiquetas de mesa y diseño tradicional.
1) tabla html
Declarar un atributo de tabla: borde define el borde de la tabla y el valor de configuración es un valor numérico. cellpadding define la distancia entre el contenido de la celda y el borde, y el valor de configuración es un valor numérico. cellpadding define la distancia entre celdas, y el valor de configuración es un valor numérico. align establece el valor relativo de toda la tabla. Para la alineación horizontal de la ventana del navegador, el valor de configuración es izquierda|centro|derecha para definir una fila de la tabla| Defina una celda en una fila, td representa una celda ordinaria y th representa una celda de encabezado. Atributos: align establece la alineación horizontal del contenido en la celda, el valor de configuración es izquierda|centro|derecha valign establece la alineación vertical del contenido en la celda top|middle|bottom colspan establece la fusión horizontal de celdas, el valor de configuración es un valor numérico la extensión de filas establece la celda. Fusionar celdas verticalmente y establecer el valor en un atajo numérico: tabla>(tr>td*5)*6 para crear una tabla con 6 filas y 5 columnas. |
2) Diseño de página
Generalmente dividido en dos tipos:
1> diseño de mesa
Es decir, el diseño tradicional divide el espacio de la página en varias celdas, coloca elementos como texto o imágenes en las celdas y oculta los bordes de la tabla para lograr el diseño. Actualmente se utiliza principalmente en EDM (páginas en correos electrónicos publicitarios).
Cuando el diseño es complejo, anide tablas dentro de tablas.
2>diseño html+css (DIV+CSS)
El diseño de elementos como texto o imágenes a través de la configuración de estilo CSS requiere el uso del modelo de cuadro CSS, el tipo de cuadro, la flotación CSS, el posicionamiento CSS, el posicionamiento de la imagen de fondo CSS y otros conocimientos para el diseño. Es más complicado que el diseño tradicional y actualmente es el convencional.
formulario 3.html
Los formularios se utilizan para recopilar diferentes tipos de entradas del usuario y se componen de diferentes tipos de etiquetas.
1> <form>Etiqueta
Defina el área general del formulario.
El atributo de acción define la dirección de envío de datos del formulario.
El atributo de método define el método de envío del formulario. Generalmente, existen métodos "obtener" y métodos "publicar".
2><label>
Etiqueta de texto de definición de elemento de formulario
3><input>
Defina atributos de tipo de elemento de formulario común
: "texto" define un cuadro de entrada de texto de una sola línea; "contraseña" define un cuadro de entrada de contraseña; "radio" define un cuadro de botón de opción; "casilla de verificación" define una casilla de verificación; "archivo" define un archivo cargado; "enviar" "Define el botón de enviar; "restablecer" define el botón de reinicio; "imagen" define la imagen como el botón de enviar y utiliza el atributo src para definir la dirección de la imagen; "oculto" define un campo de formulario oculto para almacenar valores, y el atributo de selección define la opción de casilla de verificación define opciones.
El atributo de valor define el valor del elemento del formulario.
El atributo de nombre define el nombre del elemento del formulario. Este nombre es el nombre clave al enviar datos.
4. Sintaxis básica de CSS
En las hojas de estilo en cascada, HTML sólo es responsable de la estructura y el contenido del documento, y la presentación queda completamente en manos de CSS.
Método de definición de CSS:
selector {propiedad: valor; propiedad: valor}
div{
font-size:16px;
color:ed;
}
Cómo presentar la página CSS:
1>Tipo de enlace externo
<head>Agregue href al archivo html
<link rel=”stylesheet” type=”text/css” href=”./css/main.css”>como dirección del archivo css
2>Incrustado
Cree una hoja de estilo incrustada en la página web a través de la etiqueta de estilo
<style type=”text/css”>
div{ width:100px; height:100px; color:red }
3>En línea
Escriba el estilo directamente en la etiqueta a través del atributo de estilo de la etiqueta.
<div style=”width:100px; height:100px; color:red”>……</div>
1
5. Estilos de texto CSS de uso común
Tamaño de fuente tamaño de fuente; color color; fuente familia de fuentes; estilo de fuente en cursiva; grosor de fuente en negrita; altura de línea altura de línea Puede
usar <span>etiquetas para establecer estilos específicos
6.Selector de estilo CSS
Método de representación del valor del color CSS:
1> Representación del nombre del color, como rojo dorado
2> Representación RGB como rgb (255, 0, 0) rojo
3> Representación numérica hexadecimal, #ff0000 representa el rojo, que se puede abreviar como #f00
1) selector de etiquetas
Intente usarlo en selectores jerárquicos.
*Todas las etiquetas
2) selector de identificación
Seleccione elementos por nombre de identificación. El nombre de identificación del elemento no se puede repetir. Sin embargo, los programas generalmente utilizan los nombres de identificación, por lo que no se recomienda utilizar la identificación como selector.
Por ejemplo:
<div id=“div1”>第一个div</div>establezca la identificación y establezca el estilo
en #div1{}.<head><style>
3) selector de clase
Seleccione elementos por nombre de clase. Una clase se puede aplicar a varios elementos y un elemento también puede utilizar varias clases. Se utiliza el selector que más se aplica.
Establecer selector de clase
.green{color：green；}
<div class=“green”>`这是第一个div`</div>
4) Selector de nivel
Se utiliza principalmente para seleccionar elementos secundarios debajo del elemento principal, o elementos secundarios debajo del elemento secundario. Se puede usar junto con elementos de etiqueta para reducir los nombres y también puede evitar conflictos de nombres a través de la jerarquía.
5) selector de grupo
Los mismos estilos en los selectores de clases se pueden definir juntos usando selectores de grupo. Los nombres de las clases están separados por comas.
6) Selectores de pseudoclases y pseudoelementos
Los selectores de pseudoclases más utilizados son hover, que representa el estado cuando el mouse se desplaza sobre un elemento, y los selectores de pseudoelementos incluyen antes y después, que pueden insertar contenido en elementos a través de estilos.
Agregue dos puntos después del nombre de la clase para definir el elemento.
.box: hover{color:red}Cuando el mouse pasa sobre el elemento, el elemento se vuelve rojo.
.box: before{content: “dd”}Agregue texto delante del elemento de etiqueta. dd
after puede agregar texto después del elemento.
7. modelo de caja
1) Comprensión del modelo
El elemento se muestra como un cuadrado en la página. El elemento se llama cuadro. Los estilos correspondientes se establecen de la siguiente manera: el ancho del cuadro (ancho), la altura del cuadro (alto), el borde del cuadro ( borde), el contenido del cuadro y el borde. El espacio entre cuadros (relleno) y el espacio entre cuadros (margen).
Definir un selector de clase y definir atributos en el selector
2) Establecer ancho y alto
width：200px
height：200px
3) Establecer fronteras
border-top：10px solid #000； 设置顶边框10px粗，实线，黑色
border-left：10px dashed #000； 虚线
border-right：10px dotted #000；点线
border-bottom 底部边框
border：10px solid #000； 同时设置四个边
4) Contenido y espaciado de bordes
Después de modificar padding-top, padding-left, padding-right y padding-bottom , el cuadro general se vuelve más grande. width y height establecen el ancho y alto del contenido.
Puede usar el relleno para configurarlo directamente y configurarlo en el sentido de las agujas del reloj.
padding：20px 80px 100px；这是设置上边、左右、下边的距离
padding：20px；这是同时设置四条边的距离
5) Establecer el margen de espaciado exterior
margen superior, margen izquierdo la distancia entre la caja y el mundo exterior
6) Tamaño real de la caja
Ancho ancho + ancho de relleno izquierdo y derecho + ancho de borde izquierdo y derecho
alto: alto + altura de relleno superior e inferior + altura de borde superior e inferior
altura de línea sangría de texto La altura de la línea y la sangría de la primera línea pueden evitar cambios en el tamaño del cuadro.
Ocho atributos de margen y desbordamiento
1) Habilidades de uso de márgenes
margin：50px auto 100px
Los bordes izquierdo y derecho cambiarán a medida que cambie el tamaño total de la interfaz.
1>margen: x establece automáticamente que el elemento se centre horizontalmente
2>el valor de margen negativo permite que el elemento se desplace y el borde se fusione
2) Fusionar márgenes
La fusión de márgenes significa que cuando dos márgenes verticales se encuentran, forman un solo margen. La altura del margen fusionado es igual a la mayor de las alturas de los dos márgenes fusionados. Solución:
1> Utilice esta función
2> Establezca el margen en un lado, generalmente establezca el margen superior
3> Flotar o posicionar el elemento
3) colapso del margen superior
Cuando dos cuadros están anidados, el margen superior establecido por el cuadro interior se agregará al cuadro exterior, lo que provocará que falle la configuración del margen superior del cuadro interior. Solución: 1>Establecer un borde para el cuadro exterior 2>Establecer desbordamiento para el cuadro
exterior
: oculto
3> Usar clases de pseudoelementos
.clearfix: before{
content:””;
display:table;
}
4) desbordamiento de elementos CSS
Cuando el tamaño del elemento secundario excede el tamaño del elemento principal, debe establecer la forma en que el elemento principal muestra los elementos secundarios desbordados. El método de configuración es configurarlo a través del atributo de desbordamiento.
Configuración de desbordamiento:
1>valor predeterminado visible, el contenido no se recortará y se presentará fuera del cuadro del elemento.
2> El contenido oculto se recortará y el contenido restante será invisible. Este atributo también tiene la función de borrar la flotación y borrar el colapso del margen superior.
3>El contenido del desplazamiento se recortará, pero el navegador mostrará barras de desplazamiento para ver el contenido restante.
4>auto Si se recorta el contenido, el navegador mostrará barras de desplazamiento para ver el contenido restante.
5>heredar especifica que el valor del atributo de desbordamiento debe heredarse del elemento padre
9.atributo de visualización
1) elemento de bloque
También llamados elementos de fila, las etiquetas de uso común como: div, p, ul, li, h1 ~ h6, dl, dt, dd, etc. son todos elementos de bloque. Su comportamiento en el diseño: a admite todos los estilos b si el ancho
no está
configurado, el ancho predeterminado es el 100% del ancho principal.
c El cuadro ocupa una línea, incluso si el ancho está establecido
2) elementos en línea
También conocidos como elementos en línea, las etiquetas comúnmente utilizadas en el diseño, como: a, span, em, b, strong, i, etc., son todos elementos en línea. Su comportamiento en el diseño: a admite algunos estilos (ancho, alto, margen no son admitido
) arriba y abajo, relleno arriba y abajo)
b el ancho y el alto están determinados por el contenido
c cuadro y una línea
d ajuste de código, habrá un espacio entre los cuadros
e los elementos secundarios son elementos en línea, el elemento principal puede usar el atributo text-align para establecer la alineación horizontal de los elementos secundarios
para resolver el problema interno Métodos para los espacios entre elementos en línea:
a. Eliminar saltos de línea entre elementos en línea
b. Establecer el tamaño de fuente del elemento principal en 0 y luego establezca el tamaño de fuente del propio elemento en línea.
3) Elementos de bloque en línea
También conocidos como elementos de bloque en línea, los elementos img y de entrada se comportan como este elemento, pero también se clasifican como elementos en línea. Podemos usar el atributo de visualización para convertir elementos de bloque o elementos en línea en dichos elementos, y su comportamiento en el diseño: a admite
todos estilos
b. Si el ancho y el alto no están establecidos, el ancho y el alto están determinados por el contenido
c. El cuadro está envuelto en una línea
d. El código está envuelto y el cuadro generará un espaciado
e. El elemento secundario es un elemento de bloque en línea, y el elemento principal puede establecer el elemento secundario a través del atributo de alineación de texto.
4) atributo de visualización
none El elemento está oculto y no ocupa la posición.
El elemento de bloque se muestra como un elemento de bloque. El elemento en línea se muestra como
un elemento en línea.
El elemento de bloque en línea se muestra como un elemento de bloque en línea.
10. Flotando
El cuadro principal no proporciona una altura y el cuadro del subconjunto flota. El cuadro del subconjunto "no puede abrir" el cuadro principal y el cuadro principal necesita borrar el flotador. Característica 1 > Los elementos flotantes tienen flotador izquierdo (flotante: izquierda
)
y flotador derecho (float:right) Dos tipos de
2> Los elementos flotantes flotarán hacia la izquierda o hacia la derecha y se detendrán cuando lleguen al límite del elemento principal y otros elementos.
3> Los elementos de bloque flotante adyacentes se pueden combinar en una línea , y se ajustarán cuando excedan el ancho del padre.
4> Float permite que los elementos en línea o los elementos de bloque se conviertan automáticamente en elementos de bloque en línea (no habrá problemas de espacio con los elementos de bloque en línea en este momento) 5
> Los elementos que no flotan después de que el elemento flotante ocupará la posición del elemento flotante, y el texto dentro del elemento que no está flotante evitará los elementos flotantes, formando el efecto de ajuste de texto 6> Si el tamaño del elemento principal
es no establecido (generalmente la altura no está establecida), el elemento flotante general dentro del elemento principal no puede soportar el elemento principal y el elemento principal debe eliminarse de la flotación
7> No hay espacio entre elementos flotantes Fusión de márgenes verticales
Flotador claro:
1>Agregue el atributo overflow:hidden al padre
2>Agregue un div vacío después del último elemento secundario y asígnele el atributo de estilo clear:ambos (no recomendado)
3>Use la clase de estilo flotante transparente y madura, clearfix
.clearfix:after{
content:"";
display:table;
clear:both;
Agregue el selector de clase anterior a la clase principal. Al mismo tiempo, esta clase se puede utilizar con clearfix:before para sintetizar un selector de grupo para resolver el problema del colapso del margen superior.
.clearfix{ zoom:1 }
Exclusivamente para navegador IE y compatible.
11 Posicionamiento
Flujo del documento: Los cuadros están ordenados de arriba a abajo y de izquierda a derecha en el orden en que se escriben las etiquetas HTML. Los elementos de bloque ocupan una línea y los elementos en línea están ordenados de izquierda a derecha dentro de una línea. Los escritos primero se Se ordenan primero, y los escritos después se ordenan primero, detrás cada cuadro ocupa su propio lugar.
1) Sobre el posicionamiento
Utilice el atributo de posición de CSS para establecer el tipo de posicionamiento del elemento. La configuración de posición es la siguiente:
1> relativo genera un elemento relativamente posicionado, la posición del flujo de documentos ocupada por el elemento se conserva y el elemento en sí se desplaza relativo a su posición original
2>absoluto genera un elemento absolutamente posicionado, no ocupa la posición del flujo de documentos. Al posicionar, se posiciona en relación con el elemento padre anterior con el conjunto de posicionamiento. Si no se puede encontrar, se posiciona en relación con el elemento del cuerpo.
3>fijo genera un elemento de posicionamiento fijo, separado del flujo de documentos, posicionado en relación con la ventana del navegador
4>valor predeterminado estático, sin posicionamiento, aparece en el flujo de documentos normal
5>heredar hereda el valor del atributo de posición del elemento padre
2) Desplazamiento del elemento posicionado
Utilice derecha, izquierda, arriba, abajo para establecer el valor de desplazamiento relativo al elemento de referencia.
12.atributo de fondo
1) Elementos de configuración:
background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置，水平方向“left、center、right”，垂直方向“top、center、bottom”。
background-attachment 设置背景图片是固定还是随着页面滚动条滚动
position属性中，左右移动时，负值向左，正值向右。上下移动时，负值向上，正值向下。
2) imagen de objeto
Haga una imagen de sprite con ps
1. Use Photoshop para crear una nueva imagen con un fondo transparente.
2. Copie las imágenes pequeñas en esta imagen y organice la posición de cada imagen. Si la imagen no es lo suficientemente grande, puede usar el lienzo. size para ajustar el tamaño.
3. De acuerdo con el tamaño de todas las imágenes pequeñas, recorte la imagen y guárdela como una imagen png con un fondo transparente. 13.
Proceso de desarrollo de la página de inicio
1) Cree un directorio de proyecto de página
2) Use Photoshop para cortar las representaciones y recortar las imágenes pequeñas necesarias para la producción de la página web
3) Fusionar imágenes decorativas, convertirlas en una imagen de sprite
4) Combinar Photoshop y editor de código, consultar las representaciones, escribir código html y css y crear una página .
14.html5 y CSS3
1) peso css
Los estilos altamente ponderados actúan sobre los elementos.
Nivel de peso:
1>! Importante Después de cargar el valor del atributo de estilo, el valor de peso es 10000
2> Estilo en línea, como: estilo="", el valor de peso es 1000
3> Selector de ID, como: #contenido, el peso el valor es 100
4 > Selectores de clases, pseudoclases y atributos, como: contenido, :hover, el valor de peso es 10
5> Selectores de etiquetas y selectores de pseudoelementos, como: div, p, :antes, el valor de peso es 1
6> Selector universal ( *), selector secundario (>), selector adyacente (+), selector de hermanos (~), el valor de peso es 0
2) Nuevo selector agregado a CSS
1>E:n-ésimo hijo(n)
Coincide con el tipo de elemento E y es el enésimo elemento hijo del elemento padre
2>E:primer hijo
Coincide con el tipo de elemento E y es el primer elemento hijo del elemento padre
3>E:último hijo
Coincide con el tipo de elemento E y es el último elemento hijo del elemento padre
4>E>F
El primer nivel de subelementos debajo del elemento E.
5>E~F
El elemento hermano después del elemento E.
6>E+F
El siguiente elemento hermano
Selector de atributos:
1>E[attr] elemento que contiene el atributo attr
2>E[attr='ok'] elemento que contiene el atributo attr y su valor es "ok"
3>E[ attr^='ok'] Elementos que contienen el atributo attr y su valor que comienza con "ok"
4>E[attr$='ok'] Elementos que contienen el atributo attr y su valor que termina en "ok"
5>E[ attr*='ok'] Un elemento que contiene el atributo attr y su valor contiene "ok"
3) css3 esquinas redondeadas, rgba
1>Esquinas redondeadas
Establezca la esquina redondeada de una determinada esquina, por ejemplo, establezca la esquina redondeada de la esquina superior izquierda:
border-top-left-radius: 30px 60px;
establezca cuatro esquinas al mismo tiempo:
border-radius: 30px 60px 120px 150px;
el orden es en el sentido de las agujas del reloj
2>rgba
una representación de transparencia de caja
.box
{
opacity:0.1;
filter:alpha(opacity=10); 兼容IE
}
b rgba(0,0,0,0.1) Los primeros tres valores representan el color y el cuarto valor representa la transparencia del color.
4) animación de transición css3
1> propiedad de transición establece las propiedades de la transición, como ancho alto color de fondo
2> duración de transición establece el tiempo de la transición, como por ejemplo: 1 s 500 ms
3> función de tiempo de transición establece el modo de movimiento de la transición , buffer de facilidad lineal de uso común
4 >transition-delay establece el retraso de la animación
5>transición: propiedad duración temporización-función retardo establece cuatro propiedades al mismo tiempo
5) cambio de transformación de transformación css3
1>translate(x, y) Establece el desplazamiento del cuadro
2>scale(x, y) Establece la escala del cuadro
3>rotate(deg) Establece la rotación del cuadro
4>skew(x-angle, y-angle) Establece el bisel del cuadro
5>perspectiva Establecer distancia de perspectiva
6>transformar-estilo plano|preserve-3d Establecer si el cuadro se muestra en el espacio 3D
7>translateX, traducirY, traducir Establecer movimiento tridimensional
8>rotarX, rotarY, rotarZ Establecer rotación tridimensional
9 >scaleX, scaleY, scaleZ Establecer escala tridimensional
10>transform-origin establece el punto central de la transformación
11>backface-visibility establece si la parte posterior de la caja es visible
6) animación de animación css3
1>@keyframes define la animación del fotograma clave
2>nombre de la animación nombre de la animación
3>duración de la animación tiempo de animación
4>función de sincronización de la animación curva de animación velocidad uniforme lineal, búfer de facilidad, número de pasos
5>retraso de la animación retardo de la animación
6>animación -tiempos de reproducción de animación de recuento de iteraciones n|infinito
7>dirección de animación si se debe restaurar a la normalidad después de que finalice la animación|alternativo
8>estado de reproducción de animación estado de animación en pausa (detener)|en ejecución (movimiento)
9>relleno de animación- modo El estado antes y después de la animación ninguno|adelante (permanecer en el último fotograma cuando termina)|hacia atrás (permanecer en el fotograma inicial definido cuando comienza)|ambos (aplicar antes y después) 10>animación: nombre duración
tiempo -Función de retardo de iteración-dirección de conteo; Establece múltiples propiedades al mismo tiempo.
7) prefijo del navegador css3
1>Prefijo de estilo del navegador
Para que los estilos CSS3 sean compatibles, es necesario agregar algunos estilos con prefijos del navegador:
-ms- compatible con el navegador IE
-moz- compatible con Firefox
-o- compatible con Opera
-webkit- compatible con Chrome y Safari
2>Agregar automáticamente el prefijo del navegador
Déjelo en manos del complemento, como instalar autoprefixer
8) Nuevas etiquetas en html5
Etiquetas semánticas agregadas:
<header>encabezado de página, encabezado de página,
<nav>navegación de página,
<article>artículo
<section>, capítulos del artículo,
<aside>barra lateral
<footer>, parte inferior de página, pie de página,
audio y video.
<audio>
<video>
9) Nuevos controles de formulario en html5
URL Correo electrónico Fecha Hora Semana Cantidad Rango Teléfono Color Buscar
<label>网址:</label><input type="url" name="" required><br><br>
<label>邮箱:</label><input type="email" name="" required><br><br>
<label>日期:</label><input type="date" name=""><br><br>
<label>时间:</label><input type="time" name=""><br><br>
<label>星期:</label><input type="week" name=""><br><br>
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br>
<label>电话:</label><input type="tel" name=""><br><br>
<label>颜色:</label><input type="color" name=""><br><br>
<label>搜索:</label><input type="search" name=""><br><br>
Se agregaron atributos de control de formulario de uso común:
1>marcador de posición establece el texto de solicitud predeterminado del cuadro de texto
2>enfoque automático obtiene el foco automáticamente
3>autocompletar asocia palabras clave
15. Desarrollo de páginas móviles
1) Diferencias en el diseño de página entre terminal móvil y terminal de PC
1>Vista
Escale la página de la PC al tamaño de la ventana del móvil.
Utilice la metaetiqueta name="viewport" para establecer el tamaño de la ventana gráfica y establezca el tamaño de la ventana gráfica al mismo tamaño que la ventana gráfica del dispositivo móvil.
Tecla de acceso directo: meta:vp+tab
2> Solución de claridad de pantalla retina (pantalla retina)
Pantalla Retina: Una pantalla con una mayor densidad física de píxeles. Hay más píxeles físicos que una pantalla normal.
La imagen que se muestra en la pantalla retina tiene el mismo tamaño que la de la pantalla normal, pero los píxeles físicos de la pantalla retina son más pequeños que los de la pantalla normal. La imagen parece ampliarse y la imagen se vuelve borrosa. . Para resolver este problema, puede usar una imagen que tenga el doble del tamaño de la imagen original y luego usar estilos CSS para forzar el tamaño de la imagen al tamaño de la imagen original.
Fondo nuevo atributo
tamaño de fondo:
longitud: utilice el valor de longitud para especificar el tamaño de la imagen de fondo. No se permiten valores negativos.
porcentaje: especifique el tamaño de la imagen de fondo en porcentaje. No se permiten valores negativos.
auto: El tamaño real de la imagen de fondo.
portada: Escale la imagen de fondo proporcionalmente para cubrir completamente el contenedor. La imagen de fondo puede exceder el contenedor.
contener: Escala la imagen de fondo proporcionalmente al ancho o alto igual al ancho o alto del contenedor.La imagen de fondo siempre se incluye en el contenedor.
2) Adaptar el tipo de diseño
1>Método de adaptación de páginas para PC y dispositivos móviles
a Adaptación completa: diseño responsivo + diseño fluido
b Adaptación del terminal móvil: diseño fluido + una pequeña cantidad de diseño responsivo/diseño basado en rem
2>Diseño fluido
Utilice un porcentaje para establecer el ancho del elemento y la altura del elemento es un valor fijo basado en la altura real. Puede establecer el ancho usando la función de cálculo calc() en el estilo, o usar la propiedad box-sizing para configurar el cuadro para calcular las dimensiones del cuadro desde los bordes.
calc()
Calcular el tamaño de un elemento.
box-sizing
content-box El método de cálculo del tamaño del cuadro predeterminado
border-box establece el método de cálculo del tamaño del cuadro para que comience desde el borde, el tamaño del cuadro, el borde y el relleno interior se incluyen en el tamaño del cuadro.
3>Diseño responsivo
Al utilizar consultas de medios, al consultar el ancho del navegador, se aplican diferentes estilos a diferentes anchos. Cada bloque de estilo corresponde al método de diseño bajo ese ancho, logrando así un diseño receptivo.
4> diseño basado en rem
La unidad em se refiere al tamaño del texto del elemento en sí para establecer el tamaño. Rem se refiere al tamaño del texto del nodo raíz. El nodo raíz se refiere a la etiqueta html. Establece el tamaño del texto de la etiqueta html. Utilice rem para establecer los tamaños relacionados de otros elementos. De esta manera, todos los elementos tienen un estándar de referencia unificado. Cambiar el tamaño de html cambiará el tamaño de todos los elementos establecidos con rem.
El complemento cssrm puede convertir dinámicamente el tamaño px al tamaño rem.