
<p>Далеко-далеко за словесными горами в <u>стране гласных</u> и согласных живут <s>рыбные тексты</s>. Вдали от всех живут они в буквенных домах на берегу <strong>Семантика</strong> большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее <a href="#">всеми необходимыми правилами</a>. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая <sub>пунктуация</sub> не имеет власти над рыбными текстами, ведущими <em>безорфографичный образ жизни</em>. Однажды одна маленькая строчка рыбного текста по имени <sup>Lorem ipsum</sup> решила выйти в большой мир грамматики.</p>

<h1>Заголовок H1</h1>

<p> [span(label info)]Информация[/span] Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку. Он собрал семь своих заглавных букв, подпоясал инициал за пояс и пустился в дорогу.</p> 

<h2>Заголовок H2</h2>

<p> Она предупредила его: «В моей стране все переписывается по несколько раз. Единственное, что от меня осталось, это приставка «и». Возвращайся ты лучше в свою безопасную страну».</p>

<h3>Заголовок H3</h3>
<p> Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.</p>

<h4>Заголовок H4</h4>
<p>Sed magna elit, laoreet ac ornare sed, tempus a velit. Donec lobortis scelerisque urna, id malesuada sem tristique scelerisque! Etiam feugiat mi a diam mollis et bibendum dui placerat!</p>

<h5>Заголовок H5</h5>
<p>Ut tempus auctor volutpat? Vestibulum molestie suscipit quam vitae sagittis. Sed vel metus eget ligula dapibus sagittis. Maecenas lacinia faucibus egestas. Curabitur eget mi magna, ac imperdiet dolor.</p>

<h6>Заголовок H6</h6>
<p>Maecenas id dui lectus. Ut ipsum leo, laoreet sit amet pulvinar quis, mattis eu justo. Donec ac leo a neque porttitor tincidunt ac id elit.</p>

<hr>

<h2>Преформатированный текст (код) PRE</h2>

<pre>
&lt;html&gt;
<br>	&lt;head&gt;
<br>	&lt;/head&gt;
<br>	&lt;body&gt;
<br>		
<br>	&lt;/body&gt;
<br>&lt;/html&gt;
</pre>


<h2>Код CODE в тексте</h2>

<p>When you call the <code>activate()</code> method on the <code>robotSnowman</code> object, the eyes glow.</p>

<hr>

<h2>Изображение в тексте IMG</h2>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra, dui sit amet fringilla venenatis. <a href="#">Vestibulum lobortis</a> semper sem aliquet rhoncus. Donec fermentum, felis quis tincidunt sodales, sem quam adipiscing nibh, nec tincidunt augue sapien.</p>

<img src="data:image/png;base64, " width="75" height="75" alt="Картинка классом left" title="Картинка классом left" class="left">


<p>Mauris et magna at libero mollis tristique quis non massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vitae ante dolor. Mauris tincidunt ultricies nunc eu mattis. Integer ornare vulputate semper? Nullam tempor placerat imperdiet. Nullam hendrerit sollicitudin sem, nec luctus lectus blandit sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet hendrerit urna. Sed lobortis lectus condimentum tellus consectetur facilisis. Nullam velit ipsum, pulvinar nec pellentesque sit amet, adipiscing ut eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas convallis, erat pharetra pulvinar bibendum; orci mi consequat quam, ut volutpat lectus ligula ut diam. </p>


<h2>Цитаты BLOCKQUOTE</h2>

<blockquote>
<p>Quisque vehicula; neque id condimentum varius, metus nisl vehicula orci, sit amet malesuada massa ipsum ut orci. Ut tincidunt congue eleifend. Proin et eros nisi, eget sollicitudin lacus. Maecenas sit amet nibh et felis volutpat vulputate ut sed nisi. Praesent vestibulum, magna in accumsan lacinia, odio dolor laoreet nibh, non cursus nisl dui non augue?</p>
<p><cite>- Duis justo quam <strong>CITE</strong></cite></p>
</blockquote>


