Funciones ocultas de HTML


110

HTML, siendo el lenguaje más utilizado (al menos como lenguaje de marcado), no ha recibido su merecido crédito.
Teniendo en cuenta que ha existido durante tantos años, cosas como los controles FORM / INPUT siguen siendo los mismos sin nuevos controles agregados.

Entonces, al menos de las características existentes, ¿conoce alguna característica que no sea muy conocida pero que sea muy útil?

Por supuesto, esta pregunta está en la línea de:

Funciones ocultas de JavaScript
Funciones ocultas de CSS
Funciones ocultas de C #
Funciones ocultas de VB.NET
Funciones ocultas de Java
Funciones ocultas de ASP clásico
Funciones ocultas de ASP.NET
Funciones ocultas de Python
Funciones ocultas de TextPad
Funciones ocultas de Eclipse

No mencione las características de HTML 5.0, ya que está en borrador de trabajo

Especifique una función por respuesta .

Respuestas:


244

Usando una ruta absoluta independiente del protocolo:

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

Si el navegador está viendo una página en SSL a través de HTTPS, entonces solicitará ese activo con el protocolo https; de lo contrario, lo solicitará con HTTP.

Esto evita ese horrible mensaje de error "Esta página contiene elementos seguros y no seguros" en IE, manteniendo todas sus solicitudes de activos dentro del mismo protocolo.

Advertencia: cuando se usa en un <link> o @import para una hoja de estilo, IE7 e IE8 descargan el archivo dos veces . Todos los demás usos, sin embargo, están bien.


29
Esa no es una función HTML, sino una función URL / URI.
Gumbo

44
@Gumbo: Es cierto, es una función de URI, pero pensé que era lo suficientemente buena como para doblar las reglas e incluirla aquí. Y no espero características ocultas de la especificación URI en el corto plazo. :)
Paul Irish

2
una barra es relativa de la parte del dominio, no de la parte del protocolo
SztupY

2
¡IE es increíblemente tonto! ¿Por qué diablos hace DL el archivo dos veces?

5
Hay un gran inconveniente: cuando un archivo se guarda en el disco y se accede a él mediante el file:protocolo, el navegador no podrá encontrar el recurso (por ejemplo, un CDN o algún otro servidor externo).
Marcel Korpel

138

La etiqueta etiqueta enlaza lógicamente la etiqueta con el elemento de formulario utilizando el atributo "para". La mayoría de los navegadores convierten esto en un enlace que activa el elemento de formulario relacionado.

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

24
sí, es sorprendente cómo pocos sitios usan esto activamente. He visto sitios que usan js para hacer esto ...
Boris Callens

2
Descubrí este recientemente.
Arnis Lapsa

4
cagdas, no hay características realmente ocultas en HTML, es un estándar específico.
párpados

54
Para ampliar la respuesta, también se puede envolver una entrada con una etiqueta y omitir el atributo for: <label> Año fiscal <input name = "fiscalYear" type = "text" /> </label>
eyelidlessness

32
Usar casillas de verificación y botones de opción sin él debería ser un delito.
Kornel

136

