Recursos ocultos de HTML


110

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 .

Respostas:


244

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.


29
Isso não é um recurso HTML, mas um recurso de URL / URI.
Gumbo

44
@Gumbo: É verdade, é um recurso de URI, mas achei que fosse bom o suficiente para quebrar as regras e incluí-lo aqui. E não espero recursos ocultos da especificação de URI tão cedo. :)
Paul Irish

2
uma barra é relativa da parte do domínio, não da parte do protocolo
SztupY

2
IE é tão incrivelmente MUDO! Por que diabos ele faz a DL do arquivo duas vezes?

5
Há uma grande desvantagem: quando um arquivo é salvo em disco e acessado usando o file:protocolo, o navegador não será capaz de encontrar o recurso (por exemplo, de um CDN ou algum outro servidor externo).
Marcel Korpel

138

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

24
sim, é incrível como poucos sites usam isso ativamente. Já vi sites usando js para fazer isso ...
Boris Callens

2
Descobri este recentemente.
Arnis Lapsa

4
cagdas, não existem recursos realmente ocultos no HTML, é um padrão especificado.
ausência de pálpebras

54
Para expandir a resposta, também é possível envolver uma entrada com um rótulo e omitir o atributo for: <label> Ano Fiscal <input name = "fiscalYear" type = "text" /> </label>
eyelidness

32
Usar caixas de seleção e botões de opção sem isso deveria ser um crime.
Kornel

136

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.


7
A pergunta exige recursos que não são introduzidos pelo HTML5
Quentin

15
David Dorward, Não é exatamente justo dizer que foi introduzido com HTML5, como contentEditable foi introduzido pela MS no IE 5.5, mas sim, não foi padronizado até HTML5; Tyson & Steve, contentEditable foi introduzido no Safari na versão 2.0, mas muitos métodos de formatação importantes não foram adicionados até a 3.x; Victor H Valle, depende do seu doctype. HTML 4 deve expandi-lo para = "true" quando recolhido.
ausência de pálpebras

2
o link de teste não leva a um exemplo apropriado
Gordon Gustafson

4
@Binoj - Absolutamente não. "O atributo contenteditable é um atributo enumerado cujas palavras-chave são a string vazia, verdadeiro e falso" - w3.org/TR/html5/editing.html
Quentin

2
Melhor ainda, adicione o seguinte como um bookmarklet para permitir a edição de qualquer página da web em que você esteja: javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void (0);
Amro

102

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>

Infelizmente, a implementação da hierarquia de menus no navegador deixa muito a desejar. Suspeito que optgroup não seja muito utilizado porque seus casos de uso relevantes são poucos e distantes entre si.
ausência de pálpebras

1
Um nível deve ser compatível com todos os navegadores. Um fórum da web do qual estou separado, onde o usa em algumas telas para dividir a lista do fórum nas mesmas seções usadas na página principal.
staticsan

@staticsan. Concordo que é útil para pequenas categorizações de vários itens.
RichardOD

5
@eyelidlessness: vejo drop-downs o tempo todo que indentam elementos ou usam algum tipo de texto de 'cabeçalho' como ---category---.
DisgruntledGoat

4
Esse é um recurso bacana que eu não conhecia!
Chrisb

100

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

48
Você também pode usar apenas /images/image.png, com uma barra inicial. :-)
molf

46
A tag base é uma opção nuclear - é o equivalente a #define: se você não controlá-la, deixe-a bem clara para os futuros desenvolvedores e torne-a uma parte realmente de baixo nível da arquitetura do site, ela pode ser frustrante bugs não óbvios. Eu nunca precisei disso, use com cautela.
annakata

2
Sim, também vi a tag base interferir no meu JavaScript ao tentar carregar arquivos CSS dinamicamente na página. Além disso, um bug no IE6 requer que você feche explicitamente a tag (</base>), que é inválida. Comentários condicionais podem ajudar com isso.
avdgaag

4
Observe que o URL base é aplicado a cada URL relativo e não apenas aos caminhos de URL relativos. Portanto, a referência #topseria resolvida para “topo” no documento de índice raiz e para “topo” no mesmo documento.
Gumbo

17
Acho isso extremamente útil em situações em que tenho que 'visualizar o código-fonte' e baixar o HTML de uma página para trabalhar com ele. Depois de fazer o download da fonte, você pode adicionar um elemento BASE com o atributo href apropriado. Desta forma, você pode trabalhar localmente depois de baixar apenas o código-fonte HTML ... não há necessidade de baixar todo o javascript, css e imagens.
Andy Ford

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


