Данный сайт содержит основные элементы HTML и стили CSS.
Если ваш сайт не отображается должным образом, всегда можно сравнить код с примерами ниже

Основные html элементы

<h1>Купи слона</h1>
<h2>Купи слона</h2>
<h3>Купи слона</h3>
<h4>Купи слона</h4>
<h5>Купи слона</h5>
<h6>Купи слона</h6>

Существует 6 уровней заголовков, где h1 - имеет наибольшую важность, а h6 - наименьшую.

Купи слона

Купи слона

Купи слона

Купи слона

Купи слона
Купи слона
<p>Слоны - самые гигантские сухопутные животные на Земле. Средняя масса их достигает пяти тонн, а длина туловища — 6-7 метров.</p>
<p>Слоны обычно общаются при помощи инфразвука, поэтому долгое время слоновий язык оставался неразгаданным.</p>

При отображении p, браузер автоматически добавляет до и после него отступы, отделяя его от других элементов. Используется для больших блоков текста.

Слоны - самые гигантские сухопутные животные на Земле. Средняя масса их достигает пяти тонн, а длина туловища — 6-7 метров.

Слоны обычно общаются при помощи инфразвука, поэтому долгое время слоновий язык оставался неразгаданным.

<ul>
 <li>Эмоциональная поддержка</li>
 <li>Физическая помощь</li>
 <li>Престижно</li>
</ul> Наиболее популярны следующие виды списков:
  • Маркированный - используется контейнер ul
  • Нумерованный - используется контейнер ol
  • Эмоциональная поддержка
  • Физическая помощь
  • Престижно
<img src="monkey.png" alt="The chimpanzee"> Обязательны следующие атрибуты:
  • src - путь к изображению.
  • alt - позволяет получить текстовую информацию о рисунке при отсутствии загрузки изображения.
Monkey is on the tree
<a href="https://ru.wikipedia.org/">Статья в Википедии</a> Атрибуты:
  • href - адрес, на который следует перейти.
  • target="_blank" - загружает страницу в новой вкладке браузера.
Статья в Википедии
<table>
 <tr>
  <th>Вид</th>
  <th>Вес</th>
 </tr>
 <tr>
  <td>Африканский слон</td>
  <td>6000 кг</td>
 </tr>
 <tr>
  <td>Индийский слон</td>
  <td>5000 кг</td>
 </tr>
</table> Элементы таблицы:
  • table - контейнер для элементов таблицы.
  • tr - отображает строки таблицы.
  • td - ячейка таблицы для внесения данных.
  • th - тот же td, используется для "шапки" таблицы.
Вид Вес
Африканский слон 6000 кг
Индийский слон 5000 кг

* чтобы у таблицы появилась граница, нужно в сss для th и td добавить: border: 1px solid black;

<form>
 <input type="text" placeholder="Username">
 <input type="password" placeholder="Password">
 <textarea placeholder="Comment"></textarea>
 <button>Send</button>
</form> Элементы и атрибуты формы:
  • form - контейнер для элементов формы.
  • input - ключевой элемент формы. Меняет свой вид благодаря атрибуту type:
    • text - определяет однострочное текстовое поле.
    • password - определяет поле для ввода пароля (замаскированные символы).
    • radio - переключатели для выбора одного варианта.
    • checkbox - флажки, которые могут быть либо установлены, либо сняты.
  • textarea - определяет многострочное текстовое поле.
  • button - кнопка для отправки формы.
  • placeholder - подсказка для ввода значений.

* чтобы каждая группа формы начиналась с новой строки c отступом, нужно в сss для input и textarea добавить: display: block; margin-bottom: 10px;