B тег: Справочник по HTML | htmlbook.ru

---

28.11.2020 Разное

---

Тег | HTML справочник

basicweb.ru

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Функции
  • Правила
  • Flexbox генератор
  • Grid генератор
  • Учебник LESS
• JavaScript
  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math
  • Объект Number
  • Объект Object
  • Объект RegExp
  • Объект Promise
  • Объект String
• jQuery
  • Селекторы
  • События
  • Методы DOM
  • Перемещения
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Callbacks
  • Объект Deferred

HTML

• HTML учебник

Теги по категориям | справочник HTML

basicweb.ru

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Функции
  • Правила
  • Flexbox генератор
  • Grid генератор
  • Учебник LESS
• JavaScript
  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math
  • Объект Number
  • Объект Object
  • Объект RegExp
  • Объект Promise
  • Объект String
• jQuery
  • Селекторы
  • События
  • Методы DOM
  • Перемещения
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Callbacks
  • Объект Deferred

HTML

• HTML учебник

Тег | HTML справочник

basicweb.ru

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Функции
  • Правила
  • Flexbox генератор
  • Grid генератор
  • Учебник LESS
• JavaScript
  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math
  • Объект Number
  • Объект Object
  • Объект RegExp
  • Объект Promise
  • Объект String
• jQuery
  • Селекторы
  • События
  • Методы DOM
  • Перемещения
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Callbacks
  • Объект Deferred

HTML

• HTML учебник

Блочные и строчные html теги

Все HTML элементы делятся на две группы:

• блочные (block)
• строчные (inline)

Блочные элементы представляют собой большие строительные блоки вашей веб-страницы. При отображении браузер автоматически добавляет разрыв строки до и после блочного элемента, при этом он занимает всю доступную ширину (по умолчанию отображается на веб-странице в виде прямоугольника), а высота блочного элемента вычисляется браузером автоматически, исходя из объема его содержимого. Текст в блочных элементах по умолчанию выравнивается по левому краю.

Обычно блочные элементы используются, чтобы разделить содержимое веб-страницы на логические блоки (например: верхний колонтитул (шапка сайта), меню, блок с контентом, нижний колонтитул (footer) и др.). Блочные элементы нельзя вкладывать в строчные, исключением являются только ссылки и ячейки таблиц, внутри которых по стандарту HTML5 могут быть расположены блочные элементы.

Строчные элементы используются для разметки частей содержимого элементов. Ширина строчного элемента равна объему содержимого. В отличии от блочных элементов браузер не добавляет разрыв строки до и после строчного элемента, поэтому, если несколько строчных элементов идут подряд друг за другом, они располагаются на одной строке и переносятся на другую строку при необходимости. В большинстве случаев внутрь строчных элементов допустимо помещать другие строчные элементы, вставлять блочные элементы внутрь строчных запрещено.

Строчные теги

Тег	Краткое описание
<a>	Создает гиперссылку.
<abbr>	Определяет текст как аббревиатуру.
<audio>	Определяет звуковое содержимое.
<b>	Выделяет текст жирным шрифтом.
<bdo>	Определяет направление отображения текста.
<button>	Создает кнопку.
<canvas>	Определяет область для рисования графики.
<cite>	Определяет заголовок для работы — преобразует текст в курсивный.
<code>	Определяет кусок программного кода — преобразует текст в моноширинный.
<del>	Определяет текст, который был удален из документа — отображается перечеркнутым текстом.
<dfn>	Выделяет определения термина — преобразует шрифт в наклонный.
<em>	Определяет выделенный текст — преобразует текст в курсивный.
<i>	Преобразует текст в курсивный.
<iframe>	Определяет встроенный frame.
<img>	Определяет изображение.
<input>	Создаeт поле для ввода данных.
<ins>	Определяет текст, который был добавлен в документ — отображает текст подчеркнутым.
<kbd>	Определяет текст вводимый с клавиатуры — преобразует текст в моноширинный.
<mark>	Определяет важную часть текста.
<meter>	Определяет скалярное измерение в пределах известного диапазона.
<q>	Определяет короткую цитату.
<rp>	Определяет, что показывать браузеру, который не поддерживает тег <ruby>.
<rt>	Добавляет аннотацию сверху или снизу от символов, заключенных в элементе <ruby>.
<s>	Определяет текст, который больше не является правильным — отображает текст перечеркнутым.
<samp>	Определяет текст, который является результатом вывода компьютерной программы.
<small>	Определяет текст маленького размера.
<select>	Создает выпадающий список.
<span>	Определяет строчный элемент документа.
<strong>	Определяет важный текст — преобразует шрифт в полужирный.
<sub>	Определяет текст в нижнем индексе.
<sup>	Определяет текст в верхнем индексе.
<td>	Создает ячейку таблицы.
<textarea>	Создает многострочное текстовое поле.
<th>	Создает заголовочную ячейку в таблице.
<var>	Определяет переменную — выделяет текст курсивом.
<video>	Добавляет на страницу видео файл.

