Comentário: HTML5 tem muitos novos recursos. Novo código. Muito bom. Vamos resumir agora. Apenas para referência
1. Novo DoctypeMesmo que o navegador não entenda essa frase, ele renderizará de acordo com o modo padrão.
2. Elementos da figura
Use <Figura> e <FigCaption> para representar semanticamente imagens com títulos
<Figura>
<img src = path/to/imagem alt = sobre imagem/>
<CigCaption>
<p> Esta é uma imagem de algo interessante. </p>
</figcaption>
</figura>
3. Redefinado <small>
<Small> foi redefinido e agora é usado para representar pequenas composições, como o Aviso de Direitos Autorais na parte inferior do site
4. Remova os atributos de tipo nas tags de link e script
5. Adicione/sem colchetes
O HTML5 não exige que os atributos sejam citados e fechados ou não, mas é recomendável adicionar cotações e tags fechadas.
6. Torne seu conteúdo editável, basta adicionar uma propriedade contentável
7. Entradas de e -mail
Se definirmos o tipo de entrada como email, o navegador verificará se a entrada é o tipo de email. Obviamente, não podemos confiar apenas na verificação front-end, e o back-end também deve ter uma verificação correspondente.
8. Especas reservadas
O significado desse atributo de entrada é que não há necessidade de usar JavaScript para criar o efeito do espaço reservado
9. Armazenamento local
Use o armazenamento local para armazenar permanentemente grandes fragmentos de dados no cliente (a menos que seja excluído ativamente). Atualmente, a maioria dos navegadores já os apoiou. Você pode verificar se o Window.LocalStorage existe antes de usá -los.
10. Cabeçalho e rodapé semânticos
11. mais recursos do formulário HTML5
12. IE e html5
Por padrão, novos elementos html5 são renderizados em linha, mas o método a seguir pode ser usado para fazer
É renderizado no modo de bloco
Cabeçalho, rodapé, artigo, seção, navegação, menu, HGroup {
exibição: bloco;
}
Infelizmente, o IE ignora esses estilos e pode consertar assim:
document.createElement (artigo);
document.createElement (rodapé);
document.createElement (cabeçalho);
document.createElement (hgroup);
document.createElement (NAV);
document.createElement (menu);
13. HGROUP
Geralmente é usado para combinar um conjunto de títulos no cabeçalho, como
<header>
<Hgroup>
<H1> Recorda a página de fã </h1>
<H2> Somente para pessoas que desejam a memória de uma vida. </h2>
</hgroup>
</header>
14. Atributo necessário
A propriedade necessária define se uma entrada é necessária, você pode declará -la como abaixo
<Tipo de entrada = Nome do texto = Alguminput Necessário>
ou
<Tipo de entrada = Nome do texto = AlgumInput necessário = necessário>
15. Propriedades de foco automático
Assim como seu significado, é focar na caixa de entrada
<Tipo de entrada = Nome do texto = algum espaço de espaço dividido = Douglas quaid necessário AutoFocus>
16. Suporte de áudio
O HTML5 fornece tags <udio>, você não precisa mais renderizar áudio de acordo com plug-ins de terceiros. A maioria dos navegadores modernos fornece suporte ao áudio HTML5, mas ainda precisa fornecer algum processamento de compatibilidade, como
<AUDIO AutoPlay = Controls do AutoPlay = Controls>
<fonte src = file.ogg /> <! - ff–>
<fonte src = file.mp3 ″ /> <! - webkit–>
<a href = file.mp3 ″> Baixe este arquivo. </a>
</udio>
17. Suporte ao vídeo
Assim como o áudio, a tag <dide> fornece suporte para vídeo. Como o documento HTML5 não especifica uma codificação específica para o vídeo, o navegador decide quais codificações suportam, o que leva a muitas inconsistências. Safari e IE suportam os formatos de codificação H.264, Firefox e Opera Suport teora e formatos de codificação VORBIS. Ao usar o vídeo HTML5, você deve fornecer:
<Vídeo controla a pré -carga>
<fonte src = cohagenphoneCall.ogv type = video/ogg; codecs = 'vorbis, teora' />
<fonte src = cohagenphoneCall.mp4 ″ type = video/mp4; 'codecs =' avc1.42e01e, mp4a.40.2 ' />
<p> Seu navegador é antigo. <a href = cohagenphonecall.mp4 ″> Baixe este vídeo em vez disso. </a> </p>
</video>
18. Vídeo de pré -carga
A propriedade da pré -carga é tão simples quanto significa literalmente, e você precisa decidir se precisa pré -carregar o vídeo quando a página estiver carregando
<Preload de vídeo>
19. Exibir controle de vídeo
<controle de pré -carga de vídeo>
20. Expressões regulares
Devido ao atributo do padrão, podemos usar diretamente expressões regulares em sua marcação
<forma de ação = método = post>
<Rótulo para = nome de usuário> Crie um nome de usuário: </cretwle>
<Tipo de entrada = Nome do texto = nome de usuário ID = Nome de usuário espaço reservado = 4 <> 10 ″ Pattern = [a-za-z] {4,10} foco automático Necessário>
<Button Type = Submite> GO </Button>
</morm>
21. Suporte de atributo de detecção
Além do Modernizr, também podemos usar o JavaScript para simplesmente detectar se algumas propriedades são suportadas, como:
<Cript>
if (! 'padrão' em document.createElement ('input')) {
// Faça validação do lado do cliente/servidor
}
</script>
22. Marca elementos
Considere o elemento <sk> como destaque. Quando seleciono um parágrafo de texto, o efeito de marcação do JavaScript no HTML deve ser o seguinte:
<H3> Resultados da pesquisa </h3>
<p> Eles foram interrompidos, logo após o disse Quato, <sk> abrir sua mente </sk>. </p>
23. Quando usar <div>
O HTML5 introduziu tantos elementos, então ainda precisamos usar o Div? Você pode usar o Div quando não há elementos melhores.
24. Deseja usar o HTML5 agora?
Não espere 2022, está pronto para usar agora, basta fazê -lo.
25. O que não é html5
1) SVG
2) CSS3
3) Geolocation
4) armazenamento do cliente
5) soquetes da web
26. Propriedades de dados
<div id = mydiv dados-cu na attr = meu valor> bla bla </div>
Usado no CSS:
<estilo>
H1: Passe o passe: após {
Conteúdo: Att (Data-R-Response);
Cor: preto;
Posição: Absoluto;
Esquerda: 0;
}
</style>
<H1 Dados-RESPONSE = eu disse não me toque!> Não me toque </h1>
27. Elemento de saída
O elemento <aturt> é usado para exibir os resultados do cálculo e também possui um rótulo para atributos como o rótulo.
28. Use a entrada do alcance para criar controles deslizantes
O tipo de alcance referenciado pelo HTML5 pode criar um controle deslizante, que aceita as propriedades Min, Max, Step e Value
Você pode usar o CSS ': antes e: depois para exibir os valores de min e max
<Tipo de entrada = Nome do intervalo = alcance min = 0 ″ max = 10 ″ Etapa = 1 ″ Valor =>
input [type = range]: antes de {content: att (min); Right-right: 5px;
}
input [type = range]: após {content: att (max); Potding-Left: 5px;}