- Спецсимволы HTML
- Оформление текста и пунктуация
- Кавычки и скобки
- Математические знаки
- Стрелки и указатели
- HTML Цитаты
- Пример: длинные и короткие цитаты
- Пример: Аббревиатура
- Пример: Адрес
- Пример: Источники и определения
- Пример: Направление текста
- Задачи
- Итоговое задание 14
- Короткая цитата
- Длинная цитата
- Аббревиатура
- Направление текста
Спецсимволы HTML
Таблица спецсимволов HTML, содержит самые популярные символы для верстки и оформления контента веб-страниц.
Чтобы разместить символ на странице, необходимо скопировать код символа и вставить в исходный HTML-код страницы.
Спецсимволы чувствительны к регистру, поэтому их необходимо прописывать точно так, как указано в таблице.
Оформление текста и пунктуация
Код | Символ | Описание |
---|---|---|
Неразрывный пробел | ||
Узкий пробел (длины N) | ||
Широкий пробел (длины M) | ||
… | … | Многоточие |
. | . | Точка |
, | , | Запятая |
: | : | Двоеточие |
; | ; | Точка с запятой |
! | ! | Восклицательный знак |
? | ? | Вопросительный знак |
¿ | ¿ | Перевернутый вопросительный знак |
– | | Дефис |
– | – | Обычное тире (длины N) |
— | — | Обычное тире (длины M) |
@ | @ | Собачка |
* | * | Звездочка |
# | # | Решетка |
¶ | ¶ | Абзац |
§ | § | Параграф |
́ | ́ | Ударение |
' | ‘ | Апостроф |
´ | ´ | Акут |
ˆ | ˆ | Акцент |
˜ | ˜ | Малая тильда |
/ | / | Символ косой черты (slash) |
\ | \ | Обратный слэш (backslash) |
⁄ | ⁄ | Косая дробная черта (деление) |
ǀ | ǀ | Вертикальная черта |
• | • | Простой маркер |
· | · | Средняя точка |
○ | ○ | Круг |
Кавычки и скобки
Код | Символ | Описание |
---|---|---|
" | « | Двойная кавычка |
‘ | ‘ | Одиночная верхняя левая кавычка |
’ | ’ | Одиночная верхняя правая кавычка |
‚ | ‚ | Одиночная нижняя правая кавычка |
“ | “ | Двойная верхняя левая кавычка |
” | ” | Двойная верхняя правая кавычка |
„ | „ | Двойная нижняя правая кавычка |
« | « | Двойная левая угловая кавычка |
» | » | Двойная правая угловая кавычка |
( | ( | Круглая скобка влево |
) | ) | Круглая скобка вправо |
〈 | 〈 | Угловая скобка влево |
〉 | 〉 | Угловая скобка вправо |
&#lsaquo; | ‹ | Угловая скобка влево, вариант |
&#rsaquo; | › | Угловая скобка вправо, вариант |
[ | [ | Квадратная скобка влево |
] | ] | Квадратная скобка вправо |
❛ | ❛ | Одиночная английская кавычка открывающая |
❜ | ❜ | Одиночная английская кавычка закрывающая |
❝ | ❝ | Двойная английская кавычка открывающая |
❞ | ❞ | Двойная английская кавычка закрывающая |
Математические знаки
Код | Символ | Описание |
---|---|---|
+ | + | Плюс |
− | − | Минус |
= | = | Равно |
× | × | Умножение |
÷ | ÷ | Деление |
± | ± | Плюс-минус |
¹ | ¹ | Верхний индекс «1» |
² | ² | Верхний индекс «2» |
³ | ³ | Верхний индекс «3» |
½ | ½ | Дробь «одна вторая» |
⅓ | ⅓ | Дробь «одна треть» |
¼ | ¼ | Дробь «одна четвёртая» |
¾ | ¾ | Дробь «три четверти» |
№ | № | Номер |
% | % | Процент |
‰ | ‰ | Промилле |
‱ | ‱ | Знак на десять тысяч |
µ | µ | Микро |
π | π | Пи |
ƒ | ƒ | Функции |
∫ | ∫ | Интеграл |
∏ | ∏ | Произведение |
∑ | ∑ | Суммирование |
√ | √ | Радикал |
∞ | ∞ | Бесконечность |
∝ | ∝ | Пропорционально |
≅ | ≅ | Приблизительно равно |
≈ | ≈ | Почти равно |
≠ | ≠ | Не равно |
≡ | ≡ | Идентично |
≤ | ≤ | Меньше или равно |
≥ | ≥ | Больше или равно |
∑ | ∑ | Суммирование |
Стрелки и указатели
Код | Символ | Описание |
---|---|---|
← | ← | Стрелка влево |
↑ | ↑ | Стрелка вверх |
→ | → | Стрелка вправо |
↓ | ↓ | Стрелка вниз |
↔ | ↔ | Стрелка влево-вправо |
⇆ | ⇆ | Стрелка влево-вправо |
⇐ | ⇐ | Двойная стрелка влево |
⇑ | ⇑ | Двойная стрелка вверх |
⇒ | ⇒ | Двойная стрелка вправо |
⇓ | ⇓ | Двойная стрелка вниз |
⇔ | ⇔ | Двойная стрелка влево-вправо |
⇕ | ⇕ | Двойная стрелка вверх и вниз |
⇧ | ⇧ | Толстая полая стрелка вверх |
⬇ | ⬇ | Закрашенная стрелка вниз |
⬆ | ⬆ | Закрашенная стрелка вверх |
➥ | ➥ | Изогнутая стрела, указывающая вниз и вправо |
➦ | ➦ | Изогнутая стрела, указывающая вверх и вправо |
↺ | ↺ | Круглая стрелка с наконечником против часовой стрелки |
↻ | ↻ | Круглая стрелка с наконечником против часовой стрелки |
↵ | ↵ | Возврат каретки |
↩ | ↩ | Стрелка налево с крючком |
▲ | ▲ | Треугольная стрелка вверх |
▼ | ▼ | Треугольная стрелка вниз |
► | ► | Треугольная стрелка вправо |
◄ | ◄ | Треугольная стрелка влево |
☚ | ☚ | Указательный палец закрашенный влево |
☛ | ☛ | Указательный палец закрашенный вправо |
☜ | ☜ | Указательный палец прозрачный влево |
☝ | ☝ | Указательный палец прозрачный вверх |
☞ | ☞ | Указательный палец прозрачный вправо |
☟ | ☟ | Указательный палец прозрачный вниз |
˂ | ˂ | Направление влево |
˃ | ˃ | Направление вправо |
˄ | ˄ | Направление прямо |
˅ | ˅ | Направление назад |
HTML Цитаты
Для создания цитат в языке HTML используются два элемента: блочный элемент и строчный элемент . Тег используется для отображения длинных цитат, занимающих целый абзац и отображает его с отступами от левого и правого краев. Этот тег позволяет расположить текст компактно в центре страницы. Внутри него могут присутствовать другие элементы форматирования текста.
Элемент используется для коротких цитат, являющихся частью текущего абзаца. Как правило, браузеры заключают содержимое элемента в кавычки. Обычно в состав цитаты не входят символы разрыва строки, и цитата считается элементом текстового уровня.
Для обоих элементов может быть указан атрибут CITE, значением которого является URL-aдpec цитируемоrо фраrмента.
Пример: длинные и короткие цитаты
Зенит — это наивысшая для наблюдателя точка на небосклоне
в вертикальном направлении, которую, как известно,
можно легко определить с помощью вертикального отвеса.
Как сказал А. А. Милн, некоторые люди говорят с животными.
Зенит — это наивысшая для наблюдателя точка на небосклоне
в вертикальном направлении, которую, как известно,
можно легко определить с помощью вертикального отвеса.Как сказал А. А. Милн,
некоторые люди говорят с животными.
Тег
Аббревиатура — принятое на письме сокращение слов или слово, составленное из нескольких частей друrих слов (ВУЗ, НИИ, исполком и др.). При употреблении в тексте какого-либо акронима или аббревиатуры следует воспользоваться тегом . С помощью атрибута «title» можно задать всплывающую подсказку с расшифровкой аббревиатуры. При этом поисковые роботы индексируют именно полный вариант расшифровки, определенный в атрибуте «title». Чтобы отличать аббревиатуры от обычноro текста, они подчеркиваются пунктирной линией.
Пример: Аббревиатура
NАSА проводит несколько невероятных космических экспериментов.
Пp. Стивен Хокинг — физик-теоретик и космолог.
NАSА проводит несколько невероятных
космических экспериментов. Пp. Стивен Хокинг — физик-теоретик и космолог.
Тег
Тег используется для указания контактной информации, адреса и телефонов. Он может содержать почтовый адрес, а также адрес электронной почты или номер телефона. Большинство браузеров отображают содержимое элемента шрифтом с курсивным начертанием.
Пример: Адрес
Теги и
Тег используется при оформлении ссылки на какой-то первоисточник, например на книгу, веб-сайт или научную работу, для обозначения упоминаемого источника. Часто используется в списках литературы, при указании aвторских прав или упоминании имени владельца ресурса. Браузеры отображают содержимое элемента шрифтом с курсивным начертанием.
Тег используется для обозначения определения какого-либо нового термина. Объяснение нового термина (научного концепта или узкопрофильного названия) в тексте называется «определением». Элемент можно использовать, если новый термин встречается в тексте впервые и тут же дается его определение. Браузер отображает такой текст курсивом.
Пример: Источники и определения
Только за первый месяц было продано более десяти тысяч билетов
на просмотр фильма Красный дракон Стивена Хопкинса.
— векторная величина, направление её вектора совпадает
с направлением скорости
Только за первый месяц было продано более десяти тысяч билетов
на просмотр фильма Красный дракон Стивена Хопкинса.
Импульс тела — векторная величина, направление её вектора совпадает
с направлением скорости
Тег
Тег управляет направлением отображаемого текста. Имеет обязательный атрибут dir, который принимает значения ltr (слева направо) и rtl (справа налево).
Пример: Направление текста
Если Ваш браузер поддерживает двунаправленный алгоритм (bdo),
следующая строка будет написана справа налево (rtl)
Этот текст написан справа налево.
Если Ваш браузер поддерживает двунаправленный алгоритм (bdo),
следующая строка будет написана справа налево (rtl)
Этот текст написан справа налево.
Задачи
Итоговое задание 14
На этом уроке вы познакомились с еще с некоторыми логическими элементами форматирования, которые определяют не внешний вид текста, а его тип, и в зависимости от которого браузер применяет тот или иной вид внешнего форматирования. Все элементы, рассмотренные выше, являются контейнерами и требуют наличия закрывающего тега. Некоторые из этих элементов могут вообще не изменять отображение текста, поэтому при их рассмотрении был сделан упор на то, как они определяют значение текста, а не на то, как они его форматируют.
Пришло время повторить изученное и выполнить четыре несложных задания:
Короткая цитата
Используя логический элемент HTML, добавьте кавычки вокруг слова: «Теория».
Теория предсказывает новые явления и новые законы.
Теория предсказывает новые явления и новые законы.
Длинная цитата
Поместите нижеприведенный текст внутрь такого элемента, который сделает его цитатой с отступом слева. Задайте URL ресурса, откуда взята эта цитата: «http://www.world.org».
Характеристикой быстроты и направления движения служит физическая величина — скорость.
Характеристикой быстроты и направления движения
служит физическая величина — скорость.
Аббревиатура
Используя элемент HTML сделайте так, чтобы при наведении указателя мыши на аббревиатуру WWW появиласья подсказка, coдержащая ее расшифровку: «World Wide Web».
Стремительное развитие WWW началось в ceредине 90-x годов ХХ века.
Стремительное развитие WWW началось в ceредине 90-x годов ХХ века.
Направление текста
С помощью элемента HTML измените направление текста справа-налево.
Путь — величина скалярная.
Путь — величина скалярная.