Novos recursos do HTML5 necessários para a entrevista frontal

O que é HTML5: HTML5 é a próxima geração de HTML, que se tornará novos padrões para HTML, XHTML e HTML DOM. Hoje, vamos falar sobre uma pergunta que me farei toda vez que a entrevista da frente é, que é o novo recurso do HTML5. Este é o conhecimento básico que deve ser dominado no front -end do aprendizado.

O HTML5 adiciona alguns elementos de etiqueta semânticos melhores.

1. O elemento do artigo representa um conteúdo independente que não está relacionado ao contexto, como um artigo em um blog.
2. Além do elemento representa conteúdo diferente do conteúdo do artigo, informações assistidas.
3. O elemento de cabeçalho representa um bloco de conteúdo ou o cabeçalho de toda a página na página.
4. O elemento Hgroup é usado para combinar o título de um bloco ou a página inteira na página.
5. O elemento rodapé indica um bloco de conteúdo ou uma página inteira na página.
6. O elemento da figura representa o agrupamento do conteúdo da mídia e seu título.
7. O elemento de seção representa um bloco de conteúdo na página, como capítulos.
8. Os elementos NAV indicam o link de navegação na página.

1. O elemento de vídeo é usado para definir vídeo.
2. O elemento de áudio é usado para definir áudio.
3. O elemento de tela é usado para exibir gráficos, que por si só não têm comportamento e apenas uma peça de tela.
4. Os elementos incorporados são usados ​​para inserir várias multimídia.
5. O elemento Mark é usado para mostrar destaques.
6. O elemento de progresso é usado para mostrar o progresso de qualquer tipo de tarefa.
7. Os elementos do medidor indicam medidas e definem a medição dentro da faixa pré -definida.
8. O elemento de tempo é usado para exibir a data ou hora.
9. Elemento de comando, indicando o botão de comando.
10. Os elementos de detalhes são usados ​​para mostrar as informações de detalhes que o usuário requer e pode ser obtido.
11. O elemento de resumo é usado para definir títulos visíveis para obter os elementos de detalhes.
12. O elemento de dados é usado para exibir listas de dados opcionais.
13. O elemento DataGrid também é usado para exibir a lista de dados opcionais, exibida na forma de uma lista de árvores.
14. O elemento Keygen indica uma chave a ser gerada.
15. Os elementos de saída indicam diferentes tipos de saída.
16. Os elementos de origem definem recursos de mídia para elementos de mídia.
17. O elemento de menu indica a lista de menus.
18. O elemento rubi representa comentários do rubi, os elementos RT representam a interpretação ou pronúncia dos caracteres. O elemento RP é usado em Notas Ruby para definir o conteúdo exibido pelo navegador que não suporta elementos de rubi.
19. Os elementos WBR indicam comutação suave. A diferença do elemento BR é que o elemento BR significa que o elemento WBR significa a largura da janela do navegador ou do elemento de nível pai. Não altere a linha e, quando a largura não for suficiente, tome a iniciativa de mudar o banco.
20. Os elementos do BDI definem a direção do texto do texto, para que ele seja desligado da direção do texto ao seu redor.
21. O elemento de diálogo indica a caixa de diálogo ou janela.

Alguns elementos puramente de expressão são abolidos no HTML5.

Os elementos da expressão pura são aqueles elementos que podem ser substituídos pelo CSS. BaseFont, Big, Center, Fonte, S, Strike, TT, U, suas funções são exibidas puramente para a exibição da página.

Para elementos do quadro, elementos de quadro e elementos noframes, porque a estrutura do quadro tem um efeito negativo na disponibilidade da Web, a estrutura do quadro não é mais suportada no HTML5 e suporta apenas a estrutura do iFRAME.

Para o applet, BGSound, Blink, Marquee e outros elementos, porque apenas alguns suportes do navegador, especialmente os elementos do BGSound e os elementos de marcha, são suportados apenas pelo IE, eles são abolidos no HTML5. Os elementos do applet podem ser substituídos por elementos de incorporação ou elementos de objeto, os elementos do BGSOUND podem ser substituídos pelo elemento de áudio e a marquise pode ser substituída pela programação JavaScript.

