Versteckte Funktionen von HTML

110

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 .

Binoj Antony
quelle

Antworten:

244

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.

Paul Irish
quelle
29
Dies ist keine HTML-Funktion, sondern eine URL / URI-Funktion.
Gumbo
44
@Gumbo: Stimmt, es ist eine URI-Funktion, aber ich dachte, es wäre gut genug, um die Regeln zu biegen und hier aufzunehmen. Und ich erwarte keine versteckten Funktionen der URI-Spezifikation in Kürze. :)
Paul Irish
2
Ein Schrägstrich ist relativ zum
Domänenteil
2
IE ist so unglaublich dumm! Warum zum Teufel DL es die Datei zweimal DL?
5
Es gibt einen großen Nachteil: Wenn eine Datei auf der Festplatte gespeichert wird und über das file:Protokoll zugegriffen wird , kann der Browser die Ressource nicht finden (z. B. eines CDN oder eines anderen externen Servers).
Marcel Korpel
138

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"/>
Brian Reiter
quelle
24
Ja, erstaunlich, wie wenige Websites dies aktiv nutzen. Ich habe Websites gesehen, die js verwenden, um dies zu tun ...
Boris Callens
2
Entdeckt dieses vor kurzem.
Arnis Lapsa
4
cagdas, es gibt keine wirklich versteckten Funktionen in HTML, es ist ein spezifizierter Standard.
Augenlidlosigkeit
54
Um die Antwort zu erweitern, können Sie eine Eingabe auch mit einem Label versehen und das for-Attribut weglassen: <label> Geschäftsjahr <input name = "iscalYear "type =" text "/> </ label>
Augenlidlosigkeit
32
Das Verwenden von Kontrollkästchen und Optionsfeldern ohne dieses Kontrollkästchen sollte ein Verbrechen sein.
Kornel
136

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.

Aleemb
quelle
7
Die Frage fordert Funktionen, die nicht von HTML5 eingeführt werden
Quentin
15
David Dorward, Es ist nicht gerade fair zu sagen, dass es mit HTML5 eingeführt wurde, da contentEditable von MS in IE 5.5 eingeführt wurde, aber ja, es wurde erst mit HTML5 standardisiert. Tyson & Steve, contentEditable wurde in Version 2.0 in Safari eingeführt, aber viele wichtige Formatierungsmethoden wurden erst in 3.x hinzugefügt. Victor H Valle, hängt von Ihrem Doktyp ab. HTML 4 sollte es beim Reduzieren auf = "true" erweitern.
Augenlidlosigkeit
2
Der Try-It-Link führt nicht zu einem geeigneten Beispiel
Gordon Gustafson
4
@ Binoj - Auf keinen Fall. "Das contenteditable-Attribut ist ein Aufzählungsattribut, dessen Schlüsselwörter die leere Zeichenfolge true und false sind" - w3.org/TR/html5/editing.html
Quentin
2
Fügen Sie noch besser Folgendes als Lesezeichen hinzu, damit Sie jede Webseite bearbeiten können, auf der Sie sich befinden: javascript: document.body.contentEditable = 'true'; document.designMode = 'on'; void (0);
Amro
102

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>
Emil
quelle
Leider lässt die Browser-Implementierung der Menühierarchie zu wünschen übrig. Ich vermute, dass optgroup nicht viel genutzt wird, da es nur wenige relevante Anwendungsfälle gibt.
Augenlidlosigkeit
1
Eine Ebene sollte in allen Browsern unterstützt werden. Ein Webforum, von dem ich abgesehen bin, wo es in einigen Bildschirmen verwendet wird, um die Forenliste in dieselben Abschnitte zu unterteilen, die auf der Hauptseite verwendet werden.
Statik
@staticsan. Ich bin damit einverstanden, dass es für die kleine Kategorisierung einer Reihe von Elementen nützlich ist.
RichardOD
5
@eyelidlessness: Ich sehe die ganze Zeit Dropdowns, die Elemente einrücken oder eine Art 'Header'-Text wie verwenden ---category---.
DisgruntledGoat
4
Dies ist eine nette Funktion, von der ich nichts wusste!
Chrisb
100

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
Dmitri Farkov
quelle
48
Sie können auch einfach /images/image.png mit einem führenden Schrägstrich verwenden. :-)
molf
46
Das Basis-Tag ist eine nukleare Option - es entspricht #define: Wenn Sie es nicht im Auge behalten, machen Sie es zukünftigen Entwicklern wirklich klar und machen Sie es zu einem wirklich niedrigen Teil der Site-Architektur, was zu Frustration führen kann nicht offensichtliche Fehler. Ich habe das nie gebraucht , benutze es mit Vorsicht.
Annakata
2
Ja, ich habe auch festgestellt, dass das Basis-Tag mein JavaScript stört, wenn versucht wird, CSS-Dateien dynamisch auf die Seite zu laden. Außerdem müssen Sie bei einem Fehler in IE6 das Tag (</ base>) explizit schließen, was ungültig ist. Bedingte Kommentare können dabei helfen.
Avdgaag
4
Beachten Sie, dass die Basis-URL auf jede relative URL und nicht nur auf relative URL-Pfade angewendet wird. Die Referenz #topwürde also im Stammindexdokument nach "oben" und im selben Dokument nach "oben" aufgelöst.
Gumbo
17
Ich finde dies äußerst praktisch in Situationen, in denen ich die Quelle anzeigen und den HTML-Code einer Seite herunterladen muss, um damit arbeiten zu können. Sobald die Quelle heruntergeladen wurde, können Sie ein BASE-Element mit dem entsprechenden href-Attribut hinzufügen. Auf diese Weise können Sie lokal arbeiten, nachdem Sie nur den Quell-HTML-Code heruntergeladen haben. Sie müssen nicht alle Javascript-, CSS- und Bilder herunterladen.
Andy Ford
99
<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.

