Руководство HTML Block/Inline Elements

View more Tutorials:

Pуководства HTML

Inline/Block Elements
Div Element
Span Element

1- Inline/Block Elements

Элементы в HTML делятся на 2 вида: Block-Level elements (Блочные) и Inline elements (Строчные элементы).

Block-level Elements

Когда Block-level element (блочные элементы) отображаются на браузере, они автоматически добавляют разрывы строк (line break) впереди и сзади.

<h3>Block Element Example:</h3>
<hr/>

Tom <h1>and</h1> Jerry.

Список всех Block-level element (по умолчанию) у 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>

Примечание: Некоторые элементы по умолчанию это Block-Level element, например <div>, но вы можете его конвертировать в Inline Element если применить к нему CSS: {display:inline}.

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

Inline element (строчные элементы) постоянно появляются в строке (sentence), при отображении на браузере, он не добавляет автоматически разрывы строк (line break) впереди и сзади.

<h3>Inline Element Example:</h3>
<hr/>

Tom <b>and</b> Jerry.

Список всех Inline element (по умолчанию) у 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>

Примечание: Некоторые элементы по умолчанию это Inline element, например <span>, но вы можете его конвертировать в Block-Level если применить к нему CSS: {display:block}.

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.

Руководство CSS Display

2- Div Element

<div> является Block-level element, это один из самых широко используемых элементов, и самый важные в документе HTML, он используется для содержания других жлементов или участвует в создании лэйаута (Layout) страницы.

По умолчанию <div> создает прозрачный прямоугольный участок, но вы можете визуально увидеть его если применить к нему CSS, например: 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> является важным Inline element и используется большего всего в документе HTML. Он используется для содержания других Inline element, или текстовых содержаний. <span> создает прозрачный участок, но вы можете визуально увидеть его если применить к нему CSS, например: 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>

View more Tutorials:

Pуководства HTML