HTML-теги

-
Весь текст, заключённый между начальным и конечным тегом, включая и сами эти теги, называется элементом. Сам же текст между тегами — содержанием элемента. Содержание элемента может включать в себя любой текст, в том числе и другие элементы.

HTML - теги (tag — именованная метка) - основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

<!DOCTYPE html>
<html>
<head>
<meta сharset="UTF-8">
<title>Document</title>
</head>
<body>
    Текст документа......
</body>
</html>

1. <html> Является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>
Пример:
<html>
    Текст документа......
</html>

2. <head> Внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем.
Пример:
<head>
Текст документа......
</head>

Внутри контейнера <head> допускается размещать следующие элементы:
2.1 <base> Базовый url-адрес, относительно которого вычисляются относительные адреса.
Пример:
<head>
<base href="/example/images/"> - Результат: /example/images/img.jpg (.html)
<base href="http://blogger.com/"> - Результат: http://blogger.com/example/images/img.jpg (.html)
<base href="http://blogger.com/content" target="_blank"> - Результат: открывает ссылку в новом окне
<base target="_blank">
</head>

_blank - открывает ссылку в новом окне или вкладке;
_self - открывает ссылку в текущем окне или вкладке
_parent - открывает ссылку в родительском контексте
_top - открывает ссылку в контексте верхнего уровня.

2.2 <basefont> - Предназначен для задания шрифта, размера и цвета текста по умолчанию. Допускается использование тега в контейнере <head> или <body>

2.3 <bgsound> - Определяет музыкальный файл, который будет проигрываться на веб-странице при ее открытии. Этот тег должен размещаться только в контейнере <head>

2.4 <link> Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.
Пример:
<head>
<link rel="stylesheet" href="style.css">
<link rel="shortcuticon" href="/images/favicon.png" type="image/png">
<link rel="shortcuticon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16">
</head>

2.5 <meta> Определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем.
Пример:
<head>
<meta charset="UTF-8"> - Указывает кодировку документа.
<meta name="description" content="Free Web tutorials"> - Определение описания вашей веб-страницы
<meta name="keywords" content="HTML,CSS,XML,JavaScript"> - Определение ключевых слов для поисковых систем
<meta name="author" content="Сергей Викторович Ч."> - Определите автора страницы
</head>

2.6 <script> Предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Может располагаться в заголовке или теле HTML-документа в неограниченном количестве.
Пример:
<head>
<script>
document.getElementById("demo").innerHTML = "Привет JavaScript!";
</script>
</head>
<body>
<script>
var hello = 'Привет';
document.write(hello);
</script>
</body>

2.7 <style> Применяется для определения стилей элементов веб-страницы.
Пример:
<html>
<head>
<style>
h1 {color:blue;}
p {color:red;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>

2.8 <title> Определяет заголовок HTML документа.
Пример:
<head>
<title>HTML-теги</title>
</head>

3 <body> Предназначен для хранения содержания веб-страницы (контента).
Пример:
<body>
    Текст документа......
</body>

4 <section> Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.

5 <article> Задает содержание сайта вроде новости, статьи, записи блога, форума или др. Тег <article> указывает независимый, автономный контент. Статья должна иметь смысл сама по себе, и ее следует распространять независимо от остальной части сайта.
Потенциальные источники для элемента <article>:
  • Сообщение форума
  • Сообщение блога
  • Новости истории
  • Комментарий

6 <div> Является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.
Пример:
<div style="background-color:lightblue">
<h3>Заголовок</h3>
<p>Это параграф</p>
</div>

7 <h1> HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка.
Пример:
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

8 <nav> задает навигацию по сайту.
Пример:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Обратите внимание, что НЕ все ссылки документа должны находиться внутри элемента <nav>. Элемент <nav> предназначен только для основного блока ссылок навигации

9 <ol> <ul> <li>

<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
  1. Кофе
  2. Чай
  3. Молоко
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
  • Кофе
  • Чай
  • Молоко

10 <p> Определяет текстовый абзац.
Пример:
<p>Просто текст</p>

11 <a> Является одним из важных элементов HTML и предназначен для создания ссылок.
Пример:
<a href="https://panama-html.blogspot.com">Panama HTML</a> // Результат: Panama HTML

12 <strong> Предназначен для акцентирования текста, выделяет полужирным.
Пример:
<strong>Текст</strong>

13 <em> Выделяет важные фрагменты текста, отображая их курсивом.
Пример:
<em>Текст</em>

14 <mark> Выделяет фрагменты текста, помечая их желтым фоном
Пример:
<mark>Текст</mark>

15 <img> Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
Пример:
<body>
<p><a href="https://panama-html.blogspot.com"><img src="images/home.png" alt="Ссылка на главную"></a></p>
<p><img src="URL" alt="Описание изображения"></p>
 </body>

16 <video> Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице.
Пример:
<video width="720" height="530" id="video" title="Заголовок" poster="video/duel.jpg" controls="controls" muted="muted" autoplay="autoplay" loop="loop" >
<source src="video.mp4" type="video/mp4">
<source src="Альтернативный_источник.mp4" type="video/mp4">
<source src="альтернативный_источник2.mp4" type="video/mp4">
</video>

17 <audio> Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице.
Пример:
<audio src="URL"></audio>
<audio>
<source src="URL">
</audio>

18 <form> Устанавливает форму на веб-странице.
Пример:
<form action="?number" method="post" title="ФИО">
<p>Имя: <input type="text" name="name" placeholder=" Имя"/></p>
<p>Параметр 1: <input type="text" name="param1" placeholder="Фамилия"/></p>
<p>Параметр 2: <input type="text" name="param2" placeholder="Отчество"></p>
<p><input type="submit" /></p>
</form>

19 <aside> Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации.
Пример:
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

20 <button> Создает на веб-странице кнопки.
Пример:
<button type="button">Кнопка</button>

Полезные ссылки: w3schools.com, htmlbook.ru, html5book.ru

Комментарии

Отправить комментарий