Hoje vou iniciar um novo curso da série HTML5/"> HTML5, que é o meu estudo observa sobre" O Guia Definitivo para HTML5 ". Organizarei os capítulos ou conteúdo significativo que acho bom ou significativo para que todos aprendam.
Um elemento pode definir seus próprios atributos, como a tag A para definir o atributo href, que é chamado de atributo local. Correspondentemente, podemos definir comportamentos comuns para todos os elementos por meio de atributos globais. Obviamente, você também pode definir atributos globais para elementos individuais, mas não faz muito sentido fazê -lo. Abaixo, apresentarei esses atributos globais um por um.
O exemplo a seguir é executado normalmente no navegador Chrome. Alguns exemplos de Firefox não podem ser executados, e eu não testei outros navegadores, por isso é recomendável que você use o navegador Chrome como seu navegador HTML5 preferido. Não me concentrei nos problemas de compatibilidade do navegador, mas no aprendizado e na implementação. HTML5 ainda está sendo melhorado. Com sua popularidade, acredito que os principais navegadores o apoiarão cada vez melhor, e o problema de compatibilidade do navegador será muito melhor naquele momento.
1.AccessKeyA propriedade AccessKey permite definir um ou mais atalhos de teclado para que você possa selecionar elementos na página. Vejamos o exemplo a seguir:
<! Doctype html>
<html>
<head>
<title> Exemplo </title>
</head>
<Body>
<morm>
Nome: <input type = "text" name = "name" accessKey = "n"/>
<p/>
Senha: <input type = "senha" name = "senha" accessKey = "p"/>
<p/>
<input type = "submit" value = "login" accessKey = "s"/>
</morm>
</body>
</html>
Neste exemplo, você pode usar combinações de chaves para selecionar elementos na página. Por exemplo, no sistema operacional do Windows, você pode usar o ALT+XXX para selecionar um elemento.
Efeito de corrida:
2.ClassNão quero dizer mais nada sobre esse atributo. É uma função do agrupamento elementos. Na maioria das vezes, é usado em combinação com CSS para definir diferentes efeitos de exibição para elementos em diferentes grupos.
3. ContentávelEste é um novo atributo adicionado ao HTML5. Adicione o atributo contentável aos elementos HTML, defina -o como true, permitindo que os usuários editem o conteúdo do elemento; definido como false, e não permitir que os usuários editem.
<! Doctype html>
<html>
<head>
<title> Exemplo </title>
</head>
<Body>
<p contenteditable = "true"> está chovendo agora </p>
</body>
</html>
4.ContextMenuO ContextMenu permite que os usuários defina o menu do clique com o botão direito do mouse do elemento HTML, e o menu aparecerá quando o usuário o acionar. Nenhum navegador suporta essa propriedade até agora.
5.dir O atributo DIR define o alinhamento dos literais do elemento HTML, apoiando dois valores, LTR (da esquerda para a direita) e RTL (da direita para a esquerda).<! Doctype html>
<html>
<head>
<title> Exemplo </title>
</head>
<Body>
<p dir = "rtl"> Isso é certo para a esquerda </p>
<p dir = "ltr"> Isso é da esquerda para a direita </p>
</body>
</html>
6. DrorgableDraggable é um atributo que implementa a função Drag and Drop dos elementos HTML no HTML5, que apresentaremos em detalhes nos cursos a seguir.
7.DropZonaO DropZone também é um atributo que implementa a função de arrasto do elemento HTML no HTML5. Vamos apresentá -lo em detalhes no curso posterior.
8.HiddenTodos devem estar familiarizados com esse atributo, que é ocultar um elemento HTML.
9.idTodos devem saber esse atributo. Ele define um identificador exclusivo para o elemento HTML, e nenhum elemento com um ID considerável é permitido em uma página HTML.
10.LangLang especifica o idioma usado com o conteúdo do elemento HTML. O valor de Lang deve ser um código de idioma ISO válido. Você pode visitar o endereço abaixo para obter mais detalhes, http://tools.ietf.org/html/bcp47. Deve -se notar que lidar com a linguagem é uma questão muito complexa e técnica.
<! Doctype html>
<html>
<head>
<title> Exemplo </title>
</head>
<Body>
<p lang = "en"> Olá - como você está? </p>
<P lang = "fr"> Bonjour - Comentário êtes -vous? </>
<p lang = "es"> hola - ¿cómo estás? </p>
</body>
</html>
11.SPELLCHECK Ao usar o atributo da verificação ortográfica, o navegador o ajudará a verificar se o conteúdo da verificação ortográfica do elemento HTML está escrito corretamente. Somente quando o elemento HTML é editável, o atributo da verificação ortográfica pode ser significativa.<! Doctype html>
<html>
<head>
<title> Exemplo </title>
</head>
<Body>
<textarea spellcheck = "true"> Este é algum texto desleixado </sexttarea>
</body>
</html>
Efeito: (eu não executei o efeito desejado com o Chrome, não sei por quê)
12.StyleNão há necessidade de introduzir muito esse atributo e definir o estilo CSS para o elemento HTML.
13.TabindexO Tabindex permite definir a ordem em que os elementos HTML são acessados ao usar a tecla TAB. Quando o Tabindex estiver definido como -1, o elemento HTML não será selecionado usando a tecla TAB.
<! Doctype html>
<html>
<head>
<title> Exemplo </title>
</head>
<Body>
<morm>
<bret> Nome: <input type = "text" name = "name" tabindex = "1"/> </belt>
<p/>
<Boel> Cidade: <input type = "text" name = "city" tabindex = "-1"/> </belt>
</p>
<bret> país: <input type = "text" name = "country" tabindex = "2"/> </belt>
</p>
<input type = "envie" tabindex = "3"/>
</morm>
</body>
</html>
Efeito:
14.Título O título pode fornecer informações adicionais para o elemento HTML, que geralmente é usado para exibir informações rápidas.<! Doctype html>
<html>
<head>
<title> Exemplo </title>
</head>
<Body>
<a href = "http://apress.com"> Visite o site Apress </a>
</body>
</html>
Efeito:
Isso é tudo para o curso de hoje, espero que esses conteúdos sejam úteis para todos.
Endereço para download de demonstração: html5guide.rar