Funzionalità nascoste dell'HTML

L'HTML essendo il linguaggio più utilizzato (almeno come linguaggio di markup) non ha ottenuto il dovuto merito.
Considerando che esiste da così tanti anni, cose come i controlli FORM / INPUT sono rimaste le stesse senza nuovi controlli aggiunti.

Quindi almeno dalle funzionalità esistenti, conosci qualche funzionalità che non è ben nota ma molto utile.

Naturalmente, questa domanda è sulla falsariga di:

Funzionalità nascoste di JavaScript
Funzionalità nascoste di CSS
Funzionalità nascoste di C #
Funzionalità nascoste di VB.NET
Funzionalità nascoste di Java
Funzionalità nascoste di ASP classico
Funzionalità nascoste di ASP.NET
Funzionalità nascoste di Python
Funzionalità nascoste di TextPad
Funzionalità nascoste di Eclipse

Non menzionare le funzionalità di HTML 5.0, poiché è in bozza funzionante

Specifica una caratteristica per risposta .

Utilizzando un percorso assoluto indipendente dal protocollo:

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

Se il browser sta visualizzando una pagina in SSL tramite HTTPS, richiederà quell'asset con il protocollo https, altrimenti lo richiederà con HTTP.

Ciò impedisce il terribile messaggio di errore "Questa pagina contiene elementi protetti e non protetti" in IE, mantenendo tutte le richieste di risorse all'interno dello stesso protocollo.

Avvertenza: se utilizzati su un <link> o @import per un foglio di stile, IE7 e IE8 scaricano il file due volte . Tutti gli altri usi, tuttavia, vanno bene.

Il tag label collega logicamente l'etichetta con l'elemento form utilizzando l'attributo "for". La maggior parte dei browser lo trasforma in un collegamento che attiva il relativo elemento del modulo.

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