Блочные теги

Тег	Краткое описание
<address>	Определяет контактную информацию автора документа/статьи.
<artical>	Определяет текст как статью, новость и др.
<aside>	Определяет контент в стороне от содержимого страницы.
<blockquote>	Выделяет текст с другого источника, как блочную цитату.
<dd>	Cоздает описание элемента в списке определений.
<div>	Определяет раздел документа.
<dl>	Создает список определений.
<dt>	Oпределяет термин в списке определений.
<figure>	Группирует элементы страницы.
<footer>	Нижняя часть документа.
<form>	Определяет HTML форму.
<h2> — <h6>	Определяют HTML заголовки.
<header>	Задает «шапку» сайта или раздела.
<hr>	Создает горизонтальную линию.
<li>	Определяет элемент списка.
<nav>	Определяет группу ссылок для навигации.
<ol>	Создает нумерованный(упорядоченный) список.
<p>	Определяет абзац.
<pre>	Оставляет содержимое в первоначальном виде.
<ruby>	Определяет небольшую аннотацию (для типографии Восточной Азии).
<section>	Определяет разделы документа.
<table>	Создает таблицу.
<tr>	Создает строку в таблице.
<ul>	Определяет маркированный(неупорядоченный) список.

Примечание: для переопределения типа элемента с блочного на строчный или со строчного на блочный используется CSS свойство display.

Знакомство с тегами.

Урок 3.

Прежде чем разобраться в структуре созданной нами страницы, нужно понимать, что такое теги. Теги являются основной составляющей html.

С помощью тегов мы можем добавить на нашу страницу различные объекты (текст, таблицы, картинки, ссылки). Так же с помощью тегов мы можем влиять на внешний вид этих объектов (цвет, размер). В созданной нами странице написано «Здравствуйте! Это моя первая веб-страница!», данный текст написан без использования тегов. С помощью определенных тегов, мы можем сделать так, чтобы эта надпись выводилась браузером на экран, например курсивом, либо жирным шрифтом.

Этот урок один из самых важных. Я рекомендую отнестись к нему серьезно. Если Вы прочитаете первую половину урока и что-то не поймете — не огорчайтесь, приступите к выполнению практической части, она, как правило помогает разобраться во всех вопросах.

Правила написания тегов.

Теги всегда пишутся в треугольных скобках. Сначала идет открывающийся тег, он состоит из треугольных скобок и названия самого тега. Внутри тега находиться какой-либо контент (текст). Далее тег нужно закрыть. Закрывающийся тег выглядит так же как открывающийся, но перед названием тега ставиться слэш.
Пример написания тега:

Бывают теги которые не нужно закрывать, для их работы нужно только открыть тег. Таких тегов очень мало, о них мы поговорим позже. Практически все теги необходимо закрывать, если не закрыть тег, который по своим правилам требует закрытия, то это будет грубейшая ошибка. Один не закрытый тег может сделать так, что вся ваша html страница будет отображаться браузером некорректно.

