¿Cómo entiendes la semantización de la estructura HTML?

  • 1. Cuando se eliminan o se pierden los estilos, permite que la página muestre una estructura clara.
  • 2. Los lectores de pantalla (si el visitante tiene discapacidad visual) "leerán" tu página web completamente según tu marcado.
  • 3. Dispositivos como PDA o teléfonos móviles pueden no renderizar la página web como los navegadores de computadoras normales (generalmente porque estos dispositivos tienen un soporte débil de CSS).
  • 4. Los rastreadores de los motores de búsqueda también dependen del marcado para determinar el contexto y el peso de cada palabra clave.
  • 5. Es muy importante que tu página sea fácil de entender para los rastreadores, porque estos ignoran en gran medida el marcado destinado a la presentación y solo prestan atención al marcado semántico.
  • 6. Facilita el desarrollo y mantenimiento en equipo.

Modo estricto y modo extraño (quirks mode) de la declaración de documento Doctype. ¿Cómo se activan estos dos modos? ¿Qué importancia tiene distinguirlos?

1. Cómo activar los dos modos

Agregar la declaración XML en el encabezado puede activar el modo Quirks de IE. Una vez activado, la forma en que el navegador analiza es igual a la de IE5.5, con los mismos bugs y otros problemas de IE5.5, y también en el comportamiento (JavaScript).

2. Activación en IE6: agregar la declaración XML antes del DOCTYPE de XHTML.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3. Activación en IE7: agregar un comentario HTML entre la declaración XML y el DOCTYPE de XHTML.

<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4. Se puede activar tanto en IE6 como en IE7: agregar un comentario HTML en el encabezado del documento DOCTYPE de HTML4.01.

<!-- quirks mode -->  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

5. Agregar en la parte superior de la página <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> , se activará el "modo extraño" (quirks mode).

6. Cuando no se usa la declaración DTD o se usa una declaración DTD por debajo de HTML4 (sin incluir HTML4), prácticamente todos los navegadores presentan la página en modo quirks.

Habla sobre qué se debe considerar para hacer un buen SEO desde la perspectiva del front-end.

  • 1. Comprender cómo los motores de búsqueda rastrean e indexan las páginas web.
  • 2. Optimización de las etiquetas Meta.
  • 3. Cómo seleccionar palabras clave y colocarlas en la página web.
  • 4. Conocer los principales motores de búsqueda.
  • 5. Los principales directorios de Internet.
  • 6. Motores de búsqueda de pago por clic.
  • 7. Registro en motores de búsqueda.
  • 8. Intercambio de enlaces y popularidad de enlaces (Link Popularity).
  • 9. Uso adecuado de las etiquetas.

Sabemos que podemos introducir archivos CSS mediante enlaces externos. Habla sobre qué formas hay de importar CSS externamente. ¿Hay diferencias de rendimiento entre estas formas?

Las formas más comunes de importar CSS son tres:

  • Primera: agregar en la sección head<link rel="stylesheet" type="text/css" href="my.css.html"/>, importar el archivo CSS externo.
  • Segunda: agregar en la sección head
    <style type="text/css"> 
div{margin: 0;padding: 0;border:1px red solid;} 
</style>
  • Tercera: agregar directamente en las etiquetas de la página.<div style="border:1px red solid;">

¿Qué es CSS Sprite? Habla sobre las ventajas y desventajas de esta técnica.

A CSS sprites, en China mucha gente lo llama "duende CSS" (duende CSS), es un método de procesamiento de imágenes en páginas web. Permite incluir todas las imágenes dispersas de una página en una sola imagen, reduciendo el número de solicitudes al servidor y aumentando la velocidad de acceso.

1. Ventajas:

  • (1) El uso de CSS Sprites puede reducir eficazmente las solicitudes HTTP de la página web, mejorando así en gran medida el rendimiento de la página. Esta es la ventaja de CSS Sprite y también la razón principal de su amplia difusión y aplicación.
  • (2) Resuelve la molestia del diseñador web a la hora de nombrar imágenes. Solo necesita nombrar una imagen combinada, no es necesario nombrar cada pequeño elemento, mejorando así la eficiencia de producción de la página web.
  • (3) Cambiar el estilo es conveniente. Solo necesita modificar el color o el estilo de una o pocas imágenes, y el estilo de toda la página web puede cambiar. También es muy fácil de mantener.

