Les traits cachés de HTML

HTML étant le langage le plus utilisé (au moins comme langage de balisage) n'a pas obtenu son crédit.

Étant donné qu'elle existe depuis tant d'années, des choses comme les contrôles des formulaires et des entrées sont demeurées les mêmes, sans ajout de nouveaux contrôles.

donc au moins à partir des caractéristiques existantes, connaissez-vous des caractéristiques qui sont pas bien connu mais très utile.

bien sûr, ce question:

Hidden Features of JavaScript

caractéristiques cachées de CSS

caractéristiques cachées de C#

les traits cachés de VB.NET

les fonctionnalités cachées de Java

caractéristiques cachées de L'ASP classique

les traits cachés de ASP.NET

les traits cachés de Python

les caractéristiques cachées de TextPad

les traits cachés de L'éclipse

ne pas mentionner les caractéristiques de HTML 5.0, car il est dans projet de travail

veuillez préciser une caractéristique par réponse .

110
demandé sur Binoj Antony 2009-06-05 08:58:36
la source

30 ответов

utilisant un chemin absolu indépendant du protocole:

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

si le navigateur visualise une page dans SSL via HTTPS, alors il demandera cette ressource avec le protocole https, sinon il la demandera avec HTTP.

cela empêche que terrible "cette Page contient à la fois des éléments sécurisés et Non sécurisés" message d'erreur dans IE, garder toutes vos demandes de biens dans le même protocole.

avertissement: Lorsqu'il est utilisé sur un ou @import pour une feuille de style, IE7 et IE8 télécharger le fichier deux fois . Toutes les autres utilisations, cependant, sont très bien.

244
répondu Paul Irish 2010-04-14 23:39:15
la source

la balise label lie logiquement le label à l'élément form en utilisant l'attribut" for". La plupart des navigateurs transforment cela en un lien qui active l'élément de forme connexe.

<label for="fiscalYear">Fiscal Year</label>
<input name="fiscalYear" type="text" id="fiscalYear"/>
138
répondu Brian Reiter 2011-03-13 17:01:36
la source

