Lista completa de nuevas funciones y uso de html5

Muchos amigos me enviaron mensajes privados y me preguntaron sobre las nuevas funciones y el uso de html5. Permítanme brindarles una introducción detallada a las nuevas funciones de html5.

1) Nuevas etiquetas semánticas, encabezado de pie de página, etc. 2) Formularios mejorados 2.0 3) Audio y video 4) Dibujo de lienzo 5) Dibujo SVG 6) Geolocalización 7) API de arrastrar y soltar 8) Trabajador web para realizar tareas que requieren mucho tiempo 9) web El almacenamiento almacena grandes cantidades de datos en el lado del navegador 10) web Socket es una conexión persistente (protocolo no http)

(1) No hablaré de nuevas etiquetas semánticas.

Por ejemplo <footer></footer>

(2) Formulario mejorado 2.0

1) ¡Comparación entre el nuevo tipo de entrada h4 y h5!

Tipo de entrada en H4: texto /contraseña /radio /casilla de verificación/ sybmit/ reset / archivo /oculto / imagen/

Tipo de entrada en H5: correo electrónico/url/número/tel/búsqueda/rango/color/mes/semana/fecha

2) Nuevos elementos de formulario

Elementos de formulario en H4: entrada/área de texto/selección, opción/etiqueta

Nuevos elementos de formulario en H5: lista de datos/progreso/medidor/salida

 <datalist id=lunchList> <option>Cerdo desmenuzado con salsa Beijing</option> <option>Cerdo en Guobao</option> <option>Cerdo desmenuzado con sabor a pescado</option> <option>Cerdo desmenuzado con pimiento verde</ opción> <opción >Di Sanxian</opción></datalist>

Ingrese el almuerzo que necesita ：<input type=text name=lunch list=lunchList/>

Hay dos formas:

Hay un estilo de complemento de progreso en bootstrap

 <form> Conexión de red<progreso></progreso> <br/> <!-- Entre 0-1--> Progreso de descarga <progreso id=p3 valor=0></progreso> <tipo de entrada=valor numérico =1 ></form><script type=text/javascript> /*La diferencia entre settimeout y setInterval es que settimeout se ejecuta una vez y setInterval se ejecuta cada dos veces*/ var t=setInterval(function(){ var v = p3.value; v += 0.1; p3.value = v; if(v>=1){ clearInterval(t); alerta (descarga completada);

 <cuerpo> Contenido de aceite: <id del medidor=m1 min=0 max=100 bajo=30 alto=70 óptimo=40 valor=50></metro> Valor de PM: <id del medidor=m2 min=0 max=500 bajo= 100 alto=300 óptimo=150 valor=750></meter></body>

Medidor: Pesos y medidas/escala/, usado para marcar un rango: inaceptable (rojo)/aceptable (amarillo)/muy bueno (verde)

<meter min=可取的最小值max=可取的最大值low=合理的下限值high=合理的上限值optimum=最佳值value=当前值></meter>

3) Nuevos atributos de los elementos del formulario.

1. Atributos de los elementos del formulario en H4: <entrada>

id/clase/título/tipo/valor/nombre/estilo/solo lectura/desactivado/marcado/

Nuevos atributos de elementos de formulario en H5

1) marcador de posición: los caracteres de marcador de posición no se pueden enviar como mensajes

<input value=tom placeholder=请输入用户名/>

2) enfoque automático: obtiene automáticamente el enfoque de entrada (puede ingresar sin hacer clic. Solo la primera configuración de entrada es válida)

<input autofocus>

3) múltiple: se permite que aparezcan múltiples valores de entrada en el cuadro de entrada, separados por comas [email protected], [email protected]

<input type=email name=emails multiple>

4) formulario: se utiliza para colocar el campo de entrada fuera del FORMULARIO

<form id=f5></from>

<input form=f5>

=================Nuevas propiedades relacionadas con la validación de entradas============================ = =======

Para ver un ejemplo, consulte atributos relacionados con la validación de entrada/yz.html

5)requerido: requerido, el contenido no puede estar vacío