Daniel Silveira
quelle
Aha ... wenn es das ist, was ich denke, sollte ich das früher wissen, als ich das wirklich brauchte. : /
Arnis Lapsa
Zur Verdeutlichung ist onerror ein Javascript-Ereignis (genau wie onclick), mit dem Sie etwas tun können, wenn ein Bild nicht geladen werden kann.
Jehiah
1
Daniel Silveira, werden Sie klarstellen, dass bei fehlerhaften (z. B. 404) Bildern tatsächlich ein Fehlercode ausgeführt wird? Unabhängig davon ist dies eine DOM-Funktion, keine HTML-Funktion an sich.
Augenlidlosigkeit
2
Ich hatte eine numpty Verwendung dieses, zeigte auf ein nicht existierendes Bild, rekursiv jemand ???
Pharabus
96

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

Ctrl+ Alt+Del

Russ Cam
quelle
Gibt es etwas Besonderes an <kbd>, außer dass es ein anderes Schriftformat gibt? Wenn nicht, finden Sie hier eine Liste anderer Formatierungs-Tags. w3schools.com/tags/tag_phrase_elements.asp
Dein Freund Ken
Nicht besonders, nur nicht bekannt, glaube ich nicht
Russ Cam
3
Standardmäßig nichts, aber es ist sauberer, das Element mit CSS zu markieren, wie es SO tut.
Agent_9191
1
Wusste nicht, dass es existiert, das macht Spaß.
Kzqai
85
<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

Mark Glorie
quelle
62
Vielleicht hätte die Frage angeben müssen, dass Sie keine Funktionen auflisten sollten, die verborgen bleiben sollen.
Ben Blank
12
... Ich habe <blink> als Teil eines Pseudo-Terminal-Stils für einen Div-Anzeigecode verwendet (: vor {content: "drthomas @ house: ~ $";}: nach {content: "_"; Text -decoration: blink;} ... es war großartig. Ich sollte wahrscheinlich Hilfe suchen. =]
David sagt, Monica
2
<marquee> <blink> Die nervigsten HTML-Tags aller Zeiten !!! </ blink> </ marquee> Diese sind nicht versteckt, sondern werden nur aus einem bestimmten Grund nicht verwendet.
Dein Freund Ken
2
Ich wickle meine gesamte Seite in Marquee and Blink ein, weil ich einfach so cool bin
Sphvn
3
Bitte. Die einzig legitime Verwendung für <blink> ist: Schrödingers Katze ist <blink> nicht </ blink> tot. (Ich dachte, das wäre auf xkcd, aber ich kann es im Moment nicht finden.)
Christopher Creutzig
84

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.

