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>
допускается размещать следующие элементы:
Пример:
<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>
Пример:
<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>
Пример:
<html>
<head>
<style>
h1 {color:blue;}
p {color:red;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</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>
Пример:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Обратите
внимание, что НЕ все ссылки документа должны находиться внутри элемента
<nav>. Элемент <nav> предназначен только для основного блока ссылок
навигации
<ol>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
|
|
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
|
|
Пример:
<p>Просто текст</p>
Пример:
Пример:
<strong>Текст</strong>
13 <em>
Выделяет важные фрагменты текста, отображая их курсивом.
Пример:
<em>Текст</em>
Пример:
<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>
Комментарии
Отправить комментарий