Строчные теги: Строчные элементы — HTML | MDN

Leave a Comment / Разное / By /

Строчные теги HTML — Как создать сайт

Строчные теги в языке HTML

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

Некоторые характеристики строчных тегов

  • В отличии от блочных, у строчных тегов НЕ ставится автоматический перенос строки, в начале и в конце.
  • У строчных тегов нельзя управлять шириной и высотой: width, height
  • У строчных тегов нельзя управлять CSS-свойством margin, но можно управлять CSS-свойством padding
  • Строчные теги НЕ занимают всю ширину родительского элемента.
  • Так как строчные теги НЕ занимают всю ширину родительского элемента, то элементами находящимися внутри строчных тегов, нельзя управлять с помощью горизонтального выравнивания: left, right, center, justyfi
  • Внутри строчных тегов можно размещать другие строчные теги, но блочные размещать нельзя. В HTML5 можно размещать заголовки h2-h6 между ссылкой а.

Строчные HTML-теги по алфавиту

<a>

</a> — ссылка,
<abbr> </abbr> — аббревиатура,
<acronym> </acronym> — акроним, устаревший тег,
<b> </b> — жирный шрифт,
<basefont> — форматирует текст для всей страницы, устаревший тег,
<bdo> </bdo> — управляет направлением текста,
<big> </big> — увеличивает размер шрифта на единицу, устаревший тег,
<blockquote> </blockquote> — цитата,
<br> — перевод строки,
<cite> </cite> — название произведения, романа, стиха, песни, картины и т.д.,
<code> </code> — код программы,
<dfn> </dfn> — впервые встречающийся термин в тексте,
<em> </em>
— курсивный шрифт,
<font> </font> — форматирует текст, устаревший тег,
<i> </i> — курсивный шрифт,
<input> — элемент формы, может быть кнопкой, текстовым полем, переключателем и др. ,
<kbd> </kbd> — горячие клавиши,
<label> </label> — создаёт связь с элементом формы, элемент формы,
<q> </q> — цитата,
<s> </s> — зачёркнутый текст,
<samp> </samp> — код вывода программы,
<select> </select> — группирует теги option,
<small> </small> — уменьшает размер шрифта на единицу,
<span> </span> — строчный элемент,
<strike> </strike> — зачёркнутый текст, устаревший тег,
<strong> </strong> — жирный шрифт,
<sub> </sub> — нижний индекс,
<sup> </sup> — верхний индекс,
<textarea> </textarea> — элемент формы, многострочное поле ввода,
<tt> </tt> — моноширинный шрифт, устаревший тег,
<u> </u> — подчёркнутый текст, устаревший тег,
<var> </var> — переменные языков программирования.

Читать далее: Новые теги HTML5

  • Category: Разное

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 15 октября 2014

Бесплатный хостинг от компании Бегет, для начинающих: beget.com/ru/hosting/free

Строчные элементы | WebReference

Строчными называются такие элементы, которые являются непосредственной частью строки, у них значение свойства display установлено как inline. Элементы, для которых это значение задано по умолчанию, — <span>, <a>, <q>, <code> и др., в основном они используются для изменения вида текста или его смыслового выделения.

Особенности строчных элементов

Перечислим характерные особенности строчных элементов.

Свойства, связанные с размерами (width, height), не применимы.

Размеры строчных элементов определяются их содержимым и не могут напрямую меняться с помощью свойств width и height, которые, соответственно, задают ширину и высоту элемента. Добавление этих свойств к строчным элементам просто игнорируется.

Размер элемента равен его содержимому плюс значения margin, border и padding.

Несмотря на то, что явно задать размеры элемента нельзя, на него можно влиять косвенно с помощью свойств margin, border и padding, значения которых суммируются с размерами содержимого (пример 1).

