Fonctionnalités cachées du HTML


110

HTML étant le langage le plus largement utilisé (au moins en tant que langage de balisage) n'a pas obtenu son crédit.
Étant donné que cela existe depuis tant d'années, des éléments tels que les contrôles FORM / INPUT sont toujours 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 ne sont pas bien connues mais très utiles.

Bien sûr, cette question est du type:

Fonctionnalités cachées de JavaScript
Fonctionnalités cachées de CSS
Fonctionnalités cachées de C #
Fonctionnalités cachées de VB.NET
Fonctionnalités cachées de Java
Fonctionnalités cachées de ASP classique
Fonctionnalités cachées d'ASP.NET
Fonctionnalités cachées de Python
Fonctionnalités cachées de TextPad
Fonctionnalités cachées d'Eclipse

Ne mentionnez pas les fonctionnalités de HTML 5.0, car il est en cours de projet

Veuillez spécifier une caractéristique par réponse .

Réponses:


244

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 ce terrible message d'erreur «Cette page contient des éléments sécurisés et non sécurisés» dans IE, en conservant toutes vos demandes d'actifs dans le même protocole.

Avertissement: Lorsqu'ils sont utilisés sur un <link> ou @import pour une feuille de style, IE7 et IE8 téléchargent le fichier deux fois . Toutes les autres utilisations, cependant, sont très bien.


29
Ce n'est pas une fonctionnalité HTML mais une fonctionnalité URL / URI.
Gumbo

44
@Gumbo: C'est vrai, c'est une fonctionnalité URI, mais j'ai pensé que c'était assez bon pour contourner les règles et l'inclure ici. Et je ne m'attends pas à une fonctionnalité cachée de la spécification URI de sitôt. :)
Paul Irish

2
une barre oblique est relative de la partie domaine, pas de la partie protocole
SztupY

2
IE est tellement incroyablement DUMB! Pourquoi diable fait-il deux fois le fichier DL?

5
Il y a un inconvénient majeur: lorsqu'un fichier est sauvegardé sur le disque et accédé à l'aide du file:protocole, le navigateur ne pourra pas trouver la ressource (par exemple, d'un CDN ou d'un autre serveur externe).
Marcel Korpel

138

La balise label lie logiquement l'étiquette à l'élément de formulaire en utilisant l'attribut "for". La plupart des navigateurs le transforment en un lien qui active l'élément de formulaire associé.

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

24
oui, étonnant à quel point peu de sites l'utilisent activement. J'ai vu des sites utiliser js pour faire cela ...
Boris Callens

2
J'ai découvert celui-ci assez récemment.
Arnis Lapsa

4
cagdas, il n'y a pas vraiment de fonctionnalités cachées dans HTML, c'est un standard spécifié.
paupière

54
Pour développer la réponse, on peut également envelopper une entrée avec une étiquette et omettre l'attribut for: <label> Fiscal Year <input name = "fiscalYear" type = "text" /> </label>
eyelidlessness

32
Utiliser des cases à cocher et des boutons radio sans cela devrait être un crime.
Kornel le

136

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


7
La question appelle des fonctionnalités qui ne sont pas introduites par HTML5
Quentin

15
David Dorward, Il n'est pas tout à fait juste de dire qu'il a été introduit avec HTML5, car contentEditable a été introduit par MS dans IE 5.5, mais oui, il n'a pas été normalisé avant HTML5; Tyson & Steve, contentEditable a été introduit dans Safari dans la version 2.0, mais de nombreuses méthodes de formatage importantes n'ont été ajoutées qu'à partir de 3.x; Victor H Valle, dépend de votre doctype. HTML 4 doit l'étendre à = "true" lorsqu'il est réduit.
paupière

2
le lien try it ne mène pas à un exemple approprié
Gordon Gustafson

4
@Binoj - Absolument pas. "L'attribut contenteditable est un attribut énuméré dont les mots clés sont la chaîne vide, true et false" - w3.org/TR/html5/editing.html
Quentin