Aha ... se é isso que penso, eu deveria saber disso antes, quando eu realmente precisava disso. : /
Arnis Lapsa

para esclarecer, onerror é um evento javascript (assim como onclick) que permite que você faça algo quando uma imagem falha ao carregar.
Jehiah

1
Daniel Silveira, você pode esclarecer que isso, de fato, executa um código de erro no caso de imagens quebradas (por exemplo, 404)? Independentemente disso, esse é um recurso DOM, não um recurso HTML em si.
ausência de pálpebras

2
Tive um numpty usar este aqui, apontando para uma imagem inexistente, recursiva alguem ???
Pharabus

96

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

Ctrl+ Alt+Del


Existe algo especial sobre <kbd> além de ser um formato de fonte diferente? se não, aqui está uma lista de outras tags de formatação? w3schools.com/tags/tag_phrase_elements.asp
Seu amigo Ken,

Não especialmente, apenas não muito conhecido, eu não acho
Russ Cam,

3
Nada por padrão, mas é mais limpo marcar o elemento com CSS como o SO faz.
Agent_9191

1
Não sabia que existia, isso é divertido.
Kzqai

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


62
Talvez a pergunta devesse ter especificado que você não deveria listar os recursos que desejamos manter ocultos.
Ben Blank

12
... Usei <blink>, como parte de um estilo de terminal psuedo para um código de exibição de div (: before {content: "drthomas @ house: ~ $";}: after {content: "_"; text -decoração: blink;} ... foi incrível. Provavelmente deveria procurar ajuda. =]
David diz reintegrar Monica em

2
<marquee> <blink> As tags HTML MAIS irritantes de todos os tempos !!! </blink> </marquee> Elas não estão escondidas, apenas não são usadas por um motivo.
Seu amigo Ken,

2
Eu envolvo minha página inteira em Marquee and Blink porque sou muito legal
Sphvn de

3
Por favor. O único uso legítimo de <blink> é: o gato de Schroedinger <blink> não </blink> está morto. (Achei que estava no xkcd, mas não consigo encontrar no momento.)
Christopher Creutzig

84

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.


Isso eu não sabia. Pode ser usado para "carregar" a animação?
Boris Callens

2
Estou recebendo um aviso de fraude no Opera a partir desse link "explorar Hotmail". : o
jrista

2
É um site de segurança, é seguro.
Joey Robert

27
Mas esse atributo é proprietário. msdn.microsoft.com/library/ms534138(VS.85).aspx
Gumbo

17
Este atributo está obsoleto desde HTML4 - você não deve usá-lo em sites de produção.
Ben Hull

67

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

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

10
Definitivamente não é usado o suficiente.
ausência de pálpebras

2
@eyelidlessness: simplesmente não há situações suficientes em que marcar texto excluído / inserido seja tão útil.
DisgruntledGoat

2
Eu poderia jurar que StackOverflow usou <ins>e <del>nas páginas de revisões em algum momento atrás, mas agora ele usa <span class="diff-add">e <span class="diff-delete">. :(
PAUSA do sistema em

1
Histórias de revisão do wiki @DisgruntledGoat? muitos casos de uso para ele
HorusKol

3
@Horus: claro que você pode encontrar usos, mas no grande esquema das coisas ainda não é uma grande quantidade de situações.
DisgruntledGoat

58

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 .


15
É uma pena que ele esteja quebrado no IE <8. É possível contornar os problemas, mas isso pode ser doloroso e, às vezes, você atinge a proteção de segurança em execução entre o servidor web e o ambiente de programação do lado do servidor.
Quentin

6
Mas o IE <8 enviará o conteúdo do elemento, não seu valor. Acredito que algumas versões sempre o tratarão como um controle bem-sucedido (mesmo que não tenha sido clicado) também.
Quentin

4
E se você torná-lo <editável pelo conteúdo do botão>, também poderá alterar o texto do botão! Aponta para qualquer pessoa que possa encontrar um uso válido para ele. :)
Gavin

4
Eu nunca entendi por que havia um tipo de envio de "entrada". Não está inserindo nada, apenas enviando o que você inseriu em outros campos.
DisgruntledGoat

3
@DisgruntledGoat: seu par nome / valor será realmente enviado. Útil se você tiver mais de um botão em um formulário (por exemplo, editar, excluir, mover para cima, etc.) e quiser distinguir o botão pressionado. Infelizmente, o mesmo não funciona buttonno IE <8, ele envia surpreendentemente os pares nome / valor de TODOS os buttonelementos.
BalusC

56

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

1
Descobri isso há algumas semanas
Daniel Moura

