wake-up-neo.com

Versteckte Funktionen von HTML

HTML ist die am weitesten verbreitete Sprache (zumindest als Auszeichnungssprache) und hat nicht die gebührende Anerkennung erhalten.
Angesichts der Tatsache, dass es so viele Jahre her ist, sind Dinge wie die FORM/INPUT-Steuerelemente immer noch dieselben geblieben, ohne dass neue Steuerelemente hinzugefügt wurden.

Kennen Sie zumindest von den vorhandenen Funktionen Funktionen, die nicht gut bekannt , aber sehr nützlich sind?.

Natürlich ist diese Frage in etwa so:

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

Erwähnen Sie keine Features von HTML 5.0, da es sich um Arbeitsentwurf handelt

Bitte geben Sie ein Merkmal pro Antwort an .

110
Binoj Antony

Verwendung eines protokollunabhängigen absoluten Pfades:

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

Dies verhindert, dass die schreckliche Fehlermeldung "Diese Seite enthält sowohl sichere als auch nicht sichere Elemente" im Internet Explorer angezeigt wird, sodass alle Ihre Asset-Anforderungen innerhalb desselben Protokolls bleiben.

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

244
Paul Irish

Das Label-Tag verknüpft das Label über das Attribut "for" logisch mit dem Formularelement. Die meisten Browser machen daraus einen Link, der das zugehörige Formularelement aktiviert.

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

Die Eigenschaft contentEditable 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! Mach weiter, probier es aus wenn du mir nicht glaubst.

136
aleemb

Ich denke, das optgroup tag ist eine Funktion, die die Leute nicht sehr oft benutzen. Die meisten Leute, mit denen ich spreche, tendieren nicht dazu, sich dessen bewusst zu werden.

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

Mein Lieblingsstück ist das Basis-Tag, das ein Lebensretter ist, wenn Sie Routing oder URL-Umschreiben 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.

Normaler 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
100
Fenton
<img onerror="{javascript}" />

onerror ist ein JavaScript-Ereignis, das unmittelbar vor der Anzeige des kleinen roten Kreuzes (im IE) ausgelöst wird.

Sie können dies verwenden, um ein Skript zu schreiben, das das fehlerhafte Bild durch einen gültigen alternativen Inhalt ersetzt, sodass 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 für diese Sache vollkommen gültige Anwendungen. Beispiel: Angenommen, Sie stellen ein Image von einer Drittanbieter-Ressource bereit, die Sie nicht steuern. Wie unser Gravatar hier in SO ... wird es 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 dies durch Stackoverflow mithilfe von onerror umgangen werden.

99
Daniel Silveira

Das <kbd> Element zum Markieren für Tastatureingaben

Ctrl+Alt+Del

96
Russ Cam
<blink>

Muss für alles Wichtige auf der Website verwendet werden. Die wichtigsten Websites binden den gesamten Inhalt in Sekundenschnelle ein.

<Marquee>

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

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

85
Mark Glorie

Nicht sehr bekannt, aber Sie können lowsrc für Bilder angeben, die lowsrc beim Laden des src des Bildes anzeigen:

<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 verwendet wurde, um Hotmail ausnutzen , circa 2000.

84
aleemb

DEL und INS um gelöschte und eingefügte Inhalte zu markieren:

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

Das Button Tag ist das neue input submit tag und viele Leute kennen es noch nicht. Der Text in der Schaltfläche kann beispielsweise mit dem Schaltflächen-Tag formatiert werden.

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

Wird eine Schaltfläche mit zwei Zeilen rendern, sagt der erste " Click " in Fettdruck und der zweite "Me!". Probieren Sie es aus hier .

58
aleemb

Geben Sie das CSS zum Drucken an

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

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

Sie funktionieren ähnlich wie eine ungeordnete Liste (<ul>) aber statt einzelner Einträge ist es eher eine Schlüssel-/Werteliste.

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

Nicht genau 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 Tfoot über Tbody im Markup erscheinen sollte?

52
annakata

Das wbr oder Word-break Tag. Aus Quirksmode:

(Wortumbruch) bedeutet: "Der Browser kann hier gegebenenfalls einen Zeilenumbruch einfügen." Wenn der Browser keinen Zeilenumbruch 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 horizontale Bildlaufleisten entstehen.