La propiedad contentEditable para (IE, Firefox y 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>

¡Esto hará que las celdas sean editables! Adelante, pruébalo si no me crees.


7
La pregunta requiere características que no son introducidas por HTML5
Quentin

15
David Dorward, No es exactamente justo decir que se introdujo con HTML5, ya que contentEditable fue introducido por MS en IE 5.5, pero sí, no se ha estandarizado hasta HTML5; Tyson & Steve, contentEditable se introdujo en Safari en la versión 2.0, pero muchos métodos de formato importantes no se agregaron hasta 3.x; Victor H Valle, depende de su tipo de documento. HTML 4 debería expandirlo a = "true" cuando se contraiga.
párpados

2
el enlace de prueba no conduce a un ejemplo apropiado
Gordon Gustafson

4
@Binoj - Por supuesto que no. "El atributo contenteditable es un atributo enumerado cuyas palabras clave son la cadena vacía, verdadero y falso" - w3.org/TR/html5/editing.html
Quentin

2
Mejor aún, agregue lo siguiente como marcador para permitir editar cualquier página web en la que se encuentre: javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void (0);
Amro

102

Creo que la etiqueta optgroup es una característica que la gente no usa con mucha frecuencia. La mayoría de las personas con las que hablo no suelen darse cuenta de que existe.

Ejemplo:

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

Desafortunadamente, la implementación del navegador de la jerarquía de menús deja mucho que desear. Sospecho que optgroup no se usa mucho porque sus casos de uso relevantes son pocos y distantes entre sí.
párpados

1
Se debe admitir un nivel en todos los navegadores. Un foro web del que soy aparte lo usa en algunas pantallas para dividir la lista de foros en las mismas secciones que se usan en la página principal.
staticsan

@staticsan. Estoy de acuerdo en que es útil para una pequeña categorización de varios elementos.
RichardOD

5
@eyelidlessness: Veo menús desplegables todo el tiempo que sangran elementos o usan algún tipo de texto de 'encabezado' como ---category---.
DisgruntledGoat

4
¡Esta es una característica interesante que no conocía!
Chrisb

100

Mi parte favorita es la etiqueta base, que es un salvavidas si desea utilizar el enrutamiento o la reescritura de URL ...

Digamos que se encuentra en:

www.anypage.com/folder/subfolder/

El siguiente es el código y los resultados de los enlaces de esta página.

Ancla regular:

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

Lleva a

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

Ahora, si agrega una etiqueta base

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

El ancla ahora conduce a:

www.anypage.com/test.html

48
También puede usar /images/image.png, con una barra inclinada. :-)
molf

46
La etiqueta base es una opción nuclear, es el equivalente de #define: si no la rastreas, déjala realmente clara a los futuros desarrolladores y conviértela en una parte de muy bajo nivel de la arquitectura del sitio que puede resultar frustrante errores no obvios. Nunca he necesitado esto, utilícelo con precaución.
Annakata

2
Sí, también he visto que la etiqueta base interfiere con mi JavaScript cuando intento cargar dinámicamente archivos CSS en la página. Además, un error en IE6 requiere que cierre explícitamente la etiqueta (</base>), que no es válida. Los comentarios condicionales pueden ayudar con eso.
avdgaag

4
Tenga en cuenta que la URL base se aplica a todas las URL relativas y no solo a las rutas de URL relativas. Por lo tanto, la referencia #topse resolvería en "top" en el documento de índice raíz y en "top" en el mismo documento.
Gumbo

17
Encuentro esto extremadamente útil en situaciones en las que tengo que 'ver el código fuente' y descargar el HTML de una página para trabajar con él. Una vez que se descarga la fuente, puede agregar un elemento BASE con el atributo href apropiado. De esta manera, puede trabajar localmente después de descargar solo el código fuente HTML ... sin necesidad de descargar todos los javascript, css e imágenes.
Andy Ford

99
<img onerror="{javascript}" />

onerror es un evento de JavaScript que se activará justo antes de que se muestre la imagen de la pequeña cruz roja (en IE).

Puede usar esto para escribir un script que reemplace la imagen rota con algún contenido alternativo válido, para que el usuario no tenga que lidiar con el problema de la cruz roja.

A primera vista, esto puede verse como completamente inútil, porque, ¿no sabría previamente si la imagen estaba disponible en primer lugar? Pero, si lo considera, hay aplicaciones válidas perfectas para esto; Por ejemplo: suponga que está sirviendo una imagen de un recurso de terceros que no controla. Como nuestro gravatar aquí en SO ... se sirve desde http://www.gravatar.com/ , un recurso que el equipo de stackoverflow no controla en absoluto, aunque es confiable. Si http://www.gravatar.com/ se cae, stackoverflow podría solucionar esto usando onerror.


Ajá ... si esto es lo que creo que es, debería saber esto antes cuando realmente lo necesitaba. : /
Arnis Lapsa

para aclarar, onerror es un evento javascript (como onclick) que le permite hacer algo cuando una imagen no se carga.
Jehiah

1
Daniel Silveira, ¿podría aclarar que esto, de hecho, ejecuta un código de error en el caso de imágenes rotas (por ejemplo, 404)? Independientemente, esta es una función DOM, no una función HTML per se.
párpados

2
Tuve un numpty use this one, apuntando a una imagen inexistente, alguien recursivo ???
Pharabus

96