2
Mieux encore, ajoutez ce qui suit en tant que bookmarklet pour permettre de modifier toute page Web sur laquelle vous vous trouvez: javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void (0);
Amro

102

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 à se rendre compte que cela 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>

Malheureusement, la mise en œuvre de la hiérarchie des menus par le navigateur laisse beaucoup à désirer. Je soupçonne qu'optgroup n'est pas beaucoup utilisé car ses cas d'utilisation pertinents sont rares.
paupière

1
Un niveau doit être pris en charge dans tous les navigateurs. Un forum Web dont je fais partie ailleurs où l'utilise dans certains écrans pour diviser la liste du forum dans les mêmes sections que celles utilisées sur la page principale.
staticsan

@staticsan. Je reconnais que c'est utile pour la petite catégorisation d'un certain nombre d'articles.
RichardOD

5
@eyelidlessness: Je vois tout le temps des listes déroulantes qui indentent des éléments ou utilisent une sorte de texte d'en-tête comme ---category---.
DisgruntledGoat

4
C'est une fonctionnalité intéressante que je ne connaissais pas!
Chrisb

100

Mon élément préféré est la balise de base, qui vous sauve la vie si vous souhaitez utiliser le routage ou la réécriture d'URL ...

Disons que vous êtes situé à:

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 désormais à:

www.anypage.com/test.html

48
Vous pouvez également simplement utiliser /images/image.png, avec une barre oblique en tête. :-)
molf

46
La balise de base est une option nucléaire - c'est l'équivalent de #define: si vous ne la suivez pas, indiquez-la très clairement aux futurs développeurs et faites-en une partie de très bas niveau de l'architecture du site, cela peut être frustrant. bogues non évidents. Je n'ai jamais eu besoin de cela, à utiliser avec prudence.
annakata

2
Oui, j'ai également vu la balise de base interférer avec mon JavaScript en essayant de charger dynamiquement des fichiers CSS dans la page. De plus, un bogue dans IE6 vous oblige à fermer explicitement la balise (</base>), qui n'est pas valide. Les commentaires conditionnels peuvent y contribuer.
avdgaag

4
Notez que l'URL de base est appliquée à chaque URL relative et pas seulement aux chemins d'URL relatifs. Ainsi, la référence #topserait résolue en «haut» dans le document d'index racine et en «haut» dans le même document.
Gumbo le

17
Je trouve cela extrêmement pratique dans les situations où je dois «voir la source» et télécharger le HTML d'une page pour travailler avec. Une fois la source téléchargée, vous pouvez ajouter un élément BASE avec l'attribut href approprié. De cette façon, vous pouvez travailler localement après avoir téléchargé uniquement le code HTML source ... pas besoin de télécharger tous les javascript, css et images.
Andy Ford

99
<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 un contenu alternatif valide, de sorte 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 sauriez-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: supposons que vous diffusiez 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 de stackoverflow ne contrôle pas du tout - bien qu'elle soit fiable. Si http://www.gravatar.com/ tombe en panne, stackoverflow pourrait contourner ce problème en utilisant onerror.


Aha ... si c'est ce que je pense, je devrais le savoir plus tôt quand j'en aurai vraiment besoin. : /
Arnis Lapsa

pour clarifier, onerror est un événement javascript (tout comme onclick) qui vous permet de faire quelque chose lorsqu'une image ne se charge pas.
Jehiah

1
Daniel Silveira, pouvez-vous préciser que cela exécute en fait un code d'erreur dans le cas d'images cassées (par exemple 404)? Quoi qu'il en soit, il s'agit d'une fonctionnalité DOM, pas d'une fonctionnalité HTML en soi.
paupière

2
J'ai eu un numpty utiliser celui-ci, pointant vers une image inexistante, récursive n'importe qui ???
Pharabus

96

L' <kbd>élément de marquage pour la saisie au clavier

Ctrl+ Alt+Del


Y a-t-il quelque chose de spécial à propos de <kbd> à côté d'un format de police différent? sinon voici une liste d'autres balises de formatage? w3schools.com/tags/tag_phrase_elements.asp
Votre ami Ken

