Кавычки код html: Кавычки в HTML

Содержание

quotes | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
8.0+	11.0+	4.0+	5.1+	1.5+	2.1+

Краткая информация

Значение по умолчанию	Зависит от браузера, его настроек и операционной системы. Чаще всего используется кавычки вида «/»
Наследуется	Да
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/generate.html#propdef-quotes

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает тип кавычек, который применяется в тексте документа. В каждом языке существуют свои традиции для обозначения кавычек, свойство quotes позволяет задать вид их отображения по всему тексту и установить, таким образом, его единообразное оформление. Добавление кавычек происходит автоматически для содержимого контейнера <q>, а также для текста, к которому применяется стилевое свойство 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: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSa 5.1Fx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>quotes</title>
  <style>
   q {
    font-family: Times, serif; /* Шрифт с засечками */
    font-style: italic; /* Курсивное начертание текста */
    color: navy; /* Синий цвет текста */
    quotes: "\00ab" "\00bb"; /* Кавычки в виде двойных угловых скобок */
   }
  </style>
 </head>
 <body> 
  <p>Станислав Лец утверждал: <q>Чаще всего выход там, где был вход</q>.  </p>
 </body>
</html>

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

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

Контент

CSS по теме

quotes

Статьи по теме

Рецепты CSS

Кавычки в HTML

Подробности: Категория: Вёрстка

Рейтинг: 3 / 5

Пожалуйста, оцените Оценка 1Оценка 2Оценка 3Оценка 4Оценка 5

Существует несколько видов кавычек: кавычки ёлочки (русские классические кавычки), английские двойные кавычки (используются при написании литературных текстов и т.п.),

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

Для этого проще бы запомнить или записать где-нибудь html код кавычек, которые будут всегда, что называется, под рукой.

Кавычки в HTML

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


<q>Текст в кавычках...</q>{/codecitation}
В CSS можно прописать свойства этого тега, выделив его как угодно вашей душе и дизайну сайта. Например:
{codecitation}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. Например:


<p>Цитата на русском языке: <q lang="fr">Жизнь хороша!</q>.</p>

Виды кавычек

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

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

Назад
Вперёд

Комментарии HTML

❮ Назад Далее ❯

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

Тег комментария HTML

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

Обратите внимание, что в начале стоит восклицательный знак (!) тег, но не в конечный тег.

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

Добавить комментарии

С комментариями вы можете размещать уведомления и напоминания в своем HTML-коде:

Пример

Это абзац.

Попробуйте сами »

Скрыть Содержимое

Комментарии можно использовать для скрытия содержимого.

Это может быть полезно, если вы временно скрываете контент:

Пример

Это абзац.

Это тоже абзац.

Попробуйте сами »

Вы также можете скрыть несколько строк. Все между будут скрыты от дисплея.

Пример

Скрыть часть кода HTML:

Это абзац.

Это тоже абзац.

Попробуйте сами »

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

Скрыть встроенный контент

Комментарии можно использовать для скрытия частей в середине кода HTML.

Пример

Скрыть часть абзаца:

Этот является абзацем.

Попробуйте сами »

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Используйте HTML-тег комментария, чтобы сделать комментарий из текста «Это комментарий».

Это заголовок

Это комментарий

Это абзац.

Начать упражнение

❮ Предыдущий Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.

CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Авторское право 1999-2022 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.

Одиночная кавычка в HTML | PageDart

Что происходит, когда вы пытаетесь поместить одинарную кавычку в HTML?

Это ломает ваш HTML?

Ответ: это зависит от обстоятельств.

Одинарные кавычки в HTML могут сломать ваш сайт.

Если одинарные кавычки нарушают ваш HTML, я здесь, чтобы помочь!

Давайте рассмотрим, почему это происходит, и два способа исправить это.

При написании HTML вы используете кавычки для заключения значения атрибута.

Возьмем простой пример изображения:

Здесь атрибут src , а значение ( cat.png ) заключено в одинарные кавычки.

Существует два способа заключения значений: в одинарные или двойные кавычки.

Если вы используете одинарные кавычки, ваш HTML будет выглядеть так:

 <входное значение='привет'/>