2. Desventajas:

  • (1) Al fusionar imágenes, debes combinar varias imágenes de manera ordenada y razonable en una sola, y dejar suficiente espacio para evitar que se muestren fondos innecesarios dentro del bloque. Esto todavía no es problema; lo más doloroso es en páginas adaptativas en pantallas anchas de alta resolución. Si tu imagen no es lo suficientemente ancha, el fondo se rompe fácilmente.
  • (2) CSS Sprites es bastante problemático durante el desarrollo. Debes medir y calcular con Photoshop u otras herramientas la posición exacta de cada unidad de fondo. Es un trabajo de precisión, no tiene dificultad, pero es muy tedioso.
  • (3) CSS Sprites es problemático de mantener. Si el fondo de la página tiene pequeños cambios, generalmente se debe modificar la imagen combinada. Lo que no necesita modificarse, es mejor no tocarlo, para evitar cambiar más CSS. Si no cabe en el lugar original, solo se puede (o mejor) agregar la imagen hacia abajo; así, el tamaño de la imagen aumenta y también hay que modificar el CSS.

Define un borde redondeado reconocido por navegadores con motor WebKit según el estándar CSS3 (tamaño arbitrario).

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;

¿Cuáles son los elementos en línea? ¿Cuáles son los elementos de bloque? ¿El modelo de caja de CSS?

  • Los elementos en línea son: a b span I em img input select strong.
  • Los elementos de bloque son: div ul ol li dl dt dd h1 h2 h3 h4 p.
  • Modelo de caja: margin, border, padding, width.

¿De qué tres capas se compone una página front-end? ¿Cuáles son? ¿Cuál es su función?

La página web se divide en tres capas: capa de estructura, capa de presentación y capa de comportamiento.

  • 1. La capa estructural de la página web (structural layer) es creada por lenguajes de marcado como HTML o XHTML. Las etiquetas, es decir, esas palabras que aparecen entre corchetes angulares, aportan significado semántico al contenido de la página; estas etiquetas no contienen ninguna información sobre cómo mostrar el contenido. Por ejemplo, la etiqueta P expresa esta semántica: "Esto es un párrafo de texto."
  • 2. La capa de presentación de la página web (presentation layer) es creada por CSS. CSS responde a la pregunta de "cómo mostrar el contenido".
  • 3. La capa de comportamiento de la página web (behavior layer) es responsable de responder a la pregunta de "cómo debe reaccionar el contenido a los eventos". Este es el ámbito dominado por el lenguaje JavaScript y el DOM.

¿Cuál es la diferencia entre GET y POST en el método action del formulario en HTML?

  • 1. GET se utiliza para obtener datos del servidor, mientras que POST se utiliza para enviar datos al servidor.
  • 2. GET añade los datos del formulario en forma de variable=value después de la URL especificada por action, conectándolos con "?" y cada variable con "&". POST coloca los datos del formulario en el cuerpo de datos del formulario y los transmite a la URL especificada por action, de manera que las variables y sus valores se corresponden.
  • 3. Get no es seguro, porque durante la transmisión los datos se colocan en la URL de la solicitud, y hoy en día muchos servidores, servidores proxy o agentes de usuario registran la URL de la solicitud en archivos de registro y luego la guardan en algún lugar, de modo que puede haber información privada visible para terceros. Además, el usuario también puede ver directamente los datos enviados en el navegador, y algunos mensajes internos del sistema se mostrarán al usuario. Todas las operaciones de Post son invisibles para el usuario.
  • 4. La cantidad de datos transmitidos por Get es pequeña, principalmente debido a la limitación de la longitud de la URL. Post puede transmitir una gran cantidad de datos, por lo que al subir archivos solo se puede usar Post (por supuesto, hay otra razón que se mencionará más adelante).
  • 5. Get restringe que los valores del conjunto de datos del formulario Form deben ser caracteres ASCII. Post admite todo el conjunto de caracteres ISO10646.
  • 6. Get es el método predeterminado de Form.

¿Qué diferencia hay entre id y class de los elementos HTML?

