<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 July 2015.
Das <samp>
HTML-Element wird verwendet, um Inline-Text einzuschließen, der eine Beispiel- (oder zitierte) Ausgabe von einem Computerprogramm darstellt. Der Inhalt wird typischerweise mit der Standard-Monospace-Schriftart des Browsers gerendert (wie Courier oder Lucida Console).
Probieren Sie es aus
Attribute
Dieses Element umfasst nur die globalen Attribute.
Verwendungshinweise
Sie können eine CSS-Regel verwenden, um die Standard-Schriftart des Browsers für das <samp>
Element zu überschreiben; es ist jedoch möglich, dass die Browsereinstellungen Vorrang vor jedem angegebenen CSS haben.
Das CSS, um die Standard-Schriftart zu überschreiben, würde folgendermaßen aussehen:
samp {
font-family: "Courier";
}
Hinweis: Wenn Sie ein Element benötigen, das als Container für die von Ihrer Website oder App generierte JavaScript-Ausgabe dient, 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 einschließlich Benutzereingaben
Sie können das <kbd>
Element innerhalb eines <samp>
Blocks verschachteln, um ein Beispiel zu präsentieren, das vom Benutzer eingegebenen Text enthält. Betrachten Sie zum Beispiel diesen Text, der ein Transkript einer Linux- (oder macOS-)Konsolensitzung darstellt:
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 Aussehen bestimmter Teile des Beispieltextes wie die Shell-Eingabeaufforderungen und den Cursor 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 Aussehen erreicht, ist:
.prompt {
color: #b00;
}
samp > kbd {
font-weight: bold;
}
.cursor {
color: #00b;
}
Dies gibt der Eingabeaufforderung und dem Cursor eine ziemlich subtile Farbgebung und stärkt die Tastatureingabe innerhalb des Beispieltextes.
Ergebnis
Das resultierende Ausgabeergebnis ist folgendes:
Technische Zusammenfassung
Inhaltskategorien | Flussinhalt, Phrasierungsinhalt, greifbarer Inhalt. |
---|---|
Erlaubter Inhalt | Phrasierungsinhalt. |
Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
Erlaubte Eltern | Jedes Element, das Phrasierungsinhalt zulässt. |
Implizierte ARIA-Rolle | generic |
Erlaubte ARIA-Rollen | Beliebig |
DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
Specification |
---|
HTML Standard # the-samp-element |
Browser-Kompatibilität
BCD tables only load in the browser