<samp>: Das Sample Output-Element
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das <samp> HTML Element wird verwendet, um eingebetteten Text einzuschließen, der als Beispiel- (oder zitierter) Ausgaben von einem Computerprogramm dargestellt wird. Der Inhalt wird typischerweise mit der Standardschriftart des Browsers für Monospace-Schriften (wie Courier oder Lucida Console) angezeigt.
Probieren Sie es aus
<p>I was trying to boot my computer, but I got this hilarious message:</p> <p> <samp>Keyboard not found <br />Press F1 to continue</samp> </p> samp { font-weight: bold; } Attribute
Dieses Element beinhaltet nur die globalen Attribute.
Nutzungshinweise
Sie können eine CSS-Regel verwenden, um die Standardschriftart des Browsers für das <samp>-Element zu überschreiben; jedoch ist es möglich, dass die Browser-Einstellungen gegenüber jeglichen von Ihnen angegebenen CSS-Vorgaben Vorrang haben.
Das CSS zur Überschreibung der Standardschriftart würde wie folgt aussehen:
samp { font-family: "Courier"; } Hinweis: Wenn Sie ein Element benötigen, das als Container für die von Ihrer Website oder App's JavaScript-Code generierte Ausgabe dienen soll, sollten Sie stattdessen das <output> Element verwenden.
Beispiele
Einfaches Beispiel
In diesem einfachen Beispiel enthält ein Absatz ein Beispiel für die Ausgabe eines Programms.
<p> When the process is complete, the utility will output the text <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to the next step. </p> Ergebnis
Beispielausgabe, die Benutzereingaben beinhaltet
Sie können das <kbd> Element innerhalb eines <samp>-Blocks verschachteln, um ein Beispiel darzustellen, das vom Benutzer eingegebenen Text enthält. Betrachten Sie beispielsweise diesen Text, der ein Transkript einer Linux- (oder macOS-) Konsolensitzung präsentiert:
HTML
<pre> <samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd> MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62 <span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre> Beachten Sie die Verwendung von <span>, um das Erscheinungsbild bestimmter Teile des Beispieltextes, wie der Shell-Eingabeaufforderungen und des Cursors, anzupassen. Beachten Sie auch die Verwendung von <kbd>, um den Befehl darzustellen, den der Benutzer an der Eingabeaufforderung im Beispieltext eingegeben hat.
CSS
Das CSS, das das gewünschte Erscheinungsbild erzielt, ist:
.prompt { color: #bb0000; } samp > kbd { font-weight: bold; } .cursor { color: #0000bb; } Dies verleiht der Eingabeaufforderung und dem Cursor eine ziemlich subtile Kolorierung und hebt die Tastatureingaben innerhalb des Beispieltextes hervor.
Ergebnis
Die daraus resultierende Ausgabe ist:
Technische Zusammenfassung
| Inhaltskategorien | Fließender Inhalt, Phraseninhalt, spürbarer Inhalt. |
|---|---|
| Erlaubter Inhalt | Phraseninhalt. |
| Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
| Erlaubte Eltern | Jedes Element, das Phraseninhalt akzeptiert. |
| Implizite ARIA-Rolle | generic |
| Erlaubte ARIA-Rollen | Beliebig |
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Specification |
|---|
| HTML # the-samp-element |
Browser-Kompatibilität
Loading…