id y class son dos atributos comunes en las páginas web; trabajan juntos para hacer que toda la página sea colorida. Cuando definimos un estilo para un elemento, ambos se pueden usar, ¿pero hay diferencias?

  • 1. Al escribir en la hoja de estilos CSS, el selector de id debe tener el prefijo "#", y el selector de class debe tener el prefijo ".".
  • 2. El atributo id solo se puede usar una vez en una página, mientras que class se puede usar repetidamente.
  • 3. id, como etiqueta de elemento, se usa para distinguir diferentes estructuras y contenidos, mientras que class, como un estilo, se puede aplicar a cualquier estructura y contenido.
  • 4. Principio general en el diseño: id primero determina la estructura y el contenido, y luego define el estilo para él. class es todo lo contrario: primero define el estilo y luego aplica el estilo a diferentes estructuras y contenidos según las necesidades en la página.
  • 5. Actualmente, los navegadores permiten que aparezcan múltiples id con el mismo valor de atributo en una misma página; en general se muestra correctamente, pero cuando JavaScript controla elementos a través del id, se producen errores.
  • 6. En la práctica, class se usa a menudo para bloques de texto y decoración de páginas, mientras que id se usa más en diseños amplios y estilos de bloques contenedores o marcos contenedores.

¿Qué es Ajax?

Ajax no es una tecnología, en realidad son varias tecnologías; cada una tiene sus características únicas, y juntas forman una nueva tecnología poderosa. Ajax incluye:

  • 1. XHTML y CSS
  • 2. Uso del Modelo de Objetos del Documento (Document Object Model) para visualización dinámica e interacción.
  • 3. Uso de XML y XSLT para la interacción y manipulación de datos.
  • 4. Uso de XMLHttpRequest para la recepción asíncrona de datos.
  • 5. Uso de JavaScript para unirlas todas.

¿En qué navegadores has probado las páginas que hiciste? ¿Cuáles son los motores de estos navegadores? ¿Qué problemas de compatibilidad de navegadores encuentras a menudo? ¿Cómo aparecen? ¿Cuál es la solución?

  • 1. DOCTYPE afecta el procesamiento de CSS.
  • 2. FF: después de establecer padding, div aumenta su height y width, pero IE no lo hace, por lo tanto se necesita usar !important para establecer un height y un width adicionales.
  • 3. FF: admite !important, IE lo ignora, se puede usar !important para establecer estilos especialmente para FF.
  • 4. Problema de centrado vertical de div: vertical-align:middle; aumentar el interlineado hasta que tenga la misma altura que todo el DIV line-height:200px; luego insertar el texto, y queda centrado verticalmente. La desventaja es que hay que controlar que el contenido no haga un salto de línea.
  • 5. La interpretación inconsistente del modelo BOX en Mozilla Firefox e IE causa una diferencia de 2px. Solución: div{margin:30px!important;margin:28px;} Nota: el orden de estos dos margin no debe invertirse; IE no reconoce la propiedad !important, pero otros navegadores sí pueden reconocerla.

Almacenamiento offline de HTML5

Una característica importante de HTML5 es el almacenamiento sin conexión. El llamado almacenamiento sin conexión consiste en guardar algunos archivos de recursos localmente, de modo que las recargas posteriores de la página utilicen los archivos de recursos locales; en condiciones sin conexión se puede continuar accediendo a la aplicación web. Al mismo tiempo, mediante ciertos métodos (actualizar archivos relacionados o usar API relacionadas), se pueden actualizar, eliminar y realizar otras operaciones de almacenamiento sin conexión.

El almacenamiento sin conexión de HTML5 utiliza un archivo manifest para indicar qué archivos deben almacenarse, usando, por ejemplo,<html manifest='offline.manifest'>para introducir un archivo manifest. La ruta de este archivo puede ser relativa o absoluta. Si tienes muchas aplicaciones web y deseas gestionar los archivos manifest de forma centralizada, entonces un servidor de archivos estáticos es una buena opción.

Ventajas y desventajas de iframe.

1. Desventajas:

El mayor defecto de usar estructura de marcos en una página web es que los programas "araña" (spiders) de los motores de búsqueda no pueden interpretar este tipo de página. Cuando el programa "araña" se encuentra con una página compuesta por varios marcos, solo ve los marcos y no puede encontrar enlaces, por lo que piensa que el sitio es un sitio muerto y se marcha rápidamente. Para un sitio web, esto es un desastre. Si quieres vender productos, necesitas clientes; si quieres clientes, primero debes hacer que la gente visite tu sitio, y para lograrlo, no tienes más remedio que recurrir a los motores de búsqueda. Has gastado mucho tiempo, esfuerzo y dinero para abrir una tienda online, y luego deliberadamente no permites que los motores de búsqueda te indexen; es como abrir una tienda minorista con todas las ventanas pintadas de negro y sin ningún letrero.

2. Ventajas:

