22 Dicas básicas sobre HTML5 (tutorial de imagem e texto)

A tecnologia da web está se desenvolvendo muito rápido e, se você não acompanhar o tempo, será eliminado. Portanto, para lidar com o próximo HTML5, este artigo resume 22 habilidades básicas do HTML5 e espero que seja útil para você aprender ainda mais o HTML5.

A declaração XHTML é muito longa, e acredito que existem poucos desenvolvedores de front-end que podem esclarecer esta declaração Doctype.

<!

"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

A declaração Doctype do HTML5 é muito curta. Eu acredito que você pode se lembrar imediatamente depois de ver esta afirmação. Você não precisa desperdiçar células para se lembrar da declaração Doctype ligeiramente pervertida do XHTML.

<! Doctype html>

A breve instrução doctype do HTML5 é permitir que navegadores modernos, como Firefox e Chrome e navegadores, como o IE6/7/8, entre no modo padrão (quase-). Você pode se perguntar que o IE6/7 também pode suportar o HTML5 Doctype. De fato, o IE entrará no modo padrão, desde que o Doctype esteja em conformidade com este formato.

Dê uma olhada no seguinte código simples:

<img src = "path/to/image">

<H6> Imagem de Marte. </h6>

Infelizmente, a tag H6 aqui parece não ter nada a ver com a tag IMG, e a semântica não é clara o suficiente. O HTML5 percebeu isso e adotou a tag <Figura>. Quando a <Figura> combinada com a tag <Figcaption>, a tag H6 e a tag IMG podem ser combinadas e o código será mais semântico.

<Figura>

<img src = "path/to/image">

<CigCaption>

<H6> Esta é uma imagem de algo interessante. </h6>

</figcaption>

</figura>

Há pouco tempo, usei a tag <mall> para criar legendas relacionadas ao logotipo. No entanto, a tag <mall> é redefinida no HTML5 para torná -la mais semântica e o tamanho da fonte de <mall> se tornará menor. Pense nisso, ainda é uma boa ideia usar esta tag para informações de direitos autorais na parte inferior do site.

Geralmente você adiciona atributos de tipo para <link> e <cript>:

<link rel = "stylesheet" type = text/css href = "path/to/stylesheet.css">

<script type = "text/javascript" src = "path/to/script.js"> </script>

No HTML5, o atributo de tipo não é mais necessário, porque isso parece um pouco redundante e pode tornar o código mais conciso após a remoção.

<link href = "path/to/stylesheet.css">

<script src = "path/to/script.js"> </sCript>

Isso é um pouco confuso, o HTML5 não é XTHML, você pode salvar as cotações duplas nas tags. Acredito que a maioria dos camaradas, inclusive eu, está acostumada a adicionar cotações duplas, porque isso faz com que o código pareça mais padrão. No entanto, isso pode ser determinado com base em suas preferências pessoais, se deve usar cotações duplas.

<H6 id = "SomeId"> Inicie o reator. </h6>

Um novo atributo de email de uma caixa de entrada foi adicionado ao HMTL5, que pode detectar se o conteúdo de entrada atende ao formato de escrita do email. A função está ficando cada vez mais poderosa. Antes do HTML5, você só pode confiar no JS para detectá -lo. Embora a função de verificação de formulário interno em breve se torne realidade, muitos navegadores não suportam essa propriedade e serão tratados apenas como uma caixa de entrada de texto normal.

<Form Method = Get>

<Label para = "email"> email: </belt>

<input id = "email" type = "email" name = "email">

<button type = "envie"> envie o formulário </botão>

</morm>

Até agora, esse atributo não é suportado, incluindo navegadores modernos; portanto, esse atributo ainda não é confiável por enquanto.

O espaço reservado na caixa de texto (consulte o efeito da caixa de pesquisa deste blog) é propício para melhorar a experiência do usuário. Antes, só podíamos confiar no JS para alcançar o efeito dos espaços reservados e adicionar um espaço de espaço reservado em HTML5.

<input type = "email" name = "email" espaço reservado = "[email protected]">>

Da mesma forma, os atuais navegadores modernos mainstream não suportam muito bem essa propriedade. Por enquanto, apenas o Chrome e o Safari suportam essa propriedade, e o Firefox e a Opera não suportam essa propriedade.

A função de armazenamento local do HTML5 permite que os navegadores modernos se lembrem do que digitamos e, mesmo que o navegador esteja fechado e atualizado, ela não será afetada. Embora alguns navegadores não suportem essa função, IE8, Safari 4 e Firefox 3.5 ainda suportam essa função, você pode testá -la.

