Как сделать кавычки в html

Как ставить кавычки

Кавычки используются для обособления прямой речи, названий, цитат. В русском языке употребляются различные типы кавычек:

• Двойные кавычки («);
• Одинарные кавычки (‘);
• Двойные угловые кавычки-ёлочки («»).

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

Двойные кавычки

Основное назначение данных кавычек — выделение цитат. Кавычки-цитата могут быть набраны на клавиатуре при помощи сочетания клавиш Shift+»Э» (при включенной английской раскладке). В HTML двойные кавычки могут быть записаны следующим образом:

"Лучше стараться, чем ржаветь."

Одинарные кавычки

Одинарные кавычки (апострофы) по большей части используется для обособления одной цитаты внутри другой, выделения слов в переносном смысле, переводов. На клавиатуре набираются при помощи клавиши «Э» (в английской раскладке). Одинарные кавычки HTML записываются так:

"Если вы не хотите делить своего мужа, не 'пилите' его."

Двойные угловые кавычки

Двойные угловые кавычки (или «французские ёлочки») активно используются в русском языке в машинном тексте. На клавиатуре их можно набрать сочетанием клавиш Shift+2 (при включенной русской раскладке), но не на всех клавиатурах этот символ может присутствовать. В HTML кавычки-ёлочки записываются так:

« - левая » - правая

«Нет пути к счастью, счастье - это путь».

Альтернативная запись кавычек

Кавычки, как и другие символы, можно набрать при помощи клавиши Alt и специального кода на цифровой клавиатуре (правый блок цифровых клавиш). Посмотрим теперь, какие коды необходимо знать для добавления кавычек, если, например, у вас на клавиатуре обычные методы ввода по каким-либо причинам недоступны.

quotes

Устанавливает тип кавычек, который применяется в тексте документа. В каждом языке существуют свои традиции для обозначения кавычек, свойство quotes позволяет задать вид их отображения по всему тексту и установить, таким образом, его единообразное оформление. Добавление кавычек происходит автоматически для содержимого контейнера , а также для текста, к которому применяется стилевое свойство content со значением open-quote (открывающая кавычка) или close-quote (закрывающая кавычка).

Синтаксис

quotes: «левая кавычка» «правая кавычка» | none | inherit

Значения

В качестве значения используется символ текста (например, quotes: ««» «»» ) или символ юникода. Некоторые из них перечислены в табл. 1.

Табл. 1. Виды кавычек

Вид	Спецкод HTML	Юникод	Описание
«	"	\0022	Двойная кавычка, применяется обычно в моноширинных шрифтах, для обозначения символа дюйма, а также угловых секунд.
‘	'	\0027	Апостроф. Символ угловых минут, в латинице применяется для обозначения мягкого знака (popalas’ lisa).
«	« или «	\00ab	Открывающая двойная угловая кавычка.
»	» или »	\00bb	Закрывающая двойная угловая кавычка.
‘	‘	\2018	Открывающая одинарная кавычка.
’	’	\2019	Закрывающая одинарная кавычка.
“	“	\201c	Открывающая двойная кавычка в англоязычных текстах или закрывающая для русского языка.
”	”	\201d	Закрывающая двойная кавычка в англоязычных текстах.
„	„	\201e	Открывающая двойная кавычка. Применяется в русском языке.

none Кавычки не добавляются. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa 5.1 Fx

       
Станислав Лец утверждал: Чаще всего выход там, где был вход.
  

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

Рис. 1. Применение свойства quotes

Кавычки в текстовом поле input

Как видно из этого кода, в тексте имеются одинарные кавычки. Данный текст через переменную вставляется в текстовое поле. Атрибут value заключён в одинарные кавычки. Получается что одинарные кавычки, находятся внутри других одинарных кавычек. При выводе на страницу, текст в текстовом поле, урезается до первой кавычки. Аналогичная ситуация наблюдается и в случае, если вместо одинарных кавычек, будут двойные кавычки. Данные в это текстовое поле вставляются из БД. Посему я не могу знать, какие именно кавычки нам попадутся в тексте. Как правильно вставить кавычки в текстовое поле? Есть ли в PHP что-нибудь полезное для таковых ситуаций?

Отслеживать
задан 27 апр 2015 в 9:06
353 1 1 золотой знак 8 8 серебряных знаков 21 21 бронзовый знак

5 ответов 5

Сортировка: Сброс на вариант по умолчанию

Зачем рисковать — вот хорошая функция htmlspecialchars .

Отслеживать
ответ дан 27 апр 2015 в 9:11
user31688 user31688

Вы можете использовать функцию htmlspecialchars().

Отслеживать
ответ дан 27 апр 2015 в 9:10
Zhukov Roman Zhukov Roman
9,085 14 14 серебряных знаков 26 26 бронзовых знаков

При выводе любой строки на страницу ее желательно обработать функцией htmlspecialchars, если только не предполагается, что она должна содержать в себе кусок HTML-разметки:

echo ""; 

Кавычки в HTML

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

Кавычки в HTML

Кавычки можно выделить в тексте при вёрстке страниц несколькими способами. Можно выделить с помощью двойного тега q, пример ниже:

Текст в кавычках. 
 
В CSS можно прописать свойства этого тега, выделив его как угодно вашей душе и дизайну сайта. Например: q < font-family: Georgia, Verdana; /* Шрифт */ font-style: bold; /* Выделение текста жирным шрифтом */ color: #000; /* Цвет текста в кавычках */ >

С помощью простого псевдокласса :lang мы можем задать настройки вида кавычек в цитатах для разных языков. В качестве языка выступают короткие значения языков, например: ru — русский; en — английский; de — немецкий и т.п. Для этого в CSS нужно прописать следующие стилевые свойства quotes (которые и определяют тип кавычек в зависимости от языка:

q:lang(fr), q:lang(ru) < /* Тип кавычек для русского и французского языка */ quotes: "\00AB" "\00BB"; >q:lang(de) < quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */ >q:lang(en) < quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */ >

При вёрстке же страницы или просто при написании текста достаточно добавить к тегу цитаты псевдокласс :lang. Например:

Цитата на русском языке: Жизнь хороша!.

Виды кавычек

Вид	Спецкод HTML	Юникод	Описание
«	"	\0022	Двойная открывающаяся кавычка.
‘	'	\0027	Апостроф. В латинице применяется для обозначения мягкого знака. В программировании при экранировании кавычек.
«	« или «	\00ab	Открывающая двойная угловая кавычка. Используются в текстах на русском языке. Классические кавычки ёлочки.
»	» или »	\00bb	Закрывающая двойная угловая классическая кавычка ёлочка. Используются в текстах на русском языке.
‘	‘	\2018	Открывающая одинарная кавычка.
’	’	\2019	Закрывающая одинарная кавычка.
“	“	\201c	Открывающая двойная кавычка в текстах на английском языке или закрывающая кавычка для русского языка.
”	”	\201d	Закрывающая двойная кавычка в текстах на английском языке.
„	„	\201e	Открывающая двойная кавычка. Применяется в текстах на русском языке.

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