САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

HTML Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветHTML с CSSHTML СсылкиHTML ИзображениеHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML с JavaScriptHTML Путь к файлуHTML Мета тегиHTML Методы версткиHTML Адаптивный дизайнHTML Компьютерный кодHTML5 СемантикаHTML5 СинтаксисHTML СущностьHTML СимволыHTML ЭмодзиHTML КодировкаHTML URL КодировкаHTML в XHTML

HTML Формы

HTML ФормыHTML Элементы вводаHTML Типы вводаHTML Атрибуты вводаHTML Атрибуты форм ввода

HTML Графика

HTML5 CanvasHTML5 SVG

HTML Медиа

HTML Медиа форматHTML5 ВидеоHTML5 АудиоHTML ПлагиныHTML YouTube

HTML API

HTML5 ГеолокацияHTML5 ПеретаскиваниеHTML5 Веб хранилищеHTML5 Веб работникHTML5 SSE

HTML Примеры

HTML ПримерыHTML ТестированиеHTML УпражненияHTML СертификатHTML ЗаключениеHTML Возможности

HTML Справочники

HTML Список теговHTML АтрибутыHTML Глобальные атрибутыHTML Поддержка браузераHTML СобытияHTML ЦветаHTML ХолстHTML Аудио/ВидеоHTML Типы документовHTML Кодировка символовHTML URL КодировкаHTML Коды языкаHTTP СообщенияHTTP МетодыPX в EM конвертерКлавишные комбинации

HTML - Основные элементы



В этой главе Вы частично научитесь использовать теги в примерах.

В следующих главах Вы узнаете о них более подробно.

HTML Документ

Все HTML документы должны начинаться с объявления типа документа: <!DOCTYPE html>.

Сам HTML документ начинается с <html> и заканчивается </html>.

Видимая часть HTML документа находится между <body> и </body>.

Пример

<!DOCTYPE html>
<html>
<body>

<h1>Мой первый заголовок</h1>
<p>Мой первый параграф.</p>

</body>
</html>
Редактор кода »

Декларация <!DOCTYPE>

Декларация <!DOCTYPE> представляет тип документа и помогает браузерам корректно отображать веб страницы.

Она должна появиться только один раз, в верхней части страницы (перед HTML тегами).

Декларация <!DOCTYPE> не чувствительно к регистру.

Декларация <!DOCTYPE> для HTML5:

<!DOCTYPE html>

HTML Заголовки

HTML заголовки определены тегами <h1> до <h6>.

<h1> определяет наиболее важный заголовок. <h6> определяет наименее важный заголовок:

Пример

<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
<h4>Это заголовок 4</h4>
<h5>Это заголовок 5</h5>
<h6>Это заголовок 6</h6>
Редактор кода »

HTML Параграфы

HTML параграфы определяются тегом <p>:

Пример

<p>Это параграф.</p>
<p>Это еще один параграф.</p>
Редактор кода »

HTML Ссылки

HTML ссылки определяются тегом <a>:

Пример

<a href="https://schoolsw3.com">Это ссылка</a>
Редактор кода »

Назначение ссылки указана в атрибуте href.

Атрибуты используются для предоставления дополнительной информации об элементах HTML.

Вы узнаете больше об атрибутах в следующей главе.


HTML Изображения

HTML изображения определяются с помощью тега <img>.

Исходный файл src, альтернативный текст alt, ширина и высота указана в качестве атрибутов width и height:

Пример

<img src="schoolsw3.jpg" alt="SchoolsW3.com" width="104" height="142">
Редактор кода »

Как просмотреть исходный код HTML?

Вы когда-нибудь видели веб страницу и задавались вопросом: "Эх! Как им это удалось?"

Просмотр исходного кода HTML:

Щелкните правой кнопкой мыши на HTML странице и выберите "Просмотр источника страницы" (в Chrome) или "Просмотр источника" (в Edge), или аналогично в других браузерах. Откроется окно, содержащее исходный HTML код страницы.

Проверка HTML элемента:

Щелкните правой кнопкой мыши на элементе (или пустой области) и выберите "Проверить" или "Проверьте элемент", чтобы увидеть, из чего состоят элементы (вы увидите как HTML, так и CSS). Вы также можете редактировать HTML или CSS на лету в открывшейся панели элементы или стили.