El <kbd>elemento para marcar para entrada de teclado

Ctrl+ Alt+Del


¿Hay algo especial en <kbd> además de ser un formato de fuente diferente? si no es así, ¿hay una lista de otras etiquetas de formato? w3schools.com/tags/tag_phrase_elements.asp
Your Friend Ken

No especialmente, simplemente no es muy conocido, no creo
Russ Cam

3
Nada de forma predeterminada, pero es más limpio marcar el elemento con CSS como lo hace SO.
Agent_9191

1
No sabía que existía, eso es divertido.
Kzqai

85
<blink>

Debe usarse para cualquier cosa importante en el sitio. Los sitios más importantes envuelven todo el contenido en un abrir y cerrar de ojos.

<marquee>

Crea un efecto de desplazamiento realista, ideal para libros electrónicos, etc.

Editar: muchachos fáciles, esto fue solo un intento de humor


62
Quizás la pregunta debería haber especificado que no debería enumerar características que queremos que permanezcan ocultas.
Ben Blank

12
... He usado <blink>, como parte de un estilo psuedo-terminal para un código de visualización div (: before {content: "drthomas @ house: ~ $";}: after {content: "_"; text -decoration: blink;} ... fue increíble. Probablemente debería buscar ayuda. =]
David dice reinstalar a Monica

2
<marquee> <blink> ¡¡¡Las etiquetas HTML MÁS molestas de todos los tiempos !!! </blink> </marquee> Estas no están ocultas, simplemente no se usan por una razón.
Your Friend Ken

2
Envuelvo toda mi página en Marquee y Blink porque soy así de genial
Sphvn

3
Por favor. El único uso legítimo de <blink> es: el gato de Schroedinger <blink> no </blink> está muerto. (Pensé que esto estaba en xkcd, pero no puedo encontrarlo en este momento).
Christopher Creutzig

84

No muy conocido, pero puede especificar lowsrcimágenes que mostrarán lowsrcmientras se carga srcla imagen:

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

Esta es una buena opción para aquellos a quienes no les gustan las imágenes entrelazadas .

Un poco de trivia: en un momento, esta propiedad era lo suficientemente oscura como para que se usara para explotar Hotmail , alrededor del año 2000.


Esto no lo sabía. ¿Se puede utilizar para "cargar" animaciones?
Boris Callens

2
Recibo una advertencia de fraude en Opera desde el enlace "explotar Hotmail". : o
jrista

2
Es un sitio web de seguridad, es seguro.
Joey Robert

27
Pero este atributo es propietario. msdn.microsoft.com/library/ms534138(VS.85).aspx
Gumbo

17
Este atributo ha quedado obsoleto desde HTML4; no debe utilizarlo en sitios web de producción.
Ben Hull

67

DELy INSpara marcar contenidos eliminados e insertados:

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

10
Definitivamente no se usa lo suficiente.
párpados

2
@eyelidlessness: simplemente no hay suficientes situaciones en las que marcar texto eliminado / insertado sea tan útil.
DisgruntledGoat

2
Podría jurar que StackOverflow usó <ins>y <del>en las páginas de Revisiones en algún momento hace un tiempo, pero ahora usa <span class="diff-add">y <span class="diff-delete">. :(
PAUSA del sistema

1
¿Historias de revisión de wiki @DisgruntledGoat? muchos casos de uso para ello
HorusKol

3
@ Horus: seguro que puedes encontrar usos, pero en el gran esquema de las cosas todavía no hay una gran cantidad de situaciones.
DisgruntledGoat

58

La etiqueta del botón es la nueva input submitetiqueta y mucha gente todavía no está familiarizada con ella. El texto del botón puede, por ejemplo, modificarse con la etiqueta del botón.

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

Representará un botón con dos líneas, la primera dice " Haga clic " en negrita y la segunda dice "¡Yo!". Pruébelo aquí .


15
Es una pena que esté roto en IE <8. Es posible solucionar los problemas, pero eso puede ser doloroso y, a veces, se llega a la protección de seguridad que se ejecuta entre el servidor web y el entorno de programación del lado del servidor.
Quentin

6
Pero IE <8 enviará el contenido del elemento, no su valor. Creo que algunas versiones siempre lo tratarán como un control exitoso (incluso si no se hizo clic) también.
Quentin

4
Y si lo hace <button contenteditable>, ¡también puede cambiar el texto del botón! Apunta a cualquiera que pueda encontrarle un uso válido. :)
Gavin