Вы также можете сделать то же самое, используя двойные кавычки, и в этом случае ваш HTML будет выглядеть так:

В HTML допустимы как одинарные, так и двойные кавычки, и все браузеры их поддерживают.

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

Например, добавление слова «это» нарушит одинарную кавычку HTML. Вот так:

 <входное значение='это'/>

Поскольку внутри значения есть одинарная кавычка, она завершает перенос значения. Этот HTML будет отображаться как это а не это .

То же самое верно, если вы заключаете значение в двойные кавычки, а затем используете двойные кавычки внутри значения, например:

Отображаемый HTML будет Это будет , а не Это "сломит" HTML .

Есть два способа решить эту проблему.

Мы можем использовать двойные кавычки для упаковки, а затем мы можем использовать одинарные кавычки внутри значения
Мы можем использовать специальные escape-символы

Далее рассмотрим вариант 1.

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

Это будет выглядеть так:

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

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

Вот как это будет выглядеть в HTML:

Результатом будет значение Это не "сломит" HTML , отображаемый на странице.

Есть две вещи, о которых нам нужно знать, когда мы используем это исправление:

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

В этом случае нам нужно посмотреть на второе исправление, которое использует escape-строку.

Использование экранирующих строк HTML

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

Обычно в CMS по умолчанию устанавливаются одинарные или двойные кавычки, и вы не можете их изменить.

Другая ситуация, когда вам нужно показать как одинарные, так и двойные кавычки в значении, например:

Будет отображаться как Вы , а не Вы собираетесь «сломать» HTML .

То же самое верно, если мы используем двойные кавычки:

Будет отображаться как Вы собираетесь , а не Вы собираетесь «сломать» HTML .

Итак, как нам это исправить?

Нам нужно использовать специальный набор символов, который называется «экранирующей» строкой.

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

Например, этот странный набор символов ' — это то же самое, что использовать одинарную кавычку.

Странно, когда вы впервые устанавливаете его, но браузер будет читать эту строку ' и превратите его в одинарную кавычку.

Есть много таких странных escape-строк.

Существует десять различных символов для представления одной кавычки. 10!

Вот они все:

‘
’
‘
’
‘
’
'
‘
'

Итак, какой из них вы должны использовать, когда вам нужно сбежать.

Короткий ответ: вы должны использовать ' . Это официальная управляющая строка для использования в HTML 5. Таким образом, используя наш предыдущий пример, мы могли бы написать:

Хотя в HTML это выглядит странно. Когда браузер отображает значение, оно будет отображаться для пользователя как «это».

Так как же сделать то же самое для двойной кавычки?

Есть много способов написать двойную кавычку:

"
»
“
”
“
”
"
"
"

Единственный, который вы должны использовать, это " . Итак, взяв наш пример, где у вас есть как одинарные, так и двойные кавычки, ваш HTML будет выглядеть так:

Затем будет отображаться значение «Вы собираетесь «сломать» HTML»

Теперь у нас есть решение этой проблемы, ура!

Кавычки — не единственные символы, которые можно экранировать.

Рассмотрим их далее.

Экранирование специальных символов

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

Тем не менее, мне приходилось убегать только 5.

Если вас интересует полный список, w3 создал список всех специальных символов HTML.

Вот мой список из 5 вещей, о которых вам нужно подумать, чтобы сбежать:

& становится &
< становится <
становится >
» становится "
‘ становится '

С этим экранированием вы больше никогда не сломаете HTML.

Часто задаваемые вопросы

Можно ли использовать одинарные кавычки в HTML?

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

quotes | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

CSS по теме

Статьи по теме

Рецепты CSS

Кавычки в HTML

Кавычки в HTML

Виды кавычек

Комментарии HTML

Тег комментария HTML

Добавить комментарии

Пример

Скрыть Содержимое

Пример

Пример

Скрыть встроенный контент

Пример

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Это заголовок

ВЫБОР ЦВЕТА

КОД ИГРЫ

Top Tutorials

Лучшие ссылки

Одиночная кавычка в HTML | PageDart

Использование экранирующих строк HTML

Экранирование специальных символов

Часто задаваемые вопросы

Можно ли использовать одинарные кавычки в HTML?

Добавить комментарий Отменить ответ

Рубрики