Правило закрытия тегов.

Часто бывает, что внутри тега, помимо текста располагаются еще другие теги. В этом случае теги закрываются в зеркальном порядке, то есть первым будет закрыт тот тег, который был открыт последним.
Пример правильного закрытия тегов:

Параметры тегов.

С помощью параметров (атрибутов) тега мы можем задать нужный нам цвет или размер текста, находящегося внутри этого тега. Значение параметра пишется в кавычках.
Пример написания тега с параметром (атрибутом):

Параметров у тега может быть несколько. Например цвет и размер. В этом случае параметры указываются через пробел.
Пример написания тега с несколькими параметрами:

Применим знания на практике.

Нажимаем правой кнопкой мыши на созданный нами файл и выбираем «Edit with Notepad++» (открыть с помощью Notepad++).
Открыв файл мы видим уже знакомый нам html код, который мы вставляли ранее:

В этом уроке мы будем акцентировать внимание на строке с текстом «Здравствуйте! Это моя первая веб-страница!». Пока что не обращайте внимание на другие строки, это структура html страницы, ей будет уделен следующий урок.

Текст «Здравствуйте! Это моя первая веб-страница!» написан без использования тегов и параметров (атрибутов), соответственно при запуске файла через браузер, данный текст имеет стандартный размер и цвет.
Теперь сверните Notepad++ и давайте параллельно откроем наш файл в браузере. Сейчас наша страница выглядит так:

Первый тег, который мы изучим на практике — это тег &ltb&gt. Данный тег служит для того, чтобы сделать текст жирным. Тег &ltb&gt требует закрытия, по этому правильное применение будет выглядить так:

Теперь давайте вернемся в Notepad++ и добавим тег &ltb&gt в наш html код. Мы сделаем нашу надпись «Здравствуйте! Это моя первая веб-страница!» жирной. Для этого мы заключаем данный текст в тег &ltb&gt.
Теперь наш код выглядит так:

* Все html коды которые я размещаю — нельзя скопировать, это сделано специально для того, чтобы Вы прописывали все теги в ручную. Это полезно.

Итак, тег &ltb&gt успешно добавлен в код, и теперь, чтобы изменения вступили в силу, нам нужно их сохранить. Для этого нажимаем в верхнем меню кнопку «Файл», далее нажимаем «Сохранить». Так же процедуру сохранения можно делать с помощью горячих клавиш (Ctrl + S), это удобней.

Теперь заходим в браузер, в котором открыта наша страница. Мы внесли изменения в код и сохранили их, но браузер этого еще не знает. Чтобы сообщить браузеру об изменениях, нужно обновить страницу, для этого нажимаем на клавиатуре «F5».

Сейчас Вы должны увидеть результат применения тега &ltb&gt, надпись должна стать жирной, как на рисунке:

Теперь давайте удалим из нашего кода тег &ltb&gt и пропишем вместо него тег &ltfont&gt. Данный тег так же необходимо закрыть. Теперь наш код выглядит так:

Сохраните изменения в notepad (нажатием Ctrl + S), зайдите в браузер, обновите страницу (нажав F5). Сейчас мы видим, что надпись отображается обычно, так же как до использования тегов. Это значит, что тег &ltfont&gt ничего не поменял. Это все потому, что данный тег не работает без параметров (атрибутов). Тег &ltfont&gt лишь указывает браузеру на то, что внутри него (между &ltfont&gt и &lt/font&gt) находится текст. Для этого тега мы можем задать параметры color (цвет) и size (размер текста).

Сейчас давайте сделаем нашу надпись зеленой. Для этого мы зададим тегу &ltfont&gt параметр color (цвет) и дадим ему значение green (зеленый). Теперь наш код выглядит так:

После добавления параметра и значения в наш код html, Вы заметили, что они отличаются по цвету от всех других символов и тегов на странице. Это сделано специально для того, чтобы html код легче нам читался. Все теги обозначаются синим цветом, все атрибуты — красным, а значения атрибутов — фиолетовым.