Pas spécialement, juste pas bien connu, je ne pense pas
Russ Cam

3
Rien par défaut, mais il est plus propre de marquer l'élément avec CSS comme le fait SO.
Agent_9191

1
Je ne savais pas que ça existait, c'est amusant.
Kzqai

85
<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: les gars faciles, ce n'était qu'une tentative d'humour


62
Peut-être que la question aurait dû spécifier que vous ne devriez pas lister les fonctionnalités que nous voulons garder cachées.
Ben Blank

12
... J'ai utilisé <blink>, dans le cadre d'un style psuedo-terminal pour un code d'affichage div (: before {content: "drthomas @ house: ~ $";}: after {content: "_"; text -decoration: blink;} ... c'était génial. Je devrais probablement demander de l'aide. =]
David dit de réintégrer Monica le

2
<marquee> <blink> Les balises HTML les plus ennuyeuses jamais !!! </blink> </marquee> Elles ne sont pas cachées, elles ne sont simplement pas utilisées pour une raison.
Votre ami Ken

2
J'emballe toute ma page dans Marquee and Blink parce que je suis juste
trop

3
S'il vous plaît. La seule utilisation légitime de <blink> est la suivante: le chat de Schroedinger n'est <blink> pas </blink> mort. (Je pensais que c'était sur xkcd, mais je ne le trouve pas pour le moment.)
Christopher Creutzig

84

Pas très connu mais vous pouvez spécifier lowsrcpour les images qui afficheront le lowsrclors du chargement srcde 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 détail: à un moment donné, cette propriété était suffisamment obscure pour être utilisée pour exploiter Hotmail , vers 2000.


C'est ce que je ne savais pas. Peut-il être utilisé pour "charger" l'animation?
Boris Callens

2
Je reçois un avertissement de fraude dans Opera à partir de ce lien «exploiter Hotmail». : o
jrista

2
C'est un site Web de sécurité, c'est sûr.
Joey Robert

27
Mais cet attribut est propriétaire. msdn.microsoft.com/library/ms534138(VS.85).aspx
Gumbo

17
Cet attribut est obsolète depuis HTML4 - vous ne devez pas l'utiliser dans les sites Web de production.
Ben Hull

67

DELet INSpour marquer le contenu supprimé et inséré:

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

10
Certainement pas assez utilisé.
paupière

2
@eyelidlessness: il n'y a tout simplement pas assez de situations où le marquage du texte supprimé / inséré est aussi utile.
DisgruntledGoat

2
Je pourrais jurer que StackOverflow utilisé <ins>et <del>sur les pages Révisions il y a quelque temps, mais maintenant il utilise <span class="diff-add">et <span class="diff-delete">. :(
système PAUSE

1
Histoires de révision du wiki @DisgruntledGoat? beaucoup de cas d'utilisation pour cela
HorusKol

3
@Horus: bien sûr, vous pouvez trouver des utilisations, mais dans le grand schéma des choses, ce n'est toujours pas une énorme quantité de situations.
DisgruntledGoat

58

La balise bouton est la nouvelle input submitbalise et beaucoup de gens ne la connaissent toujours pas. Le texte du bouton peut par exemple être stylisé à l'aide de la balise button.

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

Rendra un bouton avec deux lignes, le premier dit " Cliquez " en gras et le second dit "Moi!". Essayez-le ici .


15
Dommage qu'il soit cassé dans IE <8. Il est possible de contourner les problèmes, mais cela peut être douloureux, et parfois vous frappez la protection de sécurité entre le serveur Web et l'environnement de programmation côté serveur.
Quentin

6
Mais IE <8 soumettra le contenu de l'élément, pas sa valeur. Je pense que certaines versions le traiteront toujours comme un contrôle réussi (même s'il n'a pas été cliqué).
Quentin

4
Et si vous le faites <button contenteditable>, vous pouvez également modifier le texte du bouton! Désigne quiconque pourrait en trouver une utilisation valable. :)
Gavin

4
Je n'ai jamais compris pourquoi il y avait un type de soumission «d'entrée». Il ne s'agit pas de saisir quoi que ce soit, mais simplement de soumettre ce que vous avez entré dans d'autres champs.
DisgruntledGoat

3
@DisgruntledGoat: sa paire nom / valeur sera effectivement envoyée. Utile si vous avez plus d'un bouton dans un formulaire (par exemple, modifier, supprimer, déplacer, etc.) et que vous souhaitez distinguer le bouton enfoncé. Malheureusement, la même chose ne fonctionne pas pour buttonIE <8, il envoie étonnamment les paires nom / valeur de TOUS les buttonéléments.
BalusC

56

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

1
Découvert il y a quelques semaines
Daniel Moura

41
Pas vraiment caché imo.
Dmitri Farkov

Ceci est d'usage courant.
UpTheCreek

Si vous n'avez jamais traité de cela auparavant, j'espère que vous n'avez jamais créé de sites Web de production auparavant ...
Kzqai

comment cela peut-il être considéré comme caché?
Marin

54

les éléments <dl> <dt>et <dd>sont souvent oubliés et ils représentent la liste de définitions, le terme de définition et la définition.

Ils fonctionnent de la même manière qu'une liste non ordonnée ( <ul>), mais au lieu d'entrées uniques, cela ressemble plus à une liste clé / valeur.

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

De plus, la sémantique dl / dt / dd est appropriée pour des listes similaires (par exemple, la structure a été recommandée pour les dialogues).
paupière

2
La présentation par défaut n'est pas très agréable, mais les gens oublient que les éléments peuvent être stylisés de nombreuses façons avec CSS.
DisgruntledGoat

18
La chose la plus intéressante qui est souvent oubliée est que le format est clé / valeur / valeur / valeur / valeur / clé / valeur
Quentin

1
@D_N, je pense que le désaccord est que je considère que les utilisations suggérées font partie de la définition et de la sémantique, plutôt que d'être séparées et contradictoires.
paupière

1
@D_N et @eyelidlessness - consultez la note de Bruce Lawson sur le balisage sémantique d'une conversation ... et le jury est toujours absent sur l'élément de dialogue HTML5 ... brucelawson.co.uk/2006/…
Fenton

52

Pas exactement caché, mais (et c'est la faute d'IE) pas assez de gens connaissent la tête, le corps, le pied à mon goût. Et combien d'entre vous savaient que tfoot est censé apparaître au-dessus de tbody dans le balisage?


1
boris callens, Ouais, tbody est implicite si aucun de la tête, tbody et tfoot n'est présent.
paupière

2
Si IE5 avait correctement implémenté TBODY, alors plus de personnes l'utiliseront. C'était le problème principal il y a plusieurs années. Mozilla et Opera supportaient le défilement TBODY qui était vraiment cool; malheureusement, IE5 ne l'a pas fait.
staticsan

9
Ils sont utiles pour l'impression car il faut mettre le theadet tfooten haut et en bas de chaque page. C'est dommage qu'il n'y ait pas de mécanisme de répétition theaddans le navigateur, lorsque vous avez de longues tables longues.
DisgruntledGoat

1
Je savais que le pied dépassait le corps, et je pense que c'est assez stupide. J'ai mis mon tfoot ci-dessous, là où cela avait du sens, j'ai eu une erreur de validation, j'ai déplacé le tfoot au-dessus du tbody (confus mais toujours conforme), et devinez quoi?! Lorsque vous essayez de mettre en évidence le tableau, le navigateur (au moins FF) met en évidence le pied AVANT le corps, même s'il est visuellement sous le corps! Puis!!! lorsque vous le copiez dans un éditeur de texte, il est visuellement AU-DESSUS du corps. Règle totalement arbitraire.
Anthony

3
@Anthony: cela a du sens si vous avez une connexion lente, cela signifie que vous pouvez voir tous les en-têtes et pieds de page pendant que le contenu de la table est toujours en cours de chargement.
me_and

50

La balise de saut de motswbr ou . Depuis 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, de tels sauts de ligne stratégiquement placés empêchent la table de devenir plus grande que la fenêtre, et provoquent ainsi des barres de défilement horizontales.

Il y a aussi l' &shy;entité HTML mentionnée sur la même page. C'est la même chose que wbrmais quand une pause est insérée un hypen (- ) est ajouté pour signifier une pause. Un peu comme la façon dont cela se fait sur papier.

Un exemple:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText


2
Soyez prudent car le support du navigateur est médiocre sur celui-ci
Christophe Eblé

7
"IE8 comme IE8" ne le prend pas en charge et il est bogué dans Safari 3.0 pour Windows. A part cela, le support est plutôt bon. Reportez-vous au tableau de compatibilité dans le lien.
aleemb

La référence au point de site a marqué cette balise comme obsolète et inutile, qui a raison? reference.sitepoint.com/html/wbr
Christophe Eblé

Il peut être obsolète dans le cadre de la spécification HTML, mais il fonctionne toujours dans les navigateurs. En cas de doute, optez pour le verdict QuirksMode (tableaux de compatibilité désormais sponsorisés par Google).
aleemb

Il semble que ce serait une chose très utile à inclure dans la prochaine norme css!
James

43

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 «titre».

L'ajout d'un tel attribut provoque l'apparition d'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 ne rend pas la page trop encombrée . (Ou cela peut être un moyen d'ajouter des informations à une page déjà bondée)


Oui, l'attribut "title" est très utile, en particulier pour les éléments sur lesquels l'utilisateur doit cliquer.
Steve Harrison

6
L'info-bulle qui s'affiche est spécifique au navigateur. Tous les navigateurs n'afficheront pas l'attribut title de la même manière. Mais c'est une fonctionnalité intéressante que j'utilise certainement.
Travis

8
L'attribut title est utile, mais uniquement lorsqu'il est utilisé de manière appropriée. La plupart des navigateurs ne rendent l'info-bulle que pendant quelques secondes avant de disparaître. Je déteste quand les concepteurs ressentent le besoin de remplir l'attribut title avec 3 ou 4 lignes de texte, ce qui vous oblige à passer la souris, puis à relire la souris pour lire le reste.
Priestc

Utiliser ceci en relation avec jQuery équivaut à génialité.
Levi Morrison

Levi - pouvez-vous donner quelques exemples?
belugabob

38

Application de plusieurs classes html / css à une balise. Même message ici

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

22
Ce sont des classes HTML, pas des classes CSS. CSS n'a pas de classes (il a des sélecteurs de classe). Les classes HTML sont utiles pour des choses autres que CSS.
Quentin

36
Hou la la! Je ne peux tout simplement pas oublier que les gens trouvent que c'est une fonctionnalité "cachée". Je me sens stupide de publier des fonctionnalités "vraiment cachées" parce que les gens qui ont voté pour cela ne seront probablement même pas près de comprendre ce que signifie l'extension d'une DTD.
aleemb

5
d03boy, p.foo, p.var n'est pas la même chose que p.foo.bar. Le premier sélectionne n'importe quel paragraphe avec la classe "foo" ou "var", le second sélectionne un paragraphe avec les deux classes.
paupière

5
La chose concernant les classes HTML est un bon point, car cela m'amène sur un point - html ne devrait pas être mis au courant de css .. vous «devriez» être capable de créer du html, et de le transmettre à un concepteur qui peut implémenter leur conception sans besoin de changer le html (pas encore tout à fait le cas;)) .. donc cela se résume à votre dénomination et à la façon dont vous utilisez les classes .. ne créez pas de classes pour cibler les propriétés css .. utilisez des classes pour identifier ce qu'est l'élément ».
Meandmycode

1
Techniquement, "Foo Bar BlackBg" est une classe unique, et p.foo est juste du sucre syntaxique pour p [class ~ = foo] (voir les spécifications ). Cependant, il est plus facile d'y penser comme ayant plusieurs classes.
Tgr

34

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 la DTD en déclarant une liste d'attributs pour les éléments personnalisés.

Par exemple, le validateur W3C échouera pour cette page en raison de l' behavior="mouseover"ajout au<p> balise. Cependant, vous pouvez le faire passer en faisant ceci:

<!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 les DTD personnalisés sur QuirksMode .


10
Bien sûr, cela le rend "Valide: Votre langage de balisage personnalisé" et non "XHTML 1.0 Transitional"
Quentin

3
+1. Je ne sais pas pourquoi c'était -1. Quoi qu'il en soit, il convient de noter que le support du navigateur est quasiment nul.
paupière

À peu près sûr, Opera prend en charge cela.
Rich Bradshaw

2
@eyelidlessness cela ne fonctionne qu'en XHTML. Ne fonctionne pas dans le XHTML imaginaire envoyé sous forme de texte / HTML.
Kornel le

2
Eesh, pas fan de ça. Pour moi, la valeur du HTML est que tout le monde sur la planète sait ce que cela signifie (plus ou moins), car nous utilisons tous les mêmes balises et attributs. Je ne sais pas pourquoi l' classattribut n'est pas suffisamment extensible.
Paul D.Waite

28

Nous pouvons attribuer une chaîne encodé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>

Références

Comment puis-je créer des images à l'aide du balisage HTML?

Fichier binaire vers encodeur / traducteur Base64


4
Malheureusement, IE <8 ne le prend pas en charge. Vous pouvez cependant utiliser MHTML à la place pour ces navigateurs: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Mathias Bynens

26

J'ai récemment découvert les balises fieldset et label. Comme ci-dessus, non caché mais utile pour les formulaires.

<fieldset> explication

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>

Veuillez fournir un exemple d'utilisation de ceci.
Binoj Antony


Fieldset découvert à partir de la page d'exemple aspnet mvc ^^
Arnis Lapsa

2
Je ne savais pas pour celui-ci. Voici la spécification W3c: w3.org/TR/html401/interact/forms.html#h-17.10
MitMaro

Les jeux de champs et les légendes sont super. Une très belle façon de baliser vos formulaires.
Neil Aitken

25

Vous pouvez utiliser la objectbalise au lieu d'un iframepour 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>

57
Ce qui finit par fonctionner presque exactement comme un iframe sauf qu'il est moins bien supporté et a moins de fonctionnalités.
Quentin

iframe est obsolète, j'espère que nous aurons bientôt un meilleur support,
Gordon Gustafson

12
iframe n'est pas obsolète en HTML 5.
Zach

Empêche-t-il les attaques XSS à partir de la page intégrée?
lâche anonyme le

1
Je crois qu'il utilise SOP, comme avec les iframes.
Zach le

25

<optgroup>est un excellent outil que les gens manquent souvent lorsqu'ils font des <select>listes segmentées .

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

25

La plupart ne sont pas non plus conscients du fait que vous pouvez distinguer le bouton de formulaire enfoncé 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 le cas null, le bouton a été enfoncé.

J'ai vu beaucoup de choses inutiles hacks / solutions de contournement JS pour cela, par exemple en changeant l'action du formulaire ou en changeant 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 les cases cochées de plusieurs cases à cocher comme dans les lignes de tableau. À chaque sélection / vérification d'une ligne de table, le JS ajoutait l'index de ligne à une valeur séparée par des virgules dans un élément d'entrée caché qui serait ensuite fractionné / analysé plus loin du côté serveur. C'est le résultat de l'inconscience que vous pouvez donner à plusieurs éléments d'entrée le même nom mais une valeur différente 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'inconscience donnerait à chaque case à cocher un nom différent et omettrait l'attribut de valeur entière. 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.


1
Hé ... C'est apparemment une autre fonctionnalité cachée de HTML: /;)
BalusC

1
Si un formulaire comporte plusieurs boutons d'envoi et que l'utilisateur clique sur l'un d'entre eux, certaines versions d'Internet Explorer diront joyeusement à votre serveur qu'ils ont tous cliqué. Merveilleux.
detly le

1
@detly: uniquement si vous utilisez à la <button type="submit">place de <input type="submit">:)
BalusC

1
... buuuuut IE6 n'a-t-il pas également des problèmes avec <input type="submit">? (Mon souvenir de ce problème est flou - j'ai depuis longtemps convaincu les employeurs de ne pas s'inquiéter de la compatibilité d'IE pour les applications Web internes, ce n'est donc plus mon problème. Mais je semble me souvenir d'un obstacle à ce que ce problème puisse être résolu dans IE6. )
detly