Aleemb
quelle
Das wusste ich nicht. Kann es zum "Laden" von Animationen verwendet werden?
Boris Callens
2
Ich erhalte eine Betrugswarnung in Opera von diesem Link "Hotmail ausnutzen". : o
jrista
2
Es ist eine Sicherheitswebsite, es ist sicher.
Joey Robert
27
Aber dieses Attribut ist proprietär. msdn.microsoft.com/library/ms534138(VS.85).aspx
Gumbo
17
Dieses Attribut ist seit HTML4 veraltet - Sie sollten es nicht in Produktionswebsites verwenden.
Ben Hull
67

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

HTML <del>sucks</del> <ins>rocks</ins>!
Gumbo
quelle
10
Auf jeden Fall nicht genug benutzt.
Augenlidlosigkeit
2
@eyelidlessness: Es gibt einfach nicht genug Situationen, in denen das Markieren von gelöschtem / eingefügtem Text so nützlich ist.
DisgruntledGoat
2
Ich könnte schwören, dass StackOverflow vor einiger Zeit <ins>und <del>auf den Revisionsseiten verwendet wurde, aber jetzt verwendet es <span class="diff-add">und <span class="diff-delete">. :(
System PAUSE
1
@DisgruntledGoat Wiki Revisionsverläufe? viele Anwendungsfälle dafür
HorusKol
3
@Horus: Sicher können Sie Verwendungen finden, aber im großen Schema der Dinge ist das immer noch nicht eine große Anzahl von Situationen.
DisgruntledGoat
58

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 .

Aleemb
quelle
15
Schade, dass es in IE <8 kaputt ist. Es ist möglich, die Probleme zu umgehen, aber das kann schmerzhaft sein, und manchmal trifft man auf den Sicherheitsschutz, der zwischen dem Webserver und der serverseitigen Programmierumgebung ausgeführt wird.
Quentin
6
IE <8 übermittelt jedoch den Inhalt des Elements und nicht dessen Wert. Ich glaube, einige Versionen werden es immer als erfolgreiches Steuerelement behandeln (auch wenn es nicht angeklickt wurde).
Quentin
4
Und wenn Sie es <button contenteditable> machen, können Sie auch den Schaltflächentext ändern! Weist auf jeden hin, der eine gültige Verwendung dafür finden könnte. :)
Gavin
4
Ich habe nie verstanden, warum es eine Art "Eingabe" für die Übermittlung gab. Es wird nichts eingegeben, sondern nur das, was Sie in andere Felder eingegeben haben.
DisgruntledGoat
3
@DisgruntledGoat: Das Name / Wert-Paar wird tatsächlich gesendet. Nützlich, wenn Sie mehr als eine Schaltfläche in einem Formular haben (z. B. Bearbeiten, Löschen, Verschieben usw.) und die gedrückte Schaltfläche unterscheiden möchten. Leider funktioniert das gleiche nicht buttonin IE <8, es sendet erstaunlicherweise die Name / Wert-Paare ALLER buttonElemente.
BalusC
56

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" />
Binoj Antony
quelle
1
Entdeckt, dass vor einigen Wochen
Daniel Moura
41
Nicht wirklich versteckt imo.
Dmitri Farkov
Dies ist allgemein üblich.
UpTheCreek
Wenn Sie sich noch nicht damit befasst haben, hoffe ich, dass Sie noch keine Produktionswebsites erstellt haben ...
Kzqai
Wie kann dies als verborgen betrachtet werden?
Marin
54

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>
Jehiah
quelle
Darüber hinaus ist die Semantik dl / dt / dd für ähnliche Listen geeignet (z. B. wurde die Struktur für Dialoge empfohlen).
Augenlidlosigkeit
2
Die Standardpräsentation ist nicht so schön, aber die Leute vergessen, dass die Elemente mit CSS auf viele Arten gestaltet werden können.
DisgruntledGoat
18
Das Interessantere, was oft vergessen wird, ist, dass das Format Schlüssel / Wert / Wert / Wert / Wert / Schlüssel / Wert ist
Quentin
1
@D_N, ich denke, wo die Meinungsverschiedenheit liegt, ist, dass ich die vorgeschlagenen Verwendungen als Teil der Definition und Semantik betrachte, anstatt sie zu trennen und ihr zu widersprechen.
Augenlidlosigkeit
1
@D_N und @eyelidlessness - lesen Sie Bruce Lawsons Hinweis zum semantischen Markieren eines Gesprächs ... und die Jury ist immer noch nicht mit dem HTML5-Dialogelement befasst ... brucelawson.co.uk/2006/…
Fenton
52

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 ?

