Um eine optisch ansprechende und gut strukturierte Webseite zu erstellen, sind häufig horizontale Linien erforderlich. Diese Zeilen können dazu beitragen, verschiedene Inhaltsabschnitte zu trennen, sodass Benutzer die präsentierten Informationen leichter lesen und verstehen können. In diesem Leitfaden untersuchen wir zwei effektive Methoden zum Hinzufügen horizontaler Linien in HTML: die Verwendung von>
Tag- und CSS-Eigenschaften.
Verschiedene Ansätze zum Hinzufügen horizontaler Linien in HTML
1. Verwendung
Etikett:
Der Horizontale Regel T bei (
Sortieralgorithmen, Zusammenführungssortierung
)wird verwendet, um horizontale Linien in das HTML-Dokument einzufügen, um Abschnitte des Dokuments zu trennen. Es handelt sich um ein leeres oder ungepaartes Tag, sodass das schließende Tag nicht erforderlich ist.
Beispiel: Dieses Beispiel beschreibt die
Tag, um die horizontale Linie hinzuzufügen.
Laden Sie das YouTube-Video VLC herunterHTML
Horizontale Linie Titel>Kopf> <body> <h2>Horizontale Linie mit verschiedenen Attributensh2><hr width='100%' size='2'> <hr width='100%' size='2' color='blue' noshade> <hr width='100%;' color='red' size='5'>body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html.webp' alt="Horizontale HTML-Linie mit hr-Tag"><p>Ausgabe</p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <h3> <b> <strong>2. CSS-Eigenschaften verwenden:</strong> </b> </h3><p dir='ltr'><span>Bei diesem Ansatz verwenden wir die</span> <i> <em>Border-Stil</em> </i> <span>Eigentum</span> <i> <em> </em> </i> <span>um die horizontale Linie zu erstellen. Wir können entweder das verwenden</span> <i> <em>Rand-oben</em> </i> <span>Eigenschaft, die den Stil des oberen Rahmens oder des angibt</span> <i> <em>Rand unten</em> </i> <span>Eigenschaft, die den Stil des unteren Randes eines Elements festlegen kann. Beide Eigenschaften können zum Hinzufügen der horizontalen Linie verwendet werden.</span></p> <p dir='ltr'> <b> <strong>Beispiel:</strong> </b> <span>Dieses Beispiel beschreibt das Zeichnen der horizontalen Linie mit dem</span> <i> <em>Border-Stil</em> </i> <span>Eigentum.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html> <head> <title>Horizontale Linie mit CSS-EigenschaftenTitel><style>.horizontal_line { width: 90%; Höhe: 5px; Rand oben: 5 Pixel gepunktet schwarz; Zeilenhöhe: 80 %; } .line { border-bottom: 5px solid red; Rand oben: 5px; Breite: 90 %; } style> head> <body> <h2>Horizontale Linie mit CSS-Eigenschaftenh2><h3>gepunktete horizontale Linieh3><div>div><h3>Einfache horizontale Linieh3><div>div> body> html>></pre> </code> <p dir='ltr'> <b> <strong>Ausgabe:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/arp-commands">Windows-Befehl arp</a>
</blockquote> <img src='//techcodeview.com/img/html-questions/49/how-add-horizontal-line-html-2.webp' alt="horizontale Linie mithilfe der CSS-Beispielausgabe"><p>Ausgabe</p> <br> <br></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Kategorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/environment/">Umfeld</a> </li><li> <a href="/css-basics/">Css-Grundlagen</a> </li><li> <a href="/linux-commands/">Linux-Befehle</a> </li><li> <a href="/quotes/">Zitate</a> </li><li> <a href="/jquery-methods/">Jquery-Methoden</a> </li><li> <a href="/python-os-module-programs/">Python-Betriebssystemmodulprogramme</a> </li><li> <a href="/privacy-policy/">Datenschutzrichtlinie</a> </li><li> <a href="/permutation/">Permutation</a> </li><li> <a href="/greedy/">Gierig</a> </li><li> <a href="/cpp-algorithm-library/">Cpp-Algorithmus-Bibliothek</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Python-Pip</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Python-Pip</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/python-pip/"> <i class="fa fa-external-link"></i> Weiterlesen</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Interessante Artikel</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/what-is-page-down-key">Was ist die Bild-nach-unten-Taste?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/bash-scripting-while-loop">Bash-Skripting – While-Schleife</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sat-percentiles-score-rankings-131378">SAT-Perzentile und Punkterankings (aktualisiert 2024)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/find-out-power-without-using-pow-function-c">Finden Sie die Leistung heraus, ohne die POW-Funktion in C zu verwenden</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-loops">C – Schleifen</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Beliebte Beiträge</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-double-string">Java Double zum String</a>
</li><li><a href="/jquery-parent-method">JQuery-Elternteil</a>
</li><li><a href="/best-smile-world">schönstes Lächeln der Welt</a>
</li><li><a href="/how-read-csv-file-java">Lesen einer CSV-Datei in Java</a>
</li><li><a href="/java-convert-char-int">Java-Zeichen in Ganzzahl umwandeln</a>
</li><li><a href="/python-tkinter-button">tkinter-Taste</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Alle Rechte Vorbehalten | <a href="//sl.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Haftungsausschluss</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Über Uns</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Datenschutzrichtlinie</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>