Nuevas características de HTML5 necesarias para la entrevista frontal

Lo que es HTML5: HTML5 es la próxima generación de HTML, que se convertirá en nuevos estándares para HTML, XHTML y HTML DOM. Hoy, hablemos sobre una pregunta que se me hará cada vez que la entrevista delantera sea, que es la nueva característica de HTML5. Este es el conocimiento básico que debe dominarse en el frente del aprendizaje.

HTML5 agrega algunos mejores elementos de etiquetas semánticas.

1. El elemento del artículo representa un contenido independiente que no está relacionado con el contexto, como un artículo en un blog.
2. Aparte del elemento representa contenido que no sea contenido del artículo, información asistida.
3. Header Element representa un bloque de contenido o el encabezado de toda la página de la página.
4. El elemento HGroup se usa para combinar el título de un bloque o la página completa de la página.
5. El elemento de pie de página indica un bloque de contenido o una página completa en la página.
6. Figura Elemento representa la agrupación del contenido de los medios y su título.
7. El elemento de sección representa un bloque de contenido en la página, como los capítulos.
8. Los elementos de navegación indican el enlace de navegación en la página.

1. El elemento de video se usa para definir el video.
2. El elemento de audio se usa para definir audio.
3. El elemento Canvas se usa para mostrar gráficos, que en sí no tienen comportamiento y solo una pieza de lienzo.
4. Los elementos de incrustación se utilizan para insertar varios multimedia.
5. Mark Element se usa para mostrar los reflejos.
6. El elemento de progreso se usa para mostrar el progreso de cualquier tipo de tarea.
7. Los elementos del medidor indican medidas y definen la medición dentro del rango pre -definido.
8. El elemento de tiempo se usa para mostrar la fecha o la hora.
9. Elemento de comando, indicando el botón de comando.
10. Los elementos de detalles se utilizan para mostrar la información de detalles que el usuario requiere y se puede obtener.
11. El elemento resumido se utiliza para definir títulos visibles para detectar elementos.
12. El elemento DataList se usa para mostrar listas de datos opcionales.
13. El elemento DataGrid también se usa para mostrar la lista de datos opcional, que se muestra en forma de una lista de árboles.
14. El elemento Keygen indica una clave para generar.
15. Los elementos de salida indican diferentes tipos de salida.
16. Los elementos de origen definen los recursos de los medios para elementos de los medios.
17. El elemento de menú indica la lista de menú.
18. Ruby Element representa comentarios de Ruby, los elementos RT representan la interpretación o pronunciación de los caracteres. El elemento RP se usa en Ruby Notes para definir el contenido que muestra el navegador que no admite elementos de Ruby.
19. Los elementos WBR indican conmutación suave. La diferencia del elemento BR es que el elemento BR significa que el elemento WBR significa el ancho de la ventana del navegador o el elemento de nivel principal. No cambie la línea, y cuando el ancho no sea suficiente, tome la iniciativa para cambiar el banco.
20. Los elementos BDI definen la dirección del texto del texto, de modo que se active desde la dirección del texto a su alrededor.
21. El elemento de diálogo indica el cuadro de diálogo o la ventana.

Algunos elementos puramente de expresión se abolen en HTML5.

Los elementos de la expresión pura son aquellos elementos que pueden ser reemplazados por CSS. Basefont, Big, Center, Font, S, Strike, TT, U, sus funciones se muestran puramente para la pantalla de la página.

Para los elementos de la marca, los elementos de marco y los elementos de Noframes, debido a que el marco del marco tiene un efecto negativo en la disponibilidad web, el marco del marco ya no es compatible con HTML5, y solo admite el marco de Iframe también también abolen los marcos, el marco y los noframes.

Para Applet, BgSound, Blink, Marquee y otros elementos, porque solo algunos soportes de navegador, especialmente los elementos BGSOUND y los elementos de marquesina, solo son compatibles con IE, se abolen en HTML5. Los elementos del applet se pueden reemplazar por elementos de incrustación u elementos de objeto, los elementos BGSOUND pueden ser reemplazados por el elemento de audio y la marquesina puede ser reemplazada por la programación de JavaScript.