Annakata
quelle
1
boris callens, ja, tbody ist impliziert, wenn keiner von thead, tbody und tfoot vorhanden ist.
Augenlidlosigkeit
2
Wenn IE5 TBODY richtig implementiert hätte, würden mehr Leute es verwenden. Dies war vor einigen Jahren das Hauptproblem. Mozilla und Opera unterstützten das Scrollen von TBODY, was wirklich cool war. IE5 leider nicht.
Statik
9
Sie sind nützlich zum Drucken, da sie das theadund tfootam oberen und unteren Rand jeder Seite platzieren sollten. Es ist eine Schande, dass es keinen Mechanismus zum Wiederholen theadim Browser gibt, wenn Sie lange lange Tabellen haben.
DisgruntledGoat
1
Ich wusste, dass der Fuß über den Körper ging, und ich finde es ziemlich dumm. Ich habe meinen Fuß unten platziert, wo es Sinn machte, einen Validierungsfehler erhalten, den Fuß über den Körper bewegt (verwirrt, aber immer konform), und weißt du was?! Wenn Sie versuchen, die Tabelle hervorzuheben, hebt der Browser (mindestens FF) den Fuß VOR dem Körper hervor, obwohl er sich visuell unter dem Körper befindet! Und dann!!! Wenn Sie es in einen Texteditor kopieren, befindet es sich visuell über dem Körper. Völlig willkürliche Regel.
Anthony
3
@Anthony: Sinnvoll, wenn Sie eine langsame Verbindung haben. Dies bedeutet, dass Sie alle Kopf- und Fußzeilen sehen können, während der Tabelleninhalt noch geladen wird.
me_and
50

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 &shy;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

Aleemb
quelle
2
Seien Sie vorsichtig, da es in diesem
Fall
7
"IE8 as IE8" unterstützt es nicht und ist in Safari 3.0 für Windows fehlerhaft. Davon abgesehen ist die Unterstützung ziemlich gut. Siehe die Kompatibilitätstabelle im Link.
Aleemb
Hmm Sitepoint-Referenz hat dieses Tag als veraltet und nutzlos markiert. Wer hat Recht? reference.sitepoint.com/html/wbr
Christophe Eblé
Es ist möglicherweise als Teil der HTML-Spezifikation veraltet, funktioniert aber weiterhin in Browsern. Wenn Sie Zweifel haben, entscheiden Sie sich für das QuirksMode-Urteil (Kompatibilitätstabellen, die jetzt von Google gesponsert werden).
Aleemb
Scheint so, als wäre dies eine sehr nützliche Sache, um sie in den nächsten CSS-Standard aufzunehmen!
James
43

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

Belugabob
quelle
Ja, das Attribut "title" ist sehr nützlich - insbesondere für Elemente, auf die geklickt werden soll.
Steve Harrison
6
Der angezeigte Tooltip ist browserspezifisch. Nicht alle Browser zeigen das title-Attribut gleich an. Aber es ist eine nette Funktion, die ich auf jeden Fall benutze.
Travis
8
Das title-Attribut ist nützlich, jedoch nur bei entsprechender Verwendung. Die meisten Browser rendern den Tooltip nur einige Sekunden, bevor er verschwindet. Ich hasse es, wenn Designer das Bedürfnis haben, das title-Attribut mit 3 oder 4 Textzeilen zu füllen, was dazu führt, dass Sie mit der Maus darüber fahren und dann erneut mit der Maus darauf klicken müssen, um den Rest zu lesen.
Priester
Die Verwendung in Verbindung mit jQuery ist gleichbedeutend mit Attraktivität.
Levi Morrison
Levi - können Sie einige Beispiele nennen?
Belugabob
38

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