<h2>Обычный список UL/LI</h2>
<ul>
	<li>Nulla lobortis semper libero, rutrum volutpat leo faucibus a. Fusce justo eros, porta at cursus eu, tincidunt ut magna. Nulla.</li>
	<li>Vestibulum pretium sapien eget neque bibendum at auctor justo gravida. Nam dapibus, diam eu sodales aliquet, orci lorem auctor felis.</li>
	<li>Proin ut neque ut quam vestibulum blandit. Phasellus tempus semper est, at malesuada leo suscipit.</li>
	<li>Phasellus faucibus fringilla ligula, at ultrices arcu varius quis. Aliquam sollicitudin scelerisque bibendum. Proin sed.</li>
</ul>

<h2>Обычный вложенный список UL/LI</h2>
<ul>
	<li>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
		<ul>
			<li>Nulla lobortis semper libero, rutrum volutpat leo faucibus a. Fusce justo eros, porta at cursus eu, tincidunt ut magna. Nulla.</li>
			<li>Vestibulum pretium sapien eget neque bibendum at auctor justo gravida. Nam dapibus, diam eu sodales aliquet, orci lorem auctor felis.</li>
		</ul>
	</li>

	<li>Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
		<ul>
			<li>Nulla lobortis semper libero, rutrum volutpat leo faucibus a. Fusce justo eros, porta at cursus eu, tincidunt ut magna. Nulla.</li>
			<li>Vestibulum pretium sapien eget neque bibendum at auctor justo gravida. Nam dapibus, diam eu sodales aliquet, orci lorem auctor felis.</li>
		</ul>
	</li>

	<li> Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот.
		<ul>
			<li>Nulla lobortis semper libero, rutrum volutpat leo faucibus a. Fusce justo eros, porta at cursus eu, tincidunt ut magna. Nulla.</li>
			<li>Vestibulum pretium sapien eget neque bibendum at auctor justo gravida. Nam dapibus, diam eu sodales aliquet, orci lorem auctor felis.</li>
		</ul>
	</li>
	
	<li> Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.
		<ul>
			<li>Nulla lobortis semper libero, rutrum volutpat leo faucibus a. Fusce justo eros, porta at cursus eu, tincidunt ut magna. Nulla.</li>
			<li>Vestibulum pretium sapien eget neque bibendum at auctor justo gravida. Nam dapibus, diam eu sodales aliquet, orci lorem auctor felis.</li>
		</ul>
	</li>
</ul>


<h2>Нумерованный список OL/LI</h2>
<ol>
<li>Curabitur ornare porttitor nunc, nec.</li>
<li>Vivamus nisi arcu, tempus vel.</li>
<li>In sit amet justo non.</li>
<li>Aliquam nec bibendum libero. Phasellus.</li>
</ol>

<h2>Список определений (DL/DT/DD)</h2>

<dl>
	<dt>title</dt>
	<dd>definition</dd>
	<dd>definition</dd>
	<dd>definition</dd>
		
	<dt>title</dt>
	<dd>definition</dd>
	<dd>definition</dd>
	<dd>definition</dd>
	
	<dt>title</dt>
	<dd>definition</dd>
	<dd>definition</dd>
	<dd>definition</dd>
</dl>


<h2>Таблица TABLE/TR/TH/TD</h2>

<table>
<tr>
<th>Заголовок 1 TH</th>
<th>Заголовок 2 TH</th>
<th>Заголовок 3 TH</th>
<th>Заголовок 4 TH</th>
</tr>
<tr>
<td>Ячейка 1.1</td>
<td>Ячейка 1.2</td>
<td>Ячейка 1.3</td>
<td>Ячейка 1.4</td>
</tr>
<tr>
<td>Ячейка 2.1</td>
<td>Ячейка 2.2</td>
<td>Ячейка 2.3</td>
<td>Ячейка 2.4</td>
</tr>
<tr>
<td>Ячейка 3.1</td>
<td>Ячейка 3.2</td>
<td>Ячейка 3.3</td>
<td>Ячейка 3.4</td>
</tr>
</table>


<h2>Label</h2>