41
Não estou realmente escondido.
Dmitri Farkov,

Isso é de uso comum.
UpTheCreek

Se você não lidou com isso antes, espero que você não tenha feito nenhum site de produção antes ...
Kzqai

como isso pode ser considerado oculto?
Marin de

54

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>

Além disso, a semântica dl / dt / dd é apropriada para listas semelhantes (por exemplo, a estrutura foi recomendada para diálogos).
ausência de pálpebras

2
A apresentação padrão não é tão legal, mas as pessoas esquecem que os elementos podem ser estilizados de várias maneiras com CSS.
DisgruntledGoat

18
O mais interessante que costuma ser esquecido é que o formato é chave / valor / valor / valor / valor / chave / valor
Quentin

1
@D_N, acho que o desacordo é que considero os usos sugeridos uma parte da definição e da semântica, em vez de separados e contraditórios a ela.
ausência de pálpebras

1
@D_N e @eyelidlessness - confira a nota de Bruce Lawson sobre marcar uma conversa semanticamente ... além disso, o júri ainda está decidindo
Fenton

52

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?


1
boris callens, Sim, tbody está implícito se nenhum thead, tbody e tfoot estiverem presentes.
ausência de pálpebras

2
Se o IE5 tivesse implementado o TBODY corretamente, mais pessoas o usariam. Este foi o principal problema há vários anos. Mozilla e Opera suportam rolagem TBODY, o que é muito legal; infelizmente, o IE5 não o fez.
staticsan

9
Eles são úteis para impressão porque devem colocar o theade tfootna parte superior e inferior de cada página. É uma pena que não haja mecanismo de repetição theadno navegador, quando você tem mesas longas e longas.
DisgruntledGoat

1
Eu sabia que o pé ia acima de todo mundo e acho isso muito estúpido. Coloquei meu tfoot abaixo, onde fazia sentido, obtive um erro do validador, movi o tfoot acima do tbody (confuso, mas sempre compatível), e adivinha ?! Quando você tenta destacar a mesa, o navegador (FF pelo menos) destaca o pé ANTES do corpo, embora esteja visualmente abaixo do corpo! E depois!!! quando você copia para um editor de texto, está ACIMA do corpo visualmente. Regra totalmente arbitrária.
Anthony

3
@Anthony: faz sentido se você tiver uma conexão lenta, significa que você pode ver todos os cabeçalhos e rodapés enquanto o conteúdo da tabela ainda está carregando.
me_e

50

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 &shy;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


2
Tenha cuidado porque não há suporte para navegador ruim neste aqui
Christophe Eblé

7
"IE8 como IE8" não é compatível e apresenta erros no Safari 3.0 para Windows. Fora isso, o suporte é muito bom. Consulte a tabela de compatibilidade no link.
aleemb

A referência do ponto de site Hmm marcou esta tag como obsoleta e inútil, quem está certo? reference.sitepoint.com/html/wbr
Christophe Eblé

Pode muito bem ter sido descontinuado como parte das especificações HTML, mas ainda funciona em navegadores. Sempre que tiver dúvidas, siga o veredicto do QuirksMode (tabelas de compatibilidade agora patrocinadas pelo Google).
aleemb

Parece que isso seria algo muito útil para incluir no próximo padrão css!
James

43

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)


Sim, o atributo "título" é bastante útil, especialmente para elementos que devem ser clicados.
Steve Harrison

6
A dica de ferramenta que aparece é específica do navegador. Nem todos os navegadores exibirão o atributo de título da mesma forma. Mas é um bom recurso que eu certamente uso.
Travis

8
O atributo title é útil, mas apenas quando usado apropriadamente. A maioria dos navegadores renderiza a dica de ferramenta apenas por alguns segundos antes de desaparecer. Eu odeio quando os designers sentem a necessidade de preencher o atributo title com 3 ou 4 linhas de texto, o que faz com que você tenha que passar o mouse sobre ele e, em seguida, passar o mouse novamente para ler o resto.
priestc

Usar isso em conexão com jQuery é igual a grandiosidade.
Levi Morrison

Levi - você pode dar alguns exemplos?
belugabob

38

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>

22
Essas são classes HTML, não classes CSS. CSS não tem classes (tem seletores de classe). As classes HTML são úteis para outras coisas além do CSS.
Quentin

36
Uau! Eu simplesmente não consigo superar o fato de que as pessoas acham que esse é um recurso "oculto". Cara, eu me sinto estúpido em postar alguns recursos "realmente ocultos" porque as pessoas que votaram contra isso provavelmente nem chegarão perto de entender o que significa estender um DTD.
aleemb