4
Nunca entendí por qué había un tipo de envío de "entrada". No es ingresar nada, solo enviar lo que ingresó en otros campos.
DisgruntledGoat

3
@DisgruntledGoat: su par nombre / valor se enviará realmente. Útil si tiene más de un botón en un formulario (por ejemplo, editar, eliminar, mover hacia arriba, etc.) y desea distinguir el botón presionado. Desafortunadamente, lo mismo no funciona buttonen IE <8, sorprendentemente envía los pares de nombre / valor de TODOS los buttonelementos.
BalusC

56

Especifique el css para imprimir

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

1
Descubrí eso hace algunas semanas
Daniel Moura

41
No realmente oculto en mi opinión.
Dmitri Farkov

Esto es de uso común.
UpTheCreek

Si no se ha ocupado de esto antes, espero que no haya creado ningún sitio web de producción antes ...
Kzqai

¿Cómo se puede considerar esto oculto?
Marin

54

los elementos <dl> <dt>y a <dd>menudo se olvidan y representan Lista de definiciones, Término de definición y Definición.

Funcionan de manera similar a una lista desordenada ( <ul>) pero en lugar de entradas individuales es más como una lista de clave / valor.

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

Además, la semántica dl / dt / dd es apropiada para listas similares (por ejemplo, se ha recomendado la estructura para diálogos).
párpados

2
La presentación predeterminada no es tan agradable, pero la gente olvida que los elementos se pueden diseñar de muchas formas con CSS.
DisgruntledGoat

18
Lo más interesante que a menudo se olvida es que el formato es clave / valor / valor / valor / valor / clave / valor
Quentin

1
@D_N, creo que donde radica el desacuerdo es que considero que los usos sugeridos son parte de la definición y la semántica, en lugar de estar separados y contradictorios con ella.
párpados

1
@D_N y @eyelidlessness: consulte la nota de Bruce Lawson sobre cómo marcar una conversación semánticamente ... además, el jurado aún está deliberando
Fenton

52

No exactamente oculto, pero (y esto es culpa de IE) no hay suficiente gente que sepa acerca de thead, tbody, tfoot para mi gusto. ¿Y cuántos de ustedes sabían que se supone que tfoot debe aparecer sobre tbody en el marcado?


1
boris llama, Sí, tbody está implícito si ninguno de thead, tbody y tfoot está presente.
párpados

2
Si IE5 hubiera implementado TBODY correctamente, más personas lo usarían. Este fue el principal problema hace varios años. Mozilla y Opera admitieron el desplazamiento de TBODY, que fue realmente genial; desafortunadamente, IE5 no lo hizo.
staticsan

9
Son útiles para imprimir porque deben colocar theady tfooten la parte superior e inferior de cada página. Es una pena que no haya un mecanismo para repetir theaden el navegador, cuando tienes tablas largas y largas.
DisgruntledGoat

1
Sabía que tfoot iba por encima de tbody, y creo que es bastante estúpido. Puse mi tfoot debajo, donde tenía sentido, obtuve un error de validación, moví el tfoot por encima del tbody (confundido pero siempre compatible), ¡y adivinen qué! Cuando intenta resaltar la tabla, el navegador (FF al menos) resalta el pie ANTES del cuerpo, ¡aunque visualmente esté debajo del cuerpo! ¡¡¡Y entonces!!! cuando lo copia en un editor de texto, está SOBRE el cuerpo visualmente. Regla totalmente arbitraria.
Anthony

3
@Anthony: tiene sentido si tiene una conexión lenta, significa que puede ver todos los encabezados y pies de página mientras el contenido de la tabla aún se está cargando.
yo y el

50

La etiqueta de salto de palabrawbr o . Desde Quirksmode:

(salto de palabra) significa: "El navegador puede insertar un salto de línea aquí, si lo desea". Si el navegador no considera necesario un salto de línea, no pasa nada.

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

