1. ¿En qué navegadores has probado la página que has hecho? ¿Cuáles son los núcleos de estos navegadores?
IE: núcleo tridente Firefox: núcleo gecko
Safari: núcleo webkit
Opera: solía ser el kernel presto, Opera ahora ha cambiado al kernel Blink de Google Chrome
Chrome: Blink (basado en webkit, desarrollado conjuntamente por Google y OperaSoftware)
2. ¿Cuál es el papel de Doctype? ¿Cuál es la diferencia entre el modo estricto y el modo promiscuo?
<!DOCTYPE> se usa para decirle al navegador en qué modo mostrar el documento. Modo estricto: el diseño de página y el análisis JS se implementan con el estándar más alto admitido por el navegador. Modo mixto: no se implementa estrictamente de acuerdo con el estándar, se usa principalmente para ser compatible con navegadores antiguos y compatible con versiones anteriores.
3. ¿Cuáles son las ventajas del diseño div+css sobre el diseño de tablas?
Es más conveniente cuando se revisa la versión, siempre que se cambie el archivo css.
La página se carga más rápido, la estructura es clara y la visualización de la página es concisa.
La presentación está separada de la estructura.
El motor de búsqueda fácil de optimizar (seo) es más amigable, la clasificación es más fácil de mostrar.
4. ¿Cuáles son las similitudes y diferencias entre el alt y el título de img?
alt(texto alternativo): para los agentes de usuario (UA) que no pueden mostrar imágenes, formularios o subprogramas, el atributo alt se utiliza para especificar texto alternativo. El idioma del texto de reemplazo se especifica mediante el atributo lang. (En el navegador IE, alt se mostrará como información sobre herramientas cuando no haya título)
título (información sobre herramientas): este atributo proporciona información sugerida para el elemento que establece este atributo.
5. ¿Por qué es más eficaz utilizar varios nombres de dominio para almacenar los recursos del sitio web?
El caché de CDN es más conveniente para romper el límite de concurrencia del navegador
Ahorre ancho de banda de cookies
Ahorre la cantidad de conexiones del nombre de dominio principal y optimice la velocidad de respuesta de la página
Evite problemas de seguridad innecesarios
6. Describa la diferencia entre cookies, almacenamiento de sesión y almacenamiento local. ***
Los datos en sessionStorage (sesión), estos datos solo pueden ser accedidos por páginas en la misma sesión y los datos serán destruidos cuando finalice la sesión. Por lo tanto, sessionStorage no es un almacenamiento local persistente, sino solo un almacenamiento a nivel de sesión. Y localStorage se usa para el almacenamiento local persistente, a menos que los datos se eliminen activamente, los datos nunca caducarán.
La diferencia entre el almacenamiento web y las cookies
El concepto de Web Storage es similar al de las cookies, la diferencia es que está diseñado para una mayor capacidad de almacenamiento. El tamaño de la cookie es limitado, y la cookie se enviará cada vez que solicite una nueva página, lo que prácticamente desperdicia ancho de banda. Además, la cookie debe especificar el alcance y no se puede llamar a través de dominios. Además, Web Storage tiene métodos como setItem, getItem, removeItem, clear, etc. A diferencia de las cookies, los desarrolladores front-end necesitan encapsular setCookie y getCookie por sí mismos. Pero las cookies también son indispensables: la función de las cookies es interactuar con el servidor y existir como parte de la especificación HTTP, mientras que WebStorage solo nace para "almacenar" datos localmente.
7. Describa brevemente la diferencia entre src y href.
src se usa para reemplazar el elemento actual y href se usa para establecer un vínculo entre el documento actual y el recurso al que se hace referencia.
src es la abreviatura de fuente, que apunta a la ubicación de los recursos externos, y el contenido señalado se incrustará en la ubicación de la etiqueta actual en el documento; cuando se solicita el recurso src, los recursos señalados se descargarán y aplicarán al documento, como secuencias de comandos js, imágenes y marcos img y otros elementos.
<scriptsrc=”js.js”></script>
Cuando el navegador analiza este elemento, suspenderá la descarga y el procesamiento de otros recursos hasta que el recurso se cargue, compile y ejecute. Lo mismo ocurre con elementos como imágenes y marcos, similar a incrustar el recurso señalado en la etiqueta actual. Esta es también la razón por la que el script js se coloca en la parte inferior en lugar de en la cabeza.
href es la abreviatura de HypertextReference, que apunta a la ubicación del recurso de red, establece un enlace con el elemento actual (ancla) o el documento actual (enlace), si lo añadimos al documento
<linkhref=”common.css”rel=”hoja de estilo”/>
Luego, el navegador reconocerá el documento como un archivo css y descargará los recursos en paralelo sin detener el procesamiento del documento actual. Es por eso que se recomienda usar el método de enlace para cargar css en lugar de usar el método @import.
8. Los desarrolladores a menudo optimizan el rendimiento después de que se inicia el código css/js Desde el momento en que el usuario actualiza la página web, ¿dónde se suele almacenar en caché una solicitud js?
Respuesta: caché dns, caché cdn, caché del navegador, caché del servidor.
9. ¿Hay alguna forma de configurar el estilo CSS de un DOM?
Hoja de estilo externa, importando un archivo css externo
Hoja de estilo interna, coloque el código css dentro de la etiqueta <head>
Estilo en línea, defina el estilo css directamente dentro del elemento HTML
10. ¿Cuál es la diferencia entre etiquetas b y etiquetas fuertes, etiquetas i y etiquetas em?
El último tiene semántica, el primero no.
Entonces surge de nuevo la pregunta, ¿cuándo es semántica? comprensión semántica?
¡Haz lo correcto con la etiqueta correcta!
El html semántico es para estructurar el contenido de la página, lo cual es conveniente para que los navegadores y los motores de búsqueda lo analicen; también se muestra en un formato de documento sin estilo CCS, y es fácil de leer. Los rastreadores de los motores de búsqueda se basan en etiquetas para determinar el contexto y el peso de cada palabra clave, lo cual es bueno para el SEO. Haga que sea más fácil para las personas que leen el código fuente dividir el sitio web en bloques, lo cual es fácil de leer, mantener y comprender.
Etiquetas semánticas y de mejor contenido, como encabezado, navegación, pie de página, aparte, artículo, sección, etc.
11. ¿Qué es BFC?
BFC (contexto de formato de nivel de bloque), un cuadro que crea un nuevo BFC se presenta de forma independiente, y el diseño de los elementos dentro del cuadro no afecta a los elementos fuera del cuadro. Dos cuadros adyacentes en el mismo BFC tienen el problema de superposición de márgenes en la dirección vertical. BFC significa que se crea un área de representación independiente en el navegador. El diseño de todos los elementos en esta área no afectará el diseño de los elementos fuera del área. Esta área de representación solo funciona en elementos a nivel de bloque.
12. Introducción al modelo de caja:
Modelo de caja estándar W3C
Ancho en CSS = ancho del contenido
La altura (height) en CSS = la altura del contenido (contenido)
Ancho real de div=ancho+(relleno+borde+margen)*2
Alto real de div=alto+(relleno+borde+margen)*2
Modelo de caja de IE (también conocido como modelo de caja extraña) Ancho
de CSS (ancho) = contenido (contenido) ancho + (borde + relleno) * 2
Alto de CSS (ancho) = contenido (contenido) alto + (borde + relleno) * 2
div ancho real = ancho + margen2
div altura real = alto + margen2
13. ¿Por qué desea inicializar el estilo?
Debido a problemas de compatibilidad del navegador, diferentes navegadores tienen diferentes valores de estilo predeterminados para las etiquetas. Si no se inicializa, causará diferencias de visualización entre diferentes navegadores, pero inicializar CSS tendrá un pequeño impacto en la optimización del motor de búsqueda.
14. ¿Qué son los elementos en línea? ¿Qué son los elementos a nivel de bloque? ¿Cuáles son los elementos vacíos (vacíos)?
(1) La especificación CSS estipula que cada elemento tiene un atributo de visualización para determinar el tipo del elemento, y cada elemento tiene un valor de visualización predeterminado. Por ejemplo, el valor de atributo de visualización predeterminado de div es "bloque", que se convierte en un elemento de "nivel de bloque", el valor de atributo de visualización predeterminado de span es "en línea", que es un elemento "en línea".
(2) Los elementos en línea son: ab span img input select strong
Los elementos a nivel de bloque son: div ul ol li dl dt dd h1 h2 h3 h4…p
(3) Elementos vacíos conocidos: <br><hr><img><input><link><meta> Poco conocidos: <area><base><col><command><embed><keygen><param><source><track><wbr>