Recursos ocultos de HTML

HTML sendo a linguagem mais amplamente usada (pelo menos como uma linguagem de marcação) não recebeu o devido crédito.
Considerando que existe há tantos anos, coisas como os controles FORM / INPUT ainda permaneceram os mesmos sem nenhum novo controle adicionado.

Portanto, pelo menos a partir dos recursos existentes, você conhece algum recurso que não seja muito conhecido, mas muito útil.

Claro, essa questão é mais ou menos:

Recursos ocultos de JavaScript
Recursos ocultos de CSS
Recursos ocultos de C #
Recursos ocultos de VB.NET
Recursos ocultos de Java
Recursos ocultos de ASP clássico
Recursos ocultos de ASP.NET
Recursos ocultos de Python
Recursos ocultos de TextPad
Recursos ocultos de Eclipse

Não mencione os recursos do HTML 5.0, pois ele está em um rascunho de trabalho

Especifique um recurso por resposta .

Usando um caminho absoluto independente de protocolo:

<img src="//domain.com/img/logo.png"/>

Se o navegador estiver visualizando uma página em SSL por meio de HTTPS, ele solicitará esse ativo com o protocolo https, caso contrário, ele solicitará com HTTP.

Isso evita aquela terrível mensagem de erro "Esta página contém itens seguros e não seguros" no IE, mantendo todas as solicitações de ativos dentro do mesmo protocolo.

Advertência: quando usado em um <link> ou @import para uma folha de estilo, o IE7 e o IE8 baixam o arquivo duas vezes . Todos os outros usos, entretanto, são aceitáveis.

A tag label vincula logicamente o rótulo ao elemento do formulário usando o atributo "for". A maioria dos navegadores transforma isso em um link que ativa o elemento de formulário relacionado.

<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>

A propriedade contentEditable para (IE, Firefox e Safari)

<table>
    <tr>
      <td><div contenteditable="true">This text can be edited<div></td>
      <td><div contenteditable="true">This text can be edited<div></td>
    </tr>
</table>

Isso tornará as células editáveis! Vá em frente, tente se você não acredita em mim.

Acho que a tag optgroup é um recurso que as pessoas não usam com frequência. A maioria das pessoas com quem falo tendem a não perceber que existe.

Exemplo:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Minha parte favorita é a tag base, que salva vidas se você quiser usar o roteamento ou reescrita de URL ...

Digamos que você esteja localizado em:

www.anypage.com/folder/subfolder/

O que se segue é o código e os resultados dos links desta página.

Âncora regular:

<a href="test.html">Click here</a>

Leva a

www.anypage.com/folder/subfolder/test.html

Agora, se você adicionar tag base

<base href="http://www.anypage.com/" />
<a href="test.html">Click here</a>

A âncora agora leva a:

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror é um evento JavaScript que será disparado logo antes da imagem da cruz vermelha (no IE) ser mostrada.

Você pode usar isso para escrever um script que substituirá a imagem quebrada por algum conteúdo alternativo válido, de forma que o usuário não tenha que lidar com o problema da cruz vermelha.

À primeira vista isso pode ser visto como completamente inútil, porque, você não saberia anteriormente se a imagem estava disponível em primeiro lugar? Mas, se você considerar, existem aplicativos válidos perfeitos para isso; Por exemplo: suponha que você esteja exibindo uma imagem de um recurso de terceiros que você não controla. Como nosso gravatar aqui em SO ... é servido a partir de http://www.gravatar.com/ , um recurso que a equipe stackoverflow não controla de forma alguma - embora seja confiável. Se http://www.gravatar.com/ cair, stackoverflow poderia contornar isso usando onerror.

O <kbd>elemento para marcação de entrada do teclado

Ctrl+ Alt+Del

<blink>

Deve ser usado para qualquer coisa importante no site. Os sites mais importantes envolvem todo o conteúdo em um piscar de olhos.

<marquee>

Cria um efeito de rolagem realista, ótimo para e-books etc.

Edit: Calma rapazes, esta foi apenas uma tentativa de humor

Não é muito conhecido, mas você pode especificar lowsrcpara imagens que mostrarão o lowsrcdurante o carregamento srcda imagem:

<img lowsrc="monkey_preview.png" src="monkey.png" />

Esta é uma boa opção para quem não gosta de imagens entrelaçadas .

Um pouco de curiosidade: em um ponto, essa propriedade era obscura o suficiente para ser usada para explorar o Hotmail , por volta de 2000.

DELe INSpara marcar conteúdos excluídos e inseridos:

HTML <del>sucks</del> <ins>rocks</ins>!

A tag do botão é a nova input submittag e muitas pessoas ainda não estão familiarizadas com ela. O texto no botão pode, por exemplo, ser estilizado usando a tag do botão.