<p class="Foo Bar BlackBg"> Foo, Bar and BlackBg are css classes</p>
Binoj Antony
quelle
22
Dies sind HTML-Klassen, keine CSS-Klassen. CSS hat keine Klassen (es hat Klassenselektoren). HTML-Klassen sind nützlich für andere Dinge als CSS.
Quentin
36
Beeindruckend! Ich kann einfach nicht darüber hinwegkommen, dass die Leute dies als "verstecktes" Merkmal empfinden. Junge, finde ich es dumm, einige "wirklich versteckte" Funktionen zu veröffentlichen, weil Leute, die dies positiv bewertet haben, wahrscheinlich nicht annähernd verstehen werden, was die Erweiterung einer DTD bedeutet.
Aleemb
5
d03boy, p.foo, p.var ist nicht dasselbe wie p.foo.bar. Ersteres wählt einen Absatz mit der Klasse "foo" oder "var" aus, letzteres wählt einen Absatz mit beiden Klassen aus.
Augenlidlosigkeit
5
Die Sache mit HTML-Klassen ist ein guter Punkt, weil sie mich auf einen Punkt bringt. HTML sollte nicht auf CSS aufmerksam gemacht werden. Sie sollten in der Lage sein, HTML zu erstellen und es an einen Designer weiterzugeben, der ihr Design ohne HTML implementieren kann Das HTML muss geändert werden (noch nicht ganz der Fall;)). Dies hängt also von Ihrer Benennung und der Art und Weise ab, wie Sie Klassen verwenden. Erstellen Sie keine Klassen, um auf CSS-Eigenschaften abzuzielen. Verwenden Sie Klassen, um zu identifizieren, was das Element ist '.
Meandmycode
1
Technisch gesehen ist "Foo Bar BlackBg" eine einzelne Klasse, und p.foo ist nur syntaktischer Zucker für p [class ~ = foo] (siehe Spezifikation ). Es ist jedoch einfacher, sich mehrere Klassen vorzustellen.
Tgr
34

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 .

Aleemb
quelle
10
Dies macht es natürlich zu "Gültig: Ihre benutzerdefinierte Auszeichnungssprache" und nicht zu "XHTML 1.0 Transitional"
Quentin
3
+1. Ich weiß nicht, warum das -1 war. Auf jeden Fall sollte beachtet werden, dass die Browserunterstützung so gut wie gleich Null ist.
Augenlidlosigkeit
Ich bin mir ziemlich sicher, dass Opera dies unterstützt.
Rich Bradshaw
2
@eyelidlessness funktioniert nur in XHTML. Funktioniert nicht in XHTML, das als Text / HTML gesendet wird.
Kornel
2
Eesh, kein Fan davon. Für mich ist der Wert von HTML, dass jeder auf dem Planeten weiß, was es bedeutet (mehr oder weniger), weil wir alle dieselben Tags und Attribute verwenden. Ich bin mir nicht sicher, warum das classAttribut nicht ausreichend erweiterbar ist.
Paul D. Waite
28

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

Xinus
quelle
4
Leider unterstützt IE <8 dies nicht. Sie können jedoch stattdessen MHTML für diese Browser verwenden: phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under
Mathias Bynens
26

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>
Emil
quelle
Bitte geben Sie ein Beispiel an.
Binoj Antony
Entdecktes Feldset von der Aspnet MVC-Beispielseite. ^^
Arnis Lapsa
2
Wusste nichts davon. Hier ist die W3c-Spezifikation: w3.org/TR/html401/interact/forms.html#h-17.10
MitMaro
Fieldsets und Legenden sind großartig. Eine wirklich schöne Möglichkeit, Ihre Formulare zu markieren.
Neil Aitken
25

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>
Zach
quelle
57
Das funktioniert fast genau wie ein Iframe, nur dass es weniger gut unterstützt wird und weniger Funktionen hat.
Quentin
Wenn der Name veraltet ist, werden wir hoffentlich bald eine bessere Unterstützung bekommen
Gordon Gustafson
12
iframe ist in HTML 5 nicht veraltet.
Zach
Verhindert es XSS-Angriffe von der eingebetteten Seite?
anonymer Feigling
1
Ich glaube, es verwendet SOP, genau wie bei Iframes.
Zach
25