2
Ce n'est pas très convivial pour i18n.
zneak

22

Balise 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
D'après mon expérience, le support de colgroup est au mieux floconneux.
paupière

WPF Grid
Binoj Antony

18

Si l' forattribut d'une <label>balise n'est pas spécifié, il est implicitement défini 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">

4
Mais cela bénéficie de moins de support du navigateur que l'attribut for
Quentin

4
@David - Avez-vous de la documentation pour le confirmer? Je ne pense pas avoir jamais vu un navigateur ne prenant pas en charge cette utilisation. J'ai personnellement testé dans IE6 / 7, FF2 / 3, Safari 3 et Chrome 1/2. Je ne me suis pas testé dans Opera, mais je serais très surpris si cela ne fonctionnait pas. Ce comportement fait partie de la spécification HTML 4.0 originale, publiée pour la première fois il y a plus de onze ans: w3.org/TR/1998/REC-html40-19980424/interact/forms.html#adef-for
Ben Blank

De plus, il n'est pas valide de mettre une entrée à l'intérieur d'une étiquette, et DOH vous n'avez pas fermé votre balise d'entrée dans les deux exemples!
Anthony

5
Vous vous trompez sur les deux points: c'est une pratique valable, et la balise de fin est interdite aux éléments d'entrée.
moo