Сейчас сохраняем изменения в Notepad++ (нажатием Ctrl + S), заходим в браузер и обновляем страницу (нажав F5). Сейчас наша надпись должна стать зеленой как на рисунке:

Теперь, чтобы закрепить материал, давайте добавим к тегу &ltfont&gt еще один атрибут size. Данный параметр отвечает за размер текста. Он может иметь значение от 1 до 7, мы будем использовать значение 6, так как это мое любимое число! Мы сейчас добавляем второй параметр для тега, важно не забыть, что если параметров несколько, то между ними пробел! После добавления параметра size наш код выглядит следующим образом:

Теперь, как обычно, сохраняем изменения в файле (Ctrl + S), заходим в браузер и обновляем страницу (F5). Сейчас наш текст должен стать большим, как на рисунке:

Если все получилось, то поздравляю, Вы освоили основной принцип работы тегов и их атрибутов. Это уже большой шаг!

Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]

ВАДИМ, ТЫ ОЧЕНЬ СИЛЬНО МНЕ ПОМОГ, Я ХОЧУ ОТБЛАГОДАРИТЬ ТЕБЯ

Теги по категории | Справочник HTML

= новый в HTML5.

Тег	Описание
<!DOCTYPE>	Определяет тип документа
<html>	Определяет документ в HTML
<head>	Определяет информацию о документе
<title>	Определяет название для документа
<body>	Определяет тело документа
<h2> до <h6>	Определяет заголовки
<p>	Определяет параграф
<br>	Вставляет разрыв строки
<hr>	Определяет тематическое изменение в содержании
<!—…—>	Определяет комментарий
Тег	Описание
<acronym>	Не поддерживается в HTML5. Лучше используйте <abbr>. Определяет акроним
<abbr>	Определяет аббревиатуру или акроним
<address>	Определяет контактную информацию для автора/владельца из документа/статьи
<b>	Определяет полужирный текст
<bdi>	Изолирует часть текста, которая может быть отформатирована в другом направлении, от другого текста за его пределами
<bdo>	Переопределяет текущее направление текста
<big>	Не поддерживается в HTML5. Лучше используйте CSS. Определяет большой текст
<blockquote>	Определяет раздел, заключенный в кавычки из другого источника
<center>	Не поддерживается в HTML5. Лучше используйте CSS. Определяет центрированный текст
<cite>	Определяет название из работы
<code>	Определяет часть из компьютерного кода
<del>	Определяет текст, который был удален из документа
<dfn>	Представляет определяющий экземпляр термина
<em>	Определяет подчеркнутый текст
<font>	Не поддерживается в HTML5. Лучше используйте CSS. Определяет шрифт, цвет и размер текста
<i>	Определяет часть текста альтернативным голосом или настроением
<ins>	Определяет текст, вставленный в документ
<kbd>	Определяет ввод с клавиатуры
<mark>	Определяет выделенный / выделенный текст
<meter>	Определяет скалярное измерение в известном диапазоне (датчик)
<pre>	Определяет форматированный текст
<progress>	Представляет ход выполнения задачи
<q>	Определяет короткую цитату
<rp>	Определяет, что показывать в браузерах, которые не поддерживают аннотации ruby
<rt>	Определяет объяснение/произношение символов (для Восточно-Азиатской типографии)
<ruby>	Определяет аннотацию ruby (для Восточно-Азиатской типографии)
<s>	Определяет текст, который больше не является правильным
<samp>	Определяет пример вывода из компьютерной программы
<small>	Определяет меньший текст
<strike>	Не поддерживается в HTML5. Лучше используйте <del> или <s>. Определяет зачеркнутый текст
<strong>	Определяет строгий текст
<sub>	Определяет подстрочный текст
<sup>	Определяет надстрочный текст
<template>	Определяет шаблон
<time>	Определяет дату/время
<tt>	Не поддерживается в HTML5. Лучше используйте CSS. Определяет текст телетайпа
<u>	Определяет текст, который должен стилистически отличаться от обычного текста
<var>	Определяет переменную
<wbr>	Определяет возможный разрыв строки
Тег	Описание
<form>	Определяет форму HTML для пользовательского ввода
<input>	Определяет ввод управления
<textarea>	Определяет многострочный ввод (текстовое поле)
<button>	Определяет кликабельную кнопку
<select>	Определяет раскрывающийся список
<optgroup>	Определяет группу связанных параметров в раскрывающемся списке
<option>	Определяет параметр в раскрывающемся списке
<label>	Определяет метку для элемента <input>
<fieldset>	Группирует связанные элементы в форме
<legend>	Определяет заголовок для элемента <fieldset>
<datalist>	Задает список предопределенных параметров для элементов управления вводом
<output>	Определяет результат вычисления
Тег	Описание
<frame>	Не поддерживается в HTML5. Определяет окно (фрейм) в наборе кадров
<frameset>	Не поддерживается в HTML5. Определяет набор фреймов
<noframes>	Не поддерживается в HTML5. Определяет альтернативное содержимое для пользователей, не поддерживающих фреймы
<iframe>	Определяет встроенный фрейм
Тег	Описание
<img>	Определяет изображение
<map>	Определяет клиентскую карту изображений
<area>	Определяет область внутри изображения карты
<canvas>	Используется для рисования графики по ходу, с помощью скриптов (обычно код JavaScript )
<figcaption>	Определяет заголовок для элемента <figure>
<figure>	Задает автономное содержимое
<picture>	Определяет контейнер для нескольких ресурсов изображений
<svg>	Определяет контейнер для графики SVG
Тег	Описание
<audio>	Определяет звук контента
<source>	Определяет несколько ресурсов мультимедиа для элементов медиа (<video>, <audio> и <picture>)
<track>	Определяет текстовые дорожки для элементов медиа (<video> и <audio>)
<video>	Определяет видео или фильм
Тег	Описание
<a>	Определяет гиперссылку
<link>	Определяет связь между документом и внешним ресурсом (наиболее часто используемым для связи с таблицами стилей)
<nav>	Определяет навигацию ссылок
Тег	Описание
<ul>	Определяет неупорядоченный список
<ol>	Определяет упорядоченный список
<li>	Определяет элемент списка
<dir>	Не поддерживается в HTML5. Лучше используйте <ul>. Определяет каталог списка
<dl>	Определяет описание списка
<dt>	Определяет термин/имя в списке описания
<dd>	Определяет описание термина/имени в списке описания
<menu>	Определяет список/меню команд
<menuitem>	Определяет команду/меню, которые пользователь может вызвать из всплывающего меню
Тег	Описание
<table>	Определяет таблицу
<caption>	Определяет заголовок в таблицы
<th>	Определяет заголовк ячейки в таблице
<tr>	Определяет строку в таблице
<td>	Определяет ячейку в таблице
<thead>	Группирует содержимое заголовка в таблице
<tbody>	Группирует содержимое тела в таблице
<tfoot>	Группирует содержание нижнего колонтитула в таблице
<col>	Задает свойства столбца для каждого столбца в элементе <colgroup>
<colgroup>	Задает группу из одного или нескольких столбцов в таблице для форматирования
Тег	Описание
<style>	Определяет информацию о стиле документа
<div>	Определяет контейнер в документе
<span>	Определяет промежуток в документе
<header>	Определяет заголовок документа или раздела
<footer>	Определяет нижний колонтитул для документа или раздела
<main>	Определяет основное содержание документа
<section>	Определяет раздел в документе
<article>	Определение статьи
<aside>	Определяет содержимое из содержимого страницы
<details>	Определяет дополнительные сведения, которые пользователь может просмотреть или скрыть
<dialog>	Определяет диалоговое окно или окно
<summary>	Определяет видимый заголовок элемента <details>
<data>	Связывает данный контент с машиночитаемым переводом
Тег	Описание
<head>	Определяет информацию о документе
<meta>	Определяет метаданные о документе HTML
<base>	Задает базовый URL/цель для всех относительных URL адресов в документе
<basefont>	Не поддерживается в HTML5. Лучше используйте CSS. Задает цвет, размер и шрифт по умолчанию для всего текста в документе
Тег	Описание
<script>	Определяет клиентский сценарий
<noscript>	Определяет альтернативное содержимое для пользователей, не поддерживающих клиентские сценарии
<applet>	Не поддерживается в HTML5. Лучше используйте <embed> или <object>. Определяет встроенный апплет
<embed>	Определяет контейнер для внешнего (не-HTML) приложения
<object>	Определяет внедренный объект
<param>	Определяет параметр для объекта