Das gibt es auch beim &shy; Auf derselben Seite erwähnte HTML-Entität. Dies ist dasselbe wie wbr, aber wenn ein Umbruch eingefügt wird, wird ein Bindestrich (-) wird hinzugefügt, um eine Unterbrechung zu kennzeichnen. Ein bisschen wie, wie es in gedruckter Form gemacht wird.

Ein Beispiel:

TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText

50
aleemb

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

Wenn Sie ein solches Attribut hinzufügen, wird ein Tooltip angezeigt, wenn Sie den Mauszeiger über das Element bewegen. Mit diesem Tooltip können Sie unwesentliche, aber nützliche Informationen auf eine Weise bereitstellen, bei der die Seite nicht zu überfüllt wird . (Oder es kann eine Möglichkeit sein, einer bereits überfüllten Seite Informationen hinzuzufügen.)

43
belugabob

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

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

Wir alle kennen die DTDs oder Dokumenttypdeklarationen (die Dinge, die dazu führen, dass Ihre Seite mit dem W3C-Validator nicht funktioniert). Es ist jedoch möglich, die [~ # ~] dtd [~ # ~] durch Deklarieren einer Attributliste für benutzerdefinierte Elemente zu erweitern.

Beispielsweise wird der W3C-Validator für diese Seite fehlschlagen , weil behavior="mouseover" Zum <p> - Tag hinzugefügt wurde. Sie können es jedoch schaffen, indem Sie dies tun:

<!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 finden Sie unter about Benutzerdefinierte DTDs bei QuirksMode .

34
aleemb

Wir können eine 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 an Base64 Encoder/Übersetzer

28
Xinus

Ich habe kürzlich etwas über die Fieldset- und Label-Tags herausgefunden. 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>
26
Michael Sharek

Sie können das Tag object anstelle eines iframe verwenden, 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>
25
Zach

Die meisten sind sich auch nicht bewusst, dass Sie die gedrückte Formularschaltfläche nur durch Angabe eines Namens/Wert-Paares unterscheiden können. 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 der tatsächlich gedrückte Knopf dann erhalten werden, indem nur das Vorhandensein des Anforderungsparameters überprüft wird, der dem Knopfnamen zugeordnet ist. Wenn es nicht null ist, wurde die Taste gedrückt.

Ich habe viel von unnötigen JS-Hacks/Workarounds dafür gesehen, z. Ändern der Formularaktion oder Ändern eines ausgeblendeten Eingabewerts im Voraus, je nachdem, welche Taste gedrückt wurde. Es ist einfach erstaunlich.

Außerdem habe ich fast so viele JS-Hacks/Workarounds gesehen, um die aktivierten mehrerer Kontrollkästchen wie in Tabellenzeilen zu sammeln. Bei jeder Auswahl/Überprüfung einer Tabellenzeile fügt das JS den Zeilenindex zu einem durch Kommas getrennten Wert in einem verborgenen Eingabeelement hinzu, der dann auf der Serverseite weiter aufgeteilt/analysiert wird. Dies ist das Ergebnis der Unkenntnis, dass Sie mehreren Eingabeelementen den gleichen Namen geben können, aber einen anderen Wert und dass Sie immer noch 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 einige unnötig überwältigende Magie im serverseitigen Code gesehen, um die markierten Elemente zu unterscheiden.

25
BalusC

<optgroup> ist eine großartige Sache, die die Leute häufig verpassen, wenn sie segmentierte <select> Listen.

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

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
Çağdaş Tekin

Wenn das for -Attribut eines <label> Tag ist nicht angegeben, es wird implizit als erstes Kind gesetzt <input>, d.h.

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

ist äquivalent zu

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

Button als Link, kein JavaScript:

Sie können jede Art von Datei in die Aktion form 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 diese

<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>
15
Wadih M.

Einfachste Methode zum Aktualisieren der Seite in X Sekunden - META Refresh

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

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

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

Eine einfache Weiterleitung durchführen!
(Danke @rlb)

13
Binoj Antony

<html>, <head> und <body> Tags sind optional. Wenn Sie sie nicht angeben, werden sie vom Parser an den entsprechenden Stellen automatisch eingefügt. Es ist absolut gültig , dies in HTML zu tun (genau wie implizites <tbody>).

HTML in Theorie ist 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 oben Genannte funktioniert nur mit dem W3C Validator. Jedoch kürzester gültiger HTML5 text/html Dokument funktioniert überall:

<!DOCTYPE html><title></title>
12
Kornel

Das lang Attribut 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. Die Sprachcodes werden im ISO-2-Buchstaben-Sprachcode angegeben (d. H. "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 auch vom lang -Attribut sowie von Suchmaschinen.

Sitepoint hat eine nette Erklärung des lang Attributs.

Beispiele

Geben Sie die Sprache für das gesamte Dokument als Englisch an, es sei denn, Sie werden von einem anderen lang -Attribut auf einer niedrigeren Ebene im DOM überschrieben.

<html lang="en">

Geben Sie die Sprache im folgenden Absatz als 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 ein verstecktes Feature handelt, aber es scheint nicht gut 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">
10
Xn0vv3r

Das hat nur wenig mit HTML zu tun, aber nur sehr wenige Leute wissen es.

Leute missbrauchen das <meta> - Tag mit dem Attribut http-equiv:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Refresh" content="5; url=somewhere/"/>

Viele Entwickler wissen jedoch nicht einmal, was dies bewirkt. Das Attribut http-equiv Bedeutet, dass das Tag einen HTTP-Header ersetzen soll , wenn Sie nicht die Kontrolle darüber haben . Daher sollte die meiste Arbeit über http-equiv Auf der Serverseite ausgeführt werden.

Außerdem ist es nicht so leistungsfähig: Mehrere Eigenschaften eines Dokuments können nicht über <meta> - Tags geändert werden. Content-Type In einem <meta> - Tag kann den Browser anweisen, einen bestimmten Zeichensatz zu verwenden, die meisten ignorieren jedoch Änderungen am MIME-Typ des Dokuments (Sie können also keinen text/html dokumentiere auf diese Weise einen application/xhtml+xml.

Beide Tags aus dem Beispiel sollten durch diese einfachen Aufrufe ersetzt werden:

<?php
header('Content-Type: text/html; charset=UTF-8');
header('Refresh: 5; url=somewhere/');
?>

Es funktioniert zwangsläufig mit jedem HTTP-kompatiblen Browser (was so ziemlich jedem einzelnen Browser entspricht).

6
zneak

Hochgestellt mit <sup> x </sup>

5
Andrea

Ein Formular kann nur dann gesendet werden, wenn Sie bei einer Texteingabe die Eingabetaste drücken, wenn das Formular eine Senden-Schaltfläche enthält. Probieren Sie es aus hier . Es funktioniert nicht, wenn Sie den Typ der Schaltfläche nicht auf "Senden" ändern.

3
Fabien Ménager

Mein Lieblings-Hidden-Feature wurde bereits erwähnt, nämlich das "Base" -Tag. Sehr praktisch, wenn Sie einen Code-Block mit relativen URLs haben und sich plötzlich alle bewegen, Ihre Seite jedoch nicht.

Aber eines, das nicht erwähnt wurde, ist das Listenkopf-Tag <lh>. Es wurde wahrscheinlich nicht erwähnt, weil es als "veraltet" gilt, aber die meisten Browser unterstützen es immer noch. Ich weiß nicht, warum es auslief, fast jede ungeordnete Liste, die ich erstelle, könnte einen Header verwenden, und es fühlt sich icky an, nur ein h3-Tag abzulegen, und es fühlt sich einfach falsch an, das erste Listenelement zum Titel der Liste zu machen.

3
Anthony

Sonderzeichen für Mathe, Griechisch, ... nicht sehr gut bekannt

2
Xn0vv3r

Definitionslisten:

<dl>
  <dt>Some Term</dt>
  <dd>Some description</dd>
  <dd>Some other description</dd>

  <dt>Another Word/Phrase</dt>
  <dd>Some description</dd>
</dl>

Ich habe dies auch für Formularlayouts und Navigationsmenüs für verschiedene Websites erneut durchgeführt.

0
HorusKol