15

Bouton comme lien, pas de JavaScript :

Vous pouvez mettre tout type de fichier sous la forme action de , 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 n'ai pas beaucoup vu 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>

27
Button n'aura pas l'option "Enregistrer le fichier sous", ce qui peut être nécessaire pour les utilisateurs qui n'aiment pas qu'Adobe Acrobat prenne en charge leur navigateur.
Kornel

Il se comportera avec le comportement par défaut du navigateur lors de l'accès au fichier PDF. Cela peut être un fichier HTML, un fichier Word, un fichier zip ou tout ce que vous voulez.
Wadih M.

Dans quelle situation une balise d'ancrage nécessite-t-elle un événement onclick? et pourquoi 3 lignes de html seraient-elles meilleures que 1? L'idée est-elle que vous POUVEZ avoir un bouton au lieu d'un lien, donc c'est sympa et comme un bouton? Même si j'ai l'air grincheux à ce sujet, j'ai en fait une page qui utilise des boutons au lieu de liens car le fichier est créé dynamiquement lorsque l'utilisateur le demande, donc je ne voulais pas de lien vers: blah.php? Stuff = "userdata" Même si j'aurais pu suivre cette voie, je ne voulais pas risquer que le nom de fichier ait le script de génération de fichier comme nom au lieu du nom de fichier que le script donne au fichier.
Anthony

