Afinal, a especificação HTML5 é uma especificação que acaba de definir, e alguns navegadores não podem suportar os novos rótulos e novos atributos, especialmente o IE8 e as versões abaixo do navegador. Aqui estão alguns métodos práticos que usam as novas tags do HTML5 na página.
O IE8 Browser não adicionou novo suporte para tags HTML5, por isso não pode exibir diretamente o conteúdo na nova tag HTML5 no IE8. Felizmente, o IE8/IE7/IE6 suporta o rótulo gerado pelo método do documento.CreateElement.
var e = abbr, artigo, de lado, áudio, telas, dados de dados, detalhes, diálogo, eventos ou figura, rodapé, hurch, marca, medidor, medidor, saída, progessa, seção, tempo, vídeo.split (','); Var i = e.length;Depois que o navegador suporta o novo rótulo, você precisa adicionar o estilo padrão do rótulo:
Artigo, além, FigCaption, Figura, Footer, cabeçalho, HGroup, Nav, Seção {Display: Block} Mark {Background:#FF0;Dessa forma, o código JavaScript simples e o código CSS podem criar o IE8 e a versão abaixo do navegador suporta novas tags no HTML5. Obviamente, a melhor maneira de usar estruturas maduras diretamente.
<!-[se lt ie 9]> <Script> src = http://html5shim.googlecode.com/svn/trunk/html5.js </script> <!
O HTML5, em um sentido amplo, inclui HTML5, CSS3 e novas APIs. Como os novos recursos são mais ou menos compatíveis com os navegadores, é necessário detectar se o navegador suporta esse recurso ao usar os novos recursos. Quando o navegador não suporta novos recursos, ele pode ser adequadamente compatível. Atualmente, não existe um método uniforme para detectar o suporte de novos recursos. Felizmente, existem engenheiros entusiasmados no exterior desenvolveram vários novos recursos de detecção.
O princípio da estrutura do Modelnizr é detectar automaticamente se o navegador suporta os novos recursos e adicionar a classe correspondente à tag <html>. Se o navegador suportar um determinado recurso, uma classe nomeada após o nome característico será adicionado. Ao mesmo tempo, ele também gerará um objeto chamado Modernizr. A estrutura Modernizr também contém a função da estrutura HTML5SHIM, que pode permitir que o IE8 e abaixo dos navegadores suportem novas tags.
O método de uso do Modernizr é muito simples.
<script src = js/modelnizr.min.js> </script>
Em segundo lugar, adicione uma classe chamada No-Js na etiqueta HTML:
<html class = no-js>
Se o navegador não desativar o JavaScript, depois que o navegador carregar a página, a classe na tag HTML substituirá e adicionará dinamicamente. Após o carregamento, a tag html é semelhante ao seguinte:
<html class = js Canvas podextText geolocation rgba hsla no-multiplebgs borderraderradius boxshadow opacimanimammns no-cssgra dients no-cssrefllection
No código CSS, você pode usar essas classes para adicionar o código de compatibilidade com versões anteriores.
#Nice {Background: URL (Background-one.png) Top esquerda Repetição-x;}.}.Os leitores interessados nessa estrutura podem navegar no site oficial da Modernizr para obter exemplos cada vez mais detalhados e métodos de uso.
O áudio e os vídeos são comumente usados na página, mas os navegadores são mais confusos, então aqui está um tópico separado. O áudio e os vídeos são as características do suporte nativo do navegador anteriormente, para que a reprodução de áudio e vídeo não esteja mais limitada a plug -in de terceira parte, especialmente em plataformas móveis. O áudio e os vídeos são um grande bolo, e todos os fabricantes de navegadores querem distinguir o maior, o que também faz com que o navegador distingue o formato dos formatos de áudio e vídeo. A lista de formatos de áudio de suporte para o navegador é a seguinte:
Navegador | Versão | Formato de suporte |
Internet Explorer | 9.0+ | Mp3, aac |
Cromo | 6.0+ | Ogg Vorbis, Mp3, Wav (9,0+) |
Firefox | 3.6+ | Ogg Vorbis, Wav |
Safári | 5.0+ | Mp3, aac, wav |
Ópera | 10.0+ | Ogg Vorbis, Wav |
Cerca de 80%do navegador suporta a tag <ugio> do HTML5, mas não há formato uniforme de áudio. Na perspectiva do formato de suporte, todos os navegadores podem reproduzir áudio no elemento de áudio.
<Audio Controls> <fonte src = elvis.mp3 Type = 'áudio/mpeg; Informações, forneça links para download, use flash player, etc.-> navegador não suporta <udo </code> tags </udio>
O vídeo também é semelhante ao áudio.
Navegador | Versão | Formato de suporte |
Internet Explorer | 9.0+ | MP4 |
Cromo | 6.0+ | MP4, WebM, Ogg |
Firefox | 3.6+ | WebM, Ogg |
Safári | 5.0+ | MP4 |
Ópera | 10.0+ | WebM, Ogg |
A julgar pelo formato de vídeo suportado pelo navegador, a melhor maneira é fornecer dois formatos nos formatos WebM e MP4. O código compatível é o seguinte:
<Video Controls> <fonte src = video.webm type = video/webm> <fonte src = video.mp4 type = video/mp4> <! ?
A versão acima é a versão de compatibilidade do navegador do novo rótulo do HTML5, introduzido pelo Xiaobian. Muito obrigado pelo seu apoio ao site VevB Wulin!