Le doy al navegador la opción de agregar un salto de línea. Esto no será necesario en resoluciones muy grandes, cuando la mesa tiene mucho espacio. Sin embargo, en resoluciones más pequeñas, estos saltos de línea colocados estratégicamente evitan que la tabla crezca más que la ventana y, por lo tanto, provoque barras de desplazamiento horizontales.

También existe la &shy;entidad HTML mencionada en la misma página. Esto es lo mismo que, wbrpero cuando se inserta una ruptura, se agrega un guión ( -) para indicar una ruptura. Algo así como se hace en forma impresa.

Un ejemplo:

TextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTextoTexto


2
Tenga cuidado porque hay un soporte de navegador deficiente en este
Christophe Eblé

7
"IE8 como IE8" no lo admite y tiene errores en Safari 3.0 para Windows. Aparte de eso, el soporte es bastante bueno. Consulte la tabla de compatibilidad en el enlace.
Aleemb

La referencia del punto de sitio marcó esta etiqueta como obsoleta e inútil, ¿quién tiene la razón? reference.sitepoint.com/html/wbr
Christophe Eblé

Es posible que esté obsoleto como parte de la especificación HTML, pero aún funciona en los navegadores. Siempre que tenga dudas, siga el veredicto de QuirksMode (tablas de compatibilidad ahora patrocinadas por Google).
aleemb

¡Parece que esto sería muy útil para incluirlo en el próximo estándar CSS!
James

43

Una característica muy infrautilizada es el hecho de que casi todos los elementos que proporcionan contenido visible en la página pueden tener un atributo de 'título'.

Agregar un atributo de este tipo hace que aparezca una 'información sobre herramientas' cuando el mouse se 'desplaza' sobre el elemento, y puede usarse para proporcionar información no esencial, pero útil, de una manera que no cause que la página se llene demasiado . (O puede ser una forma de agregar información a una página que ya está llena)


Sí, el atributo "título" es bastante útil, especialmente para los elementos en los que se debe hacer clic.
Steve Harrison

6
La información sobre herramientas que aparece es específica del navegador. No todos los navegadores mostrarán el atributo de título de la misma manera. Pero es una característica interesante que ciertamente uso.
Travis

8
El atributo de título es útil, pero solo cuando se usa adecuadamente. La mayoría de los navegadores solo muestran la información sobre herramientas durante unos segundos antes de que desaparezca. Odio cuando los diseñadores sienten la necesidad de completar el atributo del título con 3 o 4 líneas de texto, lo que hace que tengas que pasar el mouse sobre y luego nuevamente para leer el resto.
sacerdotec

Usar esto en conexión con jQuery equivale a genialidad.
Levi Morrison

Levi, ¿puedes dar algunos ejemplos?
belugabob

38

Aplicar varias clases html / css a una etiqueta. Misma publicación aquí

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

22
Esas son clases HTML, no clases CSS. CSS no tiene clases (tiene selectores de clases). Las clases HTML son útiles para otras cosas además de CSS.
Quentin

36
¡Guauu! Simplemente no puedo olvidar el hecho de que la gente encuentra que esta es una característica "oculta". Chico, me siento estúpido por publicar algunas características "realmente ocultas" porque las personas que votaron a favor de esto probablemente ni siquiera se acercarán a comprender lo que significa extender un DTD.
aleemb

5
d03boy, p.foo, p.var no es lo mismo que p.foo.bar. El primero selecciona cualquier párrafo con la clase "foo" o "var", el segundo selecciona un párrafo con ambas clases.
párpados

5
Lo relacionado con las clases HTML es un buen punto, porque me lleva a un punto: html no debería ser consciente de css ... deberías poder crear html y pasarlo a un diseñador que pueda implementar su diseño sin necesita cambiar el html (todavía no es el caso;)) .. así que esto se reduce a su nombre y la forma en que usa las clases .. no cree clases para las propiedades css de destino .. use clases para identificar cuál es el elemento ' '.
meandmycode

1
Técnicamente, "Foo Bar BlackBg" es una clase única, y p.foo es simplemente azúcar sintáctico para p [class ~ = foo] (ver especificaciones ). Sin embargo, es más fácil pensar que tiene varias clases.
Tgr

34

Todos conocemos las DTD o las declaraciones de tipo de documento (esas cosas que hacen que su página falle con el validador W3C). Sin embargo, es posible ampliar las DTD declarando una lista de atributos para elementos personalizados.