6) maxlength: especifica la longitud máxima de la cadena

7) minlength: especifica la longitud mínima de la cadena

8) max: el valor máximo del número especificado

9) min: el valor mínimo del número especificado

10) patrón: especifique la expresión regular con la que debe coincidir la entrada

Los atributos de validación anteriores afectarán el atributo de validez del objeto js correspondiente al elemento de formulario, y el atributo de validez es el atributo de verificación.

(3) vídeo vídeo y audio

dibujo flash (AS/FLEX) =>Lienzo/SVG

animación flash => temporizador+lienzo

Reproducción de vídeo y audio => VIDEO/AUDIO

almacenamiento de cliente flash => WebStorage

H5 proporciona una nueva pestaña para reproducir vídeos:

 <video src=></video> <video src=> <fuente src=res/birds.mp4></fuente> <fuente src=res/birds.ogg></fuente> <fuente src=res/birds. webm></fuente>

¡Su navegador no soporta la reproducción de VIDEO!

</video> En sí mismo es un elemento de bloque en línea de 300 * 150. Nota: la fuente de varias líneas está escrita para ser compatible con varios navegadores. Debido a que los navegadores no admiten formatos de video de manera uniforme, algunos navegadores, como algunos, admiten el formato mp4. Si no lo admite, reproducirá el siguiente video ogg. lo admite, entonces se reproducirá, si no es compatible, continúe hacia abajo. No hay ninguna fuente a continuación, entonces significa que su navegador no admite la reproducción de VIDEO. .

Miembros comúnmente utilizados de etiqueta/objeto VIDEO:

Propiedades de miembros:

<video id=v2 src= autoplay controls loop muted poster=2.jpg preload=auto></video>

reproducción automática: falso, si se reproduce automáticamente, predeterminado controles falsos: falso, si se muestran los controles de reproducción, el valor predeterminado es falso bucle: falso, si se reproduce en bucle, el valor predeterminado es falso silenciado: falso, si se silencia la reproducción, el valor predeterminado es cartel falso: '', reproduciendo El cartel que se muestra antes del primer fotograma, que puede ser una imagen. El valor predeterminado está vacío y sin precarga: estrategia de precarga de video, valores posibles: auto: precarga los metadatos del video y un tiempo de almacenamiento en búfer determinado. No debe usarse en el teléfono móvil (tamaño/duración. Contenido del primer cuadro, tiempo de almacenamiento en búfer). (La carga previa desperdicia tráfico) metadatos: solo precarga los metadatos del vídeo (tamaño/duración, contenido del primer fotograma) sin duración del almacenamiento en búfer, adecuado para teléfonos móviles ninguno: no precarga ningún dato

-------------------------------------------------- --------------- El uso del atributo de id v2 es, por ejemplo:

v2.playbackRate=3;

currentTime: duración de la reproducción actual duración: duración total en pausa: verdadero, si el video actual está en estado de pausa, verdadero significa pausado, falso significa volumen de reproducción: 1 El valor predeterminado es 1, volumen actual velocidad de reproducción: 1, velocidad de reproducción mayor que 1 significa reproducción rápida, menos de 1 significa reproducción lenta

método de identificación v2:

play(): reproduce el video pausa(): pausa la reproducción evento miembro: onplay: un evento que se activa cuando el video comienza a reproducirse onpause: un evento que se activa cuando el video está en pausa Práctica: personaliza el botón reproducir/pausar sin usar los controles que viene con el video Mueva el mouse fuera del área de video para ocultar el botón; mueva el mouse al botón de visualización. Por ejemplo: video audio, canvas/video.html Cuando esté en pausa, se mostrará el anuncio y cuando el mouse esté. reproducido, el anuncio quedará oculto.

3. Nuevo reproductor de audio con funciones H5

 <audio src=></audio><audio src=><fuente src=res/birds.mp3></fuente><fuente src=res/birds.ogg></fuente><fuente src=res/birds. wav></fuente>