La proprietà contentEditable per (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>

Questo renderà le celle modificabili! Vai avanti, provaci se non mi credi.

Penso che il tag optgroup sia una caratteristica che le persone non usano molto spesso. La maggior parte delle persone con cui parlo tende a non rendersi conto che esiste.

Esempio:

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

La mia parte preferita è il tag di base, che è un salvavita se si desidera utilizzare il routing o la riscrittura dell'URL ...

Diciamo che ti trovi in:

www.anypage.com/folder/subfolder/

Di seguito è riportato il codice e i risultati per i collegamenti da questa pagina.

Ancoraggio regolare:

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

Porta a

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

Ora se aggiungi il tag di base

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

L'ancora ora porta a:

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror è un evento JavaScript che verrà attivato subito prima che venga mostrata l'immagine della piccola croce rossa (in IE).

Puoi usarlo per scrivere uno script che sostituirà l'immagine rotta con un contenuto alternativo valido, in modo che l'utente non debba affrontare il problema della croce rossa.

A prima vista questo può essere visto come completamente inutile, perché, non sapresti prima se l'immagine era disponibile in primo luogo? Ma, se consideri, ci sono applicazioni valide perfette per questa cosa; Ad esempio: supponi di fornire un'immagine da una risorsa di terze parti che non controlli. Come il nostro gravatar qui in SO ... è servito da http://www.gravatar.com/ , una risorsa che il team di stackoverflow non controlla affatto, sebbene sia affidabile. Se http://www.gravatar.com/ non funziona, stackoverflow potrebbe risolvere il problema utilizzando onerror.

L' <kbd>elemento per la marcatura per l'input da tastiera

Ctrl+ Alt+Del

<blink>

Deve essere utilizzato per qualsiasi cosa importante sul sito. I siti più importanti racchiudono tutti i contenuti in un batter d'occhio.

<marquee>

Crea un effetto di scorrimento realistico, ottimo per e-book ecc.

Modifica: ragazzi facili, questo era solo un tentativo di umorismo

Non molto conosciuto ma puoi specificare lowsrcper le immagini che mostreranno lowsrcdurante il caricamento srcdell'immagine:

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

Questa è una buona opzione per coloro a cui non piacciono le immagini interlacciate .

Un po 'di curiosità: a un certo punto questa proprietà era abbastanza oscura da essere utilizzata per sfruttare Hotmail , intorno al 2000.

DELe INSper contrassegnare i contenuti eliminati e inseriti:

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

Il tag del pulsante è il nuovo input submittag e molte persone non lo conoscono ancora. Ad esempio, il testo nel pulsante può essere stilizzato utilizzando il tag del pulsante.

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

Renderà un pulsante con due righe, la prima dice " Click " in grassetto e la seconda dice "Me!". Provalo qui .

Specifica il css per la stampa

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

gli elementi <dl> <dt>e <dd>vengono spesso dimenticati e stanno per Elenco definizioni, Termine definizione e Definizione.

Funzionano in modo simile a una lista non ordinata ( <ul>) ma invece di singole voci è più simile a una lista chiave / valore.

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

Non esattamente nascosto, ma (e questa è colpa di IE) non abbastanza persone conoscono thead, tbody, tfoot per i miei gusti. E quanti di voi sapevano che il piede dovrebbe apparire sopra il corpo nel markup?

Il tag di interruzione di parolawbr o . Da Quirksmode:

(word break) significa: "Il browser può inserire un'interruzione di riga qui, se lo desidera." Se il browser non ritiene necessaria un'interruzione di riga, non accade nulla.

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

Offro al browser la possibilità di aggiungere un'interruzione di riga. Questo non sarà necessario su risoluzioni molto grandi, quando la tabella ha molto spazio. Su risoluzioni inferiori, tuttavia, tali interruzioni di riga posizionate strategicamente impediscono alla tabella di crescere più grande della finestra, causando così barre di scorrimento orizzontali.

C'è anche l' ­entità HTML menzionata nella stessa pagina. È lo stesso di wbrma quando viene inserita un'interruzione -viene aggiunto un trattino ( ) per indicare un'interruzione. Un po 'come è fatto in stampa.

Un esempio:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Una caratteristica molto sottoutilizzata è il fatto che quasi ogni elemento, che fornisce contenuto visibile sulla pagina, può avere un attributo "titolo".

L'aggiunta di un tale attributo fa apparire un "suggerimento" quando il mouse viene "spostato" sopra l'elemento e può essere utilizzato per fornire informazioni non essenziali, ma utili, in modo da non rendere la pagina troppo affollata . (Oppure può essere un modo per aggiungere informazioni a una pagina già affollata)

Applicazione di più classi html / css a un tag. Stesso post qui

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

Sappiamo tutti delle DTD o delle dichiarazioni del tipo di documento (quelle cose che ti fanno fallire la pagina con il validatore W3C). Tuttavia, è possibile estendere i DTD dichiarando un elenco di attributi per gli elementi personalizzati.

Ad esempio, il validatore W3C fallirà per questa pagina a causa behavior="mouseover"dell'aggiunta al <p>tag. Tuttavia, puoi farlo passare in questo modo:

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

Ulteriori informazioni su DTD personalizzate su QuirksMode .

Possiamo assegnare una stringa codificata in base 64 come attributo source / href di immagine, JavaScript, iframe, link

per esempio

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

Riferimenti

Come posso costruire immagini usando il markup HTML?

File binario su codificatore / traduttore Base64

Di recente ho scoperto i tag fieldset e label. Come sopra, non nascosto ma utile per i moduli.

<fieldset> spiegazione

Esempio:

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

Puoi utilizzare il objecttag invece di un iframeper includere un altro documento nella pagina:

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

<optgroup>è un ottimo strumento che le persone spesso perdono quando creano <select>elenchi segmentati .

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

è quello che dovresti usare invece di

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

La maggior parte è anche inconsapevole del fatto che è possibile distinguere il pulsante del modulo premuto semplicemente dando loro una coppia nome / valore. Per esempio

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

Lato server è quindi possibile ottenere l'effettivo pulsante premuto semplicemente verificando la presenza del parametro di richiesta associato al nome del pulsante. In caso contrario, è nullstato premuto il pulsante.

Ho visto un sacco di inutili JS hack / Soluzioni alternative per questo, ad esempio cambiando l'azione forma o la modifica di un valore di ingresso nascosto in anticipo a seconda del tasto premuto. È semplicemente sorprendente.

Inoltre, ho visto quasi altrettanti hack / soluzioni alternative JS per raccogliere quelli selezionati di più caselle di controllo come nelle righe della tabella. Ad ogni selezione / controllo di una riga della tabella, JS aggiungeva l'indice di riga a un valore separato da virgole in un elemento di input nascosto che sarebbe poi suddiviso / analizzato ulteriormente sul lato server. Questo è il risultato dell'inconsapevolezza che è possibile assegnare a più elementi di input lo stesso nome ma un valore diverso e che è ancora possibile accedervi come array sul lato server. Per esempio

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

L'inconsapevolezza darebbe a ciascuna casella di controllo un nome diverso e ometterebbe l'intero attributo del valore. In alcune situazioni JS-hack / workaround-free ho anche visto una magia inutilmente travolgente nel codice lato server per distinguere gli elementi selezionati.

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 l' forattributo di un <label>tag non è specificato, viene impostato implicitamente come primo figlio <input>, ad es

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

è equivalente a

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

Pulsante come collegamento, nessun JavaScript :

Puoi inserire qualsiasi tipo di file nell'azione del modulo e hai un pulsante che funge da collegamento. Non è necessario utilizzare eventi onclick o simili. Puoi anche aprire il file in una nuova finestra inserendo una "destinazione" nel modulo. Non ho visto molto quella tecnica in applicazione.

Sostituisci questo

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

con questo:

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

Il modo più semplice per aggiornare la pagina in X secondi: META Refresh

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

Il valore nel contenuto indica i secondi dopo i quali desideri che la pagina si aggiorni.
[Modificare]

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

Per fare un semplice reindirizzamento!
(Grazie @rlb)

<html>, <head>E <body>tag sono opzionali. Se li ometti, verranno inseriti silenziosamente dal parser nelle posizioni appropriate. È perfettamente valido farlo in HTML (proprio come implicito <tbody>).

L'HTML in teoria è un'applicazione SGML. Questo è probabilmente il documento HTML 4 valido più breve :

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

Quanto sopra non funziona da nessuna parte eccetto W3C Validator. Tuttavia, il text/htmldocumento HTML5 valido più breve funziona ovunque:

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

L' langattributo non è molto conosciuto ma molto utile. L'attributo viene utilizzato per identificare la lingua del contenuto nell'intero documento o in un singolo elemento. I codici di lingua sono forniti nel codice ISO di 2 lettere della lingua (ad esempio "en" per l'inglese, "fr" per il francese).

È utile per i browser che possono regolare la visualizzazione delle virgolette, ecc. Anche gli screen reader traggono vantaggio dall'attributo lang e dai motori di ricerca.

Sitepoint ha qualche bella spiegazione dellang attributo.

Esempi

Specificare che la lingua sia l'inglese per l'intero documento, a meno che non venga sovrascritta da un altro langattributo a un livello inferiore nel DOM.

<html lang="en">

Specificare che la lingua nel paragrafo seguente deve essere lo svedese.

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

La dichiarazione "! DOCTYPE" . Non credo che sia una funzionalità nascosta, ma sembra che non sia ben nota ma molto utile.

per esempio

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