Пример 1. Размеры элемента

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Размеры элемента</title> <style> h2 { background: #EDE6CE; /* Цвет фона */ } h2 span { margin: 16px; /* Отступы */ padding: 1px; /* Поля */ border-bottom: 2px solid #D71920; /* Линия снизу */ } </style> </head> <body> <h2><span>Заголовок</span></h2> </body> </html>

В данном примере внутрь блочного элемента <h2> добавлен строчный элемент <span> и для него уже заданы свойства margin, padding и border. Это сделано для того, чтобы линия была строго под текстом (рис. 1), а не на всю длину блока, как получилось бы, добавь мы border для h2 напрямую.

Рис. 1. Линия под текстом

Заметьте одну особенность — для строчных элементов margin работает только по горизонтали, но никак не вертикали. Таким образом, свойства margin-top и margin-bottom не действуют.

Срочные элементы переносятся на другую строку при необходимости.

Раз мы имеем дело со строками, то текст, естественно, переносится, чтобы строка целиком поместилась по ширине. Перенос текста, как правило, происходит в месте пробела и может разделить наш строчный элемент на две части и более. Это не страшно, пока к элементу не применяется стилевое оформление. На рис. 2 показано, как фон и рамка разбивается на две части.

Рис. 2. Перенос строки

Чтобы запретить перенос текста внутри элемента, добавьте свойство white-space со значением nowrap (пример 2).

Пример 2. Перенос строк

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Перенос строк</title> <style> .
muscle { padding: 2px; /* Поля вокруг текста */ border: 1px dotted maroon; /* Параметры рамки */ background: #C5E2BD; /* Цвет фона */ white-space: nowrap; /* Запрещаем перенос текста */ } </style> </head> <body> <p>Лягте животом на пол. Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны. Руки за головой. Тяните голову руками вверх и вперёд до полного сокращения <span>мышц живота</span>. Задержитесь на две секунды. Выполните восемь повторений.</p> </body> </html>

Перенос текста считается за пробел.

В коде HTML любой перенос текста воспринимается браузером как пробел, это касается и размещения элементов на отдельных строках. Сравните два абзаца в примере 3. В первом абзаце каждый <span> располагается на отдельной строке, а во втором абзаце код идёт сплошной строкой без пробелов и переносов.

Пример 3. Перенос но новую строку

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Перенос строк</title> <style> span { padding: 5px; /* Поля вокруг текста */ background: #008EB0; /* Цвет фона */ color: #fff; /* Цвет текста */ } </style> </head> <body> <p> <span>Uno</span> <span>Dos</span> <span>Tres</span> </p> <p><span>Cinco</span><span>Seis</span><span>Siete</span></p> </body> </html>

Результат данного примера показан на рис. 3. В первой строке между цветных прямоугольников появилось небольшое пространство, а вторая строка выглядит сплошной.

Рис. 3. Пробелы между элементами

В строчно-блочных элементах мы ещё вернёмся к этой особенности.

Можно выравнивать по вертикали с помощью свойства vertical-align.

Свойство vertical-align выравнивает элементы относительно друг друга по вертикали, что позволяет делать верхний и нижний индексы, задавать выравнивание содержимого ячеек таблицы, задавать положение блоков и др. В примере 4 показано выравнивание картинок и текста по середине друг друга.

Пример 4. Использование vertical-align

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Выравнивание</title> <style> img { vertical-align: middle; /* Выравнивание по середине */ } .icon { vertical-align: middle; /* Выравнивание по середине */ margin-left: 7px; /* Отступ слева */ margin-right: 20px; /* Отступ справа */ color: #ED1C24; /* Цвет текста */ } </style> </head> <body> <p> <img src=»image/animate.
png» alt=»»><span>Анимация</span> <img src=»image/list.png» alt=»»><span>Список</span> <img src=»image/print.png» alt=»»><span>Печать</span> <img src=»image/text.png» alt=»»><span>Текст</span> </p> </body> </html>

Результат данного примера показан на рис. 4.

Рис. 4. Выравнивание картинок и текста

Преобразование в строчный элемент

Строчные элементы можно превращать в блочные с помощью свойства display и его значения block. Также возможно и обратное действие через значение inline и преобразование блочного элемента в строчный (пример 5).

Пример 5. Меню

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Меню</title> <style> .menu { margin: 0; padding: 0; /* Убираем пустое пространство */ line-height: 1.8; /* Межстрочный интервал */ } .menu li { display: inline; /* Строчные элементы */ background: #D9B492; /* Цвет фона */ padding: 3px 7px; /* Поля вокруг текста */ white-space: nowrap; /* Запрещаем перенос текста */ } .
menu li a { text-decoration: none; /* Убираем подчёркивание у ссылок */ } </style> </head> <body> <ul> <li><a href=»1.html»>Метод простых итераций</a></li> <li><a href=»2.html»>Метод случайных чисел</a></li> <li><a href=»3.html»>Метод дихотомии</a></li> <li><a href=»4.html»>Метод золотого сечения</a></li> </ul> </body> </html>

Результат данного примера показан на рис. 5.

Рис. 5. Строчные элементы

Внимание! Превращение элемента в строчный не даёт право нарушать структуру кода HTML и порядок вложения элементов.

Надо понимать, что HTML и CSS проверяются независимо друг от друга и какие бы вы манипуляции не производили с элементами через стили, на HTML это не оказывает влияние. Код HTML в любом случае должен быть корректным с точки зрения синтаксиса HTML.

Автор: Влад Мержевич

Последнее изменение: 17. 01.2023

Разница между блочными элементами и встроенными элементами

Улучшить статью

Сохранить статью

  • Уровень сложности: Базовый
  • Последнее обновление: 31 окт, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

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

    Итак, давайте посмотрим на разницу между встроенными и блочными элементами в HTML и между различными часто используемыми встроенными и блочными элементами HTML.

    Блочные элементы: Используют всю доступную ширину независимо от их достаточности. Они всегда начинаются с новой строки и имеют верхнее и нижнее поля. Он не содержит никаких других элементов рядом с ним.

    Примеры блочных элементов: