Entrevista de trabajo front-end preguntas relacionadas con HTML

Entrevista de trabajo front-end preguntas relacionadas con HTML

• P: doctype¿Cuál es el papel de (tipo de documento)?

  R: En HTML doctypetiene dos propósitos principales.

  • Verifique la validez del documento:

  Le dice al agente de usuario y al validador en qué DTD se escribió este documento. Esta acción es pasiva. Cada vez que se carga la página, el navegador no descargará el DTD y verificará la legitimidad. Solo se habilita cuando la página se verifica manualmente.

  • Determine el modo de representación del navegador:

  Para la operación real, informe al navegador qué algoritmo de análisis usar al leer el documento. Si no está escrito, el navegador analizará el código de acuerdo con sus propias reglas, lo que puede afectar seriamente el diseño HTML. Hay tres formas para que los navegadores analicen documentos HTML.

  • Modo no extraño (estándar)
  • Modo extraño
  • Modo parcialmente extraño (casi estándar)

  Acerca del modo de documento del navegador IE, modo navegador, modo estricto, modo extraño, etiqueta DOCTYPE, ¿puede leer el modo en detalle ? Standard! Contenido.

• P: ¿Cuál es la diferencia entre el modo estándar y el modo extraño del navegador?

  R: La página "Modo de estándares" se procesa de acuerdo con la definición de HTML y CSS, mientras que el "Modo peculiar" es el navegador diseñado para ser compatible con la versión anterior del navegador desde hace mucho tiempo, y no sigue estrictamente el W3C Un modo de representación de página resultante de páginas web estándar. El navegador decide qué modo de representación usar en función de la existencia de la descripción del tipo de archivo en la página; si hay una completa, DOCTYPEel navegador usará el modo estándar, y si falta, el navegador usará el modo extraño.

  Se recomienda leer para profundizar la comprensión: el impacto del modo Quirks en las páginas HTML . Aquí está la diferencia entre el modo estándar y el modo extraño del navegador:

  1. Modelo de caja:

     En el modo extraño, el modelo de caja es el modelo de caja IE en lugar del modelo de caja W3C en modo estándar: en el modelo de caja IE,
     ancho de caja = ancho de contenido + relleno izquierda + relleno derecha + borde izquierda + borde derecha,
     altura de caja = altura de contenido + relleno superior + relleno inferior + borde superior + borde inferior.
     En el modelo de caja estándar W3C, el tamaño de la caja es el tamaño del contenido.

  2. Alineación vertical de elementos de imagen:

     Para inlineelementos y table-cellelementos, el valor predeterminado del atributo de alineación vertical en el modo de estándares de IE es baseline. Y cuando inlineel contenido del elemento es solo una imagen, como tableuna celda table-cell. En el modo no estándar IE, tablefoto celda vertical-alignpor defecto de propiedad bottom, por lo tanto, habrá varias espacio de píxeles en la parte inferior de la imagen.

  3. <table>Fuentes en elementos:

     CSS, una descripción de fontla propiedad tiene font-family,, font-size, font-style, font-weighlas propiedades anteriores son heredables. En el modo Quirks IE, para tableelementos, algunas propiedades serán eliminadas de la fuente bodyo de otros elementos cerrados heredados table, en particular font-sizela propiedad.

  4. Dimensiones de elementos en línea:

     En el modo de Normas IE, tamaño elemento no sustituido en línea no se puede personalizar, y en IE Quirks modo, la definición de estos elementos widthy heightatributos que pueden afectar a los tamaños de los elementos de visualización.

  5. El porcentaje de altura del elemento:

     El porcentaje de altura del elemento en CSS se especifica de la siguiente manera: el porcentaje es la altura del bloque que contiene el elemento y no puede ser un valor negativo. Si la altura del bloque contenedor no se proporciona explícitamente, este valor es equivalente a "auto" (es decir, depende de la altura del contenido). Por lo tanto, la altura del porcentaje debe usarse cuando el elemento padre tiene una altura declarada.

     Cuando un elemento usa una altura porcentual, en el modo de estándares de IE, la altura depende de los cambios de contenido, mientras que en el modo peculiar, la altura porcentual se aplica correctamente.

  6. Manejo del desbordamiento del elemento:

     En el modo estándar de IE, se overflowtoma el valor predeterminado visible, es decir , el desbordamiento es visible. En este caso, el contenido del desbordamiento no se recortará y se mostrará fuera del cuadro del elemento. En el modo Quirks, el desbordamiento se trata como una extensión box, es decir, el tamaño del elemento está determinado por su contenido, el desbordamiento no se recortará y el marco del elemento se ajustará automáticamente para contener el contenido del desbordamiento.

  Consulte también la lectura: https://www.cs.tut.fi/~jkorpela/quirks-mode.html

