Häufig verwendete HTML-Format-Tags_Powernode Java Academy
|
1. Titel HTML definiert sechs <h>-Tags: <h1></h1> bis <h6></h6>, die für Überschriften mit unterschiedlichen Schriftgrößen verwendet werden. Die Schriftgröße reicht von groß bis klein, wobei <h1> die größte und <h6> die kleinste ist. Beim Überschriften-Tag ist Folgendes zu beachten: a. Der Browser fügt vor und nach dem Titel automatisch Leerzeilen ein. Weil das Überschriften-Tag ein Blockelement ist, fügt HTML standardmäßig automatisch eine zusätzliche Leerzeile (<br/>) vor und nach dem Blockelement ein. b. Der Titel ist für die gesamte Seite wichtig. Sie sollten das HTML-Überschriften-Tag nur für den Titel verwenden, nicht nur, um fetten oder großen Text zu erstellen. Da das Überschriften-Tag sehr SEO-freundlich ist, verwenden Suchmaschinen Titel, um die Struktur und den Inhalt Ihrer Webseiten zu indizieren, und Benutzer verwenden Titel, um schnell durch Ihre Webseiten zu blättern. Daher ist es wichtig, Titel zu verwenden, um die Dokumentstruktur darzustellen. Sie sollten <h1> als Hauptüberschrift verwenden (das Wichtigste), gefolgt von <h2> (das Zweitwichtigste), dann <h3> und so weiter.
<!--Mit dem Tag <h> wird der Titel festgelegt. Platzieren Sie wichtige Informationen in <h1>, damit Suchmaschinen ihnen Priorität einräumen. -->
<h1>
China Eins</h1>
<h2>
China II</h2>
<h3>
China Drei</h3>
<h4>
China Vier</h4>
<h5>
China Fünf</h5>
<h6>
China SechsDie Wirkung ist wie folgt (von groß bis klein) bei den Schriftgrößen:
2. Zeilenumbruch <br/>, kein Zeilenumbruch <nobr></nobr> und Absatzumbruch <p></p> Der Unterschied zwischen dem Zeilenumbruch-Tag <br/> und dem Absatzumbruch-Tag <p></p> in HTML besteht darin, dass der Zeilenumbruch-Tag <br/> lediglich ein Wagenrücklauf ist, während <p></p> ein Absatzumbruch ist. Da es sich beim <p>-Tag um ein Element auf Blockebene handelt, stehen davor und danach relativ große Leerzeichen (<br/> wird automatisch hinzugefügt), während es sich beim <br/>-Tag um ein Element auf Zeilenebene handelt und die Zeile einfach ohne Leerzeichen davor und danach umschließt. Es gibt ein Tag <nobr></nobr>, das das Gegenteil von <br/> ist. Es bedeutet „kein Zeilenumbruch“ und wird normalerweise verwendet, um zu verhindern, dass der Browser Programmcodes und andere Stellen, an denen kein Zeilenumbruch erforderlich ist, automatisch umbricht.
<!-- Zeilenumbrüche und Absatzumbrüche: -->
<p>
Dies ist der erste Absatz<br /> <!--Zeilenumbruch-->
Es werden Zeilenumbruch-Tags verwendet<br />
Bitte sehen Sie sich die Wirkung an<br />
Leicht verständlich</p>
<p>
Dies ist der zweite Absatz</p> <!--Absatz, automatischer Zeilenumbruch-->
<p>
Dies ist der dritte Absatz</p>
<p>
<nobr> <!--Zeilenumbruch verhindern-->
In diesem Beispiel wird die Variable j = 0, j = 10 als arithmetischer Operator verwendet.
</nobr>
</p>3. Horizontales Linien-Tag <hr/> Das <hr />-Tag erstellt eine horizontale Linie in einer HTML-Seite. Eine Möglichkeit hierzu besteht darin, horizontale Linien (das <hr>-Tag) zu verwenden, um Abschnitte innerhalb eines Artikels zu trennen. Mit dem <hr/>-Tag lassen sich Breite und Höhe festlegen. Diese beiden Attribute können jeweils in Pixeln und Prozent ausgedrückt werden. Darüber hinaus verfügt das <hr/>-Tag über die Attribute size (Dicke), color (Farbe) und noshade (kein Schatten).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<Titel></Titel>
</Kopf>
<Text>
<hr Größe="5" color="#FF0000" />
<!-- Definiert das hr-Tag mit der Größe (Dicke) 5 und der Farbe Rot -->
<hr Breite="60" />
<!--width-Attribut ist 60px-->
<hr width="60%" />
<!--Breite beträgt 60 %-->
<hr Größe="10" />
<!--Größe ist 10px-->
<hr Größe="10%" />
<!--Größe beträgt 10 %-->
<!--align-Attribut, die möglichen Werte sind left, right und center-->
<hr Breite="20%" Ausrichtung="links" />
<hr Breite="20%" Ausrichtung="rechts" />
<hr Breite="20%" Ausrichtung="Mitte" />
<hr color="#FF0000" />
<!--noshade-Attribut, keinen Schatteneffekt festlegen-->
<hr noshade="noshade" />
</body>
</html>4. Textformatierungs-Tags <!--Häufige Textformat-Tags--> <center>博客园</center> zeigt in der Mitte <b>Hallo Welt!</center> an. </b>Fett gedruckt, es wird empfohlen, das Tag <strong> zu verwenden. <i>Es ist schräg</i> kursiv gedruckt. <u>Ich bin ein Unterstreichungs-Tag</u> ist unterstrichen. <em>Hervorhebung, Kursivschrift</em> <sub>2</sub> Index, wie zum Beispiel: H<sub>2</sub>O <sup>2</sup> hochgestellt, zum Beispiel: 10<sup>2</sup> <!--Das Einstellen der Schriftgröße kann in absolute und relative Schriftgröße unterteilt werden. Die absolute Schriftgröße wird über das Größenattribut des <font>-Tags eingestellt, während die relative Schriftgröße der relative Wert der Standardschriftart ist. --> <!--Die absolute Schriftgröße ist eine Zahl zwischen 1 und 7 --> <!--color (Farbe festlegen) Größe (1-7). --> <!--Das Face-Attribut wird zum Festlegen der Schriftart verwendet--> <font></font>Schriftart-Tag, <font color="red" size="7" face="隶书">rot</font> 5. Vorformatierungs-Tag <pre> <pre> Vorformatierungs-Tag, lässt den Inhalt der Webseite so angezeigt, wie er ist. Es kann zum Anzeigen bestimmter spezieller Inhalte und auch zum Anzeigen des Quellcodes einer Computerprogrammierung verwendet werden (der Quellcode von Blog Garden wird beispielsweise über das Tag <pre> angezeigt).
<p>Das Pre-Tag zeigt spezielle Inhalte an, die Sie so anzeigen möchten, wie sie sind:</p>
<vor>
Ich bin ein gutes Kind.
Das gefällt mir, das ist ein vorformatiertes Tag____
(. \
\ |
\ |___(\--/)
__/ ( . . )
"'._. '-.O.' Hallo, ich bin ein Kätzchen!
'-. \ "|\
'.,,/'.,,
(⊙_⊙)? Was hast du gesagt? ? ? ?
</pre>
Das <p>Pre-Tag eignet sich hervorragend zum Anzeigen von Computercode:</p>
<vor>
für i = 1 bis 10
drucken
als nächstes ich
</pre> 6. <marquee></marquee>-Tag Das Tag-Paar <marquee></marquee> weist den Browser an, den Text und die Bilder darin zu verschieben.
<div>
<!--Marquee-Tag Einige Browser unterstützen: IE, FF-->
<!--direction-Attribut: Gibt die Richtung der Inhaltsbewegung an. Mögliche Werte sind links, rechts, oben und unten-->
<!--behavior-Attribut: Gibt das Verhalten des Tags an. Die möglichen Werte sind scroll, alternate und slide-->
<marquee direction="left" scrolldelay="" behavior="alternate">
Hallo zusammen, willkommen auf meiner Homepage! ......
</Festzelt>
</div>7. Weitere Beispiele für Format-Tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<Titel></Titel>
</Kopf>
<Text>
<!--<abbr>Abkürzung anzeigen: -->
<abbr Titel="British Broadcasting Corporation">
BBC</abbr><br />
<!-- <acronym> Zeigt die Abkürzung einer Phrase an: -->
<acronym title="World Wide Web">www</acronym><br />
<!--<blockquote> definiert ein Zitat für einen langen Text:-->
<blockquote>
<p>
Über zwei oder drei Tage hinaus sind die besten Vorhersagen der Welt spekulativ, und über
sechs oder sieben, sie sind wertlos.
</p>
<br />
Das Tag <!-- <q> definiert ein kurzes Zitat: -->
<q>Das q-Label!!!</q>
</blockquote>
<!--<address>Adresse, Unterschrift, Angaben zum Dokumentautor usw.:-->
<Adresse>
Zhongguancun Software Park, Bezirk Haidian, Peking, [email protected]
</Adresse>
<!--Das Tag <bdo> verwendet das dir-Attribut, um die Reihenfolge zu definieren, in der Text angezeigt wird: -->
<bdo dir="ltr">Stromknoten</bdo><br /> <!--ltr: von links nach rechts, von links nach rechts-->
<bdo dir="rtl">Power-Knoten</bdo><br /> <!--rtl:von rechts nach links,von rechts nach links-->
</body>
</html>2. HTML-Liste
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<Kopf>
<Titel></Titel>
</Kopf>
<Text>
<b>HTML-Liste:</b><br />
<hr size="5" color="#FF0000;" />
<br />
<!--Erste, ungeordnete Liste (ul:ungeordnete Liste)-->
<font size="+" color="#FF" face="华文楷体">I. Ungeordnete Liste:</font><br />
.Standard:<br />
<ul>
<li>Banane</li>
<li>Apfel</li>
<li>Orange</li>
</ul>
.Verwenden Sie das Typattribut:<br />
<!--Der Wert des ul-Typattributs:
Scheibe: ausgefüllter Kreis, Kreis: ausgefüllter Kreis, Quadrat: ausgefülltes Quadrat -->
<!--ol Typ-Attributwert:
<ul Typ="Ich"/"ein"/"Ein"/"1">
-->
<ul Typ="Kreis">
<li>Banane</li>
<li>Apfel</li>
<li>Orange</li>
</ul>
<ul Typ="Quadrat">
<li>Banane</li>
<li>Apfel</li>
<li>Orange</li>
</ul>
3. Gemischte Verwendung von Attributwerten zur Hervorhebung:<br />
<ul Typ="Kreis">
<li>Banane</li>
<li Typ="Disc">Apfel</li>
<li>Orange</li>
</ul>
<!--Zweite, geordnete Liste (ol, geordnete Liste)-->
II. Sortierte Liste:
.Standard:<br />
<ol>
<li>Basketball</li>
<li>Volleyball</li>
<li>Fußball</li>
</ol>
2. Verwenden Sie das Typattribut:
<ol Typ="i">
<li>Basketball</li>
<li>Volleyball</li>
<li>Fußball</li>
</ol>
<ol Typ="A">
<li>Basketball</li>
<li>Volleyball</li>
<li>Fußball</li>
</ol>
3. Ändern Sie die führende Nummer der sortierten Listenelemente:<br />
<blockquote>
a.<font color="#FFFF">start</font>-Attribut allein verwendet:<br />
<ol start="3">
<li>Basketball</li>
<li>Volleyball</li>
<li>Fußball</li>
</ol>
b.<font color="#FFFF">vlaue</font>-Attribut allein verwendet:<br />
<ol>
<li>Basketball</li>
<li value="5">Volleyball</li>
<li>Fußball</li>
</ol>
c. Allgemeine Verwendung der Attribute <font color="#FFFF">start, value</font>:<br />
<ol start="8">
<li>Basketball</li>
<li value="15">Volleyball</li>
<li>Fußball</li>
</ol>
</blockquote>
<font size="+1" color="#00FF00" face="花纹楷体">III. Verschachtelte Listen:</font><br />
1. Verschachtelte ungeordnete Liste in ungeordneter Liste:<br />
<ul>
<li>Getränke</li>
<li>Obst<ul>
<li>Banane</li>
<li>Apfel</li>
<li>Orange</li>
</ul>
</li>
<li>Gemüse</li>
<li>Tee</li>
</ul>
2. Verschachtelte geordnete Liste in ungeordneter Liste:<br />
<ul>
<li>Getränke</li>
<li>Obst<ol>
<li>Banane</li>
<li>Apfel</li>
<li>Orange</li>
</ol>
</li>
<li>Gemüse</li>
<li>Tee</li>
</ul>
3. Verschachtelte geordnete Listen innerhalb geordneter Listen:<br />
<ol>
<li>Getränke</li>
<li>Obst<ol>
<li>Banane</li>
<li>Apfel</li>
<li>Orange</li>
</ol>
</li>
<li>Gemüse</li>
<li>Tee</li>
</ol>
4..Eine ungeordnete Liste in eine geordnete Liste einbetten:<br />
<ol>
<li>Getränke</li>
<li>Obst<ul>
<li>Banane</li>
<li>Apfel</li>
<li>Orange</li>
</ul>
</li>
<li>Gemüse</li>
<li>Tee</li>
</ol>
5. Mehrstufige Verschachtelung von Listen:<br />
<ol>
<li>Getränke</li>
<li>Obst<ul>
<li>Banane</li>
<li>Apfel<ul>
<li>Hergestellt in Brasilien</li>
<li>Hergestellt in China</li>
</ul>
</li>
<li>Orange</li>
</ul>
</li>
<li>Gemüse</li>
<li>Tee</li>
</ol>
<!--Drittens, Definitionsliste (dl, Definitionsliste)-->
<font size="+1" color="#00FF00">IV. Definitionsliste:</font><br />
1. Definitionsliste:<br />
<!--
<dl>
<dt>Erstes Header-Element</dt>
<dd>Erläuternder Text zur ersten Kopfposition</dd>
<dt>Zweiter Titeleintrag</dt>
<dd>Erläuternder Text zum zweiten Kopfelement</dd>
</dl>
Darunter: <dl> wird verwendet, um den Anfang der Definitionsliste zu markieren;
<dt> wird verwendet, um die Listenelemente der Definitionsliste zu identifizieren;
<dd> wird verwendet, um erklärenden Text von Listenelementen in einer Definitionsliste zu kennzeichnen.
-->
<dl>
<!--dt:definition term (definition term) definiert den Titelartikel "Peking" -->
<dt>Peking</dt>
<!--dd:definition Definition (Definition der Erklärung des Begriffs) Erklärung des Titelelements „Peking“ -->
<dd>
Chinas politisches Zentrum
<dt>Schanghai</dt>
<dd>
Chinas wirtschaftliches Zentrum
<dt>Shenzhen</dt>
<dd>
Eine Grenzstadt der Reform- und Öffnungspolitik Chinas
</dl>
</body>
</html>Mit vielen Tags lässt sich die Darstellung von Texten ändern und ihnen eine verborgene Bedeutung zuordnen. Im Allgemeinen können diese Tags in zwei Kategorien unterteilt werden: inhaltsbasierter Stil und physischer Stil. 1. Inhaltsorientierter Stil Inhaltsbasierte Stil-Tags teilen dem Browser mit, dass der darin enthaltene Text eine bestimmte Bedeutung, einen bestimmten Kontext oder eine bestimmte Verwendung hat. Der Browser wendet dann eine Formatierung auf den Text an, die dieser Bedeutung, diesem Kontext oder dieser Verwendung entspricht. Beachten Sie, dass inhaltsbasierte Tags Bedeutung vermitteln, nicht Formatierung. Deshalb sind sie für die automatisierte Weiterverarbeitung wichtig, denn dem Computer ist das Aussehen des Dokuments egal. Da Schriftstile mithilfe semantischer Hinweise angegeben werden, kann der Browser einen geeigneten Anzeigestil für den Benutzer auswählen. Da die Stile von Ort zu Ort unterschiedlich sind, können Sie durch die Verwendung inhaltsbasierter Stile sicherstellen, dass Ihr Dokument für einen breiten Leserkreis verständlich ist. Dies ist insbesondere bei Browsern wichtig, die für Blinde und Behinderte entwickelt wurden, da deren Anzeigeoptionen sich grundlegend von unserem herkömmlichen Text unterscheiden oder in irgendeiner Weise sehr eingeschränkt sein können. Die aktuellen HTML- und XHTML-Standards definieren kein Format für jedes inhaltsbasierte Tag. Sie geben lediglich an, dass inhaltsbasierte Stile anders angezeigt werden müssen als normaler Text im Dokument. Der Standard erfordert nicht einmal, dass diese inhaltsbasierten Stile unterschiedlich voneinander angezeigt werden. In tatsächlichen Anwendungen werden Sie feststellen, dass viele dieser Tags eine sehr offensichtliche Beziehung zum herkömmlichen Drucken haben. Sie haben ähnliche Bedeutungen und Anzeigestile und werden in den meisten Browsern im selben Stil und in derselben Schriftart angezeigt. Beim Verwenden inhaltsbasierter HTML/XHTML-Stil-Tags müssen einige Regeln beachtet werden, da man sich sehr leicht einfach überlegt, wie der Text angezeigt werden soll, ohne unbedingt zu wissen, was der Text bedeutet. Wenn Sie beginnen, inhaltsbasierte Stile zu verwenden, sind Ihre Dokumente konsistenter und können die automatische Suche und Inhaltsbearbeitung besser unterstützen. Die Tags sind: <abbr> <Akronym> <zitieren> <Code> <dfn> <em> <kbd> <Beispiel> <stark> <var> 2. Körperlicher Stil Wenn wir über inhaltsbasierte Stil-Tags sprechen, verwenden wir häufig das Wort „Absicht“. Dies liegt daran, dass die durch das Tag übermittelte Bedeutung wichtiger ist als die Art und Weise, wie der Browser den Text anzeigt. In manchen Fällen möchten Sie jedoch möglicherweise aus rechtlichen oder urheberrechtlichen Gründen, dass Text auf eine bestimmte Art und Weise angezeigt wird (beispielsweise kursiv oder fett). In diesem Fall können Sie physische Stile für den Text verwenden. Während bei anderen Textverarbeitungssystemen der Trend dahin geht, eine präzise Kontrolle über Stil und Erscheinungsbild zu ermöglichen, sollten Sie bei der Verwendung von HTML oder XHTML die Verwendung physischer Tags außer in seltenen Fällen vermeiden. Stellen Sie dem Browser, wann immer möglich, Kontextinformationen zur Verfügung und verwenden Sie inhaltsbasierte Stile. Obwohl heutige Browser diesen Text einfach kursiv oder fett anzeigen, können zukünftige Browser und verschiedene Tools zur Dokumenterstellung diese inhaltsbasierten Stile auf sehr kreative Weise nutzen. Der aktuelle HTML/XHTML-Standard bietet insgesamt 9 physische Stile, darunter Fett, Kursiv, Monospace, Unterstrichen, Durchgestrichen, größer, kleiner, hochgestellter und tiefgestellter Text. Die Tags sind: <b> <groß> <i> <s> <klein> <Strike> <Unter> <sup> <tt> Oben sind die häufig verwendeten HTML-Format-Tags aufgeführt, die vom Editor eingeführt wurden. Ich hoffe, dass sie für alle hilfreich sind. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Lösung für das domänenübergreifende Problem der SpringBoot- und Vue-Interaktion
>>: Grafisches Tutorial zur Installation und Konfiguration von CenOS6.7 mysql 8.0.22
Artikel empfehlen
Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht
In der Vergangenheit wurde Float häufig für das L...
js Array fill() Füllmethode
Inhaltsverzeichnis 1. fill()-Syntax 2. Verwendung...
Facebooks nahezu perfekte Neugestaltung aller Internetdienste
<br />Originalquelle: http://www.a-xuan.cn/?...
JavaScript implementiert das Protokollbeispiel, in dem der Benutzer das Kontrollkästchen aktivieren muss
Legen Sie in js fest, dass der Benutzer vor der Ü...
Detaillierte Erläuterung zweier Methoden zum Festlegen globaler Variablen und Sitzungsvariablen in MySQL
1. Es gibt zwei Möglichkeiten, globale Variablen ...
Zusammenfassung der Wissenspunkte zum CSS-Frontend (unbedingt lesen)
1. Das Konzept von CSS: (Cascading Style Sheet) V...
Vergleichende Analyse von IN und Exists in MySQL-Anweisungen
Hintergrund Als ich kürzlich SQL-Anweisungen schr...
Beispiel einer Skriptmethode für die Bindung von Linux-Dualnetzwerkkarten
Bei der Bedienung und Konfiguration von Linux wir...
Ein IE-Absturzfehler
Code kopieren Der Code lautet wie folgt: <styl...
Implementieren einer benutzerdefinierten Bildlaufleiste mit nativem JS
In diesem Artikelbeispiel wird der spezifische JS...
Detaillierte Erläuterung des einzeiligen Funktionscodes des Datumstyps in MySQL
Einzeilige Funktionen vom Datumstyp in MySQL: CUR...
Detaillierter Prozessbericht der Nginx-Installation und -Konfiguration
Inhaltsverzeichnis 1 Einführung in nginx 1 Was is...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 (Win10 64 Bit)
In diesem Artikel finden Sie das grafische Tutori...
Eine kurze Analyse der Netzwerkprogrammierfunktionen von Linux
Inhaltsverzeichnis 1. Erstellen Sie einen Socket ...
Eine kurze Diskussion über vier Lösungen für Vue Single Page SEO
Inhaltsverzeichnis 1.Bereitstellung der serversei...