В этой главе мы рассмотрим некоторые примеры в html. Мы пройдемся по всем тегам, которые будут использоваться один за другим, чтобы вы могли присоединиться.
БАЗОВЫЙ ПРИМЕР HTML HTML ДОКУМЕНТ
Все HTML-документы всегда должны начинаться с объявления типа документа <!DOCTYPE html>
. Сам HTML-документ должен начинаться с <html>
и заканчиваться закрывающими тегами </html>
. Это означает, что это HTML-документ. Видимая часть документа HTML находится между <body>
и </body>
.
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
<!DOCTYPE>
Декларация
Объявление <!DOCTYPE>
обозначает тип документа и помогает браузерам правильно отображать веб-страницы. Его особенности включают в себя то, что он всегда должен появляться один раз в верхней части страницы (перед HTML-тегами ant). Он не чувствителен к регистру и записывается как <!DOCTYPE html>
в HTML5.
Заголовки HTML
Заголовок HTML определяется от <h1>
до <h6>
. <h1>
обычно самый большой и самый важный заголовок. <h6>
обычно является самым маленьким и наименее важным заголовком.
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6>
Абзацы HTML
Абзацы HTML определяются с помощью тега <p>
<p>This is a paragraph</p> <p>This is another paragraph</p>
Вот как это выглядит:
HTML-ССЫЛКА
HTML-ссылка обычно определяется тегом <a>
:
<a href="https://www.google.com"> This is a link </a>
Вот как это выглядит:
Назначение ссылки указывается в атрибуте href. Атрибут будет рассмотрен в следующем уроке. Он предоставляет дополнительную информацию об этом элементе HTML.
HTML-изображения
HTML-изображения определяются с помощью тега <img>
. Атрибут имеет исходный файл (src), альтернативный текст (alt), ширину и высоту.
<img src=”” alt=”” width=”164" height=”144" />
Как просмотреть исходный код HTML?
Если у вас есть веб-страница. Вы, вероятно, удивитесь, как они это делают. На веб-странице щелкните правой кнопкой мыши и выберите «Просмотреть исходный код страницы» (в Chrome).
Откроется окно, содержащее исходный HTML-код страницы. Проверка HTML-элемента Щелкните правой кнопкой мыши элемент (или пустую область) и выберите «проверить» или «проверить элемент», чтобы увидеть, из каких элементов состоят (вы увидите как HTML, так и CSS), не беспокойтесь, мы собираемся изучить CSS на другом уроке. Вы сможете редактировать коды (HTML и CSS).
HTML-таблицы
Тег <table>
определяет таблицу HTML. Каждая строка таблицы определяется тегом<tr>
. Каждый заголовок таблицы определяется тегом <th>
. Каждые данные/ячейка таблицы определяются тегом <td>
. Эти теги имеют значение по умолчанию, которое включает текст в элементе <th>
, выделенный полужирным шрифтом и центрированный. Точно так же текст в элементе <td>
является обычным и выровнен по левому краю.
<table style="width:100%"> <tr> <th>firstName</th> <th>LastName</th> <th>age</th> </tr> <tr> <td>tommay</td> <td>Okon</td> <td>24</td> </tr> <tr> <td>Jenny</td> <td>kwon</td> <td>22</td> </tr> </table>
HTML-список
HTML-список обычно передается с тегом <ul>
(неупорядоченный/маркированный список) или <ol>
(упорядоченный/нумерованный список), за которым следуют теги <li>
(элементы списка).
<ul> <li>mango</li> <li>orange</li> <li>apple</li> </ul>
HTML-кнопка
кнопка html определяется тегом <button>
<button>Click me</button>
Ресурсы
Вам могут пригодиться следующие ресурсы:
- Html-редакторы
- Все, что вам нужно знать о Html Elements
- Путь к файлу HTML, кодировка и метаданные
- Контрастный дизайн Bootstrap
- Аккордеон
- "Тревога"
- "Анимация"
- Автозаполнение
- Значки
- "Коробка"
- Хлебные крошки
- Баттон Групп
- "Кнопка"
- Панель кнопок
- "Карта"
- "Карусель"
- Флажок
- "Крах"
- "Таблица данных"
- Выбор даты
- "Падать"
- Нижний колонтитул
- Формы
- "Икона"
- Ифрейм
- "Вход"
- Входная группа
- Список групп
- Маска
- Модал
- "Выбор из нескольких вариантов"
- "Уведомление"
- Панель
- Панель
- "Трещать"
- "Прогресс"
- "Радио"
- "Рейтинг"
- "Выбирать"
- Выбрать 2
- Слайдер
- Спиннер
- Степпер
- "Выключатель"
- "Стол"
- Формы
- Навбар
- Разбивка на страницы
- Вкладка
- Боковая панель
- Выбор времени
- "Таблица данных"
- Фиксированная таблица данных
- "Стол"
- Виджеты
Первоначально опубликовано на https://www.devwares.com.