HTML 5.1 Novos recursos e exemplos de aplicativos de novos recursos e aplicativos

Como todos sabemos, o HTML5 pertence à Wanwei Network Alliance (W3C). Em novembro de 2016, o W3C atualizou o padrão HTML 5 do exercício de longo prazo, que foi a primeira pequena atualização em 2 anos. Muitos recursos funcionais do HTML 5.1 propostos inicialmente foram removidos devido a defeitos de projeto e falta de suporte dos fabricantes de navegadores.

Embora existam alguns elementos e melhorias de funções, ele é trazido para o HTML 5.1, ainda é uma pequena atualização. Alguns desses novos elementos incluem rótulos combinados.

O W3C e o início do desenvolvimento do Draft HTML 5.2 devem ser lançados no final de 2017. O que queremos apresentar aqui é as novas características funcionais e a melhoria da função introduzida na versão 5.1. Você não precisa mover o JavaScript para usar esses recursos. Nem todos os navegadores suportam esses recursos; portanto, você deve verificar para verificar o suporte do navegador antes de aplicá -los ao ambiente de produção.

A maioria das pessoas que usa o Target = '_ Blank' não conhece um fato interessante-o rótulo recém-aberto pode alterar a janela.opener.Location para algumas páginas de pesca em rede. Ele o representará na página aberta para executar algum código JavaScript malicioso. Como o usuário acredita que a página de abertura é segura, eles não duvidam.

Para eliminar completamente esse problema, o HTML 5.1 padronizou o uso da propriedade rel = Noopner, padronizada pelo isolamento do contexto do navegador. Rel = Noopener pode ser usado nas tags <a> e <aia>.

 <A href =# Target = _blank roth = Noopner> O link quer mais problemas </a>

A tag <CigCaption> representa o título ou a legenda associada ao elemento <Figura>, que geralmente é usado como um contêiner para elementos visuais, como imagens, gráficos, ilustrações. Na versão HTML inicial, <FigCaption> só pode ser usada como o primeiro ou o último sub -label. O HTML5.1 relaxou esse limite e agora você pode usar <FigCaption> em qualquer lugar do contêiner <Figura>.

 <tlicle> <h1> A manchete das notícias/figuras de hoje <p> Este é o aumento da caminhada nos preços da gasolina em dois meses e o terceiro em caso de diesel em uma quinzena

A verificação ortográfica é um atributo de enumeração que pode levar o valor da sequência vazia, verdadeira e falsa. Se o estado for especificado para ser verdadeiro, significa que o elemento aceitará a ortografia e a inspeção gramatical dela.

Element.forcecespellcheck () forçará os agentes de usuários a relatar erros de ortografia e gramática detectados no elemento de texto, mesmo que o usuário nunca concentre a entrada no elemento.

 <P SpellCheck = True> <brety> Nome: <input spellcheck = false id = textbox> </cret> </p>

A nova versão do HTML permite criar um elemento <Opção> vazio. Pode ser um sub -elemento do elemento <PtGroup>, <datalist> ou <select>. Você descobrirá que esse recurso pode ajudar ao projetar uma tabela unilateral de usuários.

A propriedade BOOLEAN VARIABE HISSFULLSCREEN desenvolvida para o quadro permite controlar se o conteúdo pode ser exibido através da tela usando o método requerentlScreen (). Por exemplo, usamos iframes incorporados no YouTube como exemplo. Você precisa definir a propriedade DesfullScreen para permitir que o jogador exiba o vídeo completo.

 <Tartadicle> <Phead> <p> <img src =/usericons/16235> <b> Fred Flintstone </b> </p> <p> <a href =/posts/30934 r = marcador> 12:44 < /a> - <a href =#A.503439551> Post privado </a> </p> </header> <p> <p> Confira meu novo vídeo! >

HTML5.1 permite incorporar o cabeçalho e o rodapé em outro cabeçalho. Você pode adicionar um cabeçalho ou rodapé aos elementos da cabeça, se eles se conterem no conteúdo do parágrafo. Se você deseja adicionar uma elaboração detalhada, como <Section> e <Artigo>, a elementos de parágrafos semânticos, esse recurso se tornará muito útil.

