Versteckte Funktionen von HTML

HTML als die am häufigsten verwendete Sprache (zumindest als Auszeichnungssprache) hat nicht die gebührende Anerkennung erhalten.
In Anbetracht der Tatsache, dass es das schon so viele Jahre gibt, sind Dinge wie die FORM / INPUT-Steuerelemente immer noch dieselben geblieben, ohne dass neue Steuerelemente hinzugefügt wurden.

Kennen Sie also zumindest aus den vorhandenen Funktionen Funktionen, die nicht bekannt, aber sehr nützlich sind ?

Diese Frage lautet natürlich wie folgt:

Versteckte Funktionen von JavaScript
Versteckte Funktionen von CSS
Versteckte Funktionen von C #
Versteckte Funktionen von VB.NET
Versteckte Funktionen von Java
Versteckte Funktionen von klassischem ASP
Versteckte Funktionen von ASP.NET
Versteckte Funktionen von Python
Versteckte Funktionen von TextPad
Versteckte Funktionen von Eclipse

Erwähnen Sie nicht die Funktionen von HTML 5.0, da es sich um einen Arbeitsentwurf handelt

Bitte geben Sie eine Funktion pro Antwort an .

Verwenden eines protokollunabhängigen absoluten Pfads:

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

Wenn der Browser eine Seite in SSL über HTTPS anzeigt, fordert er dieses Asset mit dem https-Protokoll an, andernfalls fordert er es mit HTTP an.

Dies verhindert, dass die schreckliche Fehlermeldung "Diese Seite enthält sowohl sichere als auch nicht sichere Elemente" im IE alle Ihre Asset-Anforderungen im selben Protokoll hält.

Vorsichtsmaßnahme: Bei Verwendung auf einem <link> oder @import für ein Stylesheet laden IE7 und IE8 die Datei zweimal herunter . Alle anderen Verwendungen sind jedoch in Ordnung.

Das Label-Tag verknüpft das Label mithilfe des Attributs "for" logisch mit dem Formularelement. Die meisten Browser verwandeln dies in einen Link, der das zugehörige Formularelement aktiviert.

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

Die contentEditable- Eigenschaft für (IE, Firefox und 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>

Dadurch können die Zellen bearbeitet werden! Probieren Sie es aus, wenn Sie mir nicht glauben.

Ich denke, das Optgroup-Tag ist eine Funktion, die die Leute nicht sehr oft verwenden. Die meisten Leute, mit denen ich spreche, neigen nicht dazu zu erkennen, dass es existiert.

Beispiel:

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

Mein Lieblingsbit ist das Basis-Tag, das ein Lebensretter ist, wenn Sie Routing oder URL-Umschreibung verwenden möchten ...

Angenommen, Sie befinden sich in:

www.anypage.com/folder/subfolder/

Das Folgende ist Code und Ergebnisse für Links von dieser Seite.

Regelmäßiger Anker:

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

Führt zu

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

Nun, wenn Sie Basis-Tag hinzufügen

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

Der Anker führt nun zu:

www.anypage.com/test.html

<img onerror="{javascript}" />

onerror ist ein JavaScript-Ereignis, das ausgelöst wird, bevor das kleine rote Kreuz (im IE) angezeigt wird.

Sie können dies verwenden, um ein Skript zu schreiben, das das fehlerhafte Bild durch einen gültigen alternativen Inhalt ersetzt, damit sich der Benutzer nicht mit dem Problem des Roten Kreuzes befassen muss.

Auf den ersten Blick kann dies als völlig nutzlos angesehen werden, denn würden Sie vorher nicht wissen, ob das Bild überhaupt verfügbar war? Aber wenn Sie bedenken, gibt es perfekt gültige Anwendungen für diese Sache; Beispiel: Angenommen, Sie liefern ein Bild aus einer Ressource eines Drittanbieters, die Sie nicht steuern. Wie unser Gravatar hier in SO ... wird er von http://www.gravatar.com/ bereitgestellt, einer Ressource, die das Stackoverflow-Team überhaupt nicht kontrolliert - obwohl sie zuverlässig ist. Wenn http://www.gravatar.com/ ausfällt, kann der Stackoverflow dies mithilfe von umgehen onerror.

Das <kbd>Element zum Markieren für die Tastatureingabe

Ctrl+ Alt+Del

<blink>

Muss für alles Wichtige auf der Website verwendet werden. Die wichtigsten Websites verpacken den gesamten Inhalt blinkend.

<marquee>

Erzeugt einen realistischen Bildlaufeffekt, ideal für E-Books usw.

Edit: Easy-up Jungs, das war nur ein Versuch des Humors

Nicht sehr bekannt, aber Sie können lowsrcfür Bilder angeben , welche lowsrcbeim Laden srcdes Bildes angezeigt werden:

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

Dies ist eine gute Option für diejenigen, die Interlaced- Bilder nicht mögen .

Ein bisschen Trivia: Irgendwann war diese Eigenschaft so dunkel, dass sie zur Ausnutzung von Hotmail um 2000 verwendet wurde.

DELund INSum gelöschte und eingefügte Inhalte zu markieren:

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

Das Button- Tag ist das neue input submitTag und viele Leute sind immer noch nicht damit vertraut. Der Text in der Schaltfläche kann beispielsweise mit dem Schaltflächen-Tag gestaltet werden.

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

Rendert eine Schaltfläche mit zwei Zeilen, die erste sagt " Klick " in Fettdruck und die zweite sagt "Ich!". Probieren Sie es hier aus .

Geben Sie das zu druckende CSS an

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

Die <dl> <dt>und <dd>Elemente werden oft vergessen und stehen für Definitionsliste, Definitionsbegriff und Definition.

Sie funktionieren ähnlich wie eine ungeordnete Liste ( <ul>), aber anstelle einzelner Einträge ähnelt sie eher einer Schlüssel- / Werteliste.

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

Nicht gerade versteckt, aber (und das ist IE's Schuld) nicht genug Leute wissen über Thead, Tbody, Tfoot für meinen Geschmack. Und wie viele von Ihnen wussten, dass Fuß im Markup über dem Körper erscheinen soll ?

Das wbroder Wortumbruch- Tag. Aus dem Quirksmode:

(Wortumbruch) bedeutet: "Der Browser kann hier einen Zeilenumbruch einfügen, wenn er dies wünscht." Wenn der Browser einen Zeilenumbruch nicht für notwendig hält, passiert nichts.

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

Ich gebe dem Browser die Möglichkeit, einen Zeilenumbruch hinzuzufügen. Dies ist bei sehr großen Auflösungen nicht erforderlich, wenn der Tisch viel Platz bietet. Bei kleineren Auflösungen verhindern solche strategisch platzierten Zeilenumbrüche jedoch, dass die Tabelle größer als das Fenster wird, und verursachen somit horizontale Bildlaufleisten.

Dort befindet sich auch die ­auf derselben Seite erwähnte HTML-Entität. Dies ist dasselbe wie, wbraber wenn eine Unterbrechung eingefügt wird, wird ein Bindestrich ( -) hinzugefügt, um eine Unterbrechung anzuzeigen . Ein bisschen wie es in gedruckter Form gemacht wird.

Ein Beispiel:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

Eine viel zu wenig genutzte Funktion ist die Tatsache, dass nahezu jedes Element, das sichtbaren Inhalt auf der Seite bereitstellt, ein 'title'-Attribut haben kann.

Das Hinzufügen eines solchen Attributs führt dazu, dass ein "Tooltip" angezeigt wird, wenn die Maus über das Element "bewegt" wird, und kann verwendet werden, um nicht wesentliche, aber nützliche Informationen so bereitzustellen, dass die Seite nicht zu überfüllt wird . (Oder es kann eine Möglichkeit sein, einer bereits überfüllten Seite Informationen hinzuzufügen.)

Anwenden mehrerer HTML / CSS-Klassen auf ein Tag. Gleicher Beitrag hier

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

Wir alle kennen DTDs oder Dokumenttypdeklarationen (die Dinge, die dazu führen, dass Ihre Seite mit dem W3C-Validator fehlschlägt). Es ist jedoch möglich, die DTDs zu erweitern, indem eine Attributliste für benutzerdefinierte Elemente deklariert wird.

Beispielsweise schlägt der W3C-Validator für diese Seite fehl, weil behavior="mouseover"er dem <p>Tag hinzugefügt wurde . Sie können es jedoch folgendermaßen schaffen:

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

Weitere Informationen zu benutzerdefinierten DTDs finden Sie unter QuirksMode .

Wir können Base 64-codierte Zeichenfolge als Quell- / Href-Attribut für Bild, JavaScript, Iframe und Link zuweisen

z.B

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

Verweise

Wie kann ich Bilder mit HTML-Markup erstellen?

Binärdatei zu Base64 Encoder / Übersetzer

Ich habe kürzlich etwas über das Fieldset und die Label-Tags erfahren. Wie oben, nicht versteckt, aber nützlich für Formulare.

<fieldset> Erklärung

Beispiel:

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

Sie können das objectTag anstelle von verwenden iframe, um ein anderes Dokument in die Seite aufzunehmen:

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

<optgroup>ist eine großartige Sache, die die Leute oft verpassen, wenn sie segmentierte <select>Listen erstellen .

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

ist, was Sie anstelle von verwenden sollten

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

Die meisten wissen auch nicht, dass Sie die gedrückte Formularschaltfläche unterscheiden können, indem Sie ihnen nur ein Name / Wert-Paar geben. Z.B

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

Auf der Serverseite kann die tatsächlich gedrückte Taste erhalten werden, indem nur das Vorhandensein des Anforderungsparameters überprüft wird, der dem Schaltflächennamen zugeordnet ist. Ist dies nicht nullder Fall, wurde die Taste gedrückt.

Ich habe gesehen , eine Menge von unnötigem JS Hacks / Abhilfen für das, zum Beispiel der Form Aktion zu ändern oder einen versteckten Eingabewert ändert vorher je nach Betätigung der Taste. Es ist einfach erstaunlich.

Außerdem habe ich fast so viele JS-Hacks / Workarounds gesehen, um die aktivierten Kontrollkästchen mehrerer Kontrollkästchen wie in Tabellenzeilen zu sammeln. Bei jeder Auswahl / Prüfung einer Tabellenzeile fügte der JS den Zeilenindex zu einem durch Kommas getrennten Wert in einem verborgenen Eingabeelement hinzu, der dann auf der Serverseite weiter aufgeteilt / analysiert wurde. Dies ist das Ergebnis der Unwissenheit, dass Sie mehreren Eingabeelementen denselben Namen, aber einen anderen Wert geben können und dass Sie weiterhin als Array auf der Serverseite darauf zugreifen können. Z.B

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

Die Unwissenheit würde jedem Kontrollkästchen einen anderen Namen geben und das gesamte Wertattribut weglassen. In einigen JS-Hack- / Workaround-freien Situationen habe ich auch unnötig überwältigende Magie im serverseitigen Code gesehen, um die überprüften Elemente zu unterscheiden.

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>

Wenn das forAttribut eines <label>Tags nicht angegeben wird, wird es implizit als erstes untergeordnetes Element festgelegt <input>, d. H.

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

ist äquivalent zu

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

Button als Link, kein JavaScript :

Sie können jede Art von Datei in die Formularaktion einfügen, und Sie haben eine Schaltfläche, die als Link fungiert. Keine Notwendigkeit, Onclick-Ereignisse oder ähnliches zu verwenden. Sie können die Datei sogar in einem neuen Fenster öffnen, indem Sie ein "Ziel" in das Formular einfügen. Ich habe diese Technik in der Anwendung nicht viel gesehen.

Ersetzen Sie dies

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

mit diesem:

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

Einfachste Möglichkeit, die Seite in X Sekunden zu aktualisieren - META-Aktualisierung

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

Der Wert im Inhalt gibt die Sekunden an, nach denen die Seite aktualisiert werden soll.
[Bearbeiten]

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

So führen Sie eine einfache Weiterleitung durch!
(Danke @rlb)

<html>, <head>Und <body>Tags sind optional. Wenn Sie sie weglassen, werden sie vom Parser an geeigneten Stellen stillschweigend eingefügt. Es ist vollkommen gültig , dies in HTML zu tun (genau wie impliziert <tbody>).

HTML ist theoretisch eine SGML-Anwendung. Dies ist wahrscheinlich das kürzeste gültige HTML 4-Dokument:

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

Das Obige funktioniert nur im W3C Validator. Das kürzeste gültige HTML5- text/htmlDokument funktioniert jedoch überall:

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

Das langAttribut ist nicht sehr bekannt, aber sehr nützlich. Das Attribut wird verwendet, um die Sprache des Inhalts entweder im gesamten Dokument oder in einem einzelnen Element zu identifizieren. Sprachcodes werden in ISO 2-Buchstaben-Sprachcode angegeben (dh 'en' für Englisch, 'fr' für Französisch).

Dies ist nützlich für Browser, die die Anzeige von Anführungszeichen usw. anpassen können. Screenreader profitieren ebenso von dem lang Attribut wie von Suchmaschinen.

Sitepoint hat eine nette Erklärung des langAttributs.

Beispiele

Geben Sie die Sprache für das gesamte Dokument als Englisch an, sofern sie nicht durch ein anderes langAttribut auf einer niedrigeren Ebene im DOM überschrieben wird .

<html lang="en">

Geben Sie im folgenden Absatz die Sprache Schwedisch an.

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

Die "! DOCTYPE" -Deklaration . Denken Sie nicht, dass es sich um eine versteckte Funktion handelt, aber es scheint nicht bekannt, aber sehr nützlich zu sein.

z.B

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