HTML b Тег

Пример

Выделите текст жирным шрифтом (не отмечая его как важный):

Это обычный текст — жирный текст .

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

---

Определение и использование

Тег определяет полужирный текст без особой важности.

---

Советы и примечания

Примечание: Согласно спецификации HTML5, тег должен использоваться как ПОСЛЕДНИЙ вариант, когда нет более подходящего тега.В В спецификации указано, что заголовки должны быть обозначены

—

, выделенный текст должен обозначать , следует обозначить важный текст с тегом , а выделенный / выделенный текст должен обозначать Тег .

Совет: Для выделения текста жирным шрифтом можно также использовать следующий CSS: «font-weight: жирный; «.

---

Поддержка браузера

Элемент
	Есть	Есть	Есть	Есть	Есть

---

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

---

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

---

---

Другие примеры

Пример

Используйте CSS, чтобы выделить жирный текст:

Это обычный текст — жирным шрифтом текст .

Попробуй сам »

---

Связанные страницы

Учебное пособие по HTML: Форматирование текста HTML

Ссылка на HTML DOM: жирный объект

---

Настройки CSS по умолчанию

Большинство браузеров отображают элемент со следующими значениями по умолчанию:

HTML-тег

Тег HTML используется для создания элемента «b», который представляет полужирный текст в документе HTML.

