Fonctionnalités cachées de HTML
Le HTML étant le langage le plus utilisé (au moins comme langage de balisage) n'a pas obtenu son crédit.
Étant donné qu'il existe depuis tant d'années, des éléments comme les contrôles FORM/INPUT sont restés les mêmes, sans ajout de nouveaux contrôles.
Donc, au moins à partir des fonctionnalités existantes, connaissez-vous des fonctionnalités qui sont peu connues mais très utiles.
Bien sûr, cette question va dans le sens de:
Fonctionnalités cachées de JavaScript
Fonctions cachées de CSS
Fonctions cachées de C #
Fonctions cachées de VB.NET
Fonctions cachées de Java
Caractéristiques cachées de l'ASP classique
Fonctionnalités cachées d'ASP.NET
Fonctions cachées de Python
Fonctions cachées de TextPad
Fonctions cachées d'Eclipse
Ne mentionnez pas les fonctionnalités de HTML 5.0, car il est dans brouillon de travail
Veuillez spécifier une fonctionnalité par réponse .
Utilisation d'un chemin absolu indépendant du protocole:
<img src="//domain.com/img/logo.png"/>
Si le navigateur affiche une page en SSL via HTTPS, il demandera cet actif avec le protocole https, sinon il le demandera avec HTTP.
Cela empêche cet horrible message d'erreur "Cette page contient des éléments sécurisés et non sécurisés" dans IE, en conservant toutes vos demandes de ressources dans le même protocole.
Avertissement: lorsqu'il est utilisé sur un <link> ou @import pour une feuille de style, IE7 et IE8 téléchargez le fichier deux fois . Cependant, toutes les autres utilisations sont très bien.
La balise label relie logiquement l'étiquette à l'élément de formulaire à l'aide de l'attribut "for". La plupart des navigateurs transforment cela en un lien qui active l'élément de formulaire associé.
<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>
La propriété contentEditable pour (IE, Firefox et 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>
Cela rendra les cellules modifiables! Allez-y, essayez-le si vous ne me croyez pas.
Je pense que le balise optgroup est une fonctionnalité que les gens n'utilisent pas très souvent. La plupart des gens à qui je parle n'ont pas tendance à réaliser qu'elle existe.
Exemple:
<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>
Mon bit préféré est la balise de base, qui est un épargnant de vie si vous souhaitez utiliser le routage ou la réécriture d'URL ...
Disons que vous vous trouvez à:
www.anypage.com/folder/subfolder/
Voici le code et les résultats des liens de cette page.
Ancre régulière:
<a href="test.html">Click here</a>
Mène à
www.anypage.com/folder/subfolder/test.html
Maintenant, si vous ajoutez une balise de base
<base href="http://www.anypage.com/" />
<a href="test.html">Click here</a>
L'ancre mène maintenant à:
www.anypage.com/test.html
<img onerror="{javascript}" />
onerror est un événement JavaScript qui sera déclenché juste avant l'affichage de la petite croix rouge (dans IE).
Vous pouvez l'utiliser pour écrire un script qui remplacera l'image cassée par du contenu alternatif valide, afin que l'utilisateur n'ait pas à gérer le problème de la croix rouge.
À première vue, cela peut être considéré comme complètement inutile, car, ne saviez-vous pas auparavant si l'image était disponible en premier lieu? Mais, si vous considérez, il existe des applications valides parfaites pour cette chose; Par exemple: supposez que vous diffusez une image à partir d'une ressource tierce que vous ne contrôlez pas. Comme notre gravatar ici dans SO ... il est servi depuis http://www.gravatar.com/ , une ressource que l'équipe stackoverflow ne contrôle pas du tout - bien qu'elle soit fiable. Si http://www.gravatar.com/ tombe en panne, stackoverflow pourrait contourner cela en utilisant onerror.
Le <kbd> élément de balisage pour la saisie au clavier
Ctrl+Alt+Del
<blink>
Doit être utilisé pour tout ce qui est important sur le site. Les sites les plus importants enveloppent tout le contenu en un clin d'œil.
<Marquee>
Crée un effet de défilement réaliste, idéal pour les livres électroniques, etc.
Edit: Easy-up fellas, c'était juste une tentative d'humour
Pas très connu mais vous pouvez spécifier lowsrc pour les images qui afficheront le lowsrc lors du chargement du src de l'image:
<img lowsrc="monkey_preview.png" src="monkey.png" />
C'est une bonne option pour ceux qui n'aiment pas les images entrelacées .
Un petit anecdote: à un moment donné, cette propriété était suffisamment obscure pour être utilisée pour exploiter Hotmail , vers 2000.
La balise bouton est la nouvelle input submit tag et beaucoup de gens ne le connaissent pas encore. Le texte du bouton peut par exemple être stylisé à l'aide de la balise du bouton.
<button>
<b>Click</b><br />
Me!
</button>
Rendra un bouton avec deux lignes, le premier dit " Cliquez sur " en gras et le second dit "Moi!". Essayez-le ici .
Spécifiez le CSS pour l'impression
<link type="text/css" rel="stylesheet" href="screen.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print.css" media="print" />
le <dl><dt> et <dd> les éléments sont souvent oubliés et représentent la liste de définitions, le terme de définition et la définition.
Ils fonctionnent de manière similaire à une liste non ordonnée (<ul>) mais au lieu d'entrées simples, cela ressemble plus à une liste de clés/valeurs.
<dl>
<dt>What</dt><dd>An Example</dd>
<dt>Why</dt><dd>Examples are good</dd>
</dl>
Pas exactement caché, mais (et c'est la faute d'IE) pas assez de gens connaissent thead, tbody, tfoot à mon goût. Et combien d'entre vous savaient que tfoot devait apparaître au-dessus tbody dans le balisage?
La balise wbr ou Word-break . De Quirksmode:
(Saut de mot) signifie: "Le navigateur peut insérer un saut de ligne ici, s'il le souhaite." Si le navigateur ne pense pas qu'un saut de ligne soit nécessaire, rien ne se passe.
<div class="name">getElements<wbr>ByTagName()</div>Je donne au navigateur la possibilité d'ajouter un saut de ligne. Cela ne sera pas nécessaire sur de très grandes résolutions, lorsque la table a beaucoup d'espace. Sur des résolutions plus petites, cependant, ces sauts de ligne placés stratégiquement empêchent la table de devenir plus grande que la fenêtre, et donc de provoquer des barres de défilement horizontales.
Il y a aussi le ­ Entité HTML mentionnée sur la même page. C'est la même chose que wbr mais quand une pause est insérée, un hypen (-) est ajouté pour signifier une pause. Un peu comme comment c'est fait sur papier.
Un exemple:
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
Une caractéristique très sous-utilisée est le fait que presque tous les éléments, qui fournissent un contenu visible sur la page, peuvent avoir un attribut "title".
L'ajout d'un tel attribut fait apparaître une "info-bulle" lorsque la souris est "survolée" sur l'élément et peut être utilisée pour fournir des informations non essentielles - mais utiles - d'une manière qui n'entraîne pas une surcharge de la page. . (Ou cela peut être un moyen d'ajouter des informations à une page déjà bondée)
Application de plusieurs classes html/css à une seule balise. Même message ici
<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>
Nous connaissons tous les DTD ou les déclarations de type de document (ces choses qui font échouer votre page avec le validateur W3C). Cependant, il est possible d'étendre les [~ # ~] dtd [~ # ~] s en déclarant une liste d'attributs pour les éléments personnalisés.
Par exemple, le validateur W3C échec pour cette page à cause de behavior="mouseover" ajouté au <p> tag. Cependant, vous pouvez le faire passer en procédant comme suit:
<!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>
]>
En savoir plus sur environ DTD personnalisés à QuirksMode .
Nous pouvons attribuer une chaîne codée en base 64 comme attribut source/href de l'image, JavaScript, iframe, lien
par exemple.
<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>
Les références
Comment puis-je construire des images en utilisant le balisage HTML?
J'ai récemment découvert les balises fieldset et label. Comme ci-dessus, pas caché mais utile pour les formulaires.
Exemple:
<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>
Vous pouvez utiliser la balise object au lieu d'un iframe pour inclure un autre document dans la page:
<object data="data/test.html" type="text/html" width="300" height="200">
alt : <a href="data/test.html">test.html</a>
</object>
La plupart ne savent pas non plus que vous pouvez distinguer le bouton de formulaire appuyé en leur donnant simplement une paire nom/valeur. Par exemple.
<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>
Côté serveur, le bouton réel enfoncé peut alors être obtenu en vérifiant simplement la présence du paramètre de requête associé au nom du bouton. Si ce n'est pas null, alors le bouton a été enfoncé.
J'ai vu beaucoup sur inutile JS hacks/contournements pour cela, par exemple changer l'action du formulaire ou changer une valeur d'entrée cachée au préalable en fonction du bouton enfoncé. C'est tout simplement étonnant.
De plus, j'ai vu presque autant de hacks/solutions de contournement JS pour rassembler celles cochées de plusieurs cases à cocher comme dans les lignes de tableau. À chaque sélection/vérification d'une ligne de table, le JS ajouterait l'index de ligne à une valeur séparée par des virgules dans un élément d'entrée caché qui serait ensuite divisé/analysé davantage du côté serveur. C'est le résultat de l'ignorance que vous pouvez donner à plusieurs éléments d'entrée le même nom mais un différent et que vous pouvez toujours y accéder en tant que tableau côté serveur. Par exemple.
<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'ignorance donnerait à chaque case à cocher un nom différent et omettrait l'attribut de valeur entier. Dans certaines situations sans JS-hack/contournement, j'ai également vu une magie inutilement écrasante dans le code côté serveur pour distinguer les éléments cochés.
<optgroup> est une excellente solution que les gens manquent souvent lors de la segmentation <select> listes.
<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>
est ce que vous devriez utiliser au lieu 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>
Si l'attribut for d'un <label> la balise n'est pas spécifiée, elle est implicitement définie comme le premier enfant <input>, c'est à dire.
<label>Alias: <input name="alias" id="alias"></label>
est équivalent à
<label for="alias">Alias:</label> <input name="alias" id="alias">
Bouton comme lien, pas de JavaScript:
Vous pouvez mettre n'importe quel type de fichier dans l'action formulaire, et vous avez un bouton qui agit comme un lien. Pas besoin d'utiliser des événements onclick ou autres. Vous pouvez même ouvrir le fichier dans une nouvelle fenêtre en collant une "cible" dans le formulaire. Je ne voyais pas beaucoup cette technique en application.
Remplacez ceci
<a href="myfile.pdf" target="_blank">Download file</a>
avec ça:
<form method="get" action="myfile.pdf" target="_blank">
<input type="submit" value="Download file">
</form>
Moyen le plus simple de rafraîchir la page en X secondes - META Refresh
<meta http-equiv="refresh" content="600">
La valeur du contenu signifie les secondes après lesquelles vous souhaitez actualiser la page.
[Modifier]
<meta http-equiv="refresh" content="0; url=foobar.com/index.html">
Pour faire une simple redirection!
(Merci @rlb)
Les balises <html>, <head> Et <body> Sont facultatives. Si vous les omettez, ils seront insérés silencieusement par l'analyseur aux endroits appropriés. Il est parfaitement valide de le faire en HTML (tout comme <tbody> Implicite).
Le HTML dans la théorie est une application SGML. C'est probablement le plus court valide document HTML 4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title//<p/
Ce qui précède ne fonctionne nulle part, sauf le validateur W3C. Cependant, le document HTML5 text/html Valide le plus court fonctionne partout:
<!DOCTYPE html><title></title>
L'attribut lang n'est pas très connu mais très utile. L'attribut est utilisé pour identifier la langue du contenu dans le document entier ou dans un seul élément. Les codes de langue sont donnés en code de langue ISO à 2 lettres (c'est-à-dire 'en' pour l'anglais, 'fr' pour le français).
Il est utile pour les navigateurs qui peuvent ajuster leur affichage des guillemets, etc. Les lecteurs d'écran bénéficient également de l'attribut lang ainsi que des moteurs de recherche.
Sitepoint a quelques explications intéressantes de l'attribut lang.
Exemples
Spécifiez la langue devant être l'anglais pour tout le document, à moins qu'elle ne soit remplacée par un autre attribut lang à un niveau inférieur dans le DOM.
<html lang="en">
Spécifiez la langue suédoise dans le paragraphe suivant.
<p lang="sv">Ät din morgongröt och bli stor och stark!</p>
La "déclaration"! DOCTYPE " . Ne pensez pas que c'est une fonctionnalité cachée, mais il semble que ce ne soit pas bien connu mais très utile.
par exemple.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Ce n'est que faiblement lié au HTML, mais très peu de gens le savent.
Les gens abusent du <meta> tag avec le http-equiv attribut:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Refresh" content="5; url=somewhere/"/>
Cependant, de nombreux développeurs ne savent même pas ce que cela fait. Le http-equiv attribut signifie que la balise est destinée à remplacer un en-tête HTTP dans les cas où vous ne les contrôlez pas. Par conséquent, la plupart des travaux effectués via http-equiv doit être fait côté serveur.
De plus, il n'est pas aussi puissant: plusieurs propriétés d'un document ne peuvent pas être modifiées via <meta> Mots clés. Content-Type dans un <meta> la balise peut indiquer au navigateur d'utiliser un certain jeu de caractères, mais la plupart ignoreront toute modification du type MIME du document (vous ne pouvez donc pas faire de text/html documenter un application/xhtml+xml de cette façon).
Les deux balises de l'exemple doivent être remplacées par ces appels simples:
<?php
header('Content-Type: text/html; charset=UTF-8');
header('Refresh: 5; url=somewhere/');
?>
Il est destiné à fonctionner sur n'importe quel navigateur compatible HTTP (ce qui signifie, à peu près tous les navigateurs).
Exposant avec <sup> x </sup>
Un formulaire peut être soumis lorsque vous appuyez sur la touche Entrée d'une entrée de texte uniquement s'il y a un bouton de soumission dans le formulaire. Essayez-le ici . Cela ne fonctionnera pas si vous ne changez pas le type du bouton pour "soumettre".
Ma fonctionnalité cachée préférée a déjà été mentionnée, qui est la balise "de base". Très pratique lorsque vous avez un morceau de code qui a des URL relatives et soudain, ils se déplacent tous, mais pas votre page.
Mais celui qui n'a pas été mentionné est la balise d'en-tête de liste <lh>. Il n'a probablement pas été mentionné car il est considéré comme "déprécié" mais la plupart des navigateurs le supportent toujours. Je ne sais pas pourquoi elle a été supprimée, presque toutes les listes non ordonnées que je crée pourraient utiliser un en-tête, et il semble dégueu de simplement laisser tomber une balise h3, et il semble tout simplement incorrect de faire du premier élément de la liste le titre de la liste.
caractères spéciaux pour les mathématiques, le grec, ... pas très bien connu
Listes de définitions:
<dl>
<dt>Some Term</dt>
<dd>Some description</dd>
<dd>Some other description</dd>
<dt>Another Word/Phrase</dt>
<dd>Some description</dd>
</dl>
J'ai également reclassé cela pour les dispositions de formulaire et les menus de navigation pour divers sites.