Le contentEditable "151930920 de la propriété" (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 si vous ne me croyez pas.

136
répondu aleemb 2011-03-13 17:02:28
la source

je pense que le étiquette 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 qu'il 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>
102
répondu Emil 2010-06-03 09:59:26
la source

mon bit préféré est la balise de base, qui est un épargnant de vie si vous voulez utiliser le routage ou la réécriture D'URL...

disons que vous êtes situé à:

www.anypage.com/folder/subfolder/

ce qui suit est le code et les résultats pour les 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 l'étiquette 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
100
répondu Dmitri Farkov 2011-03-14 12:16:05
la source
<img onerror="{javascript}" />

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

vous pouvez utiliser ceci pour écrire un script qui remplacera l'image brisée par du contenu alternatif valide, de sorte que l'utilisateur n'a pas à traiter avec la question de la Croix-Rouge.

à première vue cela peut être considéré comme complètement inutile, parce que, ne le sauriez-vous pas auparavant si l'image était disponible en premier lieu? Mais, si vous considérez, il y a des applications valides parfaites pour cette chose; par exemple: supposons que vous serviez une image d'une ressource tierce que vous ne contrôlez pas. Comme notre gravatar ici à SO... il est servi à partir de 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 / descend, stackoverflow pourrait contourner cela en utilisant onerror .

99
répondu Daniel Silveira 2011-10-20 09:10:56
la source

Le <kbd> élément de marquage pour l'entrée du clavier

Ctrl + Alt + Del

96
répondu Russ Cam 2011-03-13 17:04:51
la source
<blink>

doit être utilisé pour tout ce qui est important sur le site. Les sites les plus importants enveloppent tout le contenu dans un clin d'oeil.

<marquee>

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

Edit: Facile-up les gars, c'était juste une tentative d'humour

85
répondu Mark Glorie 2011-03-13 17:05:12
la source

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 .

une petite anecdote: à un moment donné cette propriété était assez obscure pour qu'elle soit utilisée pour exploiter Hotmail , circa 2000.

84
répondu aleemb 2011-03-13 17:06:00
la source

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

HTML <del>sucks</del> <ins>rocks</ins>!
67
répondu Gumbo 2009-06-06 23:43:57
la source

le bouton étiquette est le nouveau input submit étiquette et beaucoup de gens ne sont pas encore familiers avec elle. Le texte dans le bouton peut par exemple être stylisé en utilisant la balise de bouton.

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

va rendre un bouton avec deux lignes, le premier dit " cliquez "en gras et le second dit" Moi!". Essayez ici .

58
répondu aleemb 2009-06-05 13:01:01
la source

spécifier la 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" />
56
répondu Binoj Antony 2011-03-13 17:06:23
la source

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

ils fonctionnent de la même façon qu'une liste non ordonnée ( <ul> ) mais au lieu d'entrées simples c'est plus comme une liste clé/valeur.

<dl>
  <dt>What</dt><dd>An Example</dd>
  <dt>Why</dt><dd>Examples are good</dd>
</dl>
54
répondu Jehiah 2009-06-17 08:52:48
la source

pas exactement caché, mais (et C'est la faute D'IE) pas assez de gens savent au sujet de thead, tbody, tfoot pour mes goûts. Et combien d'entre vous savaient que tfoot est supposé apparaître au-dessus de tbody in markup?

52
répondu annakata 2009-06-05 12:16:54
la source

Le wbr ou word-break tag. De Quirksmode:

(mot break) signifie: peut insérer une rupture de ligne ici, si elle souhaiter."Elle le navigateur ne pense pas un saut de ligne nécessaire rien arriver.

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

je donne au navigateur l'option de l'ajout d'un saut de ligne. Ce 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, telles que les sauts de ligne stratégiquement placés se maintiennent le tableau de la croissance supérieure à la de la fenêtre, et provoquant ainsi horizontale défilement.

il y a aussi l'entité &shy; HTML mentionnée sur la même page. Il s'agit de la même chose que wbr , mais lorsqu'une coupure est insérée, un trait d'Union ( - ) est ajouté pour signifier une coupure. Un peu comme la façon dont c'est fait dans l'impression.

An exemple:

TextTextTextTextTextTextTextTexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext

50
répondu aleemb 2009-06-05 13:04:59
la source

une caractéristique sous-utilisée est le fait qu'à peu près chaque élément, qui fournit du contenu visible sur la page, peut avoir un attribut "titre".

L'ajout d'un tel attribut fait apparaître une 'infobulle' lorsque la souris est 'plantée' au-dessus de l'élément, et peut être utilisé pour fournir des informations non essentielles - mais utiles - d'une manière qui n'entraîne pas une page trop chargée. (Ou cela peut être une façon d'ajouter de l'information à une page déjà bondée)

43
répondu belugabob 2009-06-05 12:00:13
la source

application de plusieurs classes html/css à une étiquette. Même message ici

<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>
38
répondu Binoj Antony 2017-05-23 13:31:06
la source

nous sommes tous au courant des DTD ou des déclarations de type de Document (les choses qui vous font échouer avec le validateur W3C). Toutefois, il est possible d'étendre la DTD s en déclarant une liste d'attributs pour les éléments personnalisés.

par exemple, le validateur W3C échouera pour cette page à cause de behavior="mouseover" ajouté à l'étiquette <p> . Toutefois, 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>
]>

voir plus à propos de Custom DTDs at QuirksMode .

34
répondu aleemb 2009-07-09 23:48:10
la source

nous pouvons assigner la chaîne encodée base 64 comme attribut source / href d'image, JavaScript, iframe, link

p.ex.

<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 construire des images en utilisant le balisage HTML?

fichier binaire à Base64 encodeur / Traducteur

28
répondu Xinus 2017-05-23 13:31:06
la source

j'ai récemment découvert à propos des étiquettes de fieldset et label. Comme ci-dessus, pas caché mais utile pour les formulaires.

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>
26
répondu Emil 2010-06-03 20:28:16
la source

