uMA! Html5. Atualmente, já é usado ativamente ao desenvolver interfaces e aplicativos da Web. Todos nós sabemos que o HTML5 trouxe muitas novas tags, atributos e elementos. Alguns deles são realmente úteis para nossos sites. Assim, neste artigo, vou contar brevemente sobre vários recursos úteis e importantes Tags e atributos HTML5Você precisa saber e usar na prática!
Marcação Estrutural HTML5.
Algumas novas tags apareceram em HTML5, que são projetadas para substituir os blocos divida já apreendidos (não tudo, claro 🙂). Externamente, por assim dizer, nada mudou, mas em essência novas tags carregam uma carga semântica (semântica) e definem estritamente seu lugar e papel para cada bloco:
- - determina o "porão", páginas da Web do site ou partição, na qual informações adicionais são geralmente acomodadas no gato;
- - determina a área de navegação, como uma lista de regras de links;
A forma
Novos tipos de campo de entrada
HTML5 introduziu novos tipos campos de entrada. Eles permitem que você escreva mais código semanticamente correto adaptado para dispositivos móveis. Por exemplo, ao usar o tipo de e-mail, ocorre a validação automática do texto digitado, na identidade do endereço de e-mail e assim por diante.
1 | <tipo de entrada \u003d "URL"\u003e
|
Expressões de validação regulares.
Antes da aparência do HTML5, ao usar o formulário em seu site, você teve que pular o texto inserido através de Javascript. para cheque. Agora com o atributo HTML5 e padrão, você pode definir um modelo de expressão regular para verificar os dados.
1 |
|
AutoComplete com Datalist HTML5
Usando o elemento DataList HTML5 permite criar uma lista de dados para campos de entrada automática. Super útil!
1 |
|
Campos de campo Autofocus.
O atributo AutoFocus permitirá que você defina o foco para qualquer elemento de formulário (incluindo o botão).
Elementos escondidos com HTML5
Atributo oculto inserido em HTML5, que permite ocultar um determinado elemento, como este se aplica a CSS usando Dispaly: Nenhum
Habitante pellentsque Morbi Tristique Senectus et Netus .... Habitant Morbi Tristique Senectus et Netus et malesuada ... Crie um acordeão para o site - No HTML5, um novo atributo apareceu para referências. Agora, para especificar o navegador que o link deve ser baixado e não abrir o suficiente para usar este atributo. Para se manter atualizado com artigos frescos e aulas Há muito tempo, durante o XHTML / HTML4, os desenvolvedores tinham apenas alguns recursos que eles poderiam usar para armazenar dados arbitrários relacionados ao DOM. Você poderia inventar seus próprios atributos, mas foi arriscado - seu código não seria válido, os navegadores poderiam ignorar seus dados, e poderiam causar problemas se o nome coincidir com os atributos HTML padrão. Portanto, a maioria dos desenvolvedores estava ligada aos atributos de classe ou rel. Como eles eram a única maneira razoável de armazenar linhas adicionais. Por exemplo, suponha que criemos um widget para exibir mensagens como uma linha de mensagem temporária no Twitter. Idealmente, JavaScript deve ser capaz de configurar sem a necessidade de reescrever o código, portanto definimos o ID do usuário no atributo de classe, por exemplo:
Título 2.
Atributo Download
Nosso código JavaScript procurará um elemento com ID msglist.. Usando o script, vamos procurar por classes começando com do utilizador_, E "Bob" no nosso caso será o ID do usuário, e exibiremos todas as mensagens deste usuário.
Digamos que gostaríamos também de definir o número máximo de mensagens e pule mensagens ao longo de seis meses (180 dias):
Nosso atributo. aula É muito rapidamente escalada - é mais fácil permitir um erro, e a análise das cadeias de javascript se torna mais complicada.
Atributos de dados HTML5.
Felizmente, no HTML5, a capacidade de usar atributos personalizados foi introduzido. Você pode usar qualquer nome no registro inferior com o prefixo dados-, por exemplo:
Atributos de dados personalizados:
- essas linhas são nelas que você pode armazenar qualquer informação que possa ser representada ou codificada como uma string, como JSON. Tipos devem ser trazidos usando JavaScript
- deve ser usado nos casos em que não há elementos ou atributos HTML5 adequados
- aplique apenas na página. Ao contrário dos microfortatos, eles devem ser ignorados por sistemas externos, como motores de busca e robôs de busca
Exemplo nº 1 do processamento no JavaScript: GetAttribute e SetAttribute
Todos os navegadores permitem que você obtenha e altere os atributos de dados usando os métodos GetAttribute e SetAttribute:
Var msglist \u003d document.getelementbyid ("msglist"); var show \u003d msglist.getAttribute ("" tamanho de lista de dados "); msglist.settribute ("tamanho de lista de dados", + show + 3);
Funciona, mas só deve ser usado para manter a compatibilidade com os navegadores antigos.
Exemplo # 2 Processamento no JavaScript: Data () Método JQuery Library
A partir do método JQuery 1.4.3 Data () processa os atributos de dados HTML5. Você não precisa especificar explicitamente o prefixo dados-Então tal código funcionará:
Var msgist \u003d $ ("# msglist"); var show \u003d msglist.data ("size-size"); msglist.data ("tamanho de lista", show + 3);
Mas, como pode, lembre-se de que o jQuery está tentando converter valores de tais atributos para os tipos de varredura (valores booleanos, números, objetos, matrizes ou nulos) e afetam o DOM. diferente setAttribute.Método dados () Fisicamente não substituirá o atributo tamanho da lista de dados - Se você verificar seu valor fora do jQuery - ainda permanecerá igual a 5.
Exemplo No. 3 do processamento no JavaScript: API para trabalhar com conjuntos de dados
E finalmente, temos uma API para trabalhar com conjuntos de dados HTML5, que retorna o objeto DomstringMap. Deve ser lembrado que os atributos de dados são exibidos no objeto sem prefixos dados-Dos nomes são removidos sinais de Hyphena, e os próprios nomes são convertidos em camelcase, por exemplo:
| Nome do Atributo | Nome na API de conjunto de dados |
| usuário de dados. | do utilizador. |
| data-Maxage. | maxage. |
| tamanho da lista de dados | listar |
Nosso novo código:
Var msglist \u003d document.getelementbyid ("msglist"); var show \u003d msglist.dataset.Listsize; msglist.dataset.listsize \u003d + show + 3;
Esta API é apoiada por todos os navegadores modernos, mas não ie10 e abaixo. Para esses navegadores, há uma solução alternativa, mas, provavelmente, é mais prático usar jQuery se você escrever para navegadores antigos.
HTML - linguagem de marcação de hipertexto. É baseado nas chamadas tags. Tags - Estes são alguns elementos das ultrapassas que especificam o formato e as propriedades dos elementos da página da Web. Na mesma página, coletamos o diretório atual de tag HTML para você.
No total, há mais de cem elementos de marcação. Cada um tem vários atributos e sua própria sintaxe. O Guia de tag HTML ajudará a encontrar rapidamente o item que você precisa.
Lista de tags html
A tabela abaixo mostra a lista de tags HTML5 com uma breve descrição em russo.
| Marcação | Pequena descrição |
|---|---|
| Comente. | |
| Define o tipo de documento. | |
| Link, hiperlink, âncora. | |
| Determina o texto como uma abreviação. | |
| Informações de contato autor ou proprietário do documento. | |
| Determina a área na imagem do mapa | |
| Artigo | |
| Conteúdo de lado (conteúdo não é o principal na página por significado) | |
| Permite inserir um arquivo de áudio reproduzível. | |
| Texto em negrito. | |
| Especifica o atributo básico de URL ou destino para referências relativas no documento. | |
| A área onde a escrita do texto pode ter outras direções. | |
| Define a direção de escrever texto. diferente A direção indica a direção física | |
| Citar. | |
| Especifica a área do documento do corpo. | |
| Ruptura de linha. | |
| Botão clicável | |
| Usado para desenhar gráficos usando scripts | |
| Tabelas de assinatura. | |
| Nota de rodapé no nome do material. | |
|
Usado para inserir um código de computador no formulário de texto. |
| Especifica as características das colunas na tabela. | |
| Especifica um grupo de uma ou mais colunas de tabelas para formatação. | |
| Usado para determinar opções predefinidas para escolher ao entrar no campo de texto | |
Determina a descrição do termo da tag
|
|
| Texto que é removido nova versão Documento. | |
| Define informações adicionais que o usuário pode visualizar ou ocultar | |
| Indica que o conteúdo é o termo. | |
| Determina a caixa de diálogo ou elemento interativo | |
| O elemento de bloco é um dos principais elementos do layout. | |
| Define uma lista de definições. | |
O nome do termo na lista de definições
|
|
| o texto dedicado em significado (geralmente, texto selecionado em itálico). | |
| Recipiente para aplicação externa | |
| Grupo de elementos relacionados no formulário | |
| Título para |
|
| Determina o grupo autônomo de vários elementos (por exemplo, a imagem com a assinatura) | |
| rodapé | |
| Define a forma de entrada do usuário | |
- |
Cabeceiros HTML. de diferentes níveis: , , , |
| Indica a área do documento principal. | |
| Cabeçalho de bloco | |
| Linha horizontal - separador temático. | |
| Elemento raiz. Relata o navegador que este documento é um documento HTML. | |
| Seleciona texto em itálico. | |