El método de atributo es el mismo que el del video, excepto que no hay ningún atributo de póster*** para determinar si la casilla de verificación está seleccionada.

 cb.onchange=function(){ this.checked true significa seleccionado, false significa no seleccionado}

(4), lienzo

Sólo hay un objeto de pincel en cada lienzo, llamado objeto de contexto de dibujo. ¡Utilice este objeto para dibujar!

var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象

Dibujo en lienzo --- ¡dificultad! ! !

1) Dibujo SVG: tecnología de dibujo vectorial, que apareció en 2000 y luego se incorporó al estándar H5 2) Dibujo en lienzo: tecnología de dibujo de mapa de bits, una tecnología de dibujo propuesta por H5 3) Dibujo WebGL: tecnología de dibujo 3D, que no. aún no se ha incorporado al estándar H5.

tecnología de dibujo en lienzo lienzo: lienzo, H5 implementa tecnología de dibujo 2D

<canvas width=500 height=400>您的浏览器不支持canvas</canvas>

La etiqueta del lienzo es un bloque en línea de 300*150 de forma predeterminada en el navegador. El ancho y el alto del lienzo solo se pueden asignar usando atributos HTML/JS, ¡no estilos CSS! Solo hay un objeto de pincel en cada lienzo, llamado objeto de contexto de dibujo. ¡Utilice este objeto para dibujar! var ctx = canvas.getContext('2d') //Ahora solo 2d obtiene el objeto lienzo en el lienzo

1) Usa lienzo para dibujar un rectángulo

dibujar un rectángulo

 ctx.lineWidth = 1 Ancho de trazo ctx.fillStyle='#000' Color de estilo de relleno ctx.strokeStyle='#000' Color de estilo de trazo ctx.fillRect(x,y,w,h //Rellena un rectángulo x , y); coordinar w, h ancho y alto ctx.strokeRect(x,y,w,h); //Trazar un rectángulo ctx.clearRect(x,y,w,h) Borrar todos los dibujos dentro de un rectángulo

2) Usa lienzo para dibujar texto

El punto de anclaje de un fragmento de texto está al comienzo de su línea base de texto.

 ctx.textBaseline = 'alphabetic' //El valor predeterminado de la línea base del texto es la tercera línea ctx.font=12px sans-serif //Tamaño y estilo de fuente ctx.fillText(str,x,y) //Rellenar ctx.strokeText (str, x, y) // Traza un fragmento de texto ctx.measureText (str) // Establece el texto de medición según el tamaño del texto y la fuente actuales, y el objeto devuelto es {ancho: x}

3) Usa lienzo para dibujar caminos

Ruta: similar a la herramienta de lápiz en PS, es una forma arbitraria compuesta de múltiples puntos de coordenadas. La ruta es invisible y se puede usar para trazar, rellenar y recortar.

 ctx.beginPath() //Iniciar una nueva ruta ctx.closePath() //Cerrar la ruta actual ctx.moveTo(x,y) //Moverse al punto especificado ctx.lineTo(x,y) //Desde el actual apunta al punto especificado Dibuja una línea recta ctx.arc(cx,cy,r,start,end //Dibuja un camino de arco//cx cy es la coordenada central del círculo xy r es el radio, el inicio es el ángulo inicial y final es el ángulo final

Ángulo: 360 = Radianes: 2PI 180 = 1PI ​​Por ejemplo

 ctx.arc(100,200,30,0,2*Math.PI)ctx.stroke(); //Trazo de ruta actual ctx.fill(); //Relleno de ruta actual ctx.clip();//Usar ruta actual Recortar //************La esquina de la conexión**********ctx.lineJoin='miter' //Aparece una esquina afilada en la conexión de la línea ctx. lineJoin='redondo' //Aparecen esquinas redondeadas en la conexión de la línea ctx.lineJoin = 'bevel' //Aparecen esquinas cuadradas en la conexión de la línea

4) Usa lienzo para dibujar imágenes.