5
d03boy, p.foo, p.var não é o mesmo que p.foo.bar. O primeiro seleciona qualquer parágrafo com a classe "foo" ou "var", o último seleciona um parágrafo com ambas as classes.
ausência de pálpebras

5
A questão das classes HTML é um bom ponto, porque me leva a um ponto - html não deve ser informado sobre css .. você 'deve' ser capaz de criar html e passá-lo para um designer que pode implementar seu design sem necessidade de alterar o html (ainda não é bem o caso;)) .. então isso se resume à sua nomenclatura e maneira de usar as classes .. não crie classes para as propriedades css de destino .. use classes para identificar o que é o elemento '.
meandmycode

1
Tecnicamente, "Foo Bar BlackBg" é uma classe única e p.foo é apenas um açúcar sintático para p [class ~ = foo] (consulte as especificações ). É mais fácil pensar nisso como tendo várias classes, no entanto.
Tgr

34

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 .


10
Claro, isso o torna "Válido: sua linguagem de marcação personalizada" e não "XHTML 1.0 Transitional"
Quentin

3
+1. Não sei porque foi -1. De qualquer forma, deve-se notar que o suporte do navegador é praticamente nulo.
ausência de pálpebras

Tenho certeza que o Opera suporta isso.
Rich Bradshaw

2
@eyelidlessness ele só funciona em XHTML. Não funciona em XHTML fictício enviado como texto / HTML.
Kornel

2
Eesh, não sou fã disso. Para mim, o valor do HTML é que todos no planeta sabem o que ele significa (mais ou menos), porque todos nós usamos as mesmas tags e atributos. Não sei por que o classatributo não é extensibilidade suficiente.
Paul D. Waite

28

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


4
Infelizmente, o IE <8 não oferece suporte para isso. No entanto, você pode usar MHTML para estes navegadores: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Mathias Bynens

26

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>

Forneça um exemplo de uso.
Binoj Antony


Fieldset descoberto na página de amostra do aspnet mvc. ^^
Arnis Lapsa

2
Não sabia sobre este. Aqui está a especificação W3c: w3.org/TR/html401/interact/forms.html#h-17.10
MitMaro

Conjuntos de campos e lendas são ótimos. Uma maneira muito boa de marcar seus formulários.
Neil Aitken

25

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>

57
O que acaba funcionando quase exatamente como um iframe, exceto pelo fato de ter menos suporte e menos recursos.
Quentin

iframe está obsoleto, esperamos obter um suporte melhor em breve,
Gordon Gustafson

12
iframe não está obsoleto em HTML 5.
Zach

Previne ataques XSS da página incorporada?
covarde anônimo de

1
Acredito que use SOP, assim como iframes.
Zach

25

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

25

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.


1
Ei .. Isso aparentemente é outro recurso oculto do HTML: /;)
BalusC

1
Se um formulário tiver vários botões de envio e o usuário clicar em um, certas versões do Internet Explorer informarão alegremente ao seu servidor que todos foram clicados. Maravilhoso.
detly

1
@detly: somente se você usar em <button type="submit">vez de <input type="submit">:)
BalusC

1
... buuuuut o IE6 também não tem problemas com <input type="submit">? (Minha memória sobre esse problema é nebulosa - há muito tempo convenci os empregadores a não se preocupar com a compatibilidade do IE com aplicativos da web internos, então não é mais meu problema. Mas pareço lembrar de alguma barreira para tornar esse problema solucionável no IE6. )
detly

2
Isso não é muito adequado para i18n.
zneak

22

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>

15
Na minha experiência, o suporte do colgroup é, na melhor das hipóteses, instável.
ausência de pálpebras

notavelmente semelhante é WPF Grid
Binoj Antony

18

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

4
Mas isso tem menos suporte do navegador do que o atributo for
Quentin

4
@David - Você tem alguma documentação para comprovar isso? Acho que nunca vi um navegador que não suportasse esse uso. Eu testei pessoalmente no IE6 / 7, FF2 / 3, Safari 3 e Chrome 1/2. Ainda não me testei no Opera, mas ficaria muito surpreso se não funcionasse. Este comportamento faz parte da especificação original do HTML 4.0, publicada pela primeira vez há mais de onze anos: w3.org/TR/1998/REC-html40-19980424/interact/forms.html#adef-for
Ben Blank

Além disso, não é válido colocar uma entrada dentro de um rótulo, e DOH você não fechou sua tag de entrada em nenhum dos exemplos!
Anthony