• P: ¿Cuáles son las limitaciones de usar XHTML?

  • ¿Hay algún problema si la página usa 'application / xhtml + xml'?

  R: La sintaxis de xhtml es estricta, y debe existir head, bodycada dom debe estar cerrado. Las etiquetas vacías también deben estar cerradas. Por ejemplo <img />, <br/>, <input />y similares. También use comillas dobles en el valor del atributo. Una vez que se encuentra un error, el análisis se detiene inmediatamente y se muestra un mensaje de error.
  Si la página usa 'application / xhtml + xml', algunos navegadores antiguos serán incompatibles.

• P: Si el contenido web necesita admitir varios idiomas, ¿qué haría?

  • ¿Qué problemas debe tener en cuenta al diseñar y desarrollar sitios web multilingües?

  R: Para la codificación UTF-8, el nombre de dominio debe admitir múltiples direcciones de navegación y preparar múltiples conjuntos de plantillas.
  Al diseñar y desarrollar sitios web multilingües, debe tener en cuenta

  • Selección del juego de caracteres de la aplicación
  • Hábitos de escritura de idiomas y estructura de navegación
  • Sitio web basado en bases de datos
  • El cuadro css aparecerá desalineado debido a los diferentes tamaños de contenido.

• P: data-¿Cuál es el papel de los atributos?

  R: data-Proporcione propiedades personalizadas para desarrolladores front-end. Estos conjuntos de propiedades se pueden obtener a través de las datasetpropiedades del objeto. Los navegadores que no admiten esta propiedad pueden getAttributeobtenerlos a través del método:

  <div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>

  div.dataset.commentNum; // 10

  Cabe señalar que los data-atributos compuestos de varias palabras separadas por guiones luego usan el estilo de joroba cuando se adquieren. No todos los navegadores admiten datasetpropiedades, solo Chrome y Opera son compatibles con los navegadores probados.

  Es decir: cuando no hay atributos y elementos adecuados, el atributo de datos personalizados son los datos personalizados privados que pueden almacenar la página o la aplicación.

  Los atributos de datos personalizados están destinados a almacenar datos personalizados privados para la página o aplicación, para los cuales no hay más atributos o elementos apropiados.

• P: Si piensa en HTML5 como una plataforma abierta, ¿cuáles son sus componentes básicos?

  A: plataforma de red abierta:

  Open Web Platform es la colección de tecnologías abiertas (libres de regalías) que habilita la Web. Al utilizar la Plataforma web abierta, todos tienen derecho a implementar un componente de software de la Web sin requerir aprobaciones ni exención de tarifas de licencia.

  Open Web Platform es una colección de tecnologías abiertas (libres de derechos de autor) que han activado Internet. Cuando se utiliza una plataforma de red abierta, todos tienen derecho a implementar un componente en la Web sin pedir permiso ni certificados a nadie.

  Considere HTML5 como una plataforma web abierta, ¿cuáles son sus componentes básicos? Creo que el llamado bloque de construcción se refiere a la tecnología en la colección de tecnología de plataforma de red abierta.

  • HTML
  • JUICIO
  • CSS
  • SVG
  • MathML
  • API web
    
    
    • Canvas WebGL
    • Audio
    • Almacenamiento web
    • Archivo, Sistema de archivos
    • Historial, contenido Editable, Arrastrar y soltar, Comandos de edición de HTML
    • Tomas web
    • Trabajadores web
    • Eventos de envío del servidor
    • XMLHttpRequest
    • Geolocalización, Orientación del Dispositivo
    • Eventos DOM, eventos táctiles, eventos de progreso
    • Desarrollo de aplicaciones a medida
    • Portapapeles y eventos
    • Notificaciones web, mensajería web
    • Aplicaciones Web Offine
    • API de captura de medios
    • Control de tiempo para animaciones basadas en guiones, Visibilidad de página, Navegación + Tiempo, Tiempo de recursos
    • Selectores
    • Recorrido del DOM, DOM XPath, Recorrido del elemento
    • EcmaScript / JavaScript
    • HTTP
    • URI
    • Lista de verificación de accesibilidad a medios

  La respuesta se cita de: http://witcher42.github.io/2014/06/03/open-web-platform/