De lo anterior podemos ver que la desventaja de usar marcos iframe es que no pueden ser rastreados por los motores de búsqueda. Pero todo tiene dos caras. Esta desventaja también puede ser su ventaja. Aprovechando esto, podemos usar marcos iframe para mostrar en nuestro sitio contenido que necesitan ver nuestros usuarios pero que no necesita ser rastreado por los motores de búsqueda. De esta manera, iframe puede lograr su verdadero efecto, y además el código de nuestro sitio puede simplificarse enormemente. Por ejemplo, como mencioné anteriormente, agregar información de transmisión en vivo de Weibo. Esta información de Weibo no necesitamos proporcionársela a los motores de búsqueda, sino que lo que necesitamos proporcionar es una experiencia interactiva con los visitantes, como se muestra en la siguiente figura. Si usamos marcos iframe para incrustar la información de Weibo, no solo podemos agregar fácilmente la plataforma de transmisión en vivo de Weibo del sitio, sino que también vemos que el código es muy simplificado.

iframe tiene la ventaja de poder mostrar la página original completa sin cambios, pero si se usa en la página de inicio, es lo que más odian los motores de búsqueda. Entonces, aunque tu sitio esté muy bien hecho, no alcanzará una buena posición. Si es una página dinámica, usar include es algo mejor. Pero hay que eliminar las etiquetas <html><head><title><body>.

Ventajas de los marcos

  • Al recargar una página, no es necesario recargar toda la página, solo se necesita recargar una de las páginas de marco del sitio (esto reduce la transmisión de datos y aumenta la velocidad de descarga de la página web).
  • Es conveniente para crear barras de navegación.

Desventajas de los marcos

  • Se generan muchas páginas, lo que dificulta la gestión.
  • No es fácil de imprimir.
  • El botón de retroceso del navegador no funciona.
  • El código es complejo y no puede ser indexado por algunos motores de búsqueda.
  • La mayoría de los dispositivos móviles pequeños (PDA, teléfonos móviles) no pueden mostrar completamente los marcos.
  • Las páginas con múltiples marcos aumentan las solicitudes HTTP al servidor.
  • Debido a las muchas desventajas anteriores, no se ajusta al concepto de diseño web estándar y ya ha sido abandonado por el diseño web estándar.

Consejo: actualmente todas las ventajas de los marcos se pueden implementar completamente con Ajax, por lo que ya no es necesario usar marcos.

Principio del modelo de caja CSS.

  • 1. El alcance del modelo de caja W3C incluye margin, border, padding y content, y la parte content no incluye las otras partes.
  • 2. El alcance del modelo de caja IE también incluye margin, border, padding y content. A diferencia del modelo de caja estándar W3C, en el modelo de caja IE la parte content incluye border y padding.

Diferencia entre CSS display:none y visibility:hidden.

  • visibility:hidden oculta el elemento, pero conserva su posición al navegar.
  • display:none se considera inexistente y no se carga.

¿Qué es jQuery?

jQuery es una biblioteca de JavaScript reutilizable escrita en JavaScript.

El código JavaScript para establecer el texto de la interfaz de usuario sin usar jQuery es el siguiente:

document.getElementById("txt1").value = "hello";

El código JavaScript después de usar la biblioteca jQuery es el siguiente:

$("#txt1").val("Hello");

Se puede ver que después de usar la biblioteca jQuery, el código JavaScript es claramente mucho más conciso y también se ajusta mejor a las características de la industria de TI: corto, simple y rápido.

Relación entre jQuery y JavaScript. ¿Reemplazará jQuery a JavaScript?

  • JavaScript: es el lenguaje de script más popular de la Web.
  • jQuery: es un excelente marco de trabajo de JavaScript. Es una biblioteca de JS ligera, compatible con CSS3 y también compatible con varios navegadores (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+).

jQuery no pretende reemplazar a JavaScript. Usar jQuery simplifica el desarrollo web.

¿Cómo usar la biblioteca jQuery?

Descargue el archivo jquery.js desde jquery.com (las últimas versiones de jQuery son V1.11.1 o V2.1.1). La regla de nomenclatura de archivos de jQuery, como "jquery-1.4.1.js", donde 1.4.1 es el número de versión del archivo JS.

Antes de desarrollar un programa web, se necesita incluir el JavaScript, como en el código siguiente:

<script src="../code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

¿Qué es CDN (red de distribución de contenidos)?

Al desarrollar páginas web, uno de los problemas más considerados es la respuesta de la página en el ordenador del cliente: cuanto más corto sea el tiempo, mejor será la experiencia del usuario.

Y uno de los factores clave que restringen la experiencia del usuario es el tamaño de los archivos web que descarga el navegador, incluyendo archivos *.html, imágenes, *.js, *.css, etc.