<table class="zebra">
<tr>
<th>Пример</th>
<th>CSS/HTML</th>
<th>BB-код</th>
</tr>
<tr>
<td><span class="label">default</span></td>
<td>&lt;span class="label"&gt;default&lt;/span&gt;</td>
<td>&#91;span(label)&#93;default&#91;/span&#93;</td>
</tr>
<tr>
<td><span class="label success">success</span></td>
<td>&lt;span class="label success"&gt;success&lt;/span&gt;</td>
<td>&#91;span(label success)&#93;success&#91;/span&#93;</td>
</tr>
<tr>
<td><span class="label warning">warning</span></td>
<td>&lt;span class="label warning"&gt;warning&lt;/span&gt;</td>
<td>&#91;span(label warning)&#93;warning&#91;/span&#93;</td>
</tr>
<tr>
<td><span class="label important">important</span></td>
<td>&lt;span class="label important"&gt;important&lt;/span&gt;</td>
<td>&#91;span(label important)&#93;important&#91;/span&#93;</td>
</tr>
<tr>
<td><span class="label info">info</span></td>
<td>&lt;span class="label info"&gt;info&lt;/span&gt;</td>
<td>&#91;span(label info)&#93;info&#91;/span&#93;</td>
</tr>
<tr>
<td><span class="label inverse">inverse</span></td>
<td>&lt;span class="label inverse"&gt;inverse&lt;/span&gt;</td>
<td>&#91;span(label inverse)&#93;inverse&#91;/span&#93;</td>
</tr>
</table>



<h2>Message</h2>
<p>Пример использования:</p> 
<pre>
&lt;div class="message ok"&gt;текст&lt;/div&gt;
<br>
&#91;div(message ok)&#93;текст&#91;/div&#93;
</pre>

<div class="message noicon">message noicon</div>
<div class="message ok">message ok</div>
<div class="message note">message note</div>
<div class="message alert">message alert</div>
<div class="message idea">message idea</div>
<div class="message error">message error</div>
<div class="message about">message about</div>
<div class="message mail">message mail</div>
<div class="message home">message home</div>
<div class="message question">message question</div>

<h2>Message small</h2>

<p>Пример использования:</p> 
<pre>
&lt;div class="message ok small"&gt;текст&lt;/div&gt;
<br>
&#91;div(message ok small)&#93;текст&#91;/div&#93;
</pre>

<div class="message ok small">message ok small</div>
<div class="message note small">message note small</div>
<div class="message alert small">message alert small</div>
<div class="message idea small">message idea small</div>

<div class="message error small">message error small</div>
<div class="message about small">message about small</div>
<div class="message mail small">message mail small</div>
<div class="message home small">message home small</div>
<div class="message question small">message question small</div>


<h2>Табы</h2>

<div class="tabs_widget tabs_widget_000">
	<div class="tabs">
		<ul class="tabs-nav">
			<li class="elem tabs-current"><span>Один</span></li>
			<li class="elem"><span>Два</span></li>
			<li class="elem"><span>Три</span></li>
		</ul>
		<div class="clearfix"></div>
		<div class="tabs-box tabs-visible">текст первый</div>
		<div class="tabs-box">текст второй</div>
		<div class="tabs-box">текст третий</div>
	</div>
</div>

<h2>Пример формы .fform</h2>

[html]
<form class="fform" style="width: 100%">
<fieldset>
<legend>Пример формы</legend>

<p>
<span class="ffirst ftitle">Выбери:</span>
<span>
<select name="fields">
<option selected="selected">Первый</option>
<option>Второй</option>
<option>Третий</option>
</select>
</span>
</p>
<hr>
<p>
<span class="ffirst ftitle">Отметь:</span>
<label><input type="checkbox"> Первый</label>
<label><input type="checkbox"> Второй</label>
<label><input type="checkbox"> Третий</label>
</p>
<p>
<span class="ffirst"></span>
<span>Отметь и получи приз!</span>
</p>
<hr>
<p>
<span class="ffirst ftitle">Выбери:</span>
<label><input type="radio" name="switch_radio[]"> Первый</label>
<label><input type="radio" name="switch_radio[]"> Второй</label>
<label><input type="radio" name="switch_radio[]"> Третий</label>
<label><input type="radio" name="switch_radio[]"> Четвертый</label>