<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>
Justin Johnson
quelle
25

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.

BalusC
quelle
1
Hey .. Das ist anscheinend eine weitere versteckte Funktion von HTML: /;)
BalusC
1
Wenn ein Formular mehrere Senden-Schaltflächen enthält und der Benutzer auf eine klickt, teilen bestimmte Versionen von Internet Explorer Ihrem Server fröhlich mit, dass alle angeklickt wurden. Wunderbar.
Detly
1
@detly: nur wenn Sie <button type="submit">anstelle von verwenden <input type="submit">:)
BalusC
1
... buuuuut hat IE6 nicht auch Probleme mit <input type="submit">? (Meine Erinnerung an dieses Problem ist verschwommen - ich habe Arbeitgeber längst davon überzeugt, sich keine Sorgen um die IE-Kompatibilität für interne Web-Apps zu machen, daher ist dies nicht mehr mein Problem. Ich erinnere mich jedoch an ein Hindernis, das die Lösung dieses Problems in IE6 behindert. )
Detly
2
Das ist nicht sehr i18n-freundlich.
zneak
22

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>
çağdaş
quelle
15
Nach meiner Erfahrung ist die Unterstützung von Colgroups bestenfalls schuppig.
Augenlidlosigkeit
Auffallend ähnlich ist WPF Grid
Binoj Antony
18

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">
moo
quelle
4
Dies genießt jedoch weniger Browserunterstützung als das Attribut for
Quentin
4
@ David - Haben Sie Unterlagen, um dies zu sichern? Ich glaube nicht, dass ich jemals einen Browser gesehen habe, der diese Verwendung nicht unterstützt. Ich habe persönlich in IE6 / 7, FF2 / 3, Safari 3 und Chrome 1/2 getestet. Ich habe mich nicht in Opera getestet, aber ich wäre sehr überrascht, wenn es nicht funktioniert hätte. Dieses Verhalten ist Teil der ursprünglichen HTML 4.0-Spezifikation, die vor mehr als elf Jahren erstmals veröffentlicht wurde: w3.org/TR/1998/REC-html40-19980424/interact/forms.html#adef-for
Ben Blank
Es ist auch nicht gültig, eine Eingabe in ein Etikett einzufügen, und DOH, Sie haben Ihr Eingabe-Tag in beiden Beispielen nicht geschlossen!
Anthony
5
In beiden Punkten liegen Sie falsch: Dies ist eine gültige Vorgehensweise, und das End-Tag ist für Eingabeelemente verboten.
Moo
15

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>
Wadih M.
quelle
27
Die Schaltfläche verfügt nicht über die Option "Datei speichern unter", die möglicherweise von Benutzern benötigt wird, die nicht möchten, dass Adobe Acrobat ihren Browser übernimmt.
Kornel
Beim Zugriff auf PDF-Dateien verhält es sich mit dem Standardverhalten des Browsers. Es kann sich um eine HTML-Datei, eine Word-Datei, eine Zip-Datei oder etwas anderes handeln, das Sie möchten.
Wadih M.
In welcher Situation erfordert ein Ankertag ein Onclick-Ereignis? und warum sollten 3 Zeilen HTML besser sein als 1? Ist die Idee, dass Sie eine Schaltfläche anstelle eines Links haben können, also schön und wie eine Schaltfläche? Obwohl ich diesbezüglich verärgert bin, habe ich tatsächlich eine Seite, die Schaltflächen anstelle von Links verwendet, da die Datei dynamisch erstellt wird, wenn der Benutzer dies anfordert. Daher wollte ich keinen Link zu: blah.php? Stuff = "userdata" Obwohl ich diesen Weg hätte gehen können, wollte ich nicht riskieren, dass der Dateiname das Dateierzeugungsskript als Namen anstelle des Dateinamens enthält, den das Skript der Datei gibt.
Anthony
1
Warum nicht einfach das <a> -Tag wie eine Schaltfläche gestalten? Dies scheint viel Müll in Ihrem Markup zu sein.
UpTheCreek
2
@UpTheCreek Einige Webanwendungen möchten genauso aussehen wie das Betriebssystem. ZB eine hässliche Schaltfläche, wenn der Benutzer Windows verwendet, und eine schöne Schaltfläche, wenn der Benutzer Mac OS X verwendet.
13

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)