1
Pourquoi ne pas simplement styliser la balise <a> comme un bouton? Cela semble être un tas d'ordures dans votre balisage.
UpTheCreek

2
@UpTheCreek certaines applications Web veulent avoir la même apparence que le système d'exploitation. Par exemple, un bouton moche lorsque l'utilisateur utilise Windows et un beau bouton lorsque l'utilisateur utilise Mac OS X.

13

Le moyen le plus simple de rafraîchir la page en X secondes - META Refresh

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

La valeur dans le contenu signifie les secondes après lesquelles vous souhaitez que la page s'actualise.
[Éditer]

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

Pour faire une simple redirection!
(Merci @rlb)


13
Bien sûr, déterminer quels éléments doivent être rafraîchis, puis les mettre à jour via AJAX se traduit par une expérience utilisateur beaucoup plus agréable ...
Steve Harrison

11
L'actualisation META ne fait vraiment rien de bien dans les pages où il y a aussi un roi de l'activité des formulaires utilisateur, car elle peut interrompre le remplissage du formulaire de l'utilisateur et annuler tout le travail. Je pense qu'il y a rarement une occasion où ce genre de rafraîchissements serait le meilleur. C'est juste la solution de facilité normalement.
Robert Koritnik

11
/ me déteste les pages qui s'actualisent comme ça ... devraient être interdites = /
Svish