Тег следует использовать для разметки текста, выделенного полужирным шрифтом, без придания ему дополнительной важности, например, в аннотациях статей, где начало статьи выделено жирным шрифтом. Следует использовать , а не для передачи особой важности. Чтобы подчеркнуть важность, используйте тег . Чтобы выделить текст, используйте тег .

Синтаксис

Тег записывается как с текстом, который должен быть вставлен полужирным шрифтом между начальным и конечным тегами.

Как это:

полужирный текст

Примеры

Названия продуктов

Вот пример использования элемента для разметки названий продуктов в обзоре двух продуктов.

iPhone 5s немного обогнал Samsung Galaxy S4 во всех наших тестах, однако мы рекомендуем покупать оба.

Артикул Lede

Вот пример использования элемента для разметки первого абзаца статьи.

Артикул lede (или Lede ) обычно используется вместе с заголовком или заголовком.Он предшествует основной части статьи и дает читателю основное представление о том, о чем идет речь.

Журналистские статьи делают акцент на привлечении внимания читателя, в то время как статьи в эссе резюмируют схему аргументации и вывода, которые следуют в основной части эссе.

<статья>

Ученый утверждает, что наука догматична

Биолог Руперт Шелдрейк утверждает, что современная наука сдерживается системами убеждений ученых, и что многие ученые не осведомлены о своих собственных предположениях.

В своей книге Science Set Free (известной в Великобритании как The Science Delusion ) Шелдрейк излагает десять догм основной науки. Он утверждает, что самое большое научное заблуждение состоит в том, что наука уже знает ответы. Детали еще требуют проработки, но в принципе принципиальные вопросы решены.

Шелдрейк отмечает, что современная наука основана на утверждении, что вся реальность материальна или физическая.Нет реальности, кроме материальной реальности …