Что это такое?
В html есть множество всевозможных тегов, атрибутов, значений, которые используются в различных ситуациях. Некоторые применяются только по прямому назначению, другие обладают гибкими настройками, позволяющими использовать их в самых разных вариациях. Помимо обычных тегов, в html есть специальные символы мнемоники. С их помощью можно выводить на экран пользователей различные значки, иконки и т.д. Одним из самых полезных специальных символов является неразрывный пробел. Об этом элементе и будет идти речь в данной статье.
Назначение
В html неразрывный пробел может применяться в самых разнообразных ситуациях. Самый распространенный случай, когда используется данный элемент, - это для естественного увеличения интервала между символами или словами. Некоторые, возможно, уже возмутились и задают логичный вопрос: «А почему просто не использовать обычный пробел при помощи клавиши «space» на клавиатуре?». Дело в том, что браузер будет игнорировать все лишние интервалы между словами или символами кроме первого назначенного. Независимо от того, сколько их будет стоять в исходном коде страницы, все равно будет выводиться только один. Таким образом, если у вас возникнет желание поставить два или более пробелов, идущих друг за другом, придется использовать специальный символ. Помимо этого, бывают и другие случаи, когда используется данный элемент, например:
- Красная строка. Хотя данный способ отображения нового абзаца уже редко когда используется в Интернете, все же полезно знать, что если поставить в начале несколько таких пробелов, получится эффект отступа.
- Таблица. Иногда при построении таблицы появляются пустые ячейки, которые нужно чем-то заполнить, иначе из-за этого деформируется вся конструкция. Как вариант можно поставить неразрывный пробел. Тогда пользователи будут видеть пустую ячейку, и таблица останется в прежнем состоянии.
- Рисунки для привлечения внимания. С помощью данного элемента можно построить изображение из символов. Или иногда такой пробел используется для акцентирования внимания пользователей.
Применение
Неразрывный пробел html назначается путем написания специальных символов, а именно « ». То есть, вставив данную запись в исходный код, вы получите дополнительный интервал. Его длина будет равна обычному пробелу. Запись « » расшифровывается как «NO-BREAK SPACE», что и переводится как «неразрывный пробел». Можно использовать альтернативное обозначение « », что даст такой же эффект.
Особенности
К отличительным чертам данного элемента можно отнести тот факт, что если поставить такой пробел между двумя словами (символами), то они в любом случае будут оставаться на одной строке. В отдельных случаях будет появляться горизонтальная полоса прокрутки (когда элементы выходят за пределы экрана). Порой разработчики используют данный элемент только из-за этой особенности. Например, когда действительно важно, чтобы текст находился на одной строке.
Заключение
В большинстве случаев неразрывный пробел окажется бесполезным. Так как редко когда появляется необходимость ставить длительный интервал. Но, так или иначе, знать данный элемент нужно обязательно. Ведь когда-нибудь он пригодится любому разработчику html файлов.
Машинописный текст состоит из печатных знаков - графических символов.
Графические символы - это символы, которые имеют в тексте видимое отображение.
Все графические символы собраны в наборе единой универсальной системы Юникод.
Вставить графический символ Юникод в html-документ
- главное и единственное назначение для этой таблицы.
Вставить символ в html-документ можно одним из способов:
- скопировать изображение символа из окна браузера в окно своего визуального html-редактора
- скопировать html-код символа непосредственно в код html-документа
- вставлять визуальное в визуальное
- вставлять код в код.
Шрифт для символа, его размер и цвет в HTML можно задать кодом, вида:
КОД_СИМВОЛА
где,
Arial - шрифт,
10px - размер шрифта в пикселях,
#ff0000 - код цвета шрифта (красный)
Например:
☎
- размер шрифта символа 30px,
☎
- размер шрифта символа 30px, цвет - красный
☎
- размер шрифта символа 20px,
☎
- размер шрифта символа 10px.
Прим. Рекомендуемые шрифты для вставки спецсимволов - Arial, Verdana и Tahoma. Эти шрифты корректно отображают символы Юникод и сами, в свою очередь, корректно поддерживаются веб-приложениями.
- «Символ»
(видимое отображение символа)
Из этой графы можно скопировать изображение символа и вставить его в окно текстового html-редактора. Символ скопируется с размером шрифта 20px. После завершения копирования может потребоваться индивидуальная подгонка размера шрифта непосредственно для скопированного знака. - «Наименование»
(только для важных или непонятных символов)
Пояснение назначения символа, его область применения, примеры... - «Мнемоника»
Мнемоника - это буквенная конструкция вида ", обозначающая буквенный код символа в HTML. Вставляется непосредственно в html-код html-документа. Мнемоники очень популярны среди профессиональных верстальщиков. Они прекрасно запоминаются человеком и поддерживаются всеми html-приложениями. Каждая мнемоника содержит буквенное имя (обозначение) своего символа и служебный знак (&), который служит сигналом к прочтению кода для браузера и не отображается на экране монитора. Имя каждой мнемоники уникально и легко читаемо, потому что образовано от англоязычного слова, характеризующего символ.Мнемоника (греч.) - искусство запоминать что-либо. Мнемотехника применяется для облегчения восприятия труднозапоминаемой информации, когда объект запоминания приводится в ассоциативное состояние с чем-либо.
- «Код»
Код - числовой десятичный код символа в HTML, вида &. Вставляется непосредственно в html-код html-документа. Числовой десятичный код состоит из числа, обозначающего порядковый номер символа в системе Юникод и нескольких служебных знаков (& и #), которые служат сигналом к прочтению кода для браузера и не отображаются на экране монитора. Числовой десятичный код имеет широкое распространение и применение, благодаря своей универсальности и простоте восприятия.
Символы управления в HTML (XHTML)
Символы управления в HTML (XHTML) - это служебные символы HTML-языка, которые используются при HTML-вёрстке веб-страницы. Эти символы обязан поддерживать любой браузер, поскольку без них невозможно правильное отображение HTML-текста. Символы управления не отображаются в тексте и, при прямом введении с клавиатуры - интерпретируются браузером как знаки препинания, призывающие к выполнению какого-либо действия при отрисовке страницы на экране.
Допускается использовать символы управления в обычных текстах, где они символизируют общечеловеческие понятия и трактуются браузером как обычные типографские знаки. При таком использовании служебных символов в HTML-текстах требуется вводить не значение самого символа, а именно его HTML-код. Ибо, повторяюсь - в противном случае браузер будет воспринимать служебный символ, как призыв к действию и не будет корректно отображать HTML-текст на экране монитора.
Символы управления и их HTML-код знают и понимают все браузеры без исключения, чего нельзя сказать, увы - про остальные знаки, которые могут отображаться некорректно в разных браузерах или, что ещё хуже - не отображаться совсем.
Синтаксис и пунктуация
| пробел длины N (обычный пробел) | |||||
| пробел длины M (длинныйпробел) | |||||
| - | мягкий перенос (непечатный знак) | - | | ||
| ‑ | дефис | ‑ |
|||
|---|---|---|---|---|---|
| - | тире длины N (обычное тире) | - | – | ||
| — | тире длины M (длинное тире) | — | — | ||
| . | точка | . | |||
| , | запятая | , | |||
| … | многоточие | … |
… |
||
| : | двоеточие | : | |||
| ; | точка с запятой | ; | |||
| ! | знак восклицания | ! ǃ |
|||
| ? | вопросительный знак | ? | |||
| @ | «собачка» | @ | |||
| * | «звездочка» | * | |||
| # | «решетка» | # | |||
| ‘ | одиночная верхняя левая кавычка | ‘ | ‘ |
||
| ’ | одиночная верхняя правая кавычка | ’ | ’ |
||
| ‚ | одиночная нижняя правая кавычка | ‚ | ‚ |
||
| “ | двойная верхняя левая кавычка | “ | “ |
||
| ” | двойная верхняя правая кавычка | ” | ” |
||
| „ | двойная нижняя правая кавычка | &bdquo | „ |
||
| « | двойная левая угловая кавычка (рус) | « | « | ||
| » | двойная правая угловая кавычка (рус) | » | » | ||
| ́ | знак ударения, пример: Вася́ | ́ | |||
| " | апостроф, пример: Вас"я | " | |||
| ´ | акут, пример: Вас´я | ´ | ´ | ||
| ¶ | абзац (непечатный знак) | ¶ | ¶ | ||
| § | параграф | § | § | ||
| ˆ | акцент (перевёрнутая птичка) | ˆ | ˆ |
||
| ˜ | малая тильда | ˜ | ˜ |
||
| ¦ | вертикальный пунктир | ¦ | ¦ | ||
| ( | круглая скобка влево | ( | |||
| ) | круглая скобка вправо | ) | |||
| 〈 | угловая скобка влево | 〈 | 〈 | ||
| 〉 | угловая скобка вправо | 〉 | 〉 | ||
| ‹ | угловая скобка влево, вариант | ‹ | ‹ | ||
| › | угловая скобка вправо, вариант | › | › | ||
| [ | квадратная скобка влево | [ | |||
| ] | квадратная скобка вправо | ] | |||
| / | слэш (slash) - cимвол косой черты | / | |||
| \ | обратный слэш (backslash) | \ | |||
| ⁄ | косая дробная черта (знак деления) | ⁄ | ⁄ | ||
| ǀ | вертикальная черта | ǀ | |||
| ǁ | двойная вертикальная черта | ǁ | |||
| ‾ | надчеркивание, пример: Вася‾вася | ‾ | ‾ | ||
| ¯ | macron, пример: Вася¯вася | ¯ | ¯ | ||
Товарные знаки и валюта
| + | плюс | + | + | ||
|---|---|---|---|---|---|
| − | минус | − | - − |
||
| = | равно | = | |||
| ± | плюс-минус | ± | ± | ||
| × | знак умножения | × | × | ||
| ÷ | знак деления | ÷ | ÷ | ||
| ⋅ | оператор «точка» (середина строки) | ⋅ | · ⋅ |
||
| ∗ | оператор «звёздочка» (середина строки) | ∗ | ∗ | ||
| ∼ | оператор «тильда» | ∼ | ∼ | ||
| . | маркер списка (середина строки) | . | |
||
| ¹ | верхний индекс «1» | ¹ | ¹ | ||
| ² | верхний индекс «2» | ² | ² | ||
| ³ | верхний индекс «3» | ³ | ³ | ||
| Надстрочный и подстрочный индекс в HTML (XHTML) можно вставить при помощи тегов и , соответственно: ЧИСЛОНадстрочный индекс → ЧИСЛО Надстрочный индекс ЧИСЛОПодстрочный индекс → ЧИСЛО Подстрочный индекс |
|||||
| ½ | дробь «одна вторая» | ½ | ½ | ||
| ⅓ | дробь «одна треть» | ⅓ | |||
| ¼ | дробь «одна четвёртая» | ¼ | ¼ | ||
| ¾ | дробь «три четверти» | ¾ | ¾ | ||
| № | знак номера | № | |||
| % | процент | % | |||
| ‰ | промилле | ‰ | ‰ |
||
| ° | градусы | ° | ° | ||
| ′ | штрих (минуты, футы) | ′ | ′ | ||
| ″ | двойной штрих (секунды, дюймы) Пример 1: 30° 25′ 12″ Пример 2: 25′ 12″ |
″ | ″ | ||
| µ | микро | µ | µ | ||
| π | Пи | π | π | ||
| ƒ | знак функции (не путать с «интеграл») |
ƒ | ƒ |
||
| ∫ | интеграл | ∫ | ∫ | ||
| ∅ | перечеркнутый ноль, пустое множество (не путать с «диаметр») |
∅ | ∅ | ||
| ⌀ | диаметр (не путать с перечёркнутой латинской «о») | ⌀ | |||
| ø | латинская "o" диагонально перечёркнутая | ø | ø | ||
| Ø | латинская заглавная "O" диагонально перечёркнутая | Ø | Ø | ||
| ∏ | знак произведения | ∏ | ∏ | ||
| ∑ | знак суммирования | ∑ | ∑ | ||
| √ | радикал (квадратный корень или корень степени x) |
√ | √ | ||
| ∝ | пропорционально | ∝ | ∝ | ||
| ∞ | бесконечность | ∞ | ∞ | ||
| ∠ | угол | ∠ | ∠ | ||
| ⊥ | ортогонально (перпендикулярно) | ⊥ | ⊥ | ||
| ∴ | знак «cледовательно» | ∴ | ∴ | ||
| ≅ | приблизительно равно | ≅ | ≅ | ||
| ≈ | почти равно | ≈ | ≈ | ||
| ≠ | не равно | ≠ | ≠ | ||
| ≡ | идентично | ≡ | ≡ | ||
| ≤ | меньше или равно | ≤ | ≤ | ||
| ≥ | больше или равно | ≥ | ≥ | ||
| ∧ | логическое И | ∧ | ∧ | ||
| ∨ | логическое ИЛИ | ∨ | ∨ | ||
| ⊕ | знак «плюс в круге» (прямая сумма) |
⊕ | ⊕ | ||
| ⊗ | знак «умножение в круге» (векторное произведение, стрела от наблюдателя) |
⊗ | ⊗ | ||
| ʘ | точка в круге (стрела на наблюдателя) |
ʘ | |||
|
✵ ✵ |
|||||
Здравствуйте, уважаемые читатели блога сайт! Те, кто хотя бы поверхностно успел ознакомиться с , наверное, уже приняли к сведению, пусть и в общих чертах. А значит, имеют представление о том, какие вообще HTML символы используются в коде документа.
В сегодняшней статье мы попробуем разобраться, что из себя представляет пробел в HTML, в каких случаях можно применить пробельные символы при форматировании самого кода для удобного восприятия. Узнаем, когда необходимо применение неразрывного пробела, а также познакомимся с другими спецсимволами (или, как их еще называют, мнемониками).
На самом деле я бы посоветовал не игнорировать тему использования различных спец символов, поскольку это важная составляющая, позволяющая придать законченность изучению языка гипертекстовой разметки. В общем, предоставленная в этой публикации информация лишней точно не будет. Ну а теперь к делу.
Пробелы и пробельные символы в HTML
Сначала необходимо сделать важное замечание. На клавиатуре компьютера есть специальные клавиши, которые позволяют реализовать разделение текста (чуть подробнее об этом ниже). Однако, лишь широкая клавиша пробела обеспечивает раздел между словами не только в редакторе, но и в окне браузера. При переносе строк и отступе от края существуют нюансы.
Как вы знаете, отображение тех или иных элементов в веббраузере определяется тегами. Для форматирования текста применяется известный , который является блочным. То есть его содержание располагается по всей доступной ширине.
Чтобы перенести строки внутри абзаца P , нужно воспользоваться одиночным тегом BR, с помощью которого это можно осуществить. Скажем, нам нужно вставить в текст какие-нибудь строчки из стихотворения, которые мы пишем в текстовом редакторе:
Несмотря на то, что строки стиха расположены корректно и переносы осуществлены в нужных местах, в браузере все будет выглядеть иначе:
Чтобы добиться такого же отображения в окне веб-обозревателя, нужно в каждом месте переноса строки прописать BR:
Теперь мы достигли выполнения поставленной задачи и в браузере стихотворные строчки отобразятся совершенно правильно:
Таким образом, нужные переносы строк выполнены. Здесь еще нужно отметить такую особенность, что множественные пробелы, идущие один за другим, веббраузер отображает как один. В этом вы сможете убедиться, если в том же редакторе попробуете поставить не один, а несколько пробелов между двумя словами и, нажав на кнопку «Сохранить», посмотрите на результат в браузере.
Пробел, табуляция и перенос строки
В принципе, с этими пробельными символами мы знакомимся сразу же, как начинаем работу с текстом в редакторе и форматируем его в нужном виде. Для реализации подобной задачи существуют специальные клавиши, каждая из которых соответствует своему пробельному символу:
- Пробел - самая широкая клавиша на клавиатуре компьютера (без надписи);
- Табуляция - клавиша слева с надписью «Tab» и двумя стрелками, направленными в разные стороны;
- Перенос строки - клавиша «Enter».
Однако, как я сказал выше, конечный нужный результат не только в текстовом редакторе, но и в браузере, мы получаем лишь при использовании первой клавиши. Все три клавиши (в том числе табуляция и перенос строки полезно использовать при форматировании кода HTML. Допустим, вот как выглядит фрагмент кода в NotePad++ ( об этом редакторе толковый материал) при отображении всех пробельных символов:
Мы получаем код, который легко читаем и понятен благодаря пробелам. Оранжевыми стрелками отмечены отступы, создаваемые с помощью клавиши Tab, а символами CR и LF переносы строк, осуществляемые посредством кавиши Enter.
Просматриваются контейнеры, вложенные один в другой, хорошо выделяются открывающие и закрывающие теги. В таком виде данный код можно спокойно редактировать. А теперь сравните его с таким же кодом, в котором нет подобного разделения текста:
Таким же образом с помощью пробельных символов можно прописать и правила CSS, которые будут визуально выглядеть понятными и удобоваримыми:
После того, как вы приведете все стили к общему знаменателю и полностью закончите редактирования файла стилей, можно будет подвергнуть , удалив из кода все пробелы. Это необходимо для повышения , что очень важно при продвижении ресурса.
Спецсимволы (или мнемоники) в коде HTML
Теперь разберем, в каких случаях необходимо использование специальных символов, о которых я упомянул в начале статьи. Спецсимволы HTML, которые иногда называют мнемониками, введены для решения давней проблемы с кодировками, возникшей в языке гипертекстовой разметки.
При наборе вами текста с клавиатуры происходит кодировка символов языка, который вы используете. В веббраузере набранный текст будет отображен посредством выбранных вами шрифтов в результате обратной операции декодирования.
Дело в том, что подобных кодировок немало, сейчас у нас нет цели их подробно разобрать. Просто в каждой из них может не доставать тех или иных символов, которые, однако, необходимо отобразить. Скажем, приспичило вам прописать одиночные кавычки или знак ударения, а эти значки банально отсутствуют в наборе.
Для того, чтобы ликвидировать эту проблему, и была введена система спецсимволов, которая включает в себя огромное количество самых различных мнемоник. Все они начинаются со значка амперсанда «&» и заканчиваются обычно точкой с запятой «;». Поначалу каждому спецсимволу соответствовал свой цифровой код. Например, для неразрывного пробела, который рассмотрим чуть ниже подробнее, будет справедлива такая запись:
Но спустя некоторое время наиболее распространенным символам были присвоены буквенные аналоги (мнемоники), чтобы их было проще запомнить. Скажем, для того же неразрывного пробела это выглядит следующим образом:
В результате браузер отображает соответствующий символ. Список мнемоник очень объемный, наиболее часто применяемые спецсимволы HTML вы можете обнаружить из ниже следующей таблицы:
| символ | код | мнемоника | описание |
|---|---|---|---|
| неразрывный пробел | |||
| узкий пробел (еn-шириной в букву n) | |||
| широкий пробел (em-шириной в букву m) | |||
| – | - | – | узкое тире (en-тире) |
| - | — | — | широкое тире (em -тире) |
| | - | | мягкий перенос |
| а́ | ́ | ударение, ставится после "ударной" буквы | |
| © | © | копирайт | |
| ® | ® | ® | знак зарегистрированной торговой марки |
| ™ | ™ | ™ | знак торговой марки |
| º | º | º | копье Марса |
| ª | ª | ª | зеркало Венеры |
| ‰ | ‰ | ‰ | промилле |
| π | π | π | пи (используйте Times New Roman) |
| ¦ | ¦ | ¦ | вертикальный пунктир |
| § | § | § | параграф |
| ° | ° | ° | градус |
| µ | µ | µ | знак "микро" |
| ¶ | ¶ | ¶ | знак абзаца |
| … | … | … | многоточие |
| ‾ | ‾ | ‾ | надчеркивание |
| ´ | ´ | ´ | знак ударения |
| № | № | знак номера | |
| 🔍 | 🔍 | Лупа (наклонённая влево) | |
| 🔎 | 🔎 | Лупа (наклонённая вправо) | |
| знаки арифметических и математических операций | |||
| × | × | × | умножить |
| ÷ | ÷ | ÷ | разделить |
| < | < | меньше | |
| > | > | > | больше |
| ± | ± | ± | плюс/минус |
| ¹ | ¹ | ¹ | степень 1 |
| ² | ² | ² | степень 2 |
| ³ | ³ | ³ | степень 3 |
| ¬ | ¬ | ¬ | отрицание |
| ¼ | ¼ | ¼ | одна четвертая |
| ½ | ½ | ½ | одна вторая |
| ¾ | ¾ | ¾ | три четверти |
| ⁄ | ⁄ | ⁄ | дробная черта |
| − | − | − | минус |
| ≤ | ≤ | ≤ | меньше или равно |
| ≥ | ≥ | ≥ | больше или равно |
| ≈ | ≈ | ≈ | приблизительно (почти) равно |
| ≠ | ≠ | ≠ | не равно |
| ≡ | ≡ | ≡ | тождественно |
| √ | √ | √ | квадратный корень (радикал) |
| ∞ | ∞ | ∞ | бесконечность |
| ∑ | ∑ | ∑ | знак суммирования |
| ∏ | ∏ | ∏ | знак произведения |
| ∂ | ∂ | ∂ | частичный дифференциал |
| ∫ | ∫ | ∫ | интеграл |
| ∀ | ∀ | ∀ | для всех (видно только если жирным шрифтом) |
| ∃ | ∃ | ∃ | существует |
| ∅ | ∅ | ∅ | пустое множество |
| Ø | Ø | Ø | диаметр |
| ∈ | ∈ | ∈ | принадлежит |
| ∉ | ∉ | ∉ | не принадлежит |
| ∋ | ∋ | ∗ | содержит |
| ⊂ | ⊂ | ⊂ | является подмножеством |
| ⊃ | ⊃ | ⊃ | является надмножеством |
| ⊄ | ⊄ | ⊄ | не является подмножеством |
| ⊆ | ⊆ | ⊆ | является подмножеством либо равно |
| ⊇ | ⊇ | ⊇ | является надмножеством либо равно |
| ⊕ | ⊕ | ⊕ | плюс в кружке |
| ⊗ | ⊗ | ⊗ | знак умножения в кружке |
| ⊥ | ⊥ | ⊥ | перпендикулярно |
| ∠ | ∠ | ∠ | угол |
| ∧ | ∧ | ∧ | логическое И |
| ∨ | ∨ | ∨ | логическое ИЛИ |
| ∩ | ∩ | ∩ | пересечение |
| ∪ | ∪ | ∪ | объединение |
| знаки валют | |||
| € | € | € | Евро |
| ¢ | ¢ | ¢ | Цент |
| £ | £ | £ | Фунт |
| ¤ | ¤t; | ¤ | Знак валюты |
| ¥ | ¥ | ¥ | Знак йены и юаня |
| ƒ | ƒ | ƒ | Знак флорина |
| маркеры | |||
| . | простой маркер | ||
| ○ | ○ | круг | |
| · | · | · | средняя точка |
| † | † | крестик | |
| ‡ | ‡ | двойной крестик | |
| ♠ | ♠ | ♠ | пики |
| ♣ | ♣ | ♣ | трефы |
| червы | |||
| ♦ | ♦ | ♦ | бубны |
| ◊ | ◊ | ◊ | ромб |
| ✏ | ✏ | карандаш | |
| ✎ | ✎ | карандаш | |
| ✐ | ✐ | карандаш | |
| ✍ | ✍ | рука | |
| кавычки | |||
| " | " | " | двойная кавычка |
| & | & | & | амперсанд |
| « | « | « | левая типографская кавычка (кавычка-елочка) |
| » | » | » | правая типографская кавычка (кавычка-елочка) |
| ‹ | ‹ | одиночная угловая кавычка открывающая | |
| › | › | одиночная угловая кавычка закрывающая | |
| ′ | ′ | ′ | штрих (минуты, футы) |
| ″ | ″ | ″ | двойной штрих (секунды, дюймы) |
| ‘ | ‘ | ‘ | левая верхняя одиночная кавычка |
| ’ | ’ | ’ | правая верхняя одиночная кавычка |
| ‚ | ‚ | ‚ | правая нижняя одиночная кавычка |
| “ | “ | “ | кавычка-лапка левая |
| ” | ” | ” | кавычка-лапка правая верхняя |
| „ | „ | „ | кавычка-лапка правая нижняя |
| ❛ | ❛ | одиночная английская кавычка открывающая | |
| ❜ | ❜ | одиночная английская кавычка закрывающая | |
| ❝ | ❝ | двойная английская кавычка открывающая | |
| ❞ | ❞ | двойная английская кавычка закрывающая | |
| стрелки | |||
| ← | ← | ← | стрелка влево |
| стрелка вверх | |||
| → | → | → | стрелка вправо |
| ↓ | ↓ | ↓ | стрелка вниз |
| ↔ | ↔ | ↔ | стрелка влево и вправо |
| ↕ | ↕ | стрелка вверх и вниз | |
| ↵ | ↵ | ↵ | возврат каретки |
| ⇐ | ⇐ | ⇐ | двойная стрелка влево |
| ⇑ | ⇑ | ⇑ | двойная стрелка вверх |
| ⇒ | ⇒ | ⇒ | двойная стрелка вправо |
| ⇓ | ⇓ | ⇓ | двойная стрелка вниз |
| ⇔ | ⇔ | ⇔ | двойная стрелка влево и вправо |
| ⇕ | ⇕ | двойная стрелка вверх и вниз | |
| ▲ | ▲ | треугольная стрелка вверх | |
| ▼ | ▼ | треугольная стрелка вниз | |
| треугольная стрелка вправо | |||
| ◄ | ◄ | треугольная стрелка влево | |
| звездочки, снежинки | |||
| ☃ | ☃ | Снеговик | |
| ❄ | ❄ | Снежинка | |
| ❅ | ❅ | Зажатая трилистниками снежинка | |
| ❆ | ❆ | Жирная остроугольная снежинка | |
| ★ | ★ | Закрашенная звезда | |
| ☆ | ☆ | Незакрашенная звезда | |
| ✪ | ✪ | Незакрашенная звезда в закрашенном круге | |
| ✫ | ✫ | Закрашенная звезда с незакрашенным кругом внутри | |
| ✯ | ✯ | Вращающаяся звезда | |
| ⚝ | ⚝ | Начерченная белая звезда | |
| ⚪ | ⚪ | Средний незакрашенный круг | |
| ⚫ | ⚫ | Средний закрашенный круг | |
| ⚹ | ⚹ | Секстиле (типа снежинка) | |
| ✵ | ✵ | Восьмиконечная вращающаяся звезда | |
| ❉ | ❉ | Звёздочка с шарообразными окончаниями | |
| ❋ | ❋ | Жирная восьмиконечная каплеобразная звёздочка-пропеллер | |
| ✺ | ✺ | Шестнадцатиконечная звёздочка | |
| ✹ | ✹ | Двенадцатиконечная закрашенная звезда | |
| ✸ | ✸ | Жирная восьмиконечная прямолинейная закрашенная звезда | |
| ✶ | ✶ | Шестиконечная закрашенная звезда | |
| ✷ | ✷ | Восьмиконечная прямолинейная закрашенная звезда | |
| ✴ | ✴ | Восьмиконечная закрашенная звезда | |
| ✳ | ✳ | Восьмиконечная звёздочка | |
| ✲ | ✲ | Звёздочка с незакрашенным центром | |
| ✱ | ✱ | Жирная звёздочка | |
| ✧ | ✧ | Заострённая четырёхконечная незакрашенная звезда | |
| ✦ | ✦ | Заострённая четырёхконечная закрашенная звезда | |
| ⍟ | ⍟ | Звезда в круге | |
| ⊛ | ⊛ | Снежинка в круге | |
| часы, время | |||
| ⏰ | ⏰ | Часы | |
| ⌚ | ⌚ | Часы | |
| ⌛ | ⌛ | Песочные часы | |
| ⏳ | ⏳ | Песочные часы | |
Случаи использования некоторых спецсимволов, в том числе неразрывного пробела и мягкого переноса
Если вы немного уже изучили таблицу, то получили подтверждение сказанным мною выше словам, что для отображения всех спецсимволов используется цифровой код () либо его буквенный аналог (символьная мнемоника), где вместо совокупности решетки и цифр прописаны буквы ().
Теперь посмотрим, когда необходимо применять данные коды. Скажем, в статье вам необходимо в информативных целях указать какой-нибудь HTML тег, например,
Поэтому из той же таблицы спецсимволов HTML берем соответствующие коды и вся запись будет выглядеть так:
Кроме того, чтобы отобразить в браузере не сам знак амперсанда, а его обозначение в виде , нужно добавить из таблицы его код:
<footer>
Тогда в браузере выведется именно запись мнемоник, которые нужно применить для отображения тега FOOTER. Немного путано, но на этой странице вы сможете попрактиковаться в данном аспекте, введя в поле «HTML» мнемоники для соответствующих символов и задействуя кнопку «Run», а в области «Result» получая результат их отображения в браузере:
Обратите внимание, что я обеспечил перенос текста с помощью уже упомянутого тега BR с тем, чтобы сами символы отображались не в одну строку, а столбиком для удобства.
Идем дальше. Иногда в тексте возникают сочетания, которые нежелательно разделять по разным строкам. Скажем, «1000 руб.» будет логичным или оставить на верхней строке, или при недостатке места всю конструкцию перенести на на строку ниже.
Особенно это актуально, если пользователи применяют устройства с различной шириной экрана, в том числе мобильные. Ведь в этом случае веббраузер форматирует текст, подстраиваясь под новые условия. И если при стандартных размерах монитора текст выглядит корректно, то при их изменении все может поменяться.
Для этих случаев предусмотрен неразрывный пробел HTML , о котором я уже упоминал. Напомню, что в этом случае код пробела такой:
И его нужно вставить между двумя совокупностями знаков, которые требуется связать:
1000 руб.
Теперь браузер ни в коем случае не осуществит их разделение, даже если потребуется форматирование текста для его корректного отображения.
Также бывает такая ситуация, когда очень длинное слово не помещается в свободное пространство и требуется перенести его часть. Как при необходимости предопределить перенос на новую строку в этом случае? Для этого есть спецсимвол мягкого переноса -, который нужно поместить в то место, в котором слово нужно разорвать:
Длинноедлинноедлинноедлинноедлинноеслово
Если возникает ситуация, когда слово нужно перенести, то на месте нахождения мнемоники мягкого переноса образуется разрыв, где появится знак переноса (дефис), а оставшаяся часть данного слова окажется на ниже следующей строке.
Впрочем, опять же будет полезным все это дело, включая примеры неразрывного и мягкого переноса, воочию отследить на практике :
В окне этого редактора можно изменять размеры поля просмотра «Result», захватив левой кнопкой мышки край этой области и, не отпуская ее, тянуть влево для уменьшения ширины. Тогда возникает реальная ситуация, когда браузер начинает переформатировать содержимое для корректного его отображения.
И осуществляется перенос, который был предусмотрен в описанных мной примерах. Впрочем, вы сами можете подвигать просмотровое окно, расширяя-сужая ее, и визуально убедиться в этом.
Инструкция
Если такой пробел надо вставить в веб-страницу, то следует использовать специальный символ («мнемокод») языка HTML. В исходном коде страницы он будет выглядеть как такой набор символов: . Например:Это&nbsр;образец&nbsр;неразрывного&nbsр;текста.Этот фрагмент можно поместить в любое место текста страницы, и везде браузер будет помещать эти слова в одну строку, смещая переход на следующую строку либо на позицию перед этим блоком, либо после него.
Это свойство неразрывного пробела часто используют при веб-страниц не только для «склеивания» слов в , но и в качестве «распорки» в таблицах и других блочных элементах. Например, если в таблице не задана ширина, то в любую ее можно вставить (один или больше), и браузер не «сплющит» эту колонку до нулевой ширины, даже если все колонки будут пусты. Кроме того, с помощью таких пробелов можно без использования языка CSS (Cascading Style Sheets - «Каскадные таблицы стилей») изменять расстояние , вставляя их по два или больше.
Если неразрывный пробел надо поместить в текстовый документ, хранимый в файле с форматом какого-либо из офисных приложений (например, doc или docx), то можно воспользоваться соответствующей опцией текстового редактора Microsoft Word. Например, в версии Word 2007 для этого надо перейти на вкладку «Вставка» и в группе команд «Символы» открыть выпадающий список на кнопке «Символ». Выберите в нем самый нижний пункт - «Другие символы».
Перейдите на вкладку «Специальные знаки» открывшегося окошка и найдите в перечне строку, в которой написано «Неразрывный пробел». Затем нажмите кнопку «Вставить» и закройте окошко. Всю эту процедуру можно заменить нажатием сочетания назначенных ей горячих клавиш CTRL + SHIFT + Пробел.
Источники:
- Неразрывный пробел снова перестал быть растяжимым
Автоформатирование в Microsoft Word не всегда соответствует тому, что вы пытаетесь написать, и время от времени программа редактирует формат текста некорректно. Например, существуют случаи, когда некоторые слова и фразы недопустимо разрывать автоматическим переносом части фразы на другую строку. Среди них – различные даты, инициалы, единицы измерения и многое другое. В этом случае победить автоформатирование, которое переносит часть важного сочетания слов или знаков на другую строчку, можно, установив неразрывный , который не дает разрывать строки и предотвращает ненужные переносы. Как поставить в своем тексте неразрывный пробел?
Инструкция
Откройте в основном меню Microsoft word раздел «Вставка» и выберите вставку символов. В появившемся окне нажмите «Другие » и на вкладке специальных знаков найдите в списке «Неразрывный пробел».
По умолчанию неразрывные являются скрытыми символами, поэтому для того, чтобы увидеть их, найдите на панели меню значок отображения скрытых символов. Также их можно отобразить, открыв раздел «Абзац» и щелкнув на пункт «Отобразить все знаки».
Вы увидите обычные пробелы в виде точек, а только что установленные неразрывные пробелы - в виде маленьких кружочков. Чтобы , снова нажмите на пиктограмму видимости скрытых символов, и все скрытые символы пропадут. В любой момент их видимость можно включать и отключать.
Видео по теме
Текстовые редакторы позволяют пользователям экономить время, набирая слова полностью и не разделяя их при переносе на следующую строку. Читать слово целиком, конечно, удобнее, однако иногда целесообразно использовать перенос нескольких слогов.
Инструкция
Если при наборе текста вы придерживаетесь определенного формата, например, выравнивания по левому краю, вы неизбежно столкнетесь с проблемой переноса слова на , ведь вам важно не оставлять пустого места, не доходящего до . Если это единичный случай, вы можете поставить вручную. Просто нажмите клавишу « » перед концом строчки, при этом соблюдая слоговой принцип деления слов. Помните, что нельзя переносить на другую строку только одну букву слова или же сочетание согласной и мягкого знака. Идеальным для слогоделения является сочетание согласной и гласной буквы, образующих общий слог. Переносить можно несколько слогов сразу, разделяя слово на половину.
Если при наборе текста вам важна исключительно скорость, а проверку вы предпочитаете отдавать компьютеру, воспользуйтесь сервисом «Автоматический перенос» текстового документа MC Word. Задать такую функцию в MC Word 2003 можно с помощью меню «Сервис», находящегося на главной панели инструментов. Нажав на кнопку «Сервис» левой кнопкой мыши, наведите курсор на раздел «Язык». В открывшемся контекстном меню выберите функцию «Расстановка ». Поставьте галочку в графе «Автоматическая » и подтвердите свои действия, нажав кнопку «ОК». Вы можете дополнить настройки автоматических переносов, выбрав ширину зоны переноса слов и максимальное число последовательных переносов. Ввделите необходимые числовые значения в соответствующие поля и нажмите «ОК». Сохраненные изменения будут применяться ко всем последующим документам MC Word.
Чтобы поставить автоматические в MC Word 2007 и выше, нажмите на кнопку «Макет страницы», которая находится на главной панели инструментов открытого документа MC Word. Наведите курсор на графу «Параметры страницы» и поставьте галочку рядом с полем «Расстановка переносов». Выберите вариант «Авто». Сохраните изменения, нажав «ОК».
Настроить автоматический перенос слов можно и в текстовом документе «Блокнот». Для этого в открытом окне программы нажмите на кнопку «Формат» на главной панели инструментов. Поставьте галочку в графе «Перенос по словам.
Вставка а в html необходима для корректного отображения текста на веб-странице в соответствии с задуманными автором эффектами. В зависимости от сложности задачи можно использовать как обычные неразрывные пробелы, так и управлять количеством пробелов с помощью css-свойств.
Вам понадобится
- - html-редактор
Инструкция
Если вам нужно вставить один обычный пробел между словами (получается при нажатии клавиши Space), не нужно выполнять никаких специальных действий - любое количество идущих подряд обычных пробелов в html-коде будет выглядеть на веб-странице как один.
Для сохранения точного количества пробелов между словами замените каждый обычный пробел символами " " (без кавычек) - это код неразрывного пробела в html. Например: «Между каждым словом два пробела ». Неразрывный пробел вставляется между двумя словами и для того, чтобы они не разделялись при переносе на другую строку. Для автоматической расстановки неразрывных пробелов в тексте удобно использовать известный инструмент Артемия Лебедева - «Типограф» (http://www.artlebedev.ru/tools/typograf/).
Еще один способ вставить задуманное количество пробелов в html между словами: заключите нужную часть текста в теги и. Тогда слова будут отображаться моноширинным шрифтом, но все обычные пробелы между словами при отображении на веб-странице сохранятся. Обратите внимание, у тега есть особенности: внутри него не допускается использование некоторых других тегов: и, .
Более сложный метод управления обработкой пробелов: используйте css-свойство white-space со значением pre или pre-wrap (без переноса строк внутри элемента и с переносом строк соответственно). Укажите это свойство в описании стиля страницы или отдельно взятого элемента html-вёрстки. При использовании этого метода шрифт на моноширинный, а количество пробелов между словами сохраняется. Пример: Как вставить пробел в html-код?Или: .free_spaces {white-space: pre-wrap;}… Как вставить пробел в html-код?
Корректное добавление неразрывного пробела в HTML. Валидная верстка .
Если вы пробовали верстать сайты, то наверняка знаете, что при добавлении с клавиатуры нескольких пробелом в тексте, они не сохраняются. Браузеры воспринимают их как один пробел. Иногда это приводит к проблемам с версткой. Сейчас мы покажем вам, как добавить подряд несколько пробелов.
Использование спецсимволов
В языке разметки гипертекста, используется специальный символ, который интерпретируется браузерами как пробел. Вот он:
Набирать его нужно именно в таком виде, в котором он представлен выше. Если вам понадобится вставить несколько пробелов подряд, вставляйте несколько таких символов.
Как бы выглядел наш участок кода, если бы мы хотели добавить три пробела подряд.
Тестовый участоккода
Если бы мы открыли такую страничку в браузере, вот чтобы у нас получилось:
Тестовый участок кода
Тэг pre
Далеко не всегда текст можно отформатировать нужным образом, используя стандартные теги разметки. При этом, набирая его с клавиатуры, можно добиться нужного результата. Но в итоге, при просмотре страницы в браузере, все ручное форматирование слетит, и вы получите обычный текст. Тот же результат будет, если вы вручную добавите несколько неразрывных пробелов подряд, просто щелкая одноименную клавишу.
Как же быть в такой ситуации?
Вот пример текста с длинным пробелом. Мы получили это, заключив текст в тег PRE
Как видите, несколько подряд идущих переносов строк также сохраняются. Именно для этого и используется данный тэг. Он оставляет ручное форматирование для текста, который заключен в него.
Видео к статье :
Заключение
Используйте данные методы, исключительно для вставки специального форматирования текста. Не стоит этими методами добиваться расположения элементов на странице. Как скажем, добавлять несколько неразрывных пробелов, чтобы следующий элемент был правее на страницы. Для этого следует использовать таблицы стилей.