Canvas es una tecnología del lado del cliente y la imagen está en el servidor, por lo que el navegador primero debe descargar la imagen que se va a dibujar y esperar a que la imagen se cargue de forma asincrónica:

 var img = new Images();img.src='x.png';console.log(img.width); //0 Solicitud asincrónica de imágenes img.onload=function(){console.log(img.width, img .height); // Se completa la carga de la imagen del valor // Comience a dibujar la imagen en el lienzo ctx.drawImage(img,x,y); //Dibujo de tamaño original ctx.drawImage(img,x,y,w,h //Establecer ancho y alto}

Escuche los eventos de movimiento del mouse sobre el lienzo

 ctx.onmousemove = function(e){x=e.offsetX;y=e.offsetY;console.log(x,y);}

2. Degradado en dibujo de lienzo

Degradado lineal: linealGradient Degradado radial: radialGradient Puede consultar el efecto de degradado en ps,

 var g = ctx.createLinearGradient(x1,y1,x2,y2);g.addColorStop(0,'#f00');g.addColorStop(0.5,'#ff0');g.addColorStop(1,'#0f0' );ctx.strokeStyle=g;

Dificultad: hay muchos ejes de coordenadas y palabras en el sistema de coordenadas.

3. Deformación del dibujo

 ctx.rotate(radianes) //Gira el objeto de contexto de dibujo (es decir, el pincel), el punto del eje es el origen del lienzo ctx.translate(x,y) //Traduce el origen de todo el lienzo al punto especificado ctx. sava(); //Guarda todos los valores del estado de deformación actual del pincel (desde el guardado en el juego) ctx.restore(); //Restaura el estado de deformación del pincel al guardado más reciente (lee el guardado). en el juego) ctx.save(); //Guarda la primera var de estado original. deg = 10*Math.PI/180; //El ángulo a girar se gira 10 grados ctx.rotate(deg); //Rotado ctx.drawImage(img,0,0); si el pincel está torcido Todos están torcidos ctx.restore() // El estado original se guarda al sacar el guardado.

(5) dibujo SVG

Primero comprendamos qué son los mapas de bits y los vectores. Solo entiéndelo brevemente.

Mapa de bits: se compone de píxeles uno tras otro, cada punto tiene su propio color y el color es delicado. Gráficos vectoriales: compuestos por líneas una tras otra. Cada línea puede especificar un color, una dirección y se puede escalar infinitamente, pero los detalles de color no son lo suficientemente ricos.

1. El dibujo SVG utiliza etiquetas para dibujar y puede vincular directamente detectores de eventos

 <svg ancho=300 alto=200 xmlns=http://www.w3.org/2000/svg> <rect ancho=100 alto=100></rect></svg>

2. ¡Cómo crear una etiqueta svg usando js!

 //var r1 = document.createElement('rect'); Este elemento svg no se puede crear porque tiene un límite de edad y un espacio de nombres (es decir, si esto no funciona, ¡usa el siguiente método para crearlo! !)varr1= document.createElementNS('http://www.w3.org/2000/svg','rect');r1.setAttribute('ancho','50');r1.setAttribute('alto',300);s1 .appendChild(r1);

3. Crea elipse con svg

 <svg ancho=300 alto=200 id=c6> <ellipse rx=100 ry=40 cx=100 cy=100 fill=#faa Stroke=#a00></ellipse></svg>

4. Crea una línea recta en svg

 <svg ancho=300 alto=200 id=c6> <línea x1=0 y1=0 x2=100 y2=200 trazo=#000 trazo-ancho=50 trazo-linecap=cuadrado></line></svg>

Nota: trazo-linecap=cuadrado producirá más cuadrados, trazo-linecap=redondo producirá más áreas circulares, trazo-linecap=butt no producirá más cuadrados (es decir, la línea recta que creas tiene una diferencia entre el principio ¡Y el final de estos atributos! ¡Pruébelo usted mismo y descubrirá que los detalles son importantes!)

5. Crea una polilínea usando svg

 <svg ancho=300 alto=200 id=c6> <puntos de polilínea=50,50 100,300 150,100></polyline> //Lo que sale es un triángulo <puntos de polilínea=50,50 100,300 150,100 fill=trazo transparente=#000 >< /polyline> //Lo que sale es una polilínea</svg>

