Содержание
Абзацы | htmlbook.ru
Как правило, блоки текста разделяют между собой абзацами (параграфами). По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой.
Синтаксис создания абзацев следующий.
<p>Абзац 1</p> <p>Абзац 2</p>
Каждый абзац начинается с тега <p> и заканчивается необязательным закрывающим тегом </p>.
В любой книге для выделения следующего абзаца используется отступ первой строки, еще называемый
«красная строка». Это позволяет читателю легко отыскивать взглядом новую строку и повышает, таким образом, читабельность текста. На веб-странице этот прием обычно не используется, а для разделения абзацев применяется отбивка.
В примере 7.1 показано применение абзацев для создания отступов между строками.
Пример 7.1. Использование абзацев
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Применение абзацев</title> </head> <body> <p>В одних садах цветёт миндаль, в других метёт метель.</p> <p>В одних краях ещё февраль, в других - уже апрель.</p> <p>Проходит время, вечный счёт: год за год, век за век...</p> <p>Во всём - его неспешный ход, его кромешный бег.</p> <p>В году на радость и печаль по двадцать пять недель.</p> <p>Мне двадцать пять недель февраль, и двадцать пять - апрель.</p> <p>По двадцать пять недель в туман уходит счёт векам.</p> <p>Летит мой звонкий балаган куда-то к облакам.</p> <p><i>М. Щербаков</i></p> </body> </html>
</p>
<p>В одних краях ещё февраль, в других - уже апрель.</p>
<p>Проходит время, вечный счёт: год за год, век за век...</p>
<p>Во всём - его неспешный ход, его кромешный бег.</p>
<p>В году на радость и печаль по двадцать пять недель.</p>
<p>Мне двадцать пять недель февраль, и двадцать пять - апрель.</p>
<p>По двадцать пять недель в туман уходит счёт векам.</p>
<p>Летит мой звонкий балаган куда-то к облакам.</p>
<p><i>М. Щербаков</i></p>
</body>
</html>Результат данного примера показан на рис. 7.1.
Рис. 7.1. Отступы на веб-странице при использовании абзацев
Как видно из рисунка, при использовании тега <p> между абзацами возникают слишком большие отступы. От них можно избавиться, если в местах переноса строк добавлять тег <br>. В отличие от абзаца, тег переноса строки <br> не создает дополнительных вертикальных отступов между строками и может применяться практически в любом тексте.
Так, текст примера 7.1 с учетом переноса строк будет преобразован следующим образом (пример 7.2).
Пример 7.2. Тег <br>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Переносы в тексте</title> </head> <body> <p>В одних садах цветёт миндаль, в других метёт метель.<br> В одних краях ещё февраль, в других - уже апрель.<br> Проходит время, вечный счёт: год за год, век за век...<br> Во всём - его неспешный ход, его кромешный бег.<br> В году на радость и печаль по двадцать пять недель.<br> Мне двадцать пять недель февраль, и двадцать пять - апрель.<br> По двадцать пять недель в туман уходит счёт векам.<br> Летит мой звонкий балаган куда-то к облакам.</p> <p><i>М. Щербаков</i></p> </body> </html>
Результат примера продемонстрирован на рис.
7.2. Видно, что расстояние между строками текста уменьшилось и он приобрел более компактный вид.
Рис. 7.2. Вид текста с учетом переносов
- Тег <p>
Спецсимволы | htmlbook.ru
Для отображения символов, которых нет на клавиатуре, применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;). В табл. 7.1 приведены некоторые популярные спецсимволы.
| Имя | Код | Вид | Описание |
|---|---|---|---|
| |   | неразрывный пробел | |
| £ | £ | £ | фунт стерлингов |
| € | € | € | знак евро |
| ¶ | ¶ | ¶ | символ параграфа |
| § | § | § | параграф |
| © | © | © | знак copyright |
| ® | ® | ® | знак зарегистрированной торговой марки |
| ™ | ™ | ™ | знак торговой марки |
| ° | ° | ° | градус |
| ± | ± | ± | плюс-минус |
| ¼ | ¼ | ¼ | дробь — одна четверть |
| ½ | ½ | ½ | дробь — одна вторая |
| ¾ | ¾ | ¾ | дробь — три четверти |
| × | × | × | знак умножения |
| ÷ | ÷ | ÷ | знак деления |
| ƒ | ƒ | ƒ | знак функции |
| Греческие буквы | |||
| Α | Α | Α | греческая заглавная буква альфа |
| Β | Β | Β | греческая заглавная буква бета |
| Γ | Γ | Γ | греческая заглавная буква гамма |
| Δ | Δ | Δ | греческая заглавная буква дельта |
| Ε | Ε | Ε | греческая заглавная буква эпсилон |
| Ζ | Ζ | Ζ | греческая заглавная буква дзета |
| Η | Η | Η | греческая заглавная буква эта |
| Θ | Θ | Θ | греческая заглавная буква тета |
| Ι | Ι | Ι | греческая заглавная буква иота |
| Κ | Κ | Κ | греческая заглавная буква каппа |
| Λ | Λ | Λ | греческая заглавная буква лямбда |
| Μ | Μ | Μ | греческая заглавная буква мю |
| Ν | Ν | Ν | греческая заглавная буква ню |
| Ξ | Ξ | Ξ | греческая заглавная буква кси |
| Ο | Ο | Ο | греческая заглавная буква омикрон |
| Π | Π | Π | греческая заглавная буква пи |
| Ρ | Ρ | Ρ | греческая заглавная буква ро |
| Σ | Σ | Σ | греческая заглавная буква сигма |
| Τ | Τ | Τ | греческая заглавная буква тау |
| Υ | Υ | Υ | греческая заглавная буква ипсилон |
| Φ | Φ | Φ | греческая заглавная буква фи |
| Χ | Χ | Χ | греческая заглавная буква хи |
| Ψ | Ψ | Ψ | греческая заглавная буква пси |
| Ω | Ω | Ω | греческая заглавная буква омега |
| α | α | α | греческая строчная буква альфа |
| β | β | β | греческая строчная буква бета |
| γ | γ | γ | греческая строчная буква гамма |
| δ | δ | δ | греческая строчная буква дельта |
| ε | ε | ε | греческая строчная буква эпсилон |
| ζ | ζ | ζ | греческая строчная буква дзета |
| η | η | η | греческая строчная буква эта |
| θ | θ | θ | греческая строчная буква тета |
| ι | ι | ι | греческая строчная буква иота |
| κ | κ | κ | греческая строчная буква каппа |
| λ | λ | λ | греческая строчная буква лямбда |
| μ | μ | μ | греческая строчная буква мю |
| ν | ν | ν | греческая строчная буква ню |
| ξ | ξ | ξ | греческая строчная буква кси |
| ο | ο | ο | греческая строчная буква омикрон |
| π | π | π | греческая строчная буква пи |
| ρ | ρ | ρ | греческая строчная буква ро |
| ς | ς | ς | греческая строчная буква сигма |
| σ | σ | σ | греческая строчная буква сигма |
| τ | τ | τ | греческая строчная буква тау |
| υ | υ | υ | греческая строчная буква ипсилон |
| φ | φ | φ | греческая строчная буква фи |
| χ | χ | χ | греческая строчная буква хи |
| ψ | ψ | ψ | греческая строчная буква пси |
| ω | ω | ω | греческая строчная буква омега |
| Стрелки | |||
| ← | ← | ← | стрелка влево |
| ↑ | ↑ | ↑ | стрелка вверх |
| → | → | → | стрелка вправо |
| ↓ | ↓ | ↓ | стрелка вниз |
| ↔ | ↔ | ↔ | стрелка влево-вправо |
| Прочие символы | |||
| ♠ | ♠ | ♠ | знак масти «пики» |
| ♣ | ♣ | ♣ | знак масти «трефы» |
| ♥ | ♥ | ♥ | знак масти «червы» |
| ♦ | ♦ | ♦ | знак масти «бубны» |
| " | " | « | двойная кавычка |
| & | & | & | амперсанд |
| < | < | < | знак «меньше» |
| > | > | > | знак «больше» |
| Знаки пунктуации | |||
| … | … | … | многоточие . .. |
| ′ | ′ | ′ | одиночный штрих — минуты и футы |
| ″ | ″ | ″ | двойной штрих — секунды и дюймы |
| Общая пунктуация | |||
| – | – | – | тире |
| — | — | — | длинное тире |
| ‘ | ‘ | ‘ | левая одиночная кавычка |
| ’ | ’ | ’ | правая одиночная кавычка |
| ‚ | ‚ | ‚ | нижняя одиночная кавычка |
| “ | “ | “ | левая двойная кавычка |
| ” | ” | ” | правая двойная кавычка |
| „ | „ | „ | нижняя двойная кавычка |
| « | « | « | левая двойная угловая скобка |
| » | » | » | правая двойная угловая скобка |
спецсимволы
Базовый HTML: Текстовые элементы в HTML
Урок 3.
Текстовые элементы в HTML
/en/basic-html/create-a-webpage/content/
Добавление текстовых элементов в HTML
Этот урок является частью серии по компьютерному программированию . Вы можете перейти к Введение в программирование , если хотите начать с самого начала.
Одними из наиболее распространенных элементов HTML, составляющих веб-страницу, являются текстовые элементы . Весь текст, который вы читаете на этом веб-сайте, например, будь то заголовки вверху страницы, заголовки разделов или сам этот текст, состоит из текстовых элементов HTML.
Элемент абзаца
Самым простым способом добавления текста на веб-страницу является элемент абзаца . Если вы следовали этому руководству, вы видели этот элемент раньше, но стоит повторить, потому что элемент абзаца является одним из наиболее распространенных элементов HTML, используемых на большинстве веб-сайтов, которые вы посещаете каждый день.
Это абзац
По умолчанию каждый браузер помещает немного пробела выше и ниже элементов абзаца при их отображении, что делает каждый абзац независимым от окружающих его абзацев, как и абзацы, которые вы видели бы напечатанными в книге или журнале.
Элементы заголовка
Подобно элементу абзаца, элементы заголовка также используются для отображения текста на экране. Обычно они используются для создания заголовков разделов .
Это элемент заголовка
Например, вы можете использовать элемент заголовка для отображения названия эссе, которое вы пишете, или названия главы в книге. Фактический текст эссе или главы, с другой стороны, будет использовать элементы абзаца.
Элементы заголовков имеют шесть уровней по умолчанию ,
по
, которые можно представить как порядок важности . Например, если вы поместите
на свою веб-страницу, можно с уверенностью предположить, что это самый важный заголовок раздела и, вероятно, вверху вашей страницы, в то время как
немного менее важен, и так далее.
Они также поставляются с некоторыми стилями браузера по умолчанию , что усиливает этот порядок важности: элемент
— самый большой,
— меньший, и так далее.
Это самый большой
Это немного меньше
Этот еще меньше
Они продолжают уменьшаться
Даже не такой большой
Сейчас довольно маленький
Элементы форматирования текста
Элементы форматирования текста используются для изменения внешнего вида текста определенными предопределенными способами. Например, вот несколько распространенных элементов форматирования текста:
- B old : элемент
- Курсив : Элемент
- Подчеркивание : Элемент
Эти элементы обычно находятся вложенными внутри других текстовых элементов, таких как элементы абзаца или заголовка, поскольку обычно они предназначены только для применения к части текста. Например:
Эти слова не выделены жирным шрифтом, а эти два выделены.
Этот HTML будет отображаться следующим образом:
Попробуйте!
Попробуйте поэкспериментировать с каждым из элементов, описанных в этом уроке , во входных данных ниже. Вы можете вводить все, что хотите, но если вам нужны идеи о том, что вводить, попробуйте использовать элементы ниже в качестве примера.
Долгая спокойная ночь
Глава 1: Город и тишинаДетектив Хардкасл вздрогнул, когда услышал стук в дверь. Полночь в субботу, и кто-то искал кеды? Это пахло неприятностями, потому что если он и усвоил что-то за время работы частным сыщиком, так это то, что все призраки города выходят ночью.
Надеюсь, ты не ищешь драки, подумал он про себя.
Потому что если да, то вы его нашли.Введите свои HTML-элементы в поле ввода здесь:
Сделай сам!
Откройте файл index.html вашего проекта GCF Programming Tutorials в текстовом редакторе и добавим несколько текстовых элементов . Для лучшего понимания убедитесь, что вы действительно вводите этот код, а не копируете и вставляете его.
- Когда вы впервые создали этот файл, у вас уже был один элемент фактического содержимого на странице. Сначала найдите этот элемент:
Привет, мир!
- Продолжайте и удалите этот элемент .
- Вместо этого давайте начнем создавать что-то похожее на настоящую веб-страницу, которую вы могли бы увидеть в обычной жизни: веб-страницу с обзорами фильмов . Начните с заголовка и обязательно поместите его внутрь элемента
Обзоры киноклассики кино
- Чуть ниже добавим подзаголовок . В то время как первый заголовок был основным заголовком всей вашей веб-страницы, этот будет просто заголовком для вашей рецензии на выдуманный блокбастер:
Обзор: Basketball Dog (2018)
- Теперь давайте добавим текст . Это основная часть вашего отзыва, так что слов гораздо больше, но обратите внимание, что они по-прежнему заключены в простые теги
элемент, который вы только что добавили:4 звезды из 5
Режиссер Вики Флеминг рассказывает трогательную историю о мальчике по имени Пит (Трент Дагсон) и его собаке Ровере (озвучивает Бринсон Ламблбрант). Вам может показаться, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но этот фильм отличает один важный момент: Ровер играет в баскетбол, и у него это чертовски хорошо получается.
Возможно, нет необходимости включать все 150 минут игры чемпионата Ровера в режиме реального времени, но Basketball Dog будет удерживать ваш интерес на протяжении всех 4 часов, а финал заставит любого любителя собак расплакаться.
Если вы любите баскетбол или спортивных питомцев, этот фильм для вас.Полный список актеров можно найти на веб-сайте Basketball Dog.
- Учитывая, что она является режиссером фильма, кажется, что «Вики Флеминг» может быть самым важным именем в этих абзацах, поэтому давайте выделим полужирным шрифтом , чтобы привлечь к нему больше внимания. Оберните это имя тегами
Вики Флеминг
- Также может быть хорошей идеей отделить звездный рейтинг от остального текста. Выделим курсивом , чтобы отделить его. Оберните только эти слова цифрой
4 из 5 звезд
В то время как первый заголовок был основным заголовком всей вашей веб-страницы, этот будет просто заголовком для вашей рецензии на выдуманный блокбастер: 
Если вы любите баскетбол или спортивных питомцев, этот фильм для вас.После того, как вы все это сделали, ваш полный код должен выглядеть так:
<тело>
Обзоры киноклассики
Обзор: Баскетбольная собака (2018 г.)
4 звезды из 5
Режиссер Вики Флеминг рассказывает трогательную историю о мальчике по имени Пит (Трент Дагсон) и его собаке Ровере (озвучивает Бринсон Ламблбрант). Вам может показаться, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но этот фильм отличает один важный момент: Ровер играет в баскетбол, и у него это чертовски хорошо получается.
Возможно, нет необходимости включать все 150 минут игры чемпионата Ровера в режиме реального времени, но Basketball Dog будет удерживать ваш интерес на протяжении всех 4 часов, а финал заставит любого любителя собак расплакаться. Если вы любите баскетбол или спортивных питомцев, этот фильм для вас.
Полный список актеров можно найти на веб-сайте Basketball Dog.
Вам может показаться, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но этот фильм отличает один важный момент: Ровер играет в баскетбол, и у него это чертовски хорошо получается.Дважды щелкните файл index.html , чтобы загрузить его в браузере, и вы должны увидеть это. Ваша веб-страница начинает выглядеть как настоящая веб-страница!
Продолжать
Предыдущий: Создать веб-страницу
Далее:Списки в HTML
/en/basic-html/lists-in-html/content/
Вставка HTML-кода в текстовый элемент SVG
спросил
Изменено
5 лет, 8 месяцев назад
Просмотрено
62к раз
У меня есть узел svg:text, и я хочу добавить в него код HTML.
На самом деле мой код:
Здравствуйте!
И я хочу поставить что-то вроде этого:
Gmail< /текст>
Конечно, я хочу, чтобы ссылка работала, но она просто отображает весь HTML.
Есть идеи?
- html
- текст
- svg
1
Почему бы в этом случае не использовать элемент SVG ? Не забывайте, что href должен быть xlink:href. Например.
Gmail
Только элементы анимации SVG, описательные элементы (