O código a seguir não existirá mais no HTML5

<div id = cabeçalho>

...

</div>

<div id = rodapé>

...

</div>

Normalmente, definimos uma div para cabeçalho e rodapé e depois adicionamos um ID, mas no HTML5 você pode usar as tags <weweler> e <weeber> diretamente, para que o código acima possa ser reescrito como:

<header>

...

</header>

<wower>

...

</rodapé>

Cuidado para não confundir essas duas tags com o cabeçalho e o rodapé do site, eles são apenas contêineres que os representam.

O navegador do IE atualmente não suporta o HTML5, que também é um grande tropeço, bloqueando a popularização mais rápida do HTML5. No entanto, o apoio do IE9 ao HTML5 ainda é muito bom.

Ou seja, analisa todas as tags recém-adicionadas do HTML5 em elementos embutidos, mas na verdade eles são elementos no nível do bloco, por isso é necessário definir um estilo para eles:

Cabeçalho, rodapé, artigo, seção, navegação, menu, HGroup {

exibição: bloco;

}

Apesar disso, o IE ainda não pode analisar essas tags HTML5 recém -adicionadas. Neste momento, o JavaScript precisa ser usado para resolver esse problema:

Document.CreateElement ("Artigo");

document.createElement ("rodapé");

document.createElement ("cabeçalho");

document.createElement ("hgroup");

document.createElement ("NAV");

document.createElement ("menu");

Você pode usar este código JavaScript para corrigir, ou seja, melhor analisar html5

<script mce_src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>

Isso é semelhante ao segundo truque. Se as tags H1 e H2 forem usadas para representar o nome e a legenda do site, ele não se relacionará com os dois títulos que estão intimamente relacionados em seu significado original. Neste momento, você pode usar a tag <Hgroup> para combiná -los, para que o código seja mais semântico.

<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>

O pessoal do front-end deve ter feito muitos projetos de verificação de formulários. Um dos pontos importantes é que algumas caixas de entrada devem ser preenchidas; portanto, o JavaScript é necessário para ser verificado aqui. No HTML5, é adicionado um novo atributo que deve ser preenchido: necessário. Existem duas maneiras de usar o atributo necessário. O segundo método parece mais estrutural, enquanto o primeiro método é mais simples.

<input type = "text" name = "someInput" necessário>

<input type = "text" name = "someInput" requerir = "requerir">>

Com esta propriedade, facilita a verificação do envio do formulário, dê uma olhada no seguinte exemplo simples:

<Form Method = Post>

<Label for = SomeInput> Seu nome: </belt>

<ID de entrada = algum tipo input = Nome do texto = algum espaço local para invasão = "Douglas quaid" requerido = "requerido">>

<button type = "submit"> go </botão>

</morm>

Se a caixa de entrada estiver vazia, o formulário não será enviado com sucesso.

Da mesma forma, o HTML5 não precisa mais do JavaScript para resolver a aquisição automática de foco de caixas de entrada. Se uma caixa de entrada for selecionada ou o foco de entrada for obtido, o HTML5 adicionou a propriedade de aquisição de foco automático automaticamente: foco automático:

<input type = "text" name = "someInput" espaço local = "Douglas quaid" requerido = "requerido" autofocus = "autofocus">

O foco automático também pode ser escrito como AutoFocus = AutoFocus, que parece mais padrão, dependendo da sua preferência pessoal.

O HTML5 fornece uma tag <udio>, que resolve o problema que, no passado, você tinha que confiar em plug-ins de terceiros para reproduzir arquivos de áudio. Até agora, apenas alguns navegadores mais recentes suportam esta tag.

<Audio Controls = "Controls" AutoPlay = "AutoPlay">

<fonte src = "file.ogg" _fcksavedurl = "" file.ogg "" />

<fonte src = "file.mp3" />

<a href = "file.mp3"> baixe este arquivo. </a>

</udio>

Por que existem dois formatos de arquivos de áudio? Como existem diferenças nos formatos suportados pelos navegadores Firefox e Webkit, o Firefox só pode suportar arquivos .OGG, enquanto o WebKit suporta apenas arquivos .mp3. A solução é criar duas versões de arquivos de áudio, para que possa ser compatível com os navegadores Firefox e Webkit. Deve -se notar que o IE não suporta essa tag.