3
Cela peut également être utile s'il est défini sur un peu moins que le délai d'expiration de la session pour informer l'utilisateur que sa session a expiré et a été supprimée.
fforw

1
Bouton de retour des délais courts.
Kornel

12

<html>, <head>Et les <body>balises sont facultatives. Si vous les omettez, ils seront insérés en silence par l'analyseur aux endroits appropriés. Il est parfaitement valable de le faire en HTML (tout comme implicite<tbody> ).

HTML dans théorie est une application SGML. Il s'agit probablement du document HTML 4 valide le plus court :

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

Ce qui précède ne fonctionne nulle part sauf W3C Validator. Cependant, le text/htmldocument HTML5 valide le plus court fonctionne partout:

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

4
Vous devez faire attention à ce que vous annoncez. Le code ci-dessus passera la validation avec 4 avertissements au validateur w3c, mais le DocType est HTML 4.0. Il est assez intéressant que HTML 4 soit le décendant de SGML et conserve donc cette norme de validation lâche, mais si vous changez cette DTD en XHTML 1.0 STRICT, il obtient 15 erreurs, ce qui est presque égal au nombre de caractères. XHTML a été développé parce que HTML était tellement paresseux (et donc non sécurisé) que nous ne voulons plus en profiter.
Anthony

3
Si vous changez DOCTYPE du document HTML / SGML en XHTML / XML, vous obtiendrez un mélange insensé. C'est assez évident et je ne sais pas pourquoi vous le faites remarquer.
Kornel