</p>
<hr>
<p>
<span class="ffirst ftitle ftop">Выбери:</span>

<label class="ffirst nocell"><input type="radio" name="switch_radio2[]"> Первый</label>
[br]<label class="ffirst nocell"><input type="radio" name="switch_radio2[]"> Второй</label>
[br]<label class="ffirst nocell"><input type="radio" name="switch_radio2[]"> Третий</label>
</p>

<hr>

<p>
<label class="ffirst ftitle" for="f-email">Email:</label>
<span><input type="email" placeholder="Укажите свой email" id="f-email"></span>

<span class="fempty"></span>
<span class="fbutton"><button type="button">copy</button></span>

<label class="ftitle" for="f-password">Пароль:</label>
<span><input type="password" placeholder="Ваш пароль" id="f-password"></span>
</p>
<p>
<label class="ftitle ffirst" for="f-site2">Сайт:</label>
<span><input type="url" placeholder="Адрес сайта" id="f-site2"></span>

<span class="fempty"></span>

<label class="ftitle" for="f-name">Имя:</label>
<span><input type="text" id="f-name" placeholder="Ваше имя"></span>
</p>

<p>
<label class="ftitle ffirst" for="f-site1">Cайт:</label>
<span><input type="url" id="f-site1"></span>
</p>

<p>
<label class="ffirst ftitle ftop" for="f-text1">Ваш текст:</label>
<span><textarea id="f-text1"></textarea></span>
</p>

<p>
<span class="ffirst"></span>
<span><input type="search" placeholder="Введите фразу для поиска"></span>
<span class="fbutton"><input type="submit" value="Поиск"></span>
</p>

<hr>

<p>
<span><input type="search" placeholder="Введите фразу для поиска"></span>
<span class="fsubmit"><input type="submit" value="Поиск"></span>
</p>

<hr>

<p><label>Сайт:<input type="text"></label></p>

<p><label>Имя:<input type="text"></label></p>

<p><label>Ваш текст:<textarea></textarea></label></p>

<p><label><input type="checkbox"> Согласен с правилами</label></p> 

<p><span><input type="submit" value="Отправить"> <input type="reset" value="Сброс"></span></p>
 
</fieldset>
</form>
[/html]


<h2>Примеры колонок</h2>

<div class="onerow">
    <div class="col w1-2" style="background: #eee">1-2</div>
    <div class="col w1-2" style="background: #eee">1-2</div>
</div>
[br][br]
<div class="onerow">
    <div class="col w1-3" style="background: #eee">1-3</div>
    <div class="col w2-3" style="background: #eee">2-3</div>
</div>
[br][br]
<div class="onerow">
    <div class="col w1-4" style="background: #eee">1-4</div>
    <div class="col w1-4" style="background: #eee">1-4</div>
    <div class="col w1-4" style="background: #eee">1-4</div>
    <div class="col w1-4" style="background: #eee">1-4</div>
</div>
[br][br]
<div class="onerow">
    <div class="col w1-8" style="background: #eee">1-8</div>
    <div class="col w2-8" style="background: #eee">2-8</div>
    <div class="col w1-8" style="background: #eee">1-8</div>
    <div class="col w3-8" style="background: #eee">3-8</div>
    <div class="col w1-8" style="background: #eee">1-8</div>
</div>

[br][br]
<div class="onerow">
    <div class="col w1-12" style="background: #eee">1-12</div>
    <div class="col w1-12" style="background: #eee">1-12</div>
    <div class="col w1-12" style="background: #eee">1-12</div>
    <div class="col w1-12" style="background: #eee">1-12</div>
    <div class="col w1-12" style="background: #eee">1-12</div>
    <div class="col w1-12" style="background: #eee">1-12</div>
    <div class="col w1-12" style="background: #eee">1-12</div>
    <div class="col w1-12" style="background: #eee">1-12</div>
    <div class="col w1-12" style="background: #eee">1-12</div>
    <div class="col w1-12" style="background: #eee">1-12</div>
    <div class="col w1-12" style="background: #eee">1-12</div>
    <div class="col w1-12" style="background: #eee">1-12</div>
</div>