Fonctionnalités cachées du HTML

Le langage HTML étant la langue la plus utilisée (au moins en tant que langage de balisage) n’a pas été reconnu.
Considérant que cela existe depuis de nombreuses années, des choses comme les contrôles FORM / INPUT sont toujours restées 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 va dans le sens de:

Caractéristiques cachées de JavaScript
Caractéristiques cachées de CSS
Caractéristiques cachées de C #
Caractéristiques cachées de VB.NET
Caractéristiques cachées de Java
Caractéristiques cachées de ASP classique
Caractéristiques cachées d’ASP.NET
Caractéristiques cachées de Python
Caractéristiques cachées du TextPad
Caractéristiques cachées d’Eclipse

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

Veuillez spécifier une fonctionnalité par réponse .

En utilisant un chemin absolu indépendant du protocole:

 

Si le navigateur affiche une page SSL via HTTPS, il demandera cet actif avec le protocole https, sinon il le demandera avec HTTP.

Cela empêche le message d’erreur “Cette page contient à la fois des éléments sécurisés et non sécurisés” dans IE, conservant toutes vos demandes d’actifs dans le même protocole.

Avertissement: Lorsqu’il est utilisé sur une ou une @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.

La balise label lie logiquement l’étiquette à l’élément de formulaire en utilisant l’atsortingbut “for”. La plupart des navigateurs en font un lien qui active l’élément de formulaire associé.

   

La propriété contentEditable pour (IE, Firefox et Safari)

 
This text can be edited
This text can be edited

Cela rendra les cellules modifiables! Allez-y, essayez-le si vous ne me croyez pas.

Je pense que le tag optgroup est une caractéristique que les gens n’utilisent pas très souvent. La plupart des gens à qui je parle n’ont pas tendance à réaliser que cela existe.

Exemple:

  

Mon bit de prédilection est la balise de base, qui sauve des vies 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:

 Click here 

Mène à

 www.anypage.com/folder/subfolder/https://stackoverflow.com/questions/954327/hidden-features-of-html/test.html 

Maintenant, si vous ajoutez une balise de base

  Click here 

L’ancre mène maintenant à:

 www.anypage.com/https://stackoverflow.com/questions/954327/hidden-features-of-html/test.html 
  

onerror est un événement JavaScript qui sera déclenché juste avant que la petite image de la croix rouge (dans IE) ne soit affichée.

Vous pouvez l’utiliser pour écrire un script qui remplacera l’image brisée par un autre contenu valide, de sorte que l’utilisateur ne soit pas confronté au problème de la croix rouge.

À première vue, cela peut être considéré comme totalement inutile, car ne sauriez-vous pas auparavant si l’image était disponible en premier lieu? Mais, si vous considérez, il existe des applications parfaitement valables pour cette chose; Par exemple, supposons que vous diffusiez une image provenant 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 ce onerror utilisant onerror .

L’élément pour marquer les entrées au clavier

Ctrl + Alt + Suppr

  

Doit être utilisé pour quelque chose d’important sur le site. Les sites les plus importants enveloppent tout le contenu en un clin d’œil.

  

Crée un effet de défilement réaliste, idéal pour les livres électroniques, etc.

Edit: Les gars faciles, 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 de la src de l’image:

  

C’est une bonne option pour ceux qui n’aiment pas les images entrelacées .

Un peu de sortingvia: à un moment donné, cette propriété était assez obscure pour être utilisée pour exploiter Hotmail , vers 2000.

DEL et INS pour marquer le contenu supprimé et inséré:

 HTML sucks rocks! 

La balise de bouton est la nouvelle balise de input submit et de nombreuses personnes ne la connaissent pas encore. Le texte du bouton peut par exemple être stylé à l’aide du bouton.

  

Rendra un bouton avec deux lignes, le premier dit ” Click ” en gras et le second dit “Me!”. Essayez-le ici .

Spécifiez le CSS pour l’impression

   

les éléments

et

sont souvent oubliés et signifient Définition, Définition et Définition.