Por ejemplo, el validador W3C fallará para esta página debido a que se behavior="mouseover"agregó a la <p>etiqueta. Sin embargo, puede hacerlo pasar haciendo esto:

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

Obtenga más información en sobre DTD personalizadas en QuirksMode .


10
Por supuesto, esto lo hace "Válido: su lenguaje de marcado personalizado" y no "XHTML 1.0 Transitional"
Quentin

3
+1. No sé por qué esto fue -1. De todos modos, debe tenerse en cuenta que el soporte del navegador es prácticamente nulo.
párpados

Estoy bastante seguro de que Opera admite esto.
Rich Bradshaw

2
@eyelidlessness solo funciona en XHTML. No funciona en XHTML imaginario enviado como texto / HTML.
Kornel

2
Eesh, no soy fan de esto. Para mí, el valor del HTML es que todos en el planeta saben lo que significa (más o menos), porque todos usamos las mismas etiquetas y atributos. No estoy seguro de por qué el classatributo no es lo suficientemente extensible.
Paul D. Waite

28

Podemos asignar una cadena codificada en base 64 como atributo fuente / href de imagen, JavaScript, iframe, enlace

p.ej

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

Referencias

¿Cómo puedo construir imágenes usando marcado HTML?

Archivo binario a codificador / traductor Base64


4
Lamentablemente, IE <8 no admite esto. Sin embargo, puede usar MHTML en su lugar para estos navegadores: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Mathias Bynens

26

Recientemente me enteré de las etiquetas fieldset y label. Como arriba, no oculto pero útil para formularios.

<fieldset> explicación

Ejemplo:

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

Por favor proporcione una muestra para usar esto.
Binoj Antony


Fieldset descubierto de la página de muestra de aspnet mvc. ^^
Arnis Lapsa

2
No sabía nada de este. Aquí está la especificación W3c: w3.org/TR/html401/interact/forms.html#h-17.10
MitMaro

Los conjuntos de campo y las leyendas son geniales. Una forma realmente agradable de marcar sus formularios.
Neil Aitken

25

Puede utilizar la objectetiqueta en lugar de una iframepara incluir otro documento en la 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
Lo que termina funcionando casi exactamente como un iframe, excepto que tiene menos soporte y menos funciones.
Quentin

iframe está obsoleto, con suerte tendremos un mejor soporte pronto,
Gordon Gustafson

12
iframe no está obsoleto en HTML 5.
Zach

¿Evita los ataques XSS desde la página incrustada?
cobarde anónimo

1
Creo que usa SOP, al igual que con iframes.
Zach

25

<optgroup>es uno excelente que la gente a menudo se pierde cuando hace <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>

es lo que deberías usar en lugar 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

La mayoría tampoco es consciente del hecho de que puede distinguir el botón de formulario presionado simplemente dándoles un par de nombre / valor. P.ej

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

En el lado del servidor, el botón real presionado se puede obtener simplemente verificando la presencia del parámetro de solicitud asociado con el nombre del botón. Si no es así null, entonces se presionó el botón.

He visto un montón de innecesarios JS hacks / soluciones para que, por ejemplo, cambiando la forma de acción o cambiar un valor de entrada oculta de antemano en función de pulsar el botón. Es simplemente asombroso.

Además, he visto casi tantos trucos / soluciones alternativas de JS para recopilar los marcados de múltiples casillas de verificación como en las filas de la tabla. En cada selección / verificación de una fila de la tabla, JS agregaría el índice de la fila a algún valor separado por comas en un elemento de entrada oculto que luego se dividiría / analizaría más en el lado del servidor. Eso es el resultado de no saber que puede dar a varios elementos de entrada el mismo nombre pero un valor diferente y que aún puede acceder a ellos como una matriz en el lado del servidor. P.ej

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

El desconocimiento daría a cada casilla de verificación un nombre diferente y omitiría el atributo de valor completo. En algunas situaciones de JS-hack / workaround-free también he visto algo de magia innecesariamente abrumadora en el código del lado del servidor para distinguir los elementos marcados.


1
Hey ... Esa aparentemente es otra característica oculta de HTML: /;)
BalusC