No código a seguir, o rótulo <Artigo> contém uma tag <header>, que possui uma tag <oswer> com uma tag <Sheader>.

 <Tarader> <H2> Lição: Como cozinhar frango </h2> <uncier> <wideler> <h2> sobre o autor: Tom Haank </h2> <a href =./TomHank/> Entre em contato com ele! </a/p> </weader> <p> Especialista em nada além de cozinhar. No saco com zíper com o frango e sele

A nova versão do HTML permite adicionar imagens de largura zero. Esse recurso pode ser usado quando a imagem não precisa ser exibida para o usuário. Se um elemento IMG tiver outros usos, não é apenas uma imagem, por exemplo, como parte do serviço para calcular o número de visualizações de página, use 0 valores nas propriedades de largura e altura. Para fotos de 0 largura, é recomendável usar atributos vazios.

 <Img src = theImagefile.jpg width = 0 altura = 0 src = "/uploads/allimg/170217/22010q544-0.jpg"/>
 O método do novo relatórioValidez () permite verificar um formulário e redefinir resultados e relatar erros aos usuários na posição adequada do navegador. Os agentes de usuário podem relatar mais de uma regra de restrição, se um único elemento encontrar vários problemas ao mesmo tempo. Para essa situação, a entrada de senha é um conteúdo obrigatório, mas não preenchido, e será identificado como um erro.
 <H2> Validação do formulário </h2> <p> Digite detalhes </p> <form> <breting> Tipo de entrada obrigatória = Nome da senha = senha necessária/> </LABEL> <Button Type = Subst It> submeter </botão > </mand> <cript> document.qurysElector ('formulário')
 6. O contexto do navegador
 No HTML 5.1, você pode usar a marca <pune> para definir o menu, que contém um ou mais elementos <Menuitem> e, em seguida, usa a propriedade ContextMenu para vinculá -lo a qualquer elemento. O ID do elemento <Menu> deve ser consistente com o valor do atributo contextmenu do elemento que queremos adicionar o menu de contexto.
 Cada <menuitem> pode ter uma das três formas a seguir:
 Opção de Rádio -Get de um grupo;
 Caixa de seleção -Selecione ou cancele a opção;
 Comando -execute uma ação ao clicar.
 <H2 ContextMenu = PopUp-Menu> Clique com o botão direito do mouse para obter a demonstração do menu de contexto. Type = comando rótulo = comando oclick = alert ('aviso')> caixa de seleção 2 </menuitem> <menuitem type = name de rádio = grupo1> botão de rádio a </menuitem t ype = nome do rádio = group1 verificado = true> botão de rádio b b </Menuitem> <menuitem tipo = caixa de seleção desativado> Desativar o item de menu
 5. Use números aleatórios criptografados em scripts e estilos
 Nonce criptográfico é um número gerado aleatoriamente, que só pode ser usado uma vez e, para cada solicitação de página, ele deve ser gerado. Este atributo nonce pode ser usado nos elementos <SCRIPT> e <Toy>.
 Geralmente é usado na estratégia de segurança de conteúdo de um site para determinar se um estilo e um script específicos devem ser implementados na página. No código fornecido abaixo, esse valor é codificado, mas no cenário de uso real, esse valor é gerado aleatoriamente.
 <script nonce = 'd3ne7uwp43bhr0e'> o código javascript </sCript>
 4. Relacionamento do link de sequência reversa
 O atributo Rev é definido no HTML4, mas não aparece no HTML5. O W3C é decidido re -incluir os atributos da REC em elementos <a> e <ink>. A relação entre os documentos de link atual e reversa da identificação do atributo REV. Foi incluído para suportar o formato de marca de estrutura de dados amplamente utilizado, RDFA.
 Vamos usar dois documentos para dar um exemplo.
 // Documentar com URL Capítulo1.html <link href = lição2.html rel = Next Rev = Prev> // Documente com URL Capítulo2.html <link href = lição1.html = prev rev = próximo> <link href = lição3 Roth = próximo rev = prev>
 3. Exibir/ocultar informações
 Os novos elementos <tahtaht> e <summary> permitem adicionar informações de extensão a um parágrafo. Você pode exibir ou ocultar um bloco de informações adicionais através do elemento de clique. Por padrão, as informações adicionais estão ocultas.
 No código, você deve colocar a marca <summary> na marca <tahtaht>, como mostrado abaixo. Após o rótulo <summary>, você pode adicionar outro conteúdo para estar oculto.
 <Section> <h3> Mensagem de erro </h3> <weita> <summary> Este arquivo não tem download do erro de rede. <dt> Tamanho do arquivo: </dt> <dd> 8 kb </dd> <dt> Código de erro: </dt> <dd> 342a </dd> </dl> </tailtaws> </section>
 2. Mais tipos de itens de entrada
 O elemento de item de entrada HTML expandiu três tipos de entrada de uma semana, mês e local de dados.
 Como o nome mostra, os dois primeiros elementos permitem que os usuários escolham um valor de uma semana e um valor de um mês. Dependendo do apoio do navegador, eles serão renderizados em um calendário de desenho exibido, permitindo que você escolha uma semana ou mês específica de um ano.
 Datatime-Local representa um domínio de entrada e hora de entrada, mas não há configurações de fuso horário. Seus dados podem ser selecionados em um método semelhante ao item de entrada do mês ou da semana, e o tempo pode ser inserido sozinho.
 <Section> <h2> semana, mês e datetime-local </h2> <formulário action = action_page.php> Escolha uma semana: <input tye = Action_page.php> aniversário (mês e ano): <tipo de entrada = nome do mês = bdaymonth> <tipo de entrada = submeter> </form> <formulário action = action_page.ph p> junção (data e hora): <Tipo de entrada = Nome do local do dateTETime = bdaytime> <Tipo de entrada = Valor de envio = send> </morm> </section>
 1. Imagem de resposta
 O W3C introduz algumas características funcionais e a imagem de resposta pode ser alcançada sem o uso de CSS. Eles são ...
 atributo de imagem srcset
 O atributo SRCSET permite especificar várias fontes de imagem opcionais, correspondendo a uma resolução de pixels diferentes. Ele permitirá que o navegador exiba a implementação de qualidade apropriada de acordo com os diferentes dispositivos de usuário. Por exemplo, é melhor exibir uma imagem de baixa resolução para usuários com dispositivos móveis lentos.
 Você pode usar a propriedade SRCSET e trazer seus próprios símbolos de modificação X para descrever a relação pixel de cada imagem.
 <Img src = cliques/low-res.jpg srcset = clicks/low-ress.jpg 1x, cliques/médio-rés.jpg 2x, cliques/high-res.jpg 3x>
 Além da relação pixel, você também pode optar por usar o símbolo de modificação W para especificar imagens de tamanhos diferentes. No exemplo a seguir, a imagem de alta resolução é definida como uma tela quando a largura é de 1600px.
 <Img src = clicks/low-res.jpg srcset = clicks/low-ress.jpg 500w, cliques/médio-res.jpg 1000w, cliques/high-ress.jpg 1600w>
 Tamanhos Atributo da imagem
 Na maioria das vezes, os criadores gostam de exibir imagens diferentes para o tamanho de tela diferente. Isso pode ser alcançado com o atributo de tamanho. Ele permite ajustar a largura para o tamanho do espaço distribuído à exibição da imagem e, em seguida, use a propriedade SRCSET para selecionar a imagem apropriada para ser exibida. Por exemplo…
 <Img src = cliques/low-ress.jpg tamanhos = (max-width: 25em) 60VW, 100VW srcset = cliques/low-ress.jpg 500w, cliques/médio-res.jpg 1000w, cliques/altos. 1600W>
 Aqui, o atributo de tamanhos define 100%da largura da imagem da janela quando a janela é maior que 25 EM, ou 60%da largura da vista da vista quando é menor que igual a 25em.
 elemento da imagem
 O elemento de imagem permite que você declare imagens para o tamanho de tela diferente. Isso pode ser implementado encapsulando <mg> com o elemento <chance> e descrevendo múltiplos sub -elementos <OrceM>.
 <Piction> A marcação por si só não mostra nada. Você assumiu que a fonte de imagem padrão será declarada como o valor do atributo SRC e a fonte de imagem opcional será colocada no atributo scrset.
 <imagem> <fonte de mídia = (largura máxima: 25em) srcset = cliques/small/low-res.jpg 1x, cliques/pequeno/médio-res.jpg 2x, clices/small/high-ress.jp > <Fonte de mídia = (max-width: 60em) srcset = cliques/grande/low-ress.jpg 1x, cliques/grande/média-res.jpg 2x, clices/grande/high-res.jpg 3x> <img src = Cliques/default/médio- res.jpg> </spiction>
 Resumir
 O acima é o conteúdo deste artigo.