<button>
    <b>Click</b><br />
    Me!
</button>

Irá renderizar um botão com duas linhas, a primeira diz " Clique " em negrito e a segunda diz "Eu!". Experimente aqui .

Especifique o css para impressão

<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css"  media="print" />

os itens <dl> <dt>e <dd>são freqüentemente esquecidos e representam Lista de Definição, Termo de Definição e Definição.

Eles funcionam de forma semelhante a uma lista não ordenada ( <ul>), mas em vez de entradas únicas é mais como uma lista de chave / valor.

<dl>
  <dt>What</dt><dd>An Example</dd>
  <dt>Why</dt><dd>Examples are good</dd>
</dl>

Não exatamente escondido, mas (e isso é culpa do IE) poucas pessoas sabem sobre thead, tbody, tfoot para o meu gosto. E quantos de vocês sabiam que o pé deveria aparecer acima do corpo na marcação?

A marca de quebra de palavrawbr ou . Do Quirksmode:

(quebra de palavra) significa: "O navegador pode inserir uma quebra de linha aqui, se desejar." Se o navegador não achar que uma quebra de linha é necessária, nada acontece.

<div class="name">getElements<wbr>ByTagName()</div>

Eu dou ao navegador a opção de adicionar uma quebra de linha. Isso não será necessário em resoluções muito grandes, quando a mesa tem muito espaço. Em resoluções menores, no entanto, essas quebras de linha estrategicamente colocadas evitam que a tabela fique maior do que a janela, causando assim barras de rolagem horizontais.

Há também a ­entidade HTML mencionada na mesma página. É o mesmo que, wbrmas quando uma quebra é inserida, um hypen ( -) é adicionado para significar uma quebra. Mais ou menos como é feito na impressão.

Um exemplo:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTexto

Um recurso muito subutilizado é o fato de que quase todos os elementos, que fornecem conteúdo visível na página, podem ter um atributo 'título'.

Adicionar tal atributo faz com que uma 'dica de ferramenta' apareça quando o mouse é 'passado' sobre o elemento e pode ser usado para fornecer informações não essenciais - mas úteis - de uma forma que não torne a página muito lotada . (Ou pode ser uma forma de adicionar informações a uma página já lotada)

Aplicação de várias classes html / css a uma tag. Mesmo post aqui

<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>

Todos nós sabemos sobre DTDs ou declarações de tipo de documento (aquelas coisas que fazem sua página falhar com o validador W3C). No entanto, é possível estender os DTDs declarando uma lista de atributos para elementos personalizados.

Por exemplo, o validador W3C irá falhar para esta página devido ao behavior="mouseover"adicionado à <p>tag. No entanto, você pode fazer isso passar fazendo o seguinte:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[
<!ATTLIST p behavior CDATA #IMPLIED>
]>

Veja mais em sobre DTDs personalizados em QuirksMode .

Podemos atribuir string codificada de base 64 como um atributo source / href de imagem, JavaScript, iframe, link

por exemplo

<img alt="Embedded Image" width="297" height="246" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA..." />

div.image {
  width:297px;
  height:246px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...);
}

<image>
  <title>An Image</title>
  <link>http://www.your.domain</link>
  <url>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...</url>
</image>

<link rel="stylesheet" type="text/css"
  href="data:text/css;base64,LyogKioqKiogVGVtcGxhdGUgKioq..." />

<script type="text/javascript"
  href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>

Referências

Como posso construir imagens usando marcação HTML?

Arquivo binário para codificador / tradutor de Base64

Recentemente descobri sobre as tags fieldset e label. Como acima, não está oculto, mas é útil para formulários.

explicação <fieldset>

Exemplo:

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30" /><br />
    Email: <input type="text" size="30" /><br />
    Date of birth: <input type="text" size="10" />
  </fieldset>
</form>

Você pode usar a objecttag em vez de iframepara incluir outro documento na página:

<object data="data/test.html" type="text/html" width="300" height="200">
  alt : <a href="data/test.html">test.html</a>
</object>

<optgroup>é um ótimo que as pessoas geralmente perdem ao fazer <select>listas segmentadas .

<select>
  <optgroup label="North America">
    <option value='us'>United States</option>
    <option value='ca'>Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value='fr'>France</option>
    <option value='ir'>Ireland</option>
  </optgroup>
</select>

é o que você deveria usar em vez de

<select>
  <option value=''>----North America----</option>
  <option value='us'>United States</option>
  <option value='ca'>Canada</option>
  <option value=''>----Europe----</option>
  <option value='fr'>France</option>
  <option value='ir'>Ireland</option>
</select>

