div - Funciones ocultas de HTML
title html css (30)
El HTML es el idioma más utilizado (al menos como lenguaje de marcado) y no ha recibido el debido reconocimiento.
Teniendo en cuenta que ha existido durante tantos años, cosas como los controles FORM / INPUT siguen siendo los mismos sin agregar nuevos controles.
Así que al menos de las características existentes, ¿conoces alguna característica que no sea muy conocida pero muy útil?
Por supuesto, esta pregunta es similar a:
Características ocultas de JavaScript
Funciones ocultas de CSS
Características ocultas de C #
Características ocultas de VB.NET
Características ocultas de Java
Características ocultas de ASP clásico
Características ocultas de ASP.NET
Características ocultas de Python
Características ocultas de TextPad
Características ocultas de Eclipse
No menciones las características de HTML 5.0, ya que está en borrador de trabajo
Por favor, especifique una característica por respuesta .
Aplicando múltiples clases html / css a una etiqueta. Misma publicación here
<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>
Creo que la etiqueta optgroup es una característica que la gente no usa muy a menudo. La mayoría de las personas con las que hablo no suelen darse cuenta de que existen.
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>
El elemento <kbd> para marcar para entrada de teclado
Ctrl + Alt + Del
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" />
La etiqueta wbr o word-break . Desde Quirksmode:
(salto de palabra) significa: "El navegador puede insertar un salto de línea aquí, si lo desea". Si el navegador no cree que haya un salto de línea, no pasa nada.
<div class="name">getElements<wbr>ByTagName()</div>Doy al navegador la opción de agregar un salto de línea. Esto no será necesario en resoluciones muy grandes, cuando la tabla tiene mucho espacio. Sin embargo, en resoluciones más pequeñas, dichos saltos de línea colocados estratégicamente evitan que la mesa crezca más que la ventana y, por lo tanto, provocan barras de desplazamiento horizontales.
El también es el ­ Entidad HTML mencionada en la misma página. Esto es lo mismo que wbr pero cuando se inserta un salto - se agrega un hypen ( - ) para indicar un descanso. Algo así como cómo se hace en la impresión.
Un ejemplo:
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
La etiqueta de button es la nueva etiqueta de input submit y mucha gente aún no está familiarizada con ella. El texto en el botón puede, por ejemplo, diseñarse con la etiqueta del botón.
<button>
<b>Click</b><br />
Me!
</button>
Presentará un botón con dos líneas, el primero dice "Hacer clic " en negrita y el segundo dice "¡Yo!". Pruébalo here .
La etiqueta etiqueta vincula lógicamente la etiqueta con el elemento de formulario utilizando el atributo "para". La mayoría de los navegadores lo convierten en un enlace que activa el elemento de formulario relacionado.
<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>
La mayoría también desconoce el hecho de que puede distinguir el botón de formulario presionado simplemente dándoles un par 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 al verificar la presencia del parámetro de solicitud asociado con el nombre del botón. Si no es null , entonces se presionó el botón.
He visto un montón de hacks / soluciones temporales JS innecesarios para eso, por ejemplo, cambiar la acción del formulario o cambiar previamente un valor de entrada oculto dependiendo del botón presionado. Es simplemente asombroso.
Además, he visto casi tantos ataques / soluciones JS para reunir los marcados de varias casillas de verificación como en las filas de la tabla. En cada selección / verificación de una fila de la tabla, el JS agregaría el índice de la fila a un 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 resultado de la falta de conciencia de que puede dar múltiples elementos de entrada con el mismo nombre pero con 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 le daría a cada casilla de verificación un nombre diferente y omitirá el atributo de valor completo. En algunas situaciones de JS-hack / workaround-free también he visto una magia innecesariamente abrumadora en el código del lado del servidor para distinguir los elementos marcados.
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.
Mi bit favorito es la etiqueta base, que es un salvavidas si quieres usar enrutamiento o reescritura de URL ...
Digamos que estás ubicado en:
www.anypage.com/folder/subfolder/
El siguiente es código y resultados para 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
No exactamente oculto, pero (y esto es culpa de IE) no hay suficientes personas que conozcan sobre thead, tbody, tfoot para mis gustos. ¿Y cuántos de ustedes sabían que se supone que tfoot debe aparecer por encima del tbody en el marcado?
No muy conocido, pero puede especificar lowsrc para las imágenes que mostrarán lowsrc mientras carga el src de la imagen:
<img lowsrc="monkey_preview.png" src="monkey.png" />
Esta es una buena opción para quienes no les gustan interlaced imágenes interlaced .
Un poco de trivialidades: en un punto esta propiedad era lo suficientemente oscura como para ser utilizada para explotar a Hotmail , alrededor del año 2000.
Podemos asignar una cadena codificada en base 64 como un 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
Puede usar la etiqueta de object lugar de un iframe para 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>
Recientemente descubrí sobre el fieldset y las etiquetas de etiqueta. Como se indica arriba, no está oculto, pero es útil para las formas.
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>
Todos sabemos acerca de DTD o declaraciones de tipo de documento (esas cosas que hacen que su página falle con el validador W3C). Sin embargo, es posible extender las DTD al declarar una lista de atributos para elementos personalizados.
Por ejemplo, el validador W3C fallará en esta página debido a behavior="mouseover" agregado a la etiqueta <p> . 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>
]>
Vea más acerca de las DTD personalizadas en QuirksMode .
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 ''título''.
Si se agrega un atributo de este tipo, aparece una "información sobre herramientas" cuando el mouse está ''suspendido'' sobre el elemento y puede utilizarse para proporcionar información no esencial, pero útil, de forma que la página no se llene demasiado. . (O puede ser una forma de agregar información a una página que ya está llena)
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, solicitará ese activo con el protocolo https, de lo contrario lo solicitará con HTTP.
Esto evita que el horrible mensaje "Esta página contenga 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 otros usos, sin embargo, están bien.
los elementos <dl> <dt> y <dd> menudo se olvidan y representan Lista de definiciones, Término de definición y Definición.
Funcionan de forma similar a una lista desordenada ( <ul> ), pero en lugar de entradas individuales se parece más a una lista de clave / valor.
<dl>
<dt>What</dt><dd>An Example</dd>
<dt>Why</dt><dd>Examples are good</dd>
</dl>
<optgroup> es uno excelente que las personas a menudo se pierden cuando hacen listas <select> 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 estar usando 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>
<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>
<html> , <head> and <body> tags are optional. If you omit them, they will be silently inserted by the parser in appropriate places. It''s perfectly valid to do so in HTML (just like implied <tbody> ).
HTML in theory is an SGML application. This is probably the shortest valid HTML 4 document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/
The above doesn''t work anywhere except W3C Validator. However shortest valid HTML5 text/html document works everywhere:
<!DOCTYPE html><title></title>
Button as link, no JavaScript :
You can put any kind of file in the form action, and you have a button that acts as a link. No need to use onclick events or such. You can even open-up the file in a new window by sticking a "target" in the form. I didn''t see that technique in application much.
Reemplace 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>
If the for attribute of a <label> tag isn''t specified, it is implicitly set as the first child <input> , ie
<label>Alias: <input name="alias" id="alias"></label>
es equivalente a
<label for="alias">Alias:</label> <input name="alias" id="alias">
Simplest way to refresh the page in X seconds - META Refresh
<meta http-equiv="refresh" content="600">
The value in content signifies the seconds after which you want the page to refresh.
[Edit]
<meta http-equiv="refresh" content="0; url=foobar.com/index.html">
To do a simple redirect!
(Thanks @rlb)
The "!DOCTYPE" declaration . Don''t think it''s a hidden feature, but it seems it''s not well known but very useful.
p.ej
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
The lang attribute is not very well known but very useful. The attribute is used to identify the language of the content in either the whole document or in a single element. Langage codes are given in ISO 2-letter Language code (ie ''en'' for English, ''fr'' for French).
It''s useful for browsers who can adjust their display of quotation marks, etc. Screen readers also benefit from the lang attribute as well as search engines.
Sitepoint has some nice explanation of the lang attribute.
Ejemplos
Specify the language to be English for the whole document, unless overridden by another lang attribute on a lower level in the DOM.
<html lang="en">
Specify the language in the following paragraph to be Swedish.
<p lang="sv">Ät din morgongröt och bli stor och stark!</p>
<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.
Edit: Muchachos fáciles, esto fue solo un intento de humor
<img onerror="{javascript}" />
onerror es un evento de JavaScript que se disparará 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, existen aplicaciones válidas perfectas para esto; Por ejemplo: supongamos que está publicando 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 no controla en absoluto, aunque es confiable. Si http://www.gravatar.com/ cae, podría solucionar esto utilizando onerror .