O capítulo acima fala sobre as sete primeiras habilidades do HTML5 e agora vamos aprender novas habilidades.
8. Especialista
Anteriormente, precisávamos usar o JavaScript para criar espaços reservados para caixas de texto. Inicialmente, você pode definir o atributo de valor para ver se é apropriado, mas enquanto o usuário excluir o texto, o conteúdo de entrada ficará vazio novamente. O atributo de espaço reservado compensa efetivamente isso.
<Nome de entrada = Tipo de email = email espaço de espaço [email protected] />
9. Armazenamento local
Graças ao armazenamento local do HTML5, podemos permitir que os navegadores avançados se lembrem do que entramos e, mesmo que o navegador esteja fechado ou atualizado posteriormente, isso não será afetado. Embora nem todos os navegadores o suporte, o Internet Explorer 8 mais crítico, Safari 4, Firefox 3.5.
10. Cabeçalho e rodapé semânticos
<div id = cabeçalho>
...
</div>
<div id = rodapé>
...
</div>
Longe estão o código acima. O DIVS não possui nenhuma estrutura semântica fundamentalmente, mesmo que o ID seja aplicado. No HTML5, podemos usar os elementos <weweler> e <Footer>, e o código acima pode ser substituído por:
<header>
...
</header>
<wower>
...
</rodapé>
Cuidado para não confundir esses dois elementos com a cabeça e os pés do site. Eles são apenas recipientes que os representam.
11. IE e html5
É preciso muito dinheiro para entender os novos elementos HTML5. Para garantir que os novos elementos HTML5 possam ser exibidos corretamente como elementos no nível do bloco, é necessário definir seu estilo com o seguinte código:
Cabeçalho, rodapé, artigo, seção, navegação, menu, HGroup {
exibição: bloco;
}
Mesmo assim, o IE ainda não sabe o que são esses elementos, por isso ignora esses formatos e precisa usar o código a seguir para resolver esse problema:
document.createElement (artigo);
document.createElement (rodapé);
document.createElement (cabeçalho);
document.createElement (hgroup);
document.createElement (NAV);
document.createElement (menu);
12. Título do grupo (HGroup)
Suponha que um site tenha um nome e tags de legenda a serem marcados com tags <H1> e <H2>, respectivamente. Não há como no HTML4 que possa descrever o relacionamento entre os dois com um bom relacionamento semântico. Além disso, ao usar o H2 para exibir outros títulos na página, há mais problemas em termos de hierarquia. Usando o elemento Hgroup do título do grupo, podemos reunir esses títulos sem afetar todo o contorno do documento.
<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>
13. Atributos necessários
O formulário permite novas propriedades necessárias, especificando se uma entrada específica é necessária. Você pode declarar esse atributo nas duas maneiras diferentes, de acordo com suas próprias preferências para o código de escrita:
<Tipo de entrada = Nome do texto = Alguminput Necessário>
Ou, mais rigoroso:
<Tipo de entrada = Nome do texto = AlgumInput necessário = necessário>
Ambas as linhas de código acima do trabalho. Depois de usar esta linha de código e o navegador suporta o atributo necessário, o formulário em branco não será enviado. Aqui está um exemplo simples, e também adicionamos o atributo de espaço reservado:
<Método de forma = pós -ação =>
<Label for = SomeInput> Seu nome: </belt>
<Tipo de entrada = ID do texto = algum nome de invasão = algum espaço de espaço local = Douglas quaid necessário>
<Button Type = Submite> GO </Button>
</morm>
Se a entrada estiver vazia, o formulário não será enviado, destacando a caixa de texto.
14. Atributos de foco automático
Da mesma forma, com o HTML5, as soluções JavaScript não são mais necessárias para resolver o problema do foco automático. Se uma entrada for selecionada ou focada, agora podemos usar a propriedade AutoFocus do HTML.
<Tipo de entrada = Nome do texto = algum espaço de espaço dividido = Douglas quaid necessário AutoFocus>
15. Suporte de áudio
Não precisamos mais confiar em plugins de terceiros para fornecer áudio. HTML5 fornece elemento de áudio <Audio>. Atualmente, apenas os navegadores mais recentes oferecem suporte ao áudio HTML5. Neste ponto, é melhor fornecer alguma compatibilidade com versões anteriores.
<AUDIO AutoPlay = Controls do AutoPlay = Controls>
<fonte src = file.ogg />
<fonte src = file.mp3 ″ />
<a href = file.mp3 ″> Baixe este arquivo. </a>
</udio>
Falando em formatos de áudio, nem Mozilla nem Webkit o apoiaram totalmente. O Firefox quer ver um arquivo .OGG, e o navegador Webkit suporta apenas a extensão .mp3 mais comum. Isso significa que você deve criar duas versões de áudio, pelo menos até agora. Quando o Safari carrega a página, ele não reconhece o arquivo de formato .ogg e será ignorado e movido para a versão MP3. Observe que o IE não o suporta e a Opera 10 ou inferior suporta apenas arquivos .wav.