• P: ¿Describa la diferencia entre cookies, sessionStorage y localStorage?

  R: sessionStorage y localStorage son proporcionados por HTML5 Web Storage API, que puede guardar convenientemente datos entre solicitudes web. Con los datos locales, puede evitar la transferencia innecesaria de datos entre el navegador y el servidor.

  SessionStorage, localStorage y cookie son todos datos almacenados en el lado del navegador. El concepto de sessionStorage es muy especial, presentando el concepto de una "ventana del navegador". sessionStorage son datos que siempre existen en la misma ventana (o pestaña) de la misma fuente. En otras palabras, mientras la ventana del navegador no esté cerrada, incluso si actualiza la página o ingresa a otra página con la misma fuente, los datos aún existen. Después de cerrar la ventana, se destruye sessionStorage. Al mismo tiempo, se abrieron diferentes ventanas "independientemente", incluso en la misma página, el objeto sessionStorage también es diferente

  Las cookies serán enviadas al servidor. Los dos restantes no lo harán.

  Microsoft señaló que Internet Explorer 8 aumentó el límite de cookies a 50 por nombre de dominio, pero IE7 también parece permitir 50 cookies por nombre de dominio. Firefox tiene un límite de 50 cookies por dominio. Opera tiene un límite de 30 cookies por dominio. Firefox y Safari permiten cookies de hasta 4097 bytes, incluido el nombre, el valor y el signo igual. Opera permite cookies de hasta 4096 bytes, que incluyen: nombre, valor y signo igual. Internet Explorer permite cookies de hasta 4095 bytes, incluidos: nombre, valor y signo igual.

  • Galleta
    
    
    • La capacidad de almacenamiento de cada nombre de dominio es relativamente pequeña (diferentes navegadores, aproximadamente 4K)
    • La capacidad de almacenamiento de todos los nombres de dominio es limitada (diferentes navegadores, aproximadamente 4K)
    • Hay un límite (diferente para cada navegador)
    • Se enviará al servidor con la solicitud
  • Almacenamiento local
    
    
    • Almacenamiento permanente
    • La capacidad de almacenamiento de un solo nombre de dominio es relativamente grande (se recomiendan 5 MB, diferentes para cada navegador)
    • Número total ilimitado
  • SessionStorage
    
    
    • Solo válido en sesión
    • Mayor capacidad de almacenamiento (recomendado sin límite, pero de hecho diferentes navegadores)

• Describir GETy POSTdiferencias?

  A: Las diferencias son las siguientes:

  • obtener datos de solicitudes del recurso especificado, los datos solicitados se agregarán a la URL, es decir, los datos se colocan en la línea de solicitud (línea de solicitud), para dividir la URL y transferir datos, varios parámetros están conectados con &;
  • post envía los datos a procesar al recurso especificado. El método get, la solicitud de consulta se muestra en la URL, hay un límite de longitud, el método get es idempotente seguro. La solicitud de método posterior se encapsula en el cuerpo del mensaje http

Y	obtener	enviar
Atrás / Actualizar	Inofensivo	Solicitud de reenvío
Marcador	Marcable	No puedo hacer
Caché	Se puede almacenar en caché	No se puede almacenar en caché
Historia	Mantener en el historial del navegador	No guardar
Límite de longitud de datos	Límite (2048 caracteres)	Ilimitado
Seguridad	Datos expuestos en url	Relativamente seguro
Visibilidad	visible en url	Invisible

Resumen:

• Para obtener, es solicitar datos del servidor. La solicitud es visible en la URL. Su longitud es limitada (2048 caracteres). El método individual es idempotente seguro. La seguridad aquí se refiere a obtener información en lugar de modificarla. Se refiere al mismo resultado para cada solicitud.
• Para la publicación, los datos se envían al servidor y se volverán a enviar cada vez que se actualicen o se realicen copias de seguridad. Los datos de la solicitud posterior se encapsulan en el encabezado de la solicitud http.

consejos: Las respuestas a las partes anteriores son de:

• paddingme
• Witcher42
• Construcción neta de Zhengzhou