1
Si un formulario tiene varios botones de envío y el usuario hace clic en uno, ciertas versiones de Internet Explorer le dirán alegremente a su servidor que se hizo clic en todos. Maravilloso.
2010

1
@detly: solo si usa en <button type="submit">lugar de <input type="submit">:)
BalusC

1
... buuuuut IE6 también tiene problemas con <input type="submit">? (Mi memoria de este problema es confusa; hace tiempo que convencí a los empleadores de que no se preocuparan por la compatibilidad de IE para aplicaciones web internas, por lo que ya no es mi problema. Pero creo recordar alguna barrera para hacer que este problema se pueda resolver en IE6. )
detly

2
Eso no es muy compatible con i18n.
Zneak

22

Etiqueta 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
En mi experiencia, el soporte de colgroup es inestable en el mejor de los casos.
párpados

sorprendentemente similar es WPF Grid
Binoj Antony

18

Si no se especifica el foratributo de una <label>etiqueta, se establece implícitamente como el primer hijo <input>, es decir

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

es equivalente a

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

4
Pero esto disfruta de menos soporte del navegador que el atributo for
Quentin

4
@David - ¿Tienes alguna documentación para respaldar eso? No creo que haya visto nunca un navegador que no admita este uso. He probado personalmente en IE6 / 7, FF2 / 3, Safari 3 y Chrome 1/2. No me he puesto a prueba en Opera, pero me sorprendería mucho que no funcionara. Este comportamiento es parte de la especificación HTML 4.0 original, publicada por primera vez hace más de once años: w3.org/TR/1998/REC-html40-19980424/interact/forms.html#adef-for
Ben Blank

Además, no es válido poner una entrada dentro de una etiqueta, ¡y DOH no cerró su etiqueta de entrada en ninguno de los ejemplos!
Anthony

5
Está equivocado en ambos aspectos: esta es una práctica válida, y la etiqueta final está prohibida en los elementos de entrada.
MOO

15

Botón como enlace, sin JavaScript :

Puedes poner cualquier tipo de archivo en la acción del formulario y tienes un botón que actúa como enlace. No es necesario utilizar eventos onclick o similares. Incluso puede abrir el archivo en una nueva ventana pegando un "objetivo" en el formulario. No vi mucho esa técnica en aplicación.

Reemplazar esto

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

con este:

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

27
El botón no tendrá la opción "Guardar archivo como", que pueden necesitar los usuarios a los que no les gusta que Adobe Acrobat se haga cargo de su navegador.
Kornel

Se comportará con el comportamiento predeterminado del navegador al acceder al archivo PDF. Puede ser un archivo HTML, un archivo de Word, un archivo zip o cualquier otra cosa que desee.
Wadih M.

¿En qué situación una etiqueta de ancla requiere un evento onclick? y ¿por qué 3 líneas de html serían mejores que 1? ¿Es la idea de que PUEDES tener un botón en lugar de un enlace, por lo que es agradable y como un botón? Aunque sueno de mal humor por esto, en realidad tengo una página que usa botones en lugar de enlaces porque el archivo se crea dinámicamente cuando el usuario lo solicita, así que no quería un enlace a: blah.php? Stuff = "userdata" Aunque podría haber seguido ese camino, no quería arriesgarme a que el nombre del archivo tuviera el script generador de archivos como nombre en lugar del nombre de archivo que el script le da al archivo.
Anthony

1
¿Por qué no diseñar la etiqueta <a> como un botón? Esto parece una gran cantidad de basura en su marcado.
UpTheCreek

2
@UpTheCreek Algunas aplicaciones web quieren tener el mismo aspecto que el sistema operativo. Por ejemplo, un botón feo cuando el usuario usa Windows y un botón hermoso cuando el usuario usa Mac OS X.

13

La forma más sencilla de actualizar la página en X segundos - META Refresh

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

El valor en el contenido significa los segundos después de los cuales desea que se actualice la página.
[Editar]

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

¡Para hacer una simple redirección!
(Gracias @rlb)


13
Por supuesto, averiguar qué elementos necesitan actualizarse y luego actualizarlos a través de AJAX da como resultado una experiencia de usuario mucho mejor ...
Steve Harrison

