Baixar para ler offline
Aula de HTML5 - DevCampos - www.devcampos.com.br
- 1.
- 2.
- 3.
- 4. <!-- Essa tag foitotalmente reformulada de forma que se tornasse menor e mais padronizada. Ela caracteriza todo o html contido abaixocomo sendo html 5 VERSÃO ANTIGA <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> --> <!DOCTYPE html>
- 5. A tag scripte o resultado da sua dieta
- 6. <!-- No HTML 5a tag de inclusão javascript também ficou mais leve --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0-rc1/jquery.min.js" defer></script>
- 7. Um dos passospara tornar o seu site mobile (View Port)
- 8. <!-- Criada para osaparelhos da Apple, a viewport facilita a manipuação da resolução do que é apresentado para dispositivos móveis --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 9. UTF-8 o melhorpadrão
- 10. <!-- O charset mudoue ficou mais fácil de escrever VERSÃO ANTIGA <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > --> <meta charset="UTF-8">
- 11. Uma boa práticapara inclusão de arquivos JS (CDN’S)
- 12. <!-- CDN: Uma formade melhorar o desempenho do carregando da sua aplicação é a utilização de uma CDN para arquivos JAVASCRIPT, CSS E IMAGENS. Uma CDN é um servidor dedicado a servir esses tipos de arquivos de uma forma mais rápida, reutilizável e centralizada. --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0-rc1/jquery.min.js" defer></script>
- 13. O uso doatributo DEFER
- 14. <!-- DEFER: O atributodefer faz com que o arquivo js requerido seja incluido após o carregamento do HTML,CSS e imagens. --> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0-rc1/jquery.min.js" defer></script>
- 15. As novas tags:header, section, article, footer, adress e nav
- 16. <!-- A tag articlefunciona para o conteúdo que tenha sentido por sí só. Algo como um conteúdo de um blog. --> <article><article> <!-- Header por ser utilizada para qualquer cabeçalho dentro de qualquer combinação de tags. Obs: Como cada cabeçalho tem o seu escopo, você pode repetir uma tag h1 por exemplo. --> <header> <h1>Bem-vindo a aula de HTML 5</h1> </header>
- 17. <!-- Section serve parasetornizar um conteúdo --> <section></section> <! -- conteudo --> <!-- Essa nova tag serve para criar a sua navegação no site. --> <nav> <ul> <li><a href="#">Geral</a></li> <li><a href="#">Artigos</a></li> </ul> </nav>
- 18. <!-- Tag que funcionapara construir o rodapé de qualquer parte do layout Obs: Assim como a tag HEADER, ela tem escopo própio. --> <footer> <header> <p>Todos os direitos reservados</p> </header> </footer>
- 19. O atributo data-*e o seu enorme porder
- 20. <!-- Com atributo data-*podemos criar atributos personalidados. --> <input type="email" data-tipo-campo="email"> <input type="text" data-tipo-campo="inteiro"> <input type="text" data-tipo-campo="data">
- 21. Novos atributos para formulários:placeholder, focus, required e autocomplete
- 22. <!-- Novos atributos surgiramno html5 para facilitar a vida do programador front-end e padronizar o que é de uso comum a várias aplicações --> <!-- Esse atributo é uma espécie de texto de ajuda dentro do campo --> <input type="text" placeholder="Texto de ajuda"> <!-- O campo recebe imeditamente o foco --> <input type="text" autofocus="yes">
- 23. <!-- Após a utilizaçãodo campo, o html5 habilita no navegador (se houver) o recurso de salvar o texto digitado no mesmo. --> <input type="text" autocomplete="yes"> <!-- Especifica que esse campo é obrigatório --> <input type="text" required="yes">
- 24. Novos tipos deinput: email, number, url, search e date
- 25. <!-- Novos tipos decampos contidos no html5 --> <input type="email"> <input type="date"> <input type="number"> <input type="search"> <input type="url">
- 26.
- 27. As diferenças entreusar id e class
- 28.