vous pouvez utiliser l'étiquette object au lieu d'une étiquette 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>
25
répondu Zach 2009-06-05 09:19:15
la source

<optgroup> est un grand que les gens passent souvent à côté en faisant des listes segmentées <select> .

<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
répondu Justin Johnson 2010-06-09 13:04:11
la source

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 pressé peut alors être obtenu en vérifiant simplement la présence du paramètre request associé au nom du bouton. Si ce n'est pas null , alors le bouton a été pressé.

j'ai vu un lot de inutile js hacks / workarounds pour cela, p.ex. changer l'action de la forme ou changer une valeur d'entrée cachée à l'avance en fonction du bouton appuyé. C'est tout simplement stupéfiant.

en outre, j'ai vu presque autant de hacks JS/workarounds pour rassembler ceux vérifiés de plusieurs cases à cocher comme dans les rangées de tableau. Sur chaque select / check d'une ligne de table le JS ajouterait l'index de ligne à une certaine valeur de séparation commas dans un élément d'entrée caché qui serait alors splitted / parsed plus loin dans le 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 1519110920" mais un différent valeur et que vous pouvez toujours y accéder comme un tableau du côté du 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 un nom différent et omet l'attribut de valeur entière. Dans certaines situations js-hack/workaround-free, j'ai aussi vu une magie inutilement écrasante dans le code côté serveur pour distinguer les éléments cochés.

25
répondu BalusC 2011-05-17 03:42:16
la source

colgroup tag .

<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>
22
répondu çağdaş 2010-05-17 19:04:28
la source

si l'attribut for d'une étiquette <label> n'est pas spécifié, il est implicitement défini comme le premier enfant <input> , i.e.

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

est équivalent à

<label for="alias">Alias:</label> <input name="alias" id="alias">
18
répondu moo 2010-05-15 19:56:41
la source

bouton en tant que Lien, pas de JavaScript :

vous pouvez mettre n'importe quel type de fichier dans l'action form , et vous avez un bouton qui agit comme un lien. Pas besoin d'utiliser onclick événements ou tel. Vous pouvez même ouvrir le fichier dans une nouvelle fenêtre en coller une "cible" dans le formulaire. Je n'ai pas vu cette technique dans l'application beaucoup.

remplacer ce

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

avec ceci:

<form method="get" action="myfile.pdf" target="_blank">
    <input type="submit" value="Download file">
</form>
15
répondu Wadih M. 2010-02-04 03:57:37
la source

la façon la 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 voulez que la page se rafraîchisse.

[Edit]

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

pour faire une simple redirection!

(Merci @rlb)

13
répondu Binoj Antony 2010-06-03 20:31:21
la source

<html> , <head> et les étiquettes <body> sont optionnelles. Si vous les omettez, ils seront insérés silencieusement par l'analyseur dans les endroits appropriés. C'est parfaitement valide de le faire en HTML (tout comme <tbody> implicite ).

HTML théorie est une application de SGML. C'est sans doute le plus court valide HTML 4 document:

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

ci-dessus ça ne marche nulle part sauf le validateur W3C. Cependant la plus courte HTML5 valide text/html document fonctionne partout:

<!DOCTYPE html><title></title>
12
répondu porneL 2009-12-30 16:30:25
la source

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 seulement dans un seul élément. Les codes de langue sont donnés en code de langue ISO à deux lettres (C'est-à-dire " en "pour l'anglais," fr " pour le français).

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

L'attribut lang a une belle explication de l'attribut lang .

Exemples

spécifie la langue devant être l'anglais pour l'ensemble du document, à moins qu'elle ne soit remplacée par un autre attribut lang à un niveau inférieur du DOM.

<html lang="en">

spécifier que la langue dans le paragraphe suivant est le suédois.

<p lang="sv">Ät din morgongröt och bli stor och stark!</p>
11
répondu Erik Töyrä 2010-06-12 01:23:50
la source

le "!DOCTYPE "declaration . Ne pensez pas que c'est une caractéristique cachée, mais il semble que ce n'est pas bien connu mais très utile.

p.ex.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
10
répondu Xn0vv3r 2009-07-09 23:49:24
la source