A maioria também não está ciente do fato de que você pode distinguir o botão do formulário pressionado apenas dando a ele um par nome / valor. Por exemplo

<form action="process" method="post">
     ...
     <input type="submit" name="edit" value="Edit">
     <input type="submit" name="delete" value="Delete">
     <input type="submit" name="move_up" value="Move up">
     <input type="submit" name="move_up" value="Move down">
</form>

No lado do servidor, o botão real pressionado pode então ser obtido apenas verificando a presença do parâmetro de solicitação associado ao nome do botão. Se não énull , o botão foi pressionado.

Eu tenho visto muito de desnecessária JS hacks / soluções alternativas para que, por exemplo, alterando a ação de formulário ou alterar um valor de entrada escondida antemão dependendo do botão pressionado. É simplesmente surpreendente.

Além disso, eu vi quase tantos hacks / soluções alternativas de JS para reunir as marcadas de várias caixas de seleção como nas linhas da tabela. Em cada seleção / verificação de uma linha da tabela, o JS adicionaria o índice da linha a algum valor separado por vírgula em um elemento de entrada oculto que seria então dividido / analisado posteriormente no lado do servidor. Isso é resultado da falta de conhecimento de que você pode dar a vários elementos de entrada o mesmo nome, mas um diferente valor e que ainda pode acessá-los como um array no lado do servidor. Por exemplo

<tr><td><input type="checkbox" name="rowid" value="1"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="2"></td><td> ... </td></tr>
<tr><td><input type="checkbox" name="rowid" value="3"></td><td> ... </td></tr>
...

O desconhecimento daria a cada caixa de seleção um nome diferente e omitiria todo o atributo de valor. Em algumas situações JS-hack / workaround-free, também vi uma mágica desnecessariamente opressora no código do lado do servidor para distinguir os itens verificados.

Tag Colgroup .

<table width="100%">
    <colgroup>
        <col style="width:40%;" />
        <col style="width:60%;" />
    </colgroup>
    <thead>
        <tr>
            <td>Column 1<!--This column will have 40% width--></td>
            <td>Column 2<!--This column ill have 60% width--></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
</table>

Se o for atributo de uma <label>tag não for especificado, ele é implicitamente definido como o primeiro filho <input>, ou seja,

<label>Alias: <input name="alias" id="alias"></label>

é equivalente a

<label for="alias">Alias:</label> <input name="alias" id="alias">

Botão como link, sem JavaScript :

Você pode colocar qualquer tipo de arquivo no formulário ação , e você tem um botão que atua como um link. Não há necessidade de usar eventos onclick ou similares. Você pode até abrir o arquivo em uma nova janela inserindo um "alvo" no formulário. Não vi muito essa técnica em aplicação.

Substitua isto

<a href="myfile.pdf" target="_blank">Download file</a>

com isso:

<form method="get" action="myfile.pdf" target="_blank">
    <input type="submit" value="Download file">
</form>

Maneira mais simples de atualizar a página em X segundos - META Refresh

<meta http-equiv="refresh" content="600">

O valor no conteúdo significa os segundos após os quais você deseja que a página seja atualizada.
[Editar]

<meta http-equiv="refresh" content="0; url=foobar.com/index.html">

Para fazer um redirecionamento simples!
(Obrigado @rlb)

<html>, <head>e as <body>tags são opcionais. Se você omiti-los, eles serão inseridos silenciosamente pelo analisador em locais apropriados. É perfeitamente válido fazer isso em HTML (como implícito<tbody> ).

Em teoria, HTML é um aplicativo SGML. Este é provavelmente o menor documento HTML 4 válido :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/

O acima não funciona em qualquer lugar, exceto W3C Validator. No entanto, o menor text/htmldocumento HTML5 válido funciona em qualquer lugar:

<!DOCTYPE html><title></title>

o lang atributo não é muito conhecido, mas é muito útil. O atributo é usado para identificar o idioma do conteúdo em todo o documento ou em um único elemento. Os códigos de idioma são fornecidos no código de idioma ISO de 2 letras (ou seja, 'en' para inglês, 'fr' para francês).

É útil para navegadores que podem ajustar a exibição de aspas, etc. Os leitores de tela também se beneficiam do lang atributo, assim como os mecanismos de pesquisa.

Sitepoint tem uma boa explicação sobre olang atributo.

Exemplos

Especifique o idioma como inglês para todo o documento, a menos que seja substituído por outro langatributo em um nível inferior no DOM.

<html lang="en">

Especifique o idioma no parágrafo seguinte como o sueco.

<p lang="sv">Ät din morgongröt och bli stor och stark!</p>

A declaração "! DOCTYPE" . Não pense que é um recurso oculto, mas parece que não é muito conhecido, mas é muito útil.

por exemplo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">