Binoj Antony
quelle
13
Das Herausfinden, welche Elemente aktualisiert und dann über AJAX aktualisiert werden müssen, führt natürlich zu einer viel schöneren Benutzererfahrung ...
Steve Harrison
11
META-Aktualisierung bringt auf Seiten, auf denen es auch einige Aktivitäten für Benutzerformulare gibt, nichts Gutes, da sie das Ausfüllen des Benutzerformulars unterbrechen und die gesamte Arbeit verwerfen kann. Ich denke, es gibt selten eine Gelegenheit, bei der diese Art von Erfrischungen am besten wäre. Normalerweise ist es nur der einfache Ausweg.
Robert Koritnik
11
/ Ich hasse Seiten, die so
aktualisiert werden
3
Dies kann auch nützlich sein, wenn etwas weniger als das Sitzungszeitlimit festgelegt ist, um den Benutzer darüber zu informieren, dass das Zeitlimit für seine Sitzung abgelaufen ist und entfernt wurde.
Vor dem
1
Kurze Timeouts brechen die Zurück-Taste.
Kornel
12

<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>
porneL
quelle
4
Sie sollten vorsichtig sein, was Sie bewerben. Der obige Code besteht die Validierung mit 4 Warnungen beim w3c-Validator, aber der DocType ist HTML 4.0. Es ist ziemlich ordentlich, dass HTML 4 von SGML abstammt und daher diesen losen Validierungsstandard beibehält. Wenn Sie diese DTD jedoch in XHTML 1.0 STRICT ändern, werden 15 Fehler angezeigt, was fast der Anzahl der Zeichen entspricht. XHTML wurde entwickelt, weil HTML so faul (und damit unsicher) war, dass wir das nicht mehr nutzen wollen.
Anthony
3
Wenn Sie DOCTYPE des HTML / SGML-Dokuments in XHTML / XML ändern, erhalten Sie eine unsinnige Mischung. Das ist ganz offensichtlich und ich bin mir nicht sicher, warum Sie darauf hinweisen.
Kornel
3
Dieses Beispiel könnte technisch gesehen gültiges HTML 4 sein, aber Browser unterstützen diese abgekürzte SGML-Syntax nicht. Das folgende ist das kürzeste gültige HTML 5-Dokument, das Browser tatsächlich unterstützen:<!DOCTYPE html><title></title>
Brian Campbell
Irgendeine Idee, wie kompatibel es ist, head/ bodywegzulassen, nicht nur aus Sicht der Validierung?
Kibibu
@kibibu: Browser haben keine Probleme damit. Alte Versionen von Opera wurden <head>manchmal in DOM weggelassen, aber der Hauptinhalt war in DOM und funktionierte trotzdem. Das größte Problem, das ich gefunden habe, ist, dass OpenID-Clients <head>explizit vorhanden sein müssen.
Kornel
11

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>
Erik Töyrä
quelle
10

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">
Xn0vv3r
quelle
10
Und nicht „zwingend für die meisten aktuellen Markup - Sprachen und ohne einen ist es unmöglich, zuverlässig , ein Dokument zu validieren“ zu erwähnen ... validator.w3.org/docs/help.html#faq-doctype
Svish
Ich denke nicht, dass dies "nicht mehr bekannt" ist. In der Zeit zwischen IE 6 und IE 7 stieg die Verwendung von Doctype von ~ 1% auf> 50%.
Augenlidlosigkeit
@eyelidlessness Die meisten IDE enthalten dieses Tag, weshalb die Verwendung erhöht wurde. Ich denke, dieser Tag ist nicht bekannt.
Daniel Moura
6
Die Verwendung eines strengen Doctype behebt 95% der Browser-Inkonsistenzen.
DisgruntledGoat
3
Ein Teil des Standards, der von 99% der Entwickler verwendet wird, klingt nicht nach "versteckten Funktionen".
WhyNotHugo