Scribd
Carregar
16 visualizações2 páginas

Recursos e Novidades do HTML5 e CSS3

HTML5 introduziu elementos semânticos como <header>, <footer>, <article>, <section> e <aside>, além de suporte nativo para multimídia com <video>, <audio> e <canvas>. Também trouxe APIs avançadas como Web Storage, Web Workers e Geolocation, além de melhorias em formulários com novos tipos de input e atributos. CSS3 acrescentou seletores avançados, modelos de layout flexíveis como Flexbox e Grid, transições e animações, media queries para designs responsivos e novos módulos focados em diferentes aspectos do design.

Enviado por

2k6msfkrwt
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
16 visualizações2 páginas

Recursos e Novidades do HTML5 e CSS3

HTML5 introduziu elementos semânticos como <header>, <footer>, <article>, <section> e <aside>, além de suporte nativo para multimídia com <video>, <audio> e <canvas>. Também trouxe APIs avançadas como Web Storage, Web Workers e Geolocation, além de melhorias em formulários com novos tipos de input e atributos. CSS3 acrescentou seletores avançados, modelos de layout flexíveis como Flexbox e Grid, transições e animações, media queries para designs responsivos e novos módulos focados em diferentes aspectos do design.

Enviado por

2k6msfkrwt
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

HTML5

Elementos Semânticos HTML5 introduziu novos elementos semânticos que ajudam a


estruturar o conteúdo das páginas web de forma mais clara e acessível:

• <header>: Define um cabeçalho para um documento ou seção.

• <footer>: Define um rodapé para um documento ou seção.

• <article>: Representa um conteúdo independente e de autoexplicativo.

• <section>: Define uma seção em um documento.

• <aside>: Conteúdo que está relacionado ao conteúdo principal, mas pode ser
considerado separado, como uma barra lateral.

Suporte para Multimídia HTML5 oferece suporte nativo para multimídia, eliminando a
necessidade de plugins externos:

• <video>: Utilizado para incorporar vídeos.

• <audio>: Utilizado para incorporar áudio.

• <canvas>: Utilizado para desenhar gráficos via scripting (geralmente JavaScript).

APIs Avançadas HTML5 inclui várias APIs (Interfaces de Programação de Aplicações)


que permitem a criação de aplicações web mais interativas e poderosas:

• Web Storage: Permite o armazenamento de dados no navegador do usuário


(localStorage e sessionStorage).

• Web Workers: Permite a execução de scripts em segundo plano.

• Geolocation: Permite que uma aplicação obtenha a localização geográfica do


usuário.

Formulários Melhorados Novos tipos de inputs e atributos foram introduzidos para


melhorar a usabilidade dos formulários:

• Tipos de input: email, url, date, number, range, etc.

• Atributos: placeholder, required, pattern, autofocus.

CSS3

Seletores Avançados CSS3 introduziu novos seletores que permitem uma seleção mais
precisa dos elementos HTML:

• nth-child(): Seleciona o n-ésimo filho de um elemento pai.

• nth-of-type(): Seleciona o n-ésimo filho de um tipo específico de elemento.


Layouts Flexíveis CSS3 inclui novos modelos de layout que facilitam a criação de
layouts responsivos e complexos:

• Flexbox: Um modelo de layout que distribui espaço entre os itens de um


contêiner.

• Grid: Um sistema de layout bidimensional que permite a criação de layouts


complexos com linhas e colunas.

Transições e Animações CSS3 permite a criação de efeitos visuais dinâmicos com


transições e animações:

• transition: Define a transição entre dois estados de um elemento.

• animation: Define uma animação que pode ser aplicada a um elemento,


utilizando @keyframes.

Media Queries CSS3 introduziu media queries, que permitem a criação de designs
responsivos adaptáveis a diferentes dispositivos:

• @media: Permite aplicar estilos específicos com base nas características do


dispositivo, como largura da tela.

Novos Módulos CSS3 é composto por vários módulos, cada um focado em diferentes
aspectos do design:

• Backgrounds and Borders: Define estilos avançados para fundos e bordas.

• Text Effects: Inclui efeitos de texto como sombras e transformações.

• 2D/3D Transformations: Permite a aplicação de transformações bidimensionais


e tridimensionais em elementos.

• Web Fonts: Permite o uso de fontes personalizadas através da regra @font-face

Você também pode gostar