Para maximizar la reutilización y ahorrar ancho de banda, surgió el CDN: su idea básica es evitar en lo posible los cuellos de botella y los enlaces que puedan afectar la velocidad y la estabilidad de la transmisión de datos en Internet, haciendo que la transmisión de contenido sea más rápida y estable. Su objetivo es permitir que los usuarios obtengan el contenido necesario cerca, resolver la congestión de la red de Internet y mejorar la velocidad de respuesta de los usuarios al acceder al sitio web.

¿Cómo usar jQuery CDN?

  • (1) Se recomienda usar el nodo CDN oficial, el código es el siguiente:
    <script src="../code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="../code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  • 2) También está el jQuery CDN proporcionado por Google:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  • (3) Microsoft también ofrece nodos de jQuery CDN:
    <script type="text/javascript" src="../ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"> </script>

¿Cómo acceder automáticamente al archivo jQuery del sitio web cuando la red CDN no está disponible?

En general, los nodos de la red CDN son confiables. Pero de vez en cuando pueden fallar, por lo que para ofrecer una doble garantía, se puede determinar si la carga del CDN falla y cargar automáticamente el jQuery del sitio web. El código de ejemplo es el siguiente:

<script type="text/javascript" src="../ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script> 
<script type="text/javascript">
if (typeof jQuery == 'undefined')  
{  
    document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js.html' type='text/javascript'%3E%3C/script%3E"));  
}
</script>

¿Cuál es la diferencia entre jQuery.js y jQuery.min.js de la misma versión?

  • Similitudes: estos dos archivos proporcionan las mismas funciones de jQuery, es decir, no hay diferencias en las llamadas a funciones.
  • Diferencias: el archivo jQuery.js es adecuado para que los programadores lo lean. El archivo jQuery.min.js, al comprimir y eliminar todos los espacios, ahorra ancho de banda y espacio, lo que hace que el archivo sea más pequeño y se utilice para la transmisión por red; no es adecuado para que los programadores lo lean.

¿Cuándo usar jquery.js y cuándo usar jquery.min.js?

  • En escenarios de desarrollo y depuración: use el archivo jQuery.js, porque si desea depurar, puede ver el código JavaScript.
  • En entornos de producción e implementación: use el archivo jQuery.min.js, puede reducir el ancho de banda de red y acelerar la carga de la página web.

¿Qué es el archivo jQuery.vsdoc.js?

Los archivos *.vsdoc.js se utilizan en el entorno de desarrollo de Microsoft, Visual Studio, para facilitar la obtención de la IntelliSense de jQuery. Cuando escribes una función jQuery, se mostrarán automáticamente sugerencias sobre el tipo de función, la descripción de uso de la función, los parámetros de la función, etc. Si desarrollas programas web con jQuery en VS, el archivo vsdoc.js aumentará considerablemente la eficiencia del desarrollo.

¿Cómo explicar la sintaxis básica de jQuery?

La estructura de sintaxis de jQuery se puede dividir en cuatro partes:

  • 1. De forma predeterminada, todos los comandos de jQuery comienzan con un símbolo '$'.
  • 2. Luego viene la selección del elemento HTML. Por ejemplo, a continuación seleccionamos un cuadro de texto HTML mediante el ID 'txt1'.
  • 3. Luego se separa por un punto (.). Este operador separa el elemento y la acción (función) de ese elemento.
  • 4. Finalmente, qué función (acción).

En jQuery, ¿qué representa el símbolo "$"?

En jQuery, el símbolo '$' es un alias de jQuery; la biblioteca jQuery predeterminada comienza con $.

¿Por qué usar jQuery.noConflict()?

Hay muchas bibliotecas similares a jQuery, como MooTools, Backbone, Sammy, Cappuccino, Knockout. Algunas de estas bibliotecas también usan el símbolo $; si se usan simultáneamente, se producirán conflictos de nombres.

Para resolver este conflicto, se necesita usar jQuery.noConflict(), de modo que no se dependa del símbolo predeterminado $. Por ejemplo:

jQuery.noConflict();  
(function($){

})(jQuery);

En una misma página, ¿se pueden cargar múltiples eventos document.ready?

Sí.

Tutoriales relacionados:

  • Tutorial de HTML:https://www.example.com/html/
  • Tutorial de CSS:https://www.example.com/css/
  • Tutorial de JavaScript:https://www.example.com/js/
  • Tutorial de jQuery:https://www.example.com/jquery/