3
Cet exemple peut techniquement être du HTML 4 valide, mais les navigateurs ne prennent pas en charge cette syntaxe SGML abrégée. Ce qui suit est le plus court document HTML 5 valide, que les navigateurs prennent en charge:<!DOCTYPE html><title></title>
Brian Campbell

Une idée à quel point est-il compatible de laisser de côté head/ body, pas seulement du point de vue de la validation?
kibibu le

@kibibu: Les navigateurs n'ont pas de problèmes avec ça. Les anciennes versions d'Opera <head>étaient parfois omises dans le DOM, mais le contenu principal était dans le DOM et fonctionnait de toute façon. Le plus gros problème que j'ai trouvé est que les clients OpenID <head>doivent être explicitement présents.
Kornel le

11

le lang attribut n'est pas très connu mais très utile. L'attribut est utilisé pour identifier la langue du contenu dans l'ensemble du document 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).

C'est utile pour les navigateurs qui peuvent ajuster leur affichage des guillemets, etc. Les lecteurs d'écran bénéficient également de l' lang attribut ainsi que des moteurs de recherche.

Sitepoint a une bonne explication de lalang attribut.

Exemples

Spécifiez la langue pour être l'anglais pour l'ensemble du document, sauf si remplacé par un autre langattribut à un niveau inférieur dans le DOM.

<html lang="en">

Dans le paragraphe suivant, spécifiez la langue suédoise.

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

10

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

10
Et sans parler de "obligatoire pour la plupart des langages de balisage actuels et sans un il est impossible de valider de manière fiable un document" ... validator.w3.org/docs/help.html#faq-doctype
Svish

Je ne pense plus que ce soit "mal connu". Entre IE 6 et IE 7, l'utilisation de doctype est passée d'environ 1% à> 50%.
paupière

@eyelidlessness La plupart des IDE incluent cette balise, c'est pourquoi son utilisation a augmenté. Je pense que cette balise n'est pas bien connue.
Daniel Moura

6
Et l'utilisation d'un doctype strict corrige 95% des incohérences du navigateur.
DisgruntledGoat

3
Une partie de la norme et utilisée par 99% des développeurs ne ressemble pas à une «fonctionnalité cachée».
WhyNotHugo
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.