codestory

Die Anleitung zu HTML Block/Inline Elements

  1. Inline/Block Elements
  2. Div Element
  3. Span Element

1. Inline/Block Elements

Die Elemente in HTML wird in 2 Teile geteilt: Block-Level elements und Inline elements .
Block-level Elements
Wenn die Block-level element auf den Browser anzeigen, werden sie die Zeilenumbruch (line break) vor und nach ihr automatisch einfügen.
<h3>Block Element Example:</h3>
<hr/>
Tom <h1>and</h1> Jerry.
Die Liste der Block-level element (by Default) von HTML5:
  • <address>
  • <article>
  • <aside>
  • <blockquote>
  • <details>
  • <dialog>
  • <dd>
  • <div>
  • <dl>
  • <dt>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <footer>
  • <form>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <header>
  • <hgroup>
  • <hr>
  • <li>
  • <main>
  • <nav>
  • <ol>
  • <p>
  • <pre>
  • <section>
  • <table>
  • <ul>
Achtung: Einige Elemente by Default sind Block-Level element, z.B <div>, aber Sie können sie zu Inline Element umwandeln wenn Sie CSS: {display:inline} für es anwenden
div-inline-example.html
<h3>DIV (Default):</h3>
This is a <div>DIV</div> element.
<hr/>
<h3>DIV style:{display:inline}</h3>
This is a <div style='display:inline'>DIV</div> element.
Inline Elements
Die Inline element treten normalerweise in einen Satz auf. Wenn sie auf den Browser auftreten, fügen sie die Zeilenumbruch vor und nach ihr automatisch nicht ein.
<h3>Inline Element Example:</h3>
<hr/>
Tom <b>and</b> Jerry.
Die Liste aller Inline element (by Default ) von HTML5:
  • <a>
  • <abbr>
  • <acronym>
  • <audio> (if it has visible controls)
  • <b>
  • <bdi>
  • <bdo>
  • <big>
  • <br>
  • <button>
  • <canvas>
  • <cite>
  • <code>
  • <data>
  • <datalist>
  • <del>
  • <dfn>
  • <em>
  • <embed>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <kbd>
  • <label>
  • <map>
  • <mark>
  • <meter>
  • <noscript>
  • <object>
  • <output>
  • <picture>
  • <progress>
  • <q>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <select>
  • <slot>
  • <small>
  • <span>
  • <strong>
  • <sub>
  • <sup>
  • <svg>
  • <template>
  • <textarea>
  • <time>
  • <u>
  • <tt>
  • <var>
  • <video>
  • <wbr>
Achtung: Enige Elemente by Default sind Inline element, z.B <span>, aber Sie können es zu Block-Level bei der Anwendung on CSS: {display:block} für es umwandeln.
span-block-example.html
<h3>SPAN (Default):</h3>
This is a <span>SPAN</span> element.
<hr/>
<h3>SPAN style:{display:block}</h3>
This is a <span style='display:block'>SPAN</span> element.

2. Div Element

<div> ist ein Block-level element. Es ist ein der meist benutzten Elemente und das wichtigste Element in Dokument HTML. Es wird benutzt um die anderen Element zu enthalten oder an die Ertellung des Layout einer Seite teilzunehemen.
By Default erstellt <div> einen transparenten Rechsteck. Aber Sie können ihn visuell sehen wenn Sie CSS für ihn anwenden, z.B: background, border,....
div-css-example.html
<!DOCTYPE html>
<html>
<head>
    <title>DIV Element</title>
    <meta charset="UTF-8">
</head>
<body>
<h2>DIV Css Example:</h2>
<div style="background:#eee;width:250px;padding:5px;">
   <h3>HTML Tutorials</h3>
   <ul>
      <li>Iframe</li>
      <li>Tables</li>
      <li>Lists</li>
   </ul>
</div>
<p>Others ...</p>
</body>
</html>

3. Span Element

<span> ist ein wichtiges Inline element und wird im Dokument HTML so viel benutzt. Es wird benutzt um die anderen Inline element oder die Text-Inhalt zu enthaleten.<span> erstellt einen transparenten Raum aber Sie können ihn visuell sehen wenn Sie CSS für ihn anwenden, z.B: background, border,...
span-css-example.html
<!DOCTYPE html>
<html>
<head>
    <title>SPAN Element</title>
    <meta charset="UTF-8">
</head>
<body>
<h2>Span Css Example:</h2>
<p>
  Apollo 11 was the spaceflight that landed the first humans,
  <span style="background:#eee;color:blue;padding:3px;margin:2px;">
     Americans <b>Neil Armstrong</b> and <b>Buzz Aldrin</b>,
     on the Moon on July 20, 1969, at 20:18 UTC.
  </span>
  Armstrong became the first to step onto the lunar surface
  6 hours later on July 21 at 02:56 UTC.
</p>
<p>...</p>
</body>
</html>

Neueste Artikel

Show More