Шпаргалка по HTML
Добро пожаловать,野心勃勃 веб-разработчики! Сегодня мы окунемся в мир HTML, основу каждого веб-сайта, который вы когда-либо посещали. Как someone, кто teaches HTML уже более десяти лет, я могу сказать, что это не так пугающе, как может показаться на первый взгляд. На самом деле, я люблю думать о HTML как о кирпичиках Lego интернета - простых деталях, которые, когда их собирают вместе, могут создать что-то потрясающее!
Содержание
Before мы начнем наше путешествие, давайте быстро посмотрим, что мы будем covering:
- Основные теги
- Атрибуты body
- Текстовые теги
- Ссылки
- Форматирование
- Списки
- Графические элементы
- Формы
- Таблицы
- Атрибуты таблиц
- Атрибуты тега input HTML5
- HTML редактор и форматтер
Теперь, давайте натянем рукава и начнем строительство!
Основные теги
Каждый документ HTML начинается с нескольких необходимых тегов. Представьте их как основу вашей веб-страницы:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая веб-страница</title>
</head>
<body>
Привет, мир!
</body>
</html>Давайте разберем это:
-
<!DOCTYPE html>говорит браузеру, что это документ HTML5. -
<html>является корневым элементом страницы. -
<head>содержит метаданные о документе. -
<title>specifies заголовок для документа. -
<body>определяет тело документа, где находится вся видимый контент.
Атрибуты body
Тег <body> может иметь различные атрибуты для управления отображением контента. Вот некоторые из них:
| Атрибут | Описание |
|---|---|
| bgcolor | Устанавливает цвет фона |
| background | Устанавливает фоновое изображение |
| text | Устанавливает цвет текста |
Пример:
<body bgcolor="lightblue" text="navy">
Добро пожаловать в мой синий мир!
</body>Это создаст страницу с легким синим фоном и синим текстом. Это как покраска вашей комнаты, но для веб-сайтов!
Текстовые теги
HTML предоставляет несколько тегов для форматирования текста. Вот некоторые из самых распространенных:
| Тег | Описание |
|---|---|
<h1> до <h6>
|
Заголовки (h1 самый большой, h6 самый маленький) |
<p> |
Абзац |
<br> |
Разрыв строки |
<strong> |
Жирный текст |
<em> |
Курсивный текст |
Пример:
<h1>Добро пожаловать на мой веб-сайт</h1>
<p>Это <strong>жирное</strong> заявление.</p>
<p>Это <em>подчеркнутое</em> утверждение.</p>Ссылки
Ссылки делают сеть, ну, сетью! Вот как их создавать:
<a href="https://www.example.com">Нажми меня!</a>Атрибут href specifies URL страницы, на которую ссылается ссылка. Ты также можешь ссылаться на конкретные части страницы, используя ID:
<h2 id="section2">Раздел 2</h2>
<a href="#section2">Перейти к Разделу 2</a>Форматирование
HTML предлагает различные способы форматирования текста, кроме просто жирного и курсивного. Вот еще несколько:
| Тег | Описание |
|---|---|
<sup> |
Текст superscript |
<sub> |
Текст subscript |
<pre> |
Предварительно отформатированный текст |
<code> |
Фрагмент кода |
Пример:
<p>H<sub>2</sub>O это вода.</p>
<p>2<sup>3</sup> равно 8.</p>
<pre>
Этот текст
отформатирован заранее.
</pre>
<p>Вот بعض <code>внутренний код</code>.</p>Списки
Списки помогают organize информацию. В HTML есть три типа:
- Неупорядоченные списки (
<ul>) - Упорядоченные списки (
<ol>) - Списки определений (
<dl>)
Пример:
<ul>
<li>Яблоки</li>
<li>Бананы</li>
<li>Вишни</li>
</ul>
<ol>
<li>Первый шаг</li>
<li>Второй шаг</li>
<li>Третий шаг</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>Графические элементы
Изображения могут оживить ваш веб-сайт. Вот как их добавлять:
<img src="cat.jpg" alt="К cute cat" width="300" height="200">Атрибут src specifies файл изображения, alt предоставляет альтернативный текст для экранных readers или если изображение не загружается, и width и height устанавливают尺寸.
Формы
Формы позволяют пользователям вводить данные. Вот пример простого формуляра:
<form action="/submit-form" method="post">
<label for="name">Имя:</label>
<input type="text" id="name" name="name" required>
<label for="email">Электронная почта:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Отправить">
</form>Это создает форму с полями имени и электронной почты, а также кнопкой отправки.
Таблицы
Таблицы используются для отображения данных в строках и столбцах:
<table border="1">
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
</tr>
<tr>
<td>Строка 1, ячейка 1</td>
<td>Строка 1, ячейка 2</td>
</tr>
<tr>
<td>Строка 2, ячейка 1</td>
<td>Строка 2, ячейка 2</td>
</tr>
</table>Атрибуты таблиц
Таблицы можно настроить с помощью различных атрибутов:
| Атрибут | Описание |
|---|---|
| border | Устанавливает ширину границы |
| cellpadding | Устанавливает пространство между содержимым ячейки и границами |
| cellspacing | Устанавливает пространство между ячейками |
| width | Устанавливает ширину таблицы |
Атрибуты тега input HTML5
HTML5 introduced новые типы и атрибуты ввода:
| Тип/Атрибут | Описание |
|---|---|
| type="email" | Для адресов электронной почты |
| type="date" | Для полей ввода даты |
| type="number" | Для числового ввода |
| placeholder | Подсказка текста в поле ввода |
| required | Делает поле обязательным |
Пример:
<input type="email" placeholder="Введите ваш адрес электронной почты" required>
<input type="date" name="birthday">
<input type="number" min="1" max="100">HTML редактор и форматтер
Хотя вы можете писать HTML в любом текстовом редакторе, использование dedicated HTML редактора может упростить вашу жизнь. Некоторые популярные варианты включают:
- Visual Studio Code
- Sublime Text
- Atom
Эти редакторы предлагают функции, такие как подсветка синтаксиса и автоматическое completion, которые могут сэкономить вам много времени и головной боли!
Заключение
И вот оно,folks! Эта шпаргалка по HTML охватывает основы, необходимые для начала создания своих веб-страниц. Помните, что HTML - это только начало. По мере вашего прогресса, вы захотите learn CSS для стилизации и JavaScript для интерактивности.
Изучение HTML похоже на изучение нового языка - это требует практики. Не бойтесь экспериментировать и делать ошибки. Так мы все учимся! И кто знает? Может быть, следующая большая веб-страница будет построена вами!
Счастливого кодирования, и пусть ваши теги всегда будут правильно закрыты!
Credits: Image by storyset