Muitos amigos me enviaram mensagens privadas e me perguntaram sobre os novos recursos e o uso do HTML5. Deixe-me dar uma introdução detalhada aos novos recursos do HTML5.
1) Novo cabeçalho de rodapé de tags semânticas, etc. 2) Formulários aprimorados 2.0 3) Áudio e vídeo 4) Desenho em tela 5) Desenho SVG 6) Geolocalização 7) API de arrastar e soltar 8) Trabalhador da Web para executar tarefas demoradas 9) web O armazenamento armazena grandes quantidades de dados no lado do navegador 10) web Socket é uma conexão persistente (protocolo não http)
(1) Não falarei sobre novas tags semânticas.
Por exemplo <footer></footer>
(2) Formulário aprimorado 2.0
um,1) Comparação entre o novo tipo de entrada h4 e h5!
Tipo de entrada em H4: texto /senha /rádio /caixa de seleção/ sybmit/ redefinir / arquivo /oculto / imagem/
Tipo de entrada em H5: email/url/número/tel/pesquisa /intervalo /cor/mês/semana /data
2) Novos elementos de formulário
Elementos do formulário em H4: input/textarea/select, option/label
Novos elementos de formulário em H5: datalist/progress/meter/output
2. Novo elemento de formulário na lista de sugestões h5--datalist<datalist id=lunchList> <option>Carne de porco desfiada com molho de Pequim</option> <option>Carne de porco em Guobao</option> <option>Carne de porco desfiada com sabor de peixe</option> <option>Carne de porco desfiada com pimentão verde</ opção> <option >Di Sanxian</option></datalist>
Por favor, insira o almoço que você precisa ：<input type=text name=lunch list=lunchList/>
Existem duas formas:
Existe um estilo de plug-in de progresso no bootstrap
<form> Conexão de rede<progress></progress> <br/> <!-- Entre 0-1--> Progresso do download <progress id=p3 value=0></progress> <input type=number value =1 </form><script type=text/javascript> /*A diferença entre settimeout e setInterval é que settimeout é executado uma vez e setInterval é executado a cada duas vezes*/ var t=setInterval(function(){ var v = p3.valor; v += 0,1; p3.valor = v; if(v>=1){ clearInterval(t); 5. Novo elemento de formulário em h5-meter <body> Conteúdo de óleo: <meter id=m1 min=0 max=100 low=30 high=70 ideal=40 value=50></meter> Valor PM: <meter id=m2 min=0 max=500 low= 100 alto=300 ótimo=150 valor=750></meter></body>
Medidor: Pesos e medidas/escala/, usado para marcar uma faixa: inaceitável (vermelho)/aceitável (amarelo)/muito bom (verde)
<meter min=可取的最小值max=可取的最大值low=合理的下限值high=合理的上限值optimum=最佳值value=当前值></meter>
3) Novos atributos de elementos de formulário
1. Atributos dos elementos do formulário em H4: <input>
id/classe/título/tipo/valor/nome/estilo/somente leitura/desativado/verificado/
Novos atributos de elementos de formulário em H5
1) espaço reservado: caracteres de espaço reservado não podem ser enviados como prompts
<input value=tom placeholder=请输入用户名/>
2) foco automático: obtenha foco de entrada automaticamente (você pode entrar sem clicar. Somente a primeira configuração de entrada é válida)
<input autofocus>
3) múltiplo: vários valores de entrada podem aparecer na caixa de entrada, separados por vírgulas [email protected], [email protected]
<input type=email name=emails multiple>
4) formulário: usado para colocar o campo de entrada fora do FORM
<form id=f5></from>
<input form=f5>
=================Novas propriedades relacionadas à validação de entrada=========================== ========
Por exemplo, consulte atributos relacionados à validação de entrada/yz.html
5) obrigatório: obrigatório, o conteúdo não pode ficar vazio
6) maxlength: Especifique o comprimento máximo da string
7) minlength: Especifique o comprimento mínimo da string
8) max: o valor máximo do número especificado
9) min: o valor mínimo do número especificado
10) padrão: Especifique a expressão regular que a entrada deve corresponder
Os atributos de validação acima afetarão o atributo de validade do objeto js correspondente ao elemento do formulário, e o atributo de validade é o atributo de verificação.
(3) vídeo, vídeo e áudio
1. Em que aspectos o flash substituído pelo H5 é refletido?desenho flash (AS/FLEX) =>Canvas/SVG
animação em flash => temporizador + tela
Reprodução de vídeo e áudio => VÍDEO/ÁUDIO
armazenamento de cliente flash => WebStorage
2. Novo recurso H5 - reprodutor de vídeo (é um elemento de bloco embutido. Você pode fornecer largura e altura)H5 fornece uma nova aba para reprodução de vídeos:
<vídeo src=></video> <vídeo src=> <fonte src=res/birds.mp4></source> <fonte src=res/birds.ogg></source> <fonte src=res/birds. webm></source>
Seu navegador não suporta reprodução de VÍDEO!
</video> Ele próprio é um elemento de bloco embutido de 300*150 Nota: A fonte multilinha foi escrita para ser compatível com vários navegadores. Como os navegadores não suportam formatos de vídeo de maneira uniforme, alguns navegadores, como alguns navegadores, suportam o formato mp4. Se não for compatível, verifique se ele suporta o seguinte vídeo ogg. suporta, então ele irá reproduzir, se não for compatível, continue abaixo. Não há fonte abaixo, então significa que seu navegador não suporta reprodução de VÍDEO! .
Membros comumente usados da tag/objeto VIDEO:
Propriedades dos membros:
<video id=v2 src= autoplay controls loop muted poster=2.jpg preload=auto></video>
reprodução automática: falso, se deve reproduzir automaticamente, padrão falso controles: falso, se deve exibir controles de reprodução, o padrão é falso loop: falso, se deve ser reproduzido em loop, o padrão é falso silenciado: falso, se deve silenciar a reprodução, o padrão é falso pôster: '', reproduzindo O pôster exibido antes do primeiro quadro, que pode ser uma imagem. O padrão é vazio e sem pré-carregamento: estratégia de pré-carregamento de vídeo, valores possíveis: auto: pré-carrega os metadados do vídeo e um determinado tempo de buffer. Não deve ser usado no celular (tamanho/duração. Conteúdo do primeiro quadro, tempo de buffer). (pré-carregamento desperdiça tráfego) metadados: pré-carrega apenas os metadados do vídeo (tamanho/duração, conteúdo do primeiro quadro) sem duração de buffer, adequado para telefones celulares nenhum: não pré-carrega nenhum dado
-------------------------------------------------- --------------- O uso do atributo do id v2 é, por exemplo:
v2.playbackRate=3;
currentTime: duração da reprodução atual duração: duração total pausada: verdadeiro, se o vídeo atual está em estado de pausa, verdadeiro significa pausado, falso significa volume de reprodução: 1 O valor padrão é 1, volume atual playbackRate: 1, taxa de reprodução maior que 1 significa reprodução rápida, menos de 1 significa reprodução lenta
método id v2:
play(): reproduz o vídeo pause(): pausa a reprodução evento membro: onplay: um evento acionado quando o vídeo começa a ser reproduzido onpause: um evento acionado quando o vídeo é pausado Prática: personalize o botão reproduzir/pausar sem usar os controles que vem com o vídeo Mova o mouse para fora da área de vídeo para ocultar o botão; mova o mouse para o botão de exibição. Por exemplo: video audio, canvas/video.html Quando pausado, o anúncio será exibido, e quando o mouse estiver. reproduzido, o anúncio será ocultado.
3. H5 novo recurso de reprodutor de áudio
<audio src=></audio><audio src=><source src=res/birds.mp3></source><source src=res/birds.ogg></source><source src=res/birds. wav></source>
O método do atributo é o mesmo do vídeo, exceto que não há nenhum atributo de pôster*** para determinar se a caixa de seleção está marcada
cb.onchange=function(){ this.checked true significa selecionado, false significa não selecionado}(4), tela
Existe apenas um objeto pincel em cada tela - chamado objeto de contexto de desenho - use esse objeto para desenhar!
var ctx = canvas.getContext('2d') //现在只有2d的得到画布上的画布对象
Desenho em tela --- dificuldade! ! !
1) Desenho SVG: tecnologia de desenho vetorial, que surgiu em 2000 e posteriormente foi incorporada ao padrão H5 2) Desenho Canvas: tecnologia de desenho bitmap, uma tecnologia de desenho proposta pelo H5 3) Desenho WebGL: tecnologia de desenho 3D, que não existe. ainda foi incorporado ao padrão H5.
tecnologia de desenho em tela canvas: canvas, H5 implementa tecnologia de desenho 2D
<canvas width=500 height=400>您的浏览器不支持canvas</canvas>
A tag canvas é um bloco embutido de 300*150 por padrão no navegador. A largura e a altura da tela só podem ser atribuídas usando atributos HTML/JS, não estilos CSS! Existe apenas um objeto pincel em cada tela - chamado objeto de contexto de desenho - use esse objeto para desenhar! var ctx = canvas.getContext('2d') //Agora apenas 2d obtém o objeto canvas na tela
1) Use o canvas para desenhar um retângulo
Desenhe um retângulo
ctx.lineWidth = 1 Largura do traço ctx.fillStyle='#000' Cor do estilo de preenchimento ctx.strokeStyle='#000' Cor do estilo do traço ctx.fillRect(x,y,w,h); coordenada w, h largura e altura ctx.strokeRect(x,y,w,h); //Traçar um retângulo ctx.clearRect(x,y,w,h) Limpar todos os desenhos dentro de um retângulo
2) Use a tela para desenhar texto
O ponto de ancoragem de um trecho de texto está no início da linha de base do texto
ctx.textBaseline = 'alfabético' //O valor padrão da linha de base do texto é a terceira linha ctx.font=12px sans-serif //Tamanho e estilo da fonte ctx.fillText(str,x,y) //Preencher ctx.strokeText (str ,x,y) //Trace um pedaço de texto ctx.measureText(str) //Defina o texto de medição com base no tamanho e fonte do texto atual, e o objeto retornado é {width: x}3) Use a tela para desenhar caminhos
Caminho: Semelhante à ferramenta caneta no PS, é uma forma arbitrária composta de vários pontos de coordenadas. O caminho é invisível e pode ser usado para traçar, preencher e cortar.
ctx.beginPath() //Iniciar um novo caminho ctx.closePath() //Fechar o caminho atual ctx.moveTo(x,y) //Mover para o ponto especificado ctx.lineTo(x,y) //Do ponto atual aponte para o ponto especificado Desenhe uma linha reta ctx.arc(cx,cy,r,start,end); //Desenhe um caminho de arco//cx cy é a coordenada central do círculo xy r é o raio, start é o ângulo inicial e final é o ângulo final
Ângulo: 360 = Radianos: 2PI 180 = 1PI Por exemplo
ctx.arc(100,200,30,0,2*Math.PI)ctx.stroke(); //Traço do caminho atual ctx.fill(); //Preenchimento do caminho atual ctx.clip();//Usar caminho atual Cortar //************O canto da conexão**********ctx.lineJoin='miter' //Um canto agudo aparece na conexão da linha ctx. lineJoin='rodada' //Os cantos arredondados aparecem na conexão da linha ctx.lineJoin = 'bevel' //Os cantos quadrados aparecem na conexão da linha
4) Use tela para desenhar imagens
Canvas é uma tecnologia do lado do cliente, e a imagem está no servidor, então o navegador deve primeiro baixar a imagem a ser desenhada e aguardar que a imagem seja carregada de forma assíncrona:
var img = new Images();img.src='x.png';console.log(img.width); //0 Solicitação assíncrona de imagens img.onload=function(){console.log(img.width, img .height); //O carregamento da imagem do valor é concluído //Começa a desenhar a imagem na tela ctx.drawImage(img,x,y); //Desenho em tamanho original ctx.drawImage(img,x,y,w,h); //Definir largura e altura}Ouça os eventos de movimento do mouse acima da tela
ctx.onmousemove = função(e){x=e.offsetX;y=e.offsetY;console.log(x,y);}2. Gradiente no desenho em tela
Gradiente linear: linearGradient Gradiente radial: radialGradient Você pode consultar o efeito de gradiente em 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;
Dificuldade: Existem muitos eixos de coordenadas e palavras no sistema de coordenadas
3. Deformação do desenho
ctx.rotate(radianos) //Gira o objeto de contexto do desenho (ou seja, pincel), o ponto do eixo é a origem da tela ctx.translate(x,y) //Traduz a origem de toda a tela para o ponto especificado ctx. sava(); //Salva todos os valores atuais do status de deformação do pincel (do salvamento no jogo) ctx.restore(); no jogo) ctx.save(); //Salva o primeiro status original var deg = 10*Math.PI/180; //O ângulo a ser girado é girado 10 graus ctx.rotate(deg); //Rodado ctx.drawImage(img,0,0); se o pincel estiver torto Eles estão todos tortos ctx.restore(); // O estado original salvo ao retirar o salvamento
(5) desenho SVG
Vamos primeiro entender o que são bitmaps e vetores. Apenas entenda brevemente.
Bitmap: É composto por pixels um após o outro, cada ponto tem sua cor e a cor é delicada. Gráficos vetoriais: compostos por linhas uma após a outra. Cada linha pode especificar uma cor, direção e pode ser dimensionada infinitamente, mas os detalhes das cores não são ricos o suficiente.
1. O desenho SVG usa tags para desenho e você pode vincular ouvintes de eventos diretamente
<largura svg=300 altura=200 xmlns=http://www.w3.org/2000/svg> <largura recta=100 altura=100></rect></svg>
2. Como criar uma tag SVG usando js!
//var r1 = document.createElement('rect'); Este elemento svg não pode ser criado porque tem limite de idade e namespace (ou seja, se isso não funcionar, use o seguinte método para criá-lo!!! !) var r1= document.createElementNS('http://www.w3.org/2000/svg','rect');r1.setAttribute('largura','50');r1.setAttribute('altura',300);s1 .appendChild(r1);3. Crie uma elipse com SVG
<svg largura=300 altura=200 id=c6> <ellipse rx=100 ry=40 cx=100 cy=100 fill=#faa acidente vascular cerebral=#a00></ellipse></svg>
4. Crie uma linha reta em SVG
<svg largura=300 altura=200 id=c6> <linha x1=0 y1=0 x2=100 y2=200 acidente vascular cerebral=#000 traçado-largura=50 traçado-linecap=quadrado></linha></svg>
Nota: Stroke-linecap=square produzirá mais quadrados, Stroke-linecap=round produzirá mais áreas circulares, Stroke-linecap=butt não produzirá mais quadrados (ou seja, a linha reta que você cria tem uma diferença entre o início e o final desses atributos! Experimente você mesmo e você descobrirá!
5. Crie polilinha usando SVG
<svg width=300 height=200 id=c6> <polyline points=50,50 100,300 150,100></polyline> //O que sai é um triângulo <polyline points=50,50 100,300 150,100 fill=transparent stroke=#000 >< /polyline> //O que sai é uma polilinha</svg>
6. Geolocalização (No futuro não precisamos de cliente, também podemos nos localizar!)
Geolocalização: Geolocalização, utilizando JS para obter os dados de coordenadas geográficas (longitude, latitude, altitude, velocidade) do navegador atual, utilizada para implementar aplicações LBS (Location Based Service), como Ele.me, Amap Navigation...
Como os navegadores móveis obtêm informações de localização:
1) A primeira escolha é o chip GPS na comunicação por telefone celular e satélite, a precisão do posicionamento está dentro de metros 2) A segunda escolha é a estação base do telefone móvel para aquisição de posicionamento, a precisão do posicionamento está dentro de quilômetros (ilegal) Como obter informações de posicionamento através de um navegador de PC: 1) Reverter através do endereço IP A precisão da análise e do posicionamento depende do tamanho do banco de dados de endereços IP
HTML5 fornece um novo objeto para obter informações de posicionamento do navegador atual:
window.navigator.geolocation{ getCurrentPosition:fn, //Obter informações de posicionamento atuais watchPosition:fn, //Monitorar alterações nos dados de posicionamento clearWatch:fn //Cancelar monitoramento}2. Extensão: como incorporar o mapa Baidu em uma página da web
1) Registre uma conta de desenvolvedor do Baidu map.baidu.com ---> lbsyun.baidu.com 2) Crie um site; faça login no Baidu Map e solicite uma chave de acesso do mapa para o site 3) Incorpore o mapa fornecido pelo Baidu Map na API da sua própria página da web, incorporada no mapa do Baidu
Não vou falar muito sobre como incorporar isso aqui! (Lembre-se que você deve registrar uma conta para usar o Baidu Maps, e depois é só citar as bibliotecas de outras pessoas!)
7. API de arrastar e soltar
Já mencionei arrastar e soltar: amigos, vão em frente e encontrem blogs anteriores por conta própria.
oito armazenamento
O armazenamento consiste principalmente em cookies e sessões (explicarei as diferenças e precauções ao procurar vários métodos de escrita anteriormente): Lembre-se de que as sessões desaparecem quando você fecha o navegador e os cookies não desaparecem quando você fecha o navegador! Nota: Deve ser adicionado o horário em que o cookie é armazenado. Se nenhum horário for adicionado, ele desaparecerá após fechar o navegador! Este armazenamento do navegador pode ser usado para resolver muitos problemas funcionais, como lembrar senhas e outras funções! !
Nove soquetes da web
Devemos conversar sobre isso? . . . . Vamos falar brevemente sobre isso, tudo depende da compreensão ~~
O soquete da Web é uma conexão bidirecional não http que pode ser estabelecida entre o servidor e o cliente!
Esta conexão é em tempo real e permanente.
O servidor pode enviar mensagens ativamente.
O servidor não precisa mais pesquisar solicitações no cliente e a comunicação entre o servidor e o cliente não requer o restabelecimento da conexão.
Ou seja, comunicação sustentável de ida e volta.
Como criá-lo? Um pedaço de código está pronto
var webSocket = new WebSocket (ws://localhost:8005/socket); //url deve começar com ws ou texto wss: porque não é http, é websocket, é sua própria identificação, transmissão criptografada, lembre-se disso . webSocket.send() //Envia dados de texto, apenas texto pode ser enviado. (Use o objeto json para converter o objeto js em dados de texto antes de enviar) webSocket.close();//Fecha e corta a conexão de comunicação. webSocket.onmessage= function(event){ var data=event.data;} // Recebe mensagens do servidor webSocket.onopen =function(event){ //Processando ao iniciar a comunicação} webSocket.onclose =function(event) { / /Processando no final da comunicação} ResumirA lista acima é uma lista abrangente dos novos recursos e uso do HTML5 introduzidos pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!