Tabla de contenido
2. ¿Comprensión de los estándares WEB?
2.2 Estándares de la capa de presentación
2.3 Estándares de la capa de comportamiento
3.1 Requisitos para la estructura
4. ¿Qué es la semántica front-end?
4.1 Las etiquetas son semánticas
4.2 Etiquetas semánticas HTML5
5. ¿Cuáles son los nuevos contenidos de HTML5?
6. ¿Clasificación de elementos HTML?
7. ¿Relación de anidamiento HTML?
8. ¿Cuál es el estilo predeterminado de HTML?
3. ¿Qué son los selectores de CSS? ¿Qué propiedades se pueden heredar?
4. ¿Cuáles son las nuevas pseudoclases en CSS3?
5. ¿Cómo centrar verticalmente un div?
6. ¿Cuál es el papel de los sprites (sprites) denominados colectivamente CSS Sprites?
7. ¿Cuál es la diferencia entre pseudoclase y pseudoelemento?
9. Diseño de ala volante doble
10. Limpiar los espacios entre li
11. ¿Qué es BFC? ¿Cómo activar BFC?
13. ¿Cuál es la diferencia entre em y rem?
15.¿Cuáles son los valores de visualización? ¿Explicar su papel?
17. ¿Cuáles son las nuevas características de CSS3?
18. ¿Cuál es el principio para crear un triángulo con CSS puro?
19.css3 implementa una línea delgada de 0.5px
20. ¿Cómo hacer que Chrome admita texto de menos de 12 píxeles?
21. ¿Por qué deberíamos inicializar los estilos CSS durante el desarrollo?
24.css establece el espaciado entre caracteres
HTML
1. ¿Cómo entender HTML?
- HTML es similar a una palabra "documento"
- Describir la "estructura" de un documento.
- Tiene bloques y contornos.
2. ¿Comprensión de los estándares WEB?
Los estándares web se componen de una serie de estándares. Una página web consta principalmente de tres partes: capa de estructura, capa de presentación y capa de comportamiento.
Las normas correspondientes también se dividen en tres aspectos:
- Los lenguajes estándar estructurados incluyen principalmente XHTML, HTML y XML,
- El lenguaje estándar de la capa de presentación incluye principalmente CSS,
- Los estándares de comportamiento incluyen principalmente modelo de objetos, DOM, ECMAScript, etc.
2.1 Norma de capa estructural
El lenguaje estándar estructurado es lo que estipula el W3C e incluye principalmente HTML, XHTML y XML. Las etiquetas que escribimos en el cuerpo de la página son todas para la estructura de la página.
- La escritura de etiquetas tiene que empezar y terminar. Excepto notas adhesivas;
- Los elementos a nivel de bloque no se pueden colocar dentro de etiquetas p. li puede contener etiquetas div.
- Los elementos de bloque se pueden colocar dentro de elementos de bloque y elementos en línea. No coloque elementos de bloque dentro de p y h1-h6 especiales. Puede colocar muchos elementos li y div. Porque estas dos etiquetas tienen propiedades de contenedor.
- Poner en línea dentro de línea, no bloquear. (relación anidada)
- Separación de estructura y presentación.
- Los nombres deben estar estandarizados
2.2 Estándares de la capa de presentación
El lenguaje estándar de rendimiento incluye principalmente CSS. A través de hojas de estilo CSS, los estilos CSS pueden hacer que las etiquetas estructurales de la página sean más hermosas.
- Utilice métodos de introducción externos tanto como sea posible para lograr el propósito de la separación.
- Selector CSS, prioridad
- código conciso
2.3 Estándares de la capa de comportamiento
La página y el usuario tienen ciertas interacciones, y la estructura de la página o el rendimiento cambian al mismo tiempo. El estándar incluye principalmente el modelo de objetos (como W3C DOM) y ECMAScript y requiere la separación de estas tres partes.
DOM es la abreviatura de Modelo de objetos de documento.
ECMAScript es un lenguaje de scripting estándar (JAVAScript) desarrollado por ECMA (Asociación Europea de Fabricantes de Computadoras)
3. ¿Qué sabes sobre el W3C?
W3C (World Wide Web) ha presentado requisitos estandarizados para los estándares web, que son algunas especificaciones de código en la programación real.
Incluye principalmente los siguientes puntos:
3.1 Requisitos para la estructura
- 1) Las letras de las etiquetas deben estar en minúsculas.
- 2) La etiqueta debe estar cerrada.
- 3) No se permite que las etiquetas se anidan arbitrariamente
3.2 Requisitos para css y js
- 1) Intente utilizar hojas de estilo CSS y scripts js de enlaces externos. Divida la estructura, el rendimiento y el comportamiento en tres partes, conforme a la especificación. Al mismo tiempo, mejora la velocidad de representación de la página y mejora la experiencia del usuario.
- 2) Utilice la menor cantidad posible de hojas de estilo entre líneas en los estilos para separar la estructura y el rendimiento. La denominación de los atributos de las etiquetas, como id y clase, debe ser clara y significativa. Cuantas menos etiquetas, más rápida será la carga, la experiencia del usuario mejorará y el mantenimiento del código es simple y conveniente Versión revisada.
- 3) No es necesario cambiar el contenido de la página y se puede proporcionar una versión impresa sin copiar el contenido, lo que mejora la usabilidad del sitio web.
4. ¿Qué es la semántica front-end?
La semántica es permitir que las máquinas comprendan el contenido. El análisis de las páginas web es buscado por los motores de búsqueda y analizado por las máquinas.
4.1 Las etiquetas son semánticas
Etiquetas como h1 ~ h6, thead, ul y ol, primeras etiquetas semánticas: los programadores usan los atributos de identificación y clase de las etiquetas HTML para describir con más detalle las etiquetas HTML, como agregar id="footer" o "footer" al pie de página HTML. etiqueta.Atributo (valor) de clase="pie de página" (use variables semánticas y clase, identificación que debe declararse)
4.2 Etiquetas semánticas HTML5
encabezado/pie de página; sección (capítulo, encabezado, pie de página)/artículo (área de contenido); navegación de navegación; aparte de contenido sin importancia; em(énfasis)/mejora fuerte; i(icono) creación de íconos
5. ¿Cuáles son los nuevos contenidos de HTML5?
- Nuevas etiquetas de bloque: sección, artículo, navegación, aparte
- Mejora del formulario: fecha, hora, búsqueda (modificar la implementación del tipo); validación del formulario; marcador de posición
- Mejora semántica: encabezado/pie de página; sección/artículo; navegación de navegación; aparte de contenido sin importancia; em(énfasis)/mejora fuerte; creación de íconos i(icono)
6. ¿Clasificación de elementos HTML?
- Bloque de elementos a nivel de bloque (forma cuadrada, que ocupa una fila completa): div ul ol li dl dt dd h1 h2 h3 h4…p
- Elementos en línea en línea (una determinada posición en una línea): ab span img input select strong (tono de énfasis)
- bloque en línea (en línea, con atributos de ancho y alto): selección
Elementos en línea: a, b, span, img, input, strong, select, label, em, button, textarea
Elementos a nivel de bloque: div, ul, li, dl, dt, dd, p, h1-h6, blockquote
Elementos vacíos: br, meta, hr, link, input, img
7. ¿Relación de anidamiento HTML?
- Los elementos a nivel de bloque pueden contener elementos en línea
- Los elementos a nivel de bloque pueden no contener elementos a nivel de bloque (las etiquetas p no pueden contener etiquetas div)
- Los elementos en línea "generalmente" no pueden contener elementos a nivel de bloque (un contenido de divs está bien)
8. ¿Cuál es el estilo predeterminado de HTML?
- El significado del estilo predeterminado
- Problema con el proxy de estilo predeterminado
- ¿Qué hace el restablecimiento de CSS?
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
CSS
1. ¿Presentar el modelo de caja CSS estándar? ¿En qué se diferencia del modelo de caja de las versiones inferiores de IE?
Modelo de cuadro estándar: ancho = ancho del contenido (contenido) + borde + relleno + margen
Modelo de cuadro IE de versión baja: ancho = ancho del contenido (contenido + borde + relleno) + margen
2. ¿Atributo de tamaño de caja?
Se utiliza para controlar el modo de análisis del modelo de caja del elemento, el valor predeterminado es content-box
context-box: modelo de caja estándar W3C, establece el atributo alto/ancho del elemento para hacer referencia al alto/ancho del borde de la parte del contenido
. -box: modelo de caja tradicional IE. Establecer los atributos de altura/ancho del elemento se refiere a la altura/ancho del borde + relleno + parte de contenido
3. ¿Qué son los selectores de CSS? ¿Qué propiedades se pueden heredar?
Selectores CSS: selector de id (#myid), selector de clase (.myclassname), selector de etiquetas (div, h1, p), selector adyacente (h1 + p), subselector (ul > li), selector de descendientes (li a) , selector comodín (*), selector de atributos (a[rel="external"]), selector de pseudoclase (a:hover, li:nth-child) atributos heredables: tamaño de fuente, familia de fuentes, color
no
heredable estilos: borde, relleno, margen, ancho, alto
Prioridad (principio de proximidad): !important > [ id > class > tag ]
!important tiene mayor prioridad que en línea
4. ¿Cuáles son las nuevas pseudoclases en CSS3?
p:primero de tipo selecciona el primer elemento que pertenece a su elemento padre
p:último de tipo selecciona el último elemento que pertenece a su elemento padre
p:solo de tipo selecciona el único elemento que pertenece a su padre elemento
p:only-child selecciona el único elemento hijo que pertenece a su elemento padre
p:nth-child(2) selecciona el segundo elemento hijo que pertenece a su elemento padre
:enabled:disabled El estado deshabilitado del control de formulario.
:marcado El botón de opción o la casilla de verificación está marcado.
5. ¿Cómo centrar verticalmente un div?
La primera
div está absolutamente posicionado horizontalmente y verticalmente centrado [margen: auto implementa el centrado de elementos absolutamente posicionados],
Compatibilidad: IE7 y versiones anteriores no son compatibles
div{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; }el segundo
div absolutamente posicionado horizontalmente y verticalmente centrado [espaciado negativo de margen]
Este es quizás el método de uso más popular en la actualidad.
div{ width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; }tercero
Posicionamiento absoluto de div, centrado horizontal y vertical [Transformas]
Compatibilidad: IE8 no es compatible;
div{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }cuatro
CSS ancho variable, nivel horizontal, centrado vertical
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>animation</title> <style> .father{ width: 400px; height: 400px; background-color: blue; display: flex; align-items: center; justify-content: center; } .son{ width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="father"> <div class="son">zzt</div> </div> </body> </html>El quinto tipo
Establezca el cuadro principal en el elemento de celda de tabla y use text-align:center y vertical-align:middle para lograr el centrado horizontal y vertical. Una solución más perfecta es utilizar una estructura de tres capas para simular la estructura padre-hijo.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>animation</title> <style> .father { width: 400px; height: 400px; background-color: blue; display: table-cell; vertical-align: middle; text-align: center; } .son { width: 200px; height: 200px; background-color: yellow; display: inline-block; } </style> </head> <body> <div class="father"> <div class="son">zzt</div> </div> </body> </html>sexto
Implemente el posicionamiento absoluto de subcuadros y use calc para calcular la posición
Configuración del elemento principal: posición: relativa;
Configuración del elemento secundario: posición: absoluta;
izquierda:calc((500px - 200px)/2);
arriba:calc((120px - 50px)/2);<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>对子盒子实现绝对定位，利用calc计算位置</title> <style> .father{ width: 400px; height: 400px; background-color: blue; position: relative; } .son{ width: 200px; height: 200px; background-color: yellow; position: absolute; top: calc((400px - 200px)/2); left: calc((400px - 200px)/2); } </style> </head> <body> <div class="father"> <div class="son">zzt</div> </div> </body> </html>
6. ¿Cuál es el papel de los sprites (sprites) denominados colectivamente CSS Sprites ?
1. Incluya todas las imágenes involucradas en una página en una imagen grande.
2. Utilice la combinación de imagen de fondo CSS, repetición de fondo y posición de fondo para el posicionamiento del fondo.
3. Reducir las solicitudes http para páginas web y mejorar el rendimiento de la página
4. Los Sprites CSS pueden reducir los bytes de las imágenes.
7. ¿Cuál es la diferencia entre pseudoclase y pseudoelemento?
- Los pseudoelementos son elementos reales.
- El primero son dos puntos simples, el segundo son dos puntos dobles.
<style>
li:first-child {
height: 20px;
width: 100px;
background-color: #139aff;
}
li:last-child {
height: 60px;
width: 100px;
background-color: #89ff56;
line-height: 60px;
}
p:first-of-type {
background-color: red;
}
p:last-of-type {
background-color: deeppink;
}
/*每个p标签之前新增一个Hello文本*/
.container p::before {
content: 'Hello';
}
.container p::after {
content: 'Thanks';
}
.container p::first-letter {
font-size: 32px;
}
.container p::first-line {
background-color: #f1ffad;
}
/*所有选中的元素会变色*/
.container p::selection {
background-color: #1025ff;
color: red;
}
</style>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<div>
<h1>h1文本</h1>
<p>p文本1</p>
<p>p文本2</p>
<p>p文本3</p>
<p>p文本4</p>
</div>
<div class="container">
<p> css1 </p>
<p> css2 </p>
<p> css3 </p>
<p>伪元素</p>
</div>
</body>
</html>8. Diseño del Santo Grial
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实现三栏水平布局之圣杯布局</title>
<style type="text/css">
/*基本样式*/
.left,
.right,
.main {
min-height: 300px;
}
.left {
width: 200px;
background-color: thistle;
}
.main {
background-color: #999;
}
.right {
width: 300px;
background-color: violet;
}
/* 圣杯布局关键代码 */
.left,
.main,
.right {
float: left;
position: relative;
}
.main {
width: 100%;
}
.container {
padding-left: 200px;
padding-right: 300px;
}
.left {
margin-left: -100%;
left: -200px;
}
.right {
margin-left: -300px;
right: -300px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>9. Diseño de ala volante doble
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>双飞翼布局</title>
<style>
.left,
.right,
.main {
min-height: 200px;
}
.left {
width: 200px;
background-color: thistle;
}
.main {
background: #999;
}
.right {
width: 300px;
background-color: violet;
}
/* 双飞翼布局重点 */
.left,
.main,
.right {
float: left;
}
.main {
width: 100%;
}
.main-inner {
margin-left: 200px;
margin-right: 300px;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -300px;
}
</style>
</head>
<body>
<div class="main"><div class="main-inner">中心区</div></div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
10. Limpiar los espacios entre li
El código se muestra a continuación.
<style> *{ margin: 0; padding: 0; } ul{ list-style: none; } li{ display: inline-block; width: 100px; height: 100px; background: red; } </style> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul>
Solución:
- Eliminar directamente los saltos de línea (residuos de píxeles IE1)
- Establezca el tamaño de fuente del elemento principal en 0 y restablezca el tamaño de fuente en el elemento secundario (versión inferior de compatibilidad con Safari)
- Establezca el tamaño de fuente para el elemento principal: 0; espacio entre letras: -3px y restablezca el tamaño de fuente para el elemento secundario (solución recomendada)
11. ¿Qué es BFC? ¿Cómo activar BFC?
¿Qué es BFC?
BFC (Contexto de formato de bloque). Se refiere a un área de representación a nivel de bloque independiente que tiene un conjunto de reglas de representación para restringir el diseño de los cuadros a nivel de bloque y no tiene nada que ver con el exterior del área.
Cómo activar BFC:
- El valor de float no es ninguno.
- El valor del desbordamiento no es visible.
- El valor de visualización es bloque en línea, celda de tabla, título de tabla
- El valor de la posición es absoluto o fijo.
12. Cómo limpiar flotadores
Cómo borrar flotadores https://blog.csdn.net/m0_63873004/article/details/123169197?spm=1001.2014.3001.5501
13. ¿Cuál es la diferencia entre em y rem?
- La traducción de unidades rem a valores de píxeles está determinada por el tamaño de fuente del elemento html. Este tamaño de fuente se ve afectado por la configuración de tamaño de fuente en el navegador, a menos que se anule explícitamente una unidad específica.
- Las unidades em se convierten a valores de píxeles, según el tamaño de fuente para el que se utilizan. Este tamaño de fuente se rige por el tamaño de fuente heredado del elemento principal a menos que se anule explícitamente con una unidad específica.
14. ¿Qué es el preprocesador CSS? ¿Cuáles son los preprocesadores CSS comunes? ¿Cual es la diferencia? ¿Cuáles son las ventajas y desventajas de los preprocesadores CSS?
1.¿Qué es el preprocesador CSS?
Use un lenguaje de programación especial para agregar algunas funciones de programación a CSS, use CSS como objetivo para generar archivos y luego desarrolladores solo necesitan usar este lenguaje para el trabajo de codificación, lo que puede hacer que su CSS sea más conciso y adaptable, mejor legibilidad y más fácil. mantenimiento de código y muchos otros beneficios
2. ¿Cuáles son los preprocesadores CSS comunes?
- Hablar con descaro a
- Menos
3.¿Cuál es la diferencia entre scss y less?
- El entorno de compilación es diferente.
- Los símbolos de las variables son diferentes, Less es @ y Scss es $, y el alcance de las variables también es diferente.
- Configuración de salida, Less no tiene configuración de salida, Sass proporciona 4 opciones de salida:
- Sass admite declaraciones condicionales, puede usar bucles if{}else{}, for{}, etc. Menos no lo soporta.
- Hacer referencia a archivos CSS externos
- Diferentes bibliotecas de herramientas
4. ¿Cuáles son las ventajas y desventajas de los preprocesadores CSS?
- Ventajas: mejorar la reutilización y el mantenimiento del código.
- Desventajas: se introduce el proceso de compilación y existe un cierto costo de aprendizaje.
15.¿Cuáles son los valores de visualización? ¿Explicar su papel?
en línea (predeterminado) - en línea
ninguno——ocultar
bloque - visualización de bloque
mesa - visualización de mesa
lista——lista de elementos
bloque en línea - bloque en línea
16. ¿Cuál es el valor del puesto?
static（默认）：按照正常文档流进行排列； relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位； absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位； fixed(固定定位)：所固定的参照对像是可视窗口。
17. ¿Cuáles son las nuevas características de CSS3?
1、颜色：新增RGBA、HSLA模式 2、文字阴影：（text-shadow） 3、边框：圆角（border-radius）边框阴影：box-shadow 4、盒子模型：box-sizing 5、背景：background-size,background-origin background-clip(削弱) 6、渐变：linear-gradient(线性渐变): eg: background-image: linear-gradient(100deg, #237b9f, #f2febd); radial-gradient (径向渐变) 7、过渡：transition可实现动画 8、自定义动画： animate@keyfrom 9、媒体查询：多栏布局@media screen and (width:800px) 10、border-image 11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放 12、3D转换 13、字体图标：Font-Face 14、弹性布局：flex
18. ¿Cuál es el principio para crear un triángulo con CSS puro?
El rectángulo formado por cuatro triángulos se presenta ante nuestros ojos, si sólo queremos un triángulo, ¿nos imaginamos hacer invisibles los otros tres?
.box{ width:0px; height:0px; border: 50px solid; border-color:transparent transparent transparent #ef4848; }
19. CSS3 implementa una línea delgada de 0,5 px
<style> .line { position: relative; } .line:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background-color: #000000; -webkit-transform: scaleY(.5); transform: scaleY(.5); } </style> <div class="line"></div>
20. ¿Cómo hacer que Chrome admita texto de menos de 12 píxeles?
p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例
21. ¿Por qué deberíamos inicializar los estilos CSS durante el desarrollo?
Debido a problemas de compatibilidad del navegador, diferentes navegadores tienen diferentes valores predeterminados para algunas etiquetas. Si no se inicializa CSS, a menudo ocurrirán diferencias en la visualización de la página entre los navegadores.
22. ¿Cuál es la diferencia entre la etiqueta de estilo escrita después del cuerpo y antes del cuerpo?
La página se carga de arriba a abajo, por supuesto, los estilos se cargan primero.
Escrito después de la etiqueta del cuerpo, dado que el navegador analiza el documento HTML línea por línea, analizar la hoja de estilo escrita al final (esquema o escrita en la etiqueta de estilo) hará que el navegador detenga la representación anterior y espere a que se cargue y analice el Estilo. Después de completar y volver a representar la tabla, el fenómeno FOUC puede ocurrir en IE en Windows (es decir, el problema de parpadeo de la página causado por una falla de estilo)
23. ¿Cómo se manejará el contenido que desborde el área de contenido de un elemento definido por el atributo CSS overflow?
Cuando el parámetro se desplaza, aparecerá una barra de desplazamiento.
Cuando el parámetro es automático, aparecerá una barra de desplazamiento cuando el contenido del elemento secundario sea mayor que el elemento principal.
Cuando el parámetro es visible, el contenido desbordado aparece fuera del elemento principal.
Cuando el parámetro está oculto, el desbordamiento está oculto.
24.css establece el espaciado entre caracteres
En CSS, puedes usar
letter-spacingpropiedades para establecer el espacio entre caracteres. Esta propiedad controla la distancia entre cada carácter. Puede establecer un valor negativo para acercar los personajes o puede establecer un valor positivo para alejarlos.espacio entre letras: 0,1 em;