O elemento Canvas mencionado acima pode fornecer uma tela para a página exibir o gráfico. Combinado com a API de tela, você pode gerar e exibir dinamicamente vários gráficos, gráficos, imagens e animações nessa tela. A tela é essencialmente gráfica. Não há necessidade de usar cada gráfico como armazenamento de objetos e o desempenho do desempenho é muito bom.

Use a API Canvas para desenhar o contexto do elemento Canvas primeiro e, em seguida, use as várias funções de desenho encapsuladas no contexto para desenhar.

 <Canvas ID = Canvas> Conteúdo alternativo </sena / Prática mostra que o estilo de enchimento padrão é o contexto preto

SVG é outra função gráfica do HTML5. O HTML5 apresenta a união interna SVG para que os elementos SVG possam aparecer diretamente na marca HTML.

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

O surgimento de elementos de áudio e vídeo tornou os aplicativos de mídia HTML5 mais novas opções. Para esses dois elementos, a especificação HTML5 fornece uma API geral, completa e controlada por script.

Antes que a especificação HTML5 seja lançada, a maneira típica de reproduzir vídeos na página é usar o plugue Flash, QuickTime ou Windows -in para incorporar áudio e vídeo no HTML. tags.

1. Como função do suporte nativo do navegador, os novos elementos de áudio e vídeo não precisam ser instalados.
2. Os elementos de mídia desejam que a página da web forneça APIs universais, integradas e controladas por script.

 <vídeo src = video.webm controles> <dados do objeto = videoplayer.swf type = application /x-shockwave-flash> <param name = filme value = video.swf /> < /object> Seu navegador não suporta vídeo html5. </Video>

Se a detecção do navegador suporta elementos de áudio ou elementos de vídeo é a maneira mais simples de criá -lo dinamicamente com scripts e detectar se existem funções específicas.

 var hasvideo = !! (document.createElement ('vídeo'). CanPlayType);

A API de geolocalização HTML5 (API de posicionamento geográfica) pode pedir aos usuários que compartilhem sua posição. O método de uso é muito simples. . As informações de localização consistem em latitude, coordenadas de longitude e outros metadados.

A API de geolocalização não especifica qual tecnologia subjacente usar o usuário para localizar o aplicativo do aplicativo. Em vez disso, ele é usado apenas para recuperar a API de informações de localização, e os dados recuperados através da API têm apenas um certo grau de precisão, e não pode garantir que a localização do dispositivo retorna seja precisa. O dispositivo pode usar a seguinte fonte de dados:

1. Endereço IP

   Coordenadas tridimensionais

   GPS

   Endereços MAC da RFID, WiFi e Bluetooth para WiFi

2. ID de telefone GSM ou CDMA
3. Dados personalizados do usuário

 // Atualize o Navigator.geolocation.getCurrentPost (Updatelocation, Handlelocationeror); // Precisão var timestamp = position.coords.timestamp; Localização Atualizar Navigator.geolocation.clearwatch (WatchId);

Para considerações de segurança, a comunicação entre o quadro, guias e janelas no mesmo navegador sempre foi estritamente limitada. No entanto, na realidade, existem alguma demanda razoável pelo conteúdo de diferentes sites para interagir no navegador. Nesse caso, se o navegador puder fornecer um mecanismo de comunicação direta, esses aplicativos poderão ser melhor organizados.

Um novo recurso é introduzido no HTML5, comunicação de mensagens de documentos cruzados, que pode garantir que o iframe, as páginas da guia e as janelas sejam realizadas com segurança. A API PostMessage é o método padrão de enviar mensagens.

 Window.postMessage ('Olá, mundo', 'http://www.example.com/');

Ao receber a mensagem, você só precisa adicionar uma função de processamento de eventos à página. Quando uma mensagem chega, a fonte da mensagem está determinada a decidir se deve lidar com a mensagem.

 Window.AddeventListener (Mensagem, MessageHandler, True); t reconhecer // a mensagem é ignorada}}