11
La actualización META realmente no hace nada bueno en las páginas donde también hay un rey en la actividad del formulario del usuario, porque puede interrumpir el llenado del formulario del usuario y descartar todo el trabajo. Creo que rara vez hay una ocasión en la que este tipo de actualizaciones sería lo mejor. Normalmente es la salida más fácil.
Robert Koritnik

11
/ me odia las páginas que se actualizan así ... deberían ser prohibidas = /
Svish

3
Esto también puede ser útil si se establece en un poco menos que el tiempo de espera de la sesión para notificar al usuario que su sesión se agotó y se eliminó.
para el

1
Los tiempos de espera cortos rompen el botón de retroceso.
Kornel

12

<html>, <head>y<body> las etiquetas son opcionales. Si los omite, el analizador los insertará silenciosamente en los lugares apropiados. Es perfectamente válido hacerlo en HTML (como está implícito <tbody>).

HTML en teoría es una aplicación SGML. Este es probablemente el más corto documento HTML 4 válido :

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

Lo anterior no funciona en ningún lugar excepto en el Validador W3C. Sin embargo, el text/htmldocumento HTML5 válido más corto funciona en todas partes:

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

4
Debe tener cuidado con lo que anuncia. El código anterior pasará la validación con 4 advertencias en el validador w3c, pero el DocType es HTML 4.0. Es bastante bueno que HTML 4 sea descendiente de SGML y, por lo tanto, mantenga este estándar de validación flexible, pero si cambia ese DTD a XHTML 1.0 STRICT, obtiene 15 errores, que es casi igual a la cantidad de caracteres. XHTML se desarrolló porque HTML era tan vago (y por lo tanto inseguro), por lo que no queremos aprovecharlo más.
Anthony

3
Si cambia DOCTYPE de un documento HTML / SGML a XHTML / XML obtendrá una mezcla sin sentido. Eso es bastante obvio y no estoy seguro de por qué lo señala.
Kornel

3
Este ejemplo podría ser, técnicamente, HTML 4 válido, pero los navegadores no admiten esa sintaxis SGML abreviada. El siguiente es el documento HTML 5 válido más corto, que los navegadores realmente admiten:<!DOCTYPE html><title></title>
Brian Campbell

¿Alguna idea de qué tan compatible es dejar fuera head/ body, no solo desde una perspectiva de validación?
kibibu

@kibibu: Los navegadores no tienen problemas con esto. Las versiones antiguas de Opera solían omitir <head>en DOM a veces, pero el contenido principal estaba en DOM y funcionaba de todos modos. El mayor problema que he encontrado es que los clientes OpenID requieren <head>estar presentes explícitamente.
Kornel

11

El langatributo no es muy conocido pero muy útil. El atributo se utiliza para identificar el idioma del contenido en todo el documento o en un solo elemento. Los códigos de idioma se dan en código de idioma ISO de 2 letras (es decir, 'en' para inglés, 'fr' para francés).

Es útil para los navegadores que pueden ajustar la visualización de las comillas, etc. Los lectores de pantalla también se benefician de la lang atributo, así como de los motores de búsqueda.

Sitepoint tiene una buena explicación del langatributo.

Ejemplos

Especifique el idioma en inglés para todo el documento, a menos que otro langatributo en un nivel inferior del DOM lo invalide.

<html lang="en">

Especifique que el idioma en el siguiente párrafo sea sueco.

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

10

La declaración "! DOCTYPE" . No creo que sea una característica oculta, pero parece que no es muy conocida pero muy útil.

p.ej

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

10
Y sin mencionar "obligatorio para la mayoría de los lenguajes de marcado actuales y sin uno es imposible validar un documento de manera confiable" ... validator.w3.org/docs/help.html#faq-doctype
Svish

Creo que esto ya no es "muy conocido". En el tiempo entre IE 6 e IE 7, el uso de doctype pasó de ~ 1% a> 50%.
párpados

@eyelidlessness La mayoría de IDE incluyen esta etiqueta, por eso su uso aumentó. Creo que esta etiqueta no es muy conocida.
Daniel Moura

6
Y el uso de un tipo de documento estricto corrige el 95% de las inconsistencias del navegador.
DisgruntledGoat

3
Parte del estándar y utilizado por el 99% de los desarrolladores no suena como una "característica oculta".
WhyNotHugo
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.