6. Geolocalización (¡En el futuro no necesitamos cliente, también podremos localizarnos nosotros mismos!)

Geolocalización: Geolocalización, utilizando JS para obtener los datos de las coordenadas geográficas (longitud, latitud, altitud, velocidad) del navegador actual, utilizado para implementar aplicaciones LBS (Servicio Basado en Ubicación), como Ele.me, Amap Navigation...

Cómo obtienen los navegadores móviles información de ubicación:

1) La primera opción es el chip GPS en el teléfono móvil y la comunicación por satélite, la precisión de posicionamiento está dentro de los metros 2) La segunda opción es la estación base del teléfono móvil para la adquisición de posicionamiento, la precisión de posicionamiento está dentro de los kilómetros (ilegal) Cómo obtener información de posicionamiento a través de un navegador de PC: 1) Invertir a través de la dirección IP La precisión del análisis y posicionamiento depende del tamaño de la base de datos de direcciones IP

HTML5 proporciona un nuevo objeto para obtener la información de posicionamiento del navegador actual:

 window.navigator.geolocation{ getCurrentPosition:fn, //Obtener información de posicionamiento actual watchPosition:fn, //Monitorear cambios en los datos de posicionamiento clearWatch:fn //Cancelar monitoreo}

2. Extensión: Cómo insertar Baidu Map en una página web

1) Registre una cuenta de desarrollador de Baidu map.baidu.com ---> lbsyun.baidu.com 2) Cree un sitio web en Baidu Map y solicite una AccessKey de mapa para el sitio web 3) Incruste el mapa proporcionado por Baidu Map; en la API de su propia página web, integrada en el mapa de Baidu

¡No hablaré mucho sobre cómo insertar esto aquí! (Recuerde que debe registrar una cuenta para usar Baidu Maps y luego simplemente citar las bibliotecas de otras personas).

7. Arrastra y suelta API

Mencioné arrastrar y soltar antes: amigos, sigan adelante y busquen blogs anteriores ustedes mismos.

ocho almacenamiento

El almacenamiento consiste principalmente en cookies y sesiones (antes explicaré las diferencias y precauciones al buscar muchos métodos de escritura): recuerde que las sesiones desaparecen cuando cierra el navegador y las cookies no desaparecen cuando cierra el navegador. Nota: Se debe agregar tiempo cuando se almacena la cookie. Si no se agrega tiempo, desaparecerá después de cerrar el navegador. ¡Este almacenamiento del navegador se puede utilizar para resolver muchos problemas funcionales, como recordar contraseñas y otras funciones! !

Nueve enchufes web

¿Deberíamos hablar de esto? . . . . Hablemos de ello brevemente, todo depende de la comprensión ~~

¡Web socket es una conexión bidireccional no http que se puede establecer entre el servidor y el cliente!

Esta conexión es en tiempo real y permanente.

El servidor puede enviar mensajes activamente.

El servidor ya no necesita sondear al cliente en busca de solicitudes y la comunicación entre el servidor y el cliente no requiere restablecer la conexión.

Es decir, comunicación sostenible de ida y vuelta.

¿Cómo crearlo? Un fragmento de código está hecho.

 var webSocket = new WebSocket (ws://localhost:8005/socket); // la URL debe comenzar con ws o texto wss: porque no es http, es websocket, es su propia identificación, transmisión cifrada, solo recuérdelo . webSocket.send() //Envía datos de texto, solo se puede enviar texto. (Utilice el objeto json para convertir el objeto js en datos de texto antes de enviarlo) webSocket.close();//Cerrar y cortar la conexión de comunicación. webSocket.onmessage= function(event){ var data=event.data;} // Recibir mensajes del servidor webSocket.onopen =function(event){ //Procesamiento al iniciar la comunicación} webSocket.onclose =function(event) { / /Procesamiento al final de la comunicación}

Lo anterior es una lista completa de las nuevas funciones y usos de HTML5 introducidos por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!