Ils fonctionnent de manière similaire à une liste non ordonnée (

    ), mais au lieu d’entrées simples, c’est plutôt une liste de clés / valeurs.

     
    What
    An Example
    Why
    Examples are good

    Pas exactement caché, mais (et c’est la faute d’IE) il n’y a pas assez de gens au sujet de thead, tbody, tfoot pour mes goûts. Et combien d’entre vous savaient que le tfoot est censé apparaître au-dessus du corps en balisage?

    La wbr ou word-break . De Quirksmode:

    (mot pause) 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 est nécessaire, rien ne se passe.

     
    getElementsByTagName()

    Je donne au navigateur la possibilité d’append un saut de ligne. Cela ne sera pas nécessaire pour les 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, provoquant ainsi 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 indiquer une rupture. Un peu comme ça se fait en version imprimée.

    Un exemple:

    TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTexte

    Une caractéristique beaucoup moins utilisée est le fait que presque tous les éléments, qui fournissent un contenu visible sur la page, peuvent avoir un atsortingbut “title”.

    L’ajout d’un tel atsortingbut entraîne l’apparition d’une info-bulle lorsque la souris survole l’élément et peut être utilisée pour fournir des informations non essentielles, mais utiles, qui ne surchargent pas la page. . (Ou cela peut être un moyen d’append des informations à une page déjà encombrée)

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

     

    Foo, Bar and BlackBg are css classes

    Nous connaissons tous les DTD ou les déclarations de type de document (les éléments qui vous font échouer avec le validateur W3C). Cependant, il est possible d’étendre les DTD en déclarant une liste d’atsortingbuts pour les éléments personnalisés.

    Par exemple, le validateur W3C échouera pour cette page en raison du behavior="mouseover" ajouté à la

    . Cependant, vous pouvez le faire en procédant comme suit:

      ]> 

    Voir plus sur les DTD personnalisés à QuirksMode .

    Nous pouvons atsortingbuer une chaîne codée en base 64 comme atsortingbut source / href d’image, JavaScript, iframe, lien

    par exemple

     Embedded Image div.image { width:297px; height:246px; background-image:url(https://stackoverflow.com/questions/954327/hidden-features-of-html/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...); }  An Image http://www.your.domain https://stackoverflow.com/questions/954327/hidden-features-of-html/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASkA...    

    Les références

    Comment puis-je construire des images en utilisant le balisage HTML?

    Fichier binary vers encodeur / traducteur Base64

    J’ai récemment découvert les balises de champs et d’étiquettes. Comme ci-dessus, pas caché mais utile pour les formulaires.

    explication

    Exemple:

     
    Personalia: Name:
    Email:
    Date of birth:

    Vous pouvez utiliser la balise object au lieu d’un iframe pour inclure un autre document dans la page:

      alt : https://stackoverflow.com/questions/954327/hidden-features-of-html/test.html  

    est un génial que les gens manquent souvent lorsqu’ils font des listes segmentées.

      

    est ce que vous devriez utiliser au lieu de

      

    La plupart ne sont pas non plus conscients du fait que vous pouvez distinguer le bouton du formulaire pressé en leur donnant simplement une paire nom / valeur. Par exemple

     
    ...

    Du côté du serveur, le bouton réel pressé peut alors être obtenu en vérifiant simplement la présence du paramètre de requête associé au nom du bouton. S’il n’est pas null , le bouton a été appuyé.

    J’ai vu beaucoup de hacks / solutions de contournement JS inutiles pour cela, par exemple en modifiant l’action du formulaire ou en modifiant au préalable une valeur d’entrée masquée en fonction du bouton pressé. C’est simplement étonnant.

    En outre, j’ai vu presque autant de hacks / solutions de contournement de JS pour rassembler les vérifications de plusieurs cases à cocher comme dans les lignes de tableau. À chaque sélection / vérification d’une ligne de la table, le JS appendait l’index de la ligne à une valeur séparée par des virgules dans un élément d’entrée masqué qui serait ensuite divisé / analysé davantage du côté du serveur. Il en résulte une méconnaissance du fait 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

      ...   ...   ...  ... 

    L’ignorance donnerait à chaque case à cocher un nom différent et omettrait l’atsortingbut de valeur entière. Dans certaines situations JS-hack / sans contournement, j’ai également constaté une certaine magie inutile dans le code côté serveur pour distinguer les éléments cochés.

    Tag Colgroup .

     
    Column 1 Column 2
    Cell 1 Cell 2

    Si l’atsortingbut for d’une n’est pas spécifié, il est implicitement défini comme le premier enfant , c.-à-d.

      

    est équivalent à

       

    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.

    Remplacez ceci

     Download file 

    avec ça:

     

    Simplest way to refresh the page in X seconds – META Refresh

      

    The value in content signifies the seconds after which you want the page to refresh.
    [Modifier]

      

    To do a simple redirect!
    (Thanks @rlb)

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

    ).

    HTML in theory is an SGML application. This is probably the shortest valid HTML 4 document:

       </pre>
    <p> The above doesn't work anywhere except W3C Validator. However shortest valid HTML5 <code>text/html</code> document works everywhere: </p>
    <pre> <code><!DOCTYPE html><title> 

    The lang atsortingbute is not very well known but very useful. The atsortingbute 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 atsortingbute as well as search engines.

    Sitepoint has some nice explanation of the lang atsortingbute.

    Exemples

    Specify the language to be English for the whole document, unless overridden by another lang atsortingbute on a lower level in the DOM.

      

    Specify the language in the following paragraph to be Swedish.

     

    Ät din morgongröt och bli stor och stark!

    The “!DOCTYPE” declaration . Don’t think it’s a hidden feature, but it seems it’s not well known but very useful.

    par exemple