5
Você está errado em ambos os casos: esta é uma prática válida e a tag final é proibida para elementos de entrada.
muo

15

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>

27
O botão não terá a opção "Salvar arquivo como", que pode ser necessária para usuários que não gostam do Adobe Acrobat assumindo o controle do navegador.
Kornel

Ele se comportará com o comportamento padrão do navegador ao acessar o arquivo PDF. Pode ser um arquivo HTML, um arquivo word, um arquivo zip ou qualquer outra coisa que você queira.
Wadih M.

Em que situação uma tag âncora requer um evento onclick? e por que 3 linhas de html seriam melhores do que 1? A ideia é que você PODE ter um botão em vez de um link, então é legal e como o botão? Mesmo que pareça irritado com isso, na verdade eu tenho uma página que usa botões em vez de links porque o arquivo é criado dinamicamente quando o usuário o solicita, então eu não queria um link para: blah.php? Stuff = "userdata" Mesmo que eu pudesse ter seguido esse caminho, não queria arriscar que o nome do arquivo tivesse o script de geração de arquivo como o nome em vez do nome do arquivo que o script fornece ao arquivo.
Anthony

1
Por que não estilizar a tag <a> como um botão? Isso parece muito lixo em sua marcação.
UpTheCreek

2
@UpTheCreek alguns aplicativos da web desejam ter a mesma aparência do sistema operacional. Por exemplo, um botão feio quando o usuário usa o Windows e um botão bonito quando o usuário usa o Mac OS X.

13

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)


13
Claro, descobrir quais elementos precisam ser atualizados e depois atualizá-los via AJAX resulta em uma experiência do usuário muito mais agradável ...
Steve Harrison

11
A atualização META realmente não faz nada de bom em páginas onde há também algum tipo de atividade de formulário do usuário, porque pode interromper o preenchimento do formulário do usuário e descartar todo o trabalho. Acho que raramente há ocasiões em que esse tipo de atualização seria melhor. É apenas a maneira mais fácil de sair normalmente.
Robert Koritnik

11
/ me odeia páginas que atualizam assim ... deveriam ser banidas = /
Svish

3
Isso também pode ser útil se definido como um pouco menos do que o tempo limite da sessão para notificar o usuário de que sua sessão expirou e foi removida.
fforw

1
Intervalo de tempo limite curto botão de retorno.
Kornel

12

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

4
Você deve ter cuidado com o que anuncia. O código acima irá passar na validação com 4 avisos no validador w3c, mas o DocType é HTML 4.0. É muito legal que o HTML 4 seja descendente do SGML e, portanto, mantenha esse padrão de validação flexível, mas se você alterar esse DTD para XHTML 1.0 STRICT, ele obtém 15 erros, que é quase igual ao número de caracteres. O XHTML foi desenvolvido porque o HTML era muito preguiçoso (e, portanto, inseguro), então não queremos mais tirar proveito disso.
Anthony

3
Se você alterar o DOCTYPE do documento HTML / SGML para XHTML / XML, obterá uma mistura sem sentido. Isso é bastante óbvio e não sei por que você está apontando isso.
Kornel

3
Este exemplo pode, tecnicamente, ser HTML 4 válido, mas os navegadores não suportam essa sintaxe SGML abreviada. O seguinte é o menor documento HTML 5 válido, que os navegadores realmente suportam:<!DOCTYPE html><title></title>
Brian Campbell

Alguma ideia de quão compatível é deixar de fora head/ body, não apenas de uma perspectiva de validação?
kibibu

@kibibu: Os navegadores não têm problemas com isso. As versões antigas do Opera costumavam ser omitidas <head>no DOM às vezes, mas o conteúdo principal estava no DOM e funcionava de qualquer maneira. O maior problema que descobri é que os clientes OpenID precisam <head>estar explicitamente presentes.
Kornel

11

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>

10

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

10
E sem mencionar "obrigatório para a maioria das linguagens de marcação atuais e sem uma é impossível validar um documento de forma confiável" ... validator.w3.org/docs/help.html#faq-doctype
Svish

Eu não acho que isso "não seja mais conhecido". No período entre o IE 6 e o ​​IE 7, o uso do doctype foi de ~ 1% para> 50%.
ausência de pálpebras

@eyelidlessness A maioria dos IDE inclui essa tag, por isso seu uso aumentou. Acho que essa tag não é muito conhecida.
Daniel Moura

6
E usar um doctype rígido corrige 95% das inconsistências do navegador.
DisgruntledGoat

3
Parte do padrão e usado por 99% dos desenvolvedores não soa como "recurso oculto".
WhyNotHugo
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.