Como a tag <Audio>, o HTML5 também fornece suporte para reproduzir arquivos de vídeo pela tag <dife>. O YouTube também anunciou uma nova incorporação de vídeo HTML5. Mas é um pouco lamentável que a especificação HTML5 não especifique um decodificador de vídeo específico, mas permite que o navegador decida por si mesmo. Isso cria um problema de compatibilidade do navegador. Embora o Safari e o IE9 suportem vídeos H.264 (os players do Flash podem jogar), o Firefox e o Opera suportam os formatos Theora e Vorbis de código aberto. Portanto, ao exibir vídeos HTML5, você também deve preparar dois formatos.

<Vídeo controla a pré -carga>

<fonte src = "cohagenphoneCall.ogv" type = "video/ogg"; codecs = 'Vorbis, teora' " />

<fonte src = "cohagenphonecall.mp4" type = "video /mp4; 'codecs =' avc1.42e01e, mp4a.40.2 '" />

<div> Seu navegador é antigo. <a href = "cohagenphonecall.mp4"> baixe este vídeo. </a> </div>

</video>

Deve -se notar que, embora o atributo de tipo possa ser omitido, se adicionado, o navegador pode analisar o arquivo de vídeo mais rápido e com precisão. Nem todos os navegadores suportam vídeos HTML5, então você deve usar a versão flash. Claro, a decisão está com você.

Atributo de pré -carga: pré -carga, antes de tudo, você precisa determinar se o vídeo precisa ser pré -carregado. Se um visitante estiver visitando uma página com muitos vídeos, é necessário pré -carregar um vídeo, que pode salvar o tempo de espera dos visitantes e melhorar a experiência do usuário. Você pode adicionar uma propriedade de pré -carga à tag <dife> para implementar funções de pré -carregamento.

<Video Preload = Preload>

...

</video>

[/código]

As propriedades de controle de exibição podem adicionar um controle de pausa de reprodução ao vídeo. Deve -se notar que o efeito exibido por cada navegador pode ser um pouco diferente.

<Video Controls = "Controls" Preload = "Preload">

...

</video>

No HTML5, podemos usar expressões regulares diretamente.

<Método de forma = pós -ação =>

<Rótulo para = nome de usuário> Crie um nome de usuário: </cretwle>

<ID de entrada = Nome de usuário Tipo = Nome do texto = Nome de usuário espaço reservado = 4 <> 10 requerido = requerido AutoFocus = AutoFocus Pattern = [A-Za-Z] {4,10}>

<Button Type = Submite> GO </Button>

</morm>

Como cada navegador possui suporte diferente para atributos HTML5, isso cria alguns problemas de compatibilidade. No entanto, os métodos podem ser usados ​​para detectar se o navegador suporta essas propriedades. Se o código no exemplo acima desejar detectar se o atributo padrão é reconhecido pelo navegador, ele poderá ser usado para detectá -lo usando o código JavaScript.

alerta ('padrão' em document.createElement ('input')) // boolean;

De fato, esse é um método comumente usado para determinar a compatibilidade do navegador, e a biblioteca jQuery geralmente usa esse método. Uma tag de entrada é criada no código acima e verifica se o atributo de padrão é suportado pelo navegador. Se puder ser suportado, o navegador suportará essa função; caso contrário, não será suportado.

<Cript>

if (! 'padrão' em document.createElement ('input')) {

// Faça validação do lado do cliente/servidor

}

</script>

A tag <sk> é usada para destacar o texto que precisa destacar visualmente sua importância para o usuário. A string embrulhada nesta tag deve estar relacionada ao comportamento atual do usuário. Por exemplo, se eu procurar abrir sua mente em alguns blogs, posso embrulhar cada ação usando o JavaScript na tag <sk>.

<H3> Resultados da pesquisa </h3>

<H6> Eles foram interrompidos, logo depois que Quato disse: <sk> "Abra sua mente" </sk>. </h6>

Algumas pessoas podem ter dúvidas. Com tags como <weweler> e <dower>, a tag <div> ainda funcionará no HTML5? A resposta é sim. Por exemplo, se você deseja criar um contêiner que possa envolver conteúdo especial, o <div> gratuito e flexível é definitivamente a primeira escolha. Se você deseja criar um artigo ou um menu de navegação, é recomendável que você use mais tags semânticas <Artigo> e <VN>.

Muitas pessoas pensam que o HTML5 ainda pode demorar muito, então o ignoram diretamente. De fato, muitos sites começaram a usar o HTML5 agora. De fato, alguns novos atributos e funções do HTML5 devem tornar o código mais conciso. Isso é sempre uma coisa boa e deve ser digna de nossos elogios. Por fim, obrigado por ler este artigo de nível básico no HTML5, na esperança de fornecer alguma ajuda para você aprender ainda mais o HTML5.