O evento de mensagem é um evento DOM com atributos de dados (dados) e origem. O atributo de dados é a mensagem real passada pelo remetente e o atributo de origem é a fonte de envio.

A API XMLHTTPREQUEST torna possível a tecnologia AJAX. Existem dois aspectos principais:

1. Cross -DoRce XMLHTTPREQUEST
2. Progresso

No passado, o XmlHttPrequest era limitado à comunicação homóloga, e o XmlHttPrequest Level2 percebeu o XmlHttPrequest transnacional através dos CORs. A solicitação HTTP cruzada -DeRce contém uma cabeça de origem, que fornece ao servidor as informações de origem das solicitações HTTP.

O WebSockets é a função de comunicação mais poderosa no HTML5.

Para estabelecer uma comunicação WebSockets, o cliente e o servidor atualizam o protocolo HTTP para o protocolo Websocket ao apertar as mãos. Depois que a conexão é estabelecida com sucesso, podemos passar a mensagem do WebSocket entre o cliente e o servidor no modo completo de trabalho duplo.

Além da definição do protocolo WebSockets, a especificação também define a interface do WebSocket para o aplicativo JavaScript. O uso da interface WebSockets é muito simples. Para conectar o host remoto, você só precisa criar uma nova instância do WebSocket para fornecer um par de URLs que esperam conectar -se.

1. Tel elemento, indicando o número de telefone.
2. O elemento de email indica a caixa de texto Endereço de email.
3. O elemento URL indica o URL da página da web.
4. Elemento de pesquisa, para mecanismos de pesquisa, como a caixa de pesquisa exibida na parte superior do site.
5. Elemento da faixa, seletor numérico em um intervalo específico, exibição típica é barras deslizantes.
6. O elemento de número contém apenas campos valorizados.

1. Elemento de cor, seletor de cores, com base na paleta de cores ou na placa de coloração para seleção.
2. O elemento DateTime mostra a data e a hora completas, incluindo fuso horário.
3. DateTime-Local, data e hora de exibição.
4. Elemento de tempo, seletor de tempo e indicador do fuso horário.
5. Elemento de data, seletor de data.
6. Elemento da semana, seleção semanal em um determinado ano.
7. Elemento do mês, um seletor mensal em um determinado ano.

Quando o usuário não possui o valor de entrada, o controle de entrada pode exibir uma descrição descritiva ou solicitar informações ao usuário através do recurso de espaço reservado.

 <Nome de entrada = Nome espaço local = Primeiro e sobrenome>

O navegador pode saber se o valor de entrada deve ser preservado através do preenchimento automático.

Através das características do foco automático, você pode especificar um elemento de tabela para obter o foco de entrada.

O controle de entrada com conteúdo de texto e a propriedade SpecialCheck de controle espacial da Textarea. Após a definição, você perguntará ao navegador se deve dar feedback dos resultados da inspeção de ortografia. O atributo da verificação ortográfica precisa ser atribuída.

Por combinado com as características da lista e os elementos de dados de dados, os desenvolvedores podem construir uma lista de seleção de valor para um controle do tipo de entrada.

 <Datalist ID = ContactList> <Opção [email protected]> </pption> <opção [email protected]> </pption> </datalist> <entrada de entrada = email ID = Contact = Contact List>

Ao definir os recursos MIN e MAX, o intervalo de entrada de valor da caixa de entrada de intervalo pode ser limitado entre o valor mínimo e o maior valor. Você pode definir apenas um ou dois ou dois, ou não pode defini -lo.

Para os controles do tipo de entrada, definir suas características de etapa pode especificar a granularidade de aumentar ou diminuir o valor de entrada.

Depois que um recurso necessário é definido para um controle do tipo de entrada, esse item deve ser preenchido, caso contrário, o formulário não poderá ser enviado.

Se o elemento arrastável do elemento da Web for verdadeiro, esse elemento poderá ser arrastado.

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

O processo de arrasto desencadeará muitos eventos, principalmente no seguinte:

1. Dragstart: O elemento da página da web é acionado ao arrastar.
2. Drag: O elemento arrastado continua sendo acionado durante o arrasto.
3. Dragenter: Quando o elemento arrastado é acionado ao inserir o elemento de destino, o evento deve ser ouvido o elemento de destino.
4. Dragleave: Quando o elemento arrastado é acionado, o evento deve ser ouvido o elemento do objeto.
5. Dragover: gatilhos contínuos quando o elemento de arrasto permanece no elemento de destino e o evento deve ser ouvido o elemento de destino.
6. DRAP: arrastar elemento ou arquivo selecionado do sistema de arquivos, aciona ao arrastar e cair.
7. Dragnd: O elemento da página da web é acionado no final.

 DraggableElement.addeventListener ('dragstart', function (e) {console.log ('drag start!');});

Durante o arrasto, os parâmetros do evento aceitos pela função de retorno de chamada têm um atributo datatransfer, apontando para um objeto, incluindo várias informações relacionadas ao arrasto.

 DraggableElement.addeventListener ('dragstart', function (event) {event.datatransfer.setData ('text', 'hello world!');});

1. DropeFeff: Arrastar e soltar o tipo de operação determina como o navegador exibe a forma do mouse.
2. Efetalowed: especificando as operações permitidas, os valores possíveis são copiar, mover, link, copilink, copymove, linkMove, todos, nenhum e não iniciar (o valor padrão é equivalente a todos, ou seja, permitir todas as operações).
3. Arquivos: contém um objeto FilElist, indicando o arquivo envolvido no arrasto e soltando, que é usado principalmente para processar arquivos arrastados para o navegador do sistema de arquivos.
4. Tipos: o tipo de dados armazenados no objeto Datatransfer.

1. SetData (formato, dados): armazenar dados no objeto DataTransfer. O primeiro formato de parâmetro é usado para especificar o tipo de dados de armazenamento, como texto, URL, texto/html, etc.
2. GetData (formato): pegue os dados do objeto DataTransfer.
3. ClearData (formato): limpe os dados armazenados pelo objeto DataTransfer. Se o parâmetro de formato for especificado, apenas os dados do formato serão limpos, caso contrário, todos os dados serão removidos.
4. SetDragImage (imagelement, x, y): especifique a imagem exibida durante o processo de arrasto. Por padrão, muitos navegadores mostram uma versão semi -transparente do elemento de arrasto. O parâmetro imgElement deve ser um elemento de imagem, não o caminho da imagem e o parâmetro x e y indicar a posição da imagem para o mouse.

JavaScript é um único thread. Portanto, o cálculo de uma longa duração, de volta para bloquear o thread da interface do usuário, o que faz com que o texto preencha o texto na caixa de texto, clique no botão etc. e na maioria dos navegadores, a menos que o controle seja retornado, ele não pode abrir uma nova página de guia A solução desse problema é o Web Worker, que permite que os aplicativos da Web tenham recursos de processamento em segundo plano, e seu suporte para o multi -thread é muito bom.

No entanto, o script executado nos funcionários da web não pode acessar o objeto de janela na página, ou seja, os trabalhadores da web não podem acessar diretamente a página da Web e a API DOM. Embora os trabalhadores da web não levem a interface do usuário do navegador que parem de responder, ela ainda consumirá o ciclo da CPU, resultando em uma velocidade de resposta mais lenta.

O armazenamento da Web é um recurso muito importante introduzido pelo HTML5.

SessionStorage salva dados em sessão e o navegador desliga os dados para desaparecer.

O LocalStorage sempre salvou dados sobre o cliente, a menos que seja excluído manualmente, ele será mantido.

Seja SessionStorage ou LocalStorage, a API que pode ser usada é a mesma.

1. Salvar dados: localStorage.SetItem (chave, valor);
2. Dados de leitura: LocalStorage.getItem (chave);
3. Exclua um único dados: localStorage.removeItem (key);
4. Exclua todos os dados: localStorage.clear ();
5. Chave para obter um determinado índice: localStorage.key (índice);

O acima é o conteúdo deste artigo.