El elemento de lona mencionado anteriormente puede proporcionar un lienzo para que la página muestre el gráfico. Combinado con la API de lona, ​​puede generar y mostrar dinámicamente varios gráficos, gráficos, imágenes y animaciones en este lienzo. El lienzo es esencialmente gráfico. No es necesario usar cada gráfico como almacenamiento de objetos, y el rendimiento del rendimiento es muy bueno.

Use la API de lienzo para dibujar primero el contexto del elemento Canvas, y luego use las diversas funciones de dibujo encapsuladas en el contexto para dibujar.

 <Canvas ID = Canvas> Contenido alternativo </able> <script> var lienvas = document.getElementById ('Canvas'); / La práctica muestra que el estilo de relleno predeterminado es el contexto negro.

SVG es otra función gráfica de HTML5. HTML5 presenta el SVG de la Unión Interior para que los elementos SVG puedan aparecer directamente en la marca HTML.

 <svg altura = 100 ancho = 100> <círculo cx = 50 cy = 50 r = 50 /svg>

La aparición de elementos de audio y video ha hecho que las aplicaciones de medios HTML5 sean más opciones. Para estos dos elementos, la especificación HTML5 proporciona una API general, completa y controlada por script.

Antes de que salga la especificación HTML5, la forma típica de reproducir videos en la página es usar Flash, QuickTime o Windows Media Plug -in para incrustar el audio y el video en HTML. Etiquetas.

1. Como función del soporte nativo del navegador, no es necesario instalar los nuevos elementos de audio y video.
2. Los elementos de los medios desean que la página web proporcione API que sean universales, integradas y controladas por script.

 <video src = video.webm controls> <object data = videOplayer.swf type = Application /X-ShockWave-Flash> <Param name = Movie Value = Video.swf /> < /Object> Su navegador no es compatible con el video HTML5. </video>

Si la detección del navegador admite elementos de audio o elementos de video es la forma más simple de crearlo dinámicamente con los scripts y luego detectar si existen funciones específicas.

 var Hasvideo = !!

La API de geolocalización HTML5 (API de posicionamiento geográfico) puede pedir a los usuarios que compartan su posición. El método de uso es muy simple. . La información de ubicación consiste en latitud, coordenadas de longitud y algunos otros metadatos.

La API de Geolocation no especifica qué tecnología subyacente utilizar el usuario para ubicar la aplicación de la aplicación. En cambio, solo se usa para recuperar la API de la información de ubicación, y los datos recuperados a través de la API solo tienen un cierto grado de precisión, y no puede garantizar que la ubicación de los rendimientos del dispositivo sea precisa. El dispositivo puede usar la siguiente fuente de datos:

1. Dirección IP

   Coordenadas de tres dimensiones

   GPS

   Direcciones MAC de RFID, WiFi y Bluetooth a Wifi

2. ID de teléfono GSM o CDMA
3. Datos personalizados del usuario

 // Actualizar navegación. // precisión var timestamp = posicion.coords.timestamp; Ubicación actualización navigator.geolocation.clearWatch (watchId);

Para consideraciones de seguridad, la comunicación entre el marco, las pestañas y las ventanas en el mismo navegador se ha restringido estrictamente. Sin embargo, en realidad, hay una demanda razonable para el contenido de diferentes sitios para interactuar en el navegador. En este caso, si el navegador puede proporcionar un mecanismo de comunicación directa, estas aplicaciones pueden estar mejor organizadas.

Se introduce una nueva característica en HTML5, comunicación de mensajes de documento cruzado, que puede garantizar que el iframe, las páginas de pestañas y las ventanas se lleven a cabo de manera segura. PostMessage API es el método estándar para enviar mensajes.

 Window.PostMessage ('Hello, World', 'http://www.example.com/');

Al recibir el mensaje, solo necesita agregar una función de procesamiento de eventos a la página. Cuando llega un mensaje, se determina que la fuente del mensaje decide si lidiar con el mensaje.

 Window.AdDeventListener (Mensaje, MessageHandler, True); t Reconocer // El mensaje se ignora}}

El evento de mensaje es un evento DOM con datos (datos) y atributos de origen. El atributo de datos es el mensaje real aprobado por el remitente, y el atributo de origen es la fuente de envío.

La API XMLHTPRequest hace posible la tecnología Ajax. Hay dos aspectos principales:

1. Cross -Source xmlhttprequest
2. Progreso

En el pasado, XMLHTTPRequest se limitaba a la comunicación homóloga, y XMLHTTPRequest Level2 se dio cuenta de la transnacional XMLHTTPRequest a través de Cors. La solicitud HTTP de fuente cruzada contiene un cabezal de origen, que proporciona al servidor la información de origen de las solicitudes HTTP.

WebSockets es la función de comunicación más potente en HTML5.

Para establecer una comunicación WebSockets, el cliente y el servidor actualizan el protocolo HTTP al protocolo WebSocket cuando se dan las manos. Una vez que la conexión se establece correctamente, podemos pasar el mensaje WebSocket de un lado a otro entre el cliente y el servidor en el modo completo de trabajo de doble trabajo.

Además de la definición del protocolo de WebSockets, la especificación también define la interfaz WebSocket para la aplicación JavaScript. El uso de la interfaz WebSockets es muy simple. Para conectar el host remoto, solo necesita crear una nueva instancia de WebSocket para proporcionar un par de URL que esperan conectarse.

1. Tel Element, que indica el número de teléfono.
2. El elemento de correo electrónico indica el cuadro de texto de la dirección de correo electrónico.
3. El elemento URL indica la URL de la página web.
4. Elemento de búsqueda, para motores de búsqueda, como el cuadro de búsqueda que se muestra en la parte superior del sitio.
5. Elemento de rango, selector numérico en un rango específico, la pantalla típica son las barras deslizantes.
6. El elemento número contiene solo campos de valores.

1. Elemento de color, selector de color, basado en la paleta de colores o la placa para colorear para la selección.
2. El elemento DateTime muestra la fecha y la hora completas, incluida la zona horaria.
3. DateTime-Local, Fecha y hora de visualización.
4. Elemento de tiempo, selector de tiempo e indicador de la zona horaria.
5. Elemento de fecha, selector de fecha.
6. Elemento de la semana, seleccionador semanal en un año determinado.
7. Month Element, un selector mensual en un año determinado.

Cuando el usuario no tiene el valor de entrada, el control de entrada puede mostrar una descripción descriptiva o información de solicitud al usuario a través de la función de marcador de posición.

 <input name = name PlaceLearter = First y apellido>

El navegador puede saber si el valor de entrada debe conservarse a través de autocompletar.

A través de las características de enfoque automático, puede especificar un elemento de tabla para obtener el enfoque de entrada.

El control de entrada con el contenido de texto y la propiedad SpecialCheck de control espacial TextAREA. Después de la configuración, le preguntará al navegador si debe dar retroalimentación de los resultados de la inspección de la ortografía. Se debe asignar el atributo de corrección de hechizos.

Al combinar con las características de la lista y los elementos de datos, los desarrolladores pueden construir una lista de selección de valor para un control de tipo de entrada.

 <DataList ID = ContactList> <Opción [email protected]> </ppection> <opción [email protected]> </ppection> </shalist> <input type = ID de correo electrónico = Lista de contactos>

Al establecer las características MIN y MAX, el rango de entrada de valor del cuadro de entrada de rango puede limitarse entre el valor mínimo y el más alto. Puede configurar solo uno o dos o dos, o no puede configurarlo.

Para los controles de tipo de entrada, la configuración de sus características de paso puede especificar la granularidad del valor de entrada creciente o disminuido.

Una vez que se establece una característica requerida para un control de tipo de entrada, entonces este elemento debe llenarse, de lo contrario el formulario no se puede enviar.

Si el elemento arrastrable del elemento web es verdadero, este elemento se puede arrastrar.

 <Div draggable = true> draggable div </div>

El proceso de arrastre activará muchos eventos, principalmente en lo siguiente:

1. DragStart: el elemento de la página web se activa al arrastrar.
2. Arrastre: el elemento arrastrado continúa activándose durante el arrastre.
3. Dragenter: cuando se activa el elemento arrastrado al ingresar al elemento de destino, el evento debe escucharse al elemento de destino.
4. Dragleeave: cuando se activa el elemento arrastrado, el evento debe escucharse al elemento de objeto.
5. DRAWOVER: se dispara continuo cuando el elemento de arrastre permanece en el elemento de destino, y el evento debe escucharse al elemento de destino.
6. Drap: arrastre el elemento o el archivo seleccionado del sistema de archivos, se desencadene al arrastrar y caer.
7. DRAGEND: el elemento de la página web se activa al final.

 DragGableElement.AdDeventListener ('dragStart', function (e) {console.log ('¡Drag Start!');});

Durante el arrastre, los parámetros del evento aceptados por la función de devolución de llamada tienen un atributo DataTransfer, apuntando a un objeto, incluida varias información relacionada con el arrastre.

 DraggableElement.adDeventListener ('dragStart', function (event) {event.datatransfer.setData ('text', '¡Hola mundo!');});

1. DROPEFECT: el tipo de operación de arrastrar y soltar determina cómo muestra el navegador la forma del mouse.
2. Efectado: especificando las operaciones permitidas, los valores posibles son Copiar, Mover, Link, Copylink, CopyMove, LinkMove, All, None, y no inicializado (el valor predeterminado es equivalente a todos, es decir, permitiendo todas las operaciones).
3. Archivos: contiene un objeto Filelist, que indica el archivo involucrado en la arrastre y la caída, que se usa principalmente para procesar archivos arrastrados al navegador desde el sistema de archivos.
4. Tipos: el tipo de datos almacenados en el objeto DataTransfer.

1. SetData (formato, datos): almacene datos en el objeto DataTransfer. El primer formato de parámetro se utiliza para especificar el tipo de datos de almacenamiento, como texto, URL, texto/HTML, etc.
2. GetData (formato): tome los datos del objeto DataTransfer.
3. ClearData (formato): Borre los datos almacenados por el objeto DataTransfer. Si se especifica el parámetro de formato, solo se borra los datos del formato, de lo contrario, todos los datos se eliminan.
4. SetDragImage (ImageLement, X, Y): especifique la imagen que se muestra durante el proceso de arrastre. Por defecto, muchos navegadores muestran una versión semi -transparente del elemento de arrastre. El parámetro imgelement debe ser un elemento de imagen, no la ruta de la imagen, y el parámetro x e y indican la posición de la imagen para el mouse.

JavaScript es un solo hilo. Por lo tanto, el cálculo de una larga duración, volver a bloquear el hilo de la interfaz de usuario, lo que hace que el texto llene el texto en el cuadro de texto, haga clic en el botón, etc., y en la mayoría de los navegadores, a menos que se devuelva el control, no puede abrir una nueva página de pestaña. La solución de este problema es Web Worker, que permite que las aplicaciones web tengan capacidades de procesamiento de fondo, y su soporte para múltiples hilos es muy bueno.

Sin embargo, el script ejecutado en los trabajadores web no puede acceder al objeto de la ventana en la página, es decir, los trabajadores web no pueden acceder directamente a la página web y a la API DOM. Aunque los trabajadores web no hacen que la interfaz de usuario del navegador deje de responder, aún consumirá el ciclo de la CPU, lo que resulta en una velocidad de respuesta más lenta.

El almacenamiento web es una característica muy importante introducida por HTML5.

SessionStorage guarda datos en sesión, y el navegador apaga los datos para desaparecer.

LocalStorage siempre ha guardado datos en el cliente, a menos que se elimine manualmente, se mantendrá.

Ya sea SessionStorage o LocalStorage, la API que se puede usar es la misma.

1. Guardar datos: localstorage.setItem (clave, valor);
2. Leer datos: LocalStorage.getItem (clave);
3. Eliminar un solo datos: localstorage.removeItem (clave);
4. Eliminar todos los datos: localstorage.clear ();
5. Clave para obtener un cierto índice: localStorage.Key (índice);

Lo anterior es todo el contenido de este artículo.