Dicas HTML5 1: A velocidade do desenvolvimento da tecnologia hoje é incrível. Se você não tomar cuidado, talvez não seja capaz de acompanhá -lo. O desenvolvimento da nova geração de HTML-HTML5 continua a nos trazer novas surpresas. Introduziremos algumas técnicas HTML para você através deste artigo.
1. Novo tipo de documento (Doctype)
<!
http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
Você ainda está usando o tipo de documento XHTML acima que é problemático e difícil de lembrar? Se ainda for esse o caso, é hora de mudar para o novo tipo de documento HTML5.
<! Doctype html>
Agora, são necessários apenas 15 caracteres tão simples. (Nota: sua declaração doctype precisa aparecer na primeira linha do seu arquivo html.)
2. Elementos gráficos (figura)
Você ainda está pensando em usar o seguinte código para marcar imagens?
<mg src = path/to/imagem alt = sobre imagem/>
<p> Imagem de Marte. </p>
O código acima não pode ser associado ao título do gráfico de maneira simples e semântica, porque é simplesmente envolvido com marcas de parágrafo e elementos da imagem, e o HTML5 melhora isso introduzindo elementos <Figura>. Quando usado em conjunto com o elemento <FigCaption>, podemos emparelhar o título gráfico com o gráfico. O código é o seguinte:
<Figura>
<img src = path/to/imagem alt = sobre imagem/>
<CigCaption>
<p> Esta é uma imagem de algo interessante. </p>
</figcaption>
</figura>
3. Redefine <small>
Acontece que você pode usar o elemento <mall> para criar legendas intimamente relacionadas ao logotipo. No entanto, agora o HTML5 modificou esse uso, e o elemento <small> foi redefinido ou, mais apropriadamente, agora é usado para representar palavras pequenas ou outras notas laterais (como aviso de direitos autorais na parte inferior do site).
4. Não são necessários mais scripts ou tipos de link
Provavelmente, você ainda está adicionando propriedades do tipo aos seus links e tags de script, como o código abaixo.
<link rel = Stylesheet href = path/to/stylesheet.css type = text/css/>
<script type = text/javascript src = path/to/script.js> </script>
No HTML5, isso não é mais necessário. Isso significa que esses dois rótulos representam estilos e scripts, respectivamente. Portanto, podemos excluir todos os seus atributos de tipo. O código é o seguinte:
<link rel = Stylesheet href = path/to/stylesheet.css/>
<script src = path/to/script.js> </script>
5. Use ou não use cotações
Lembre -se, o HTML5 é diferente do XHTML e você não precisa envolver os atributos nas cotações, se não gostar. No entanto, se você acha que usar citações fará com que você se sinta mais confortável, é claro que não haverá problemas.
<p class = myClass ID = SomeId> Inicie o reator.
6. Faça seu conteúdo editável
Um dos recursos muito poderosos do HTML5 é contentável, o que, como o nome indica, permitirá ao usuário editar qualquer conteúdo de texto contido em um elemento (incluindo seus elementos filhos). Ele possui uma ampla gama de usos, como listas de tarefas simples ou sites baseados em wiki, e uma de suas vantagens é que ele utiliza armazenamento local.
<! Doctype html>
<html lang = en>
<head>
<meta charset = utf-8 ″>
<Title> sem título </ititure>
</head>
<Body>
<H2> Lista de tarefas </h2>
<ul contentedável = true>
<li> Quebre o motorista mecânico da cabine. </li>
<li> Dirija para a fábrica abandonada
<li> Assista ao vídeo de Self </li>
</ul>
</body>
</html>
Ou, como diz o quinto truque, você também pode escrever o código na linha nove assim (sem cotações):
<ul contentedável = true>
7. Entrada por e -mail
Se aplicarmos o tipo de email para especificar o formulário da entrada, podemos comandar o navegador para permitir apenas a entrada da string que está em conformidade com a estrutura de endereço de email válida. Embora a verificação de formulário incorporada chegue em breve, não podemos confiar inteiramente nisso. Os navegadores mais antigos não entendem esse tipo de email, eles simplesmente retornam à caixa de texto normal.
<! Doctype html>
<html lang = en>
<head>
<meta charset = utf-8 ″>
<Title> sem título </ititure>
</head>
<Body>
<forma de ação = método = get>
<Rótulo para = email> email: </belt>
<ID de entrada = Nome do email = Tipo de email = email />
<Button Type = Enviar> Enviar formulário </butut>
</morm>
</body>
</html>
Quando se trata de elementos e atributos que o navegador suporta e não suporta, você deve saber que todos os navegadores não são tão confiáveis no momento. Por exemplo, a Opera suporta apenas a verificação de email se você especificar o atributo de nome. No entanto, ele não suporta o atributo de espaço reservado (como será discutido abaixo). Finalmente, embora você possa usar essa forma de verificação, não confie muito nela.