Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à Aula de HTML5 - DevCampos - www.devcampos.com.br
Similaire à Aula de HTML5 - DevCampos - www.devcampos.com.br (20)
Aula de HTML5 - DevCampos - www.devcampos.com.br
- 1. Aula de HTML 5
- 4. <!-- Essa tag foi totalmente 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 script e o resultado da sua dieta
- 6. <!-- No HTML 5 a 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 passos para tornar o seu site mobile (View Port)
- 8. <!-- Criada para os aparelhos 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 melhor padrão
- 10. <!-- O charset mudou e 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ática para inclusão de arquivos JS (CDN’S)
- 12. <!-- CDN: Uma forma de 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 do atributo DEFER
- 14. <!-- DEFER: O atributo defer 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 article funciona 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 para setornizar 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 funciona para 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 surgiram no 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ção do 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 de input: email, number, url, search e date
- 25. <!-- Novos tipos de campos contidos no html5 --> <input type="email"> <input type="date"> <input type="number"> <input type="search"> <input type="url">
- 26. Quando usar div
- 27. As diferenças entre usar id e class