Html одинарні лапки. Рисочки: тільки чи тире, мінус і дефіс

опис

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

синтаксис

quotes: "ліва лапка" "права лапка" | none | inherit

значення

Як значення використовується символ тексту (наприклад, quotes: "« "" »") або символ Unicode. Деякі з них перераховані в табл. 1.

HTML5 CSS2.1 IE Cr Op Sa 5.1 Fx

Станіслав Лец стверджував: Найчастіше вихід там, де був вхід.

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

Мал. 1. Застосування властивості quotes

працюючи в html-редакторі  часто з'являється необхідність знання спецсимволов (мнемоніки) Для форматування тексту. Цими символами можна надати тексту правильний вид - легко читається і сприймається.

Наприклад, якщо ваш сайт має так звану гумову верстку  - то розташований в абзацах текст буде растягіватся по ширині, але при зміні цієї ширини деякі слова перенесуться на новий рядок. Таким чином можуть автоматично розділиться нерозривні словосполучення або назви, наприклад:

... доктор З.
  Фрейд, який ...

У користувачів різні екрани, А значить і ширина «гумового» сайту буде змінюватися: в якому місці буде перенесення - неясно. Навіть якщо ваш сайт заданої ширини, не можна вгадати в якому місці тексту закінчиться рядок. У мові HTML на цей випадок існує спеціальна мнемоніка - нерозривний пробіл:

Пропуск в html  прописується таким ось способом:

Тобто, в редакторі має виглядати так:

HTML має одну особливість - безліч прогалин замінюється одним. Якщо ви поставите 10 прогалин поспіль в редакторі - то на сторінці побачите один. Нерозривний пробіл також рятує в цій ситуації, але якщо ви хочете зробити відступ - краще використовувати для цього CSS.

Іноді потрібен зворотний ефект - слово занадто довге і його потрібно перенести на новий рядок, розділивши дефісом. В такому випадку допоможе мнемоніка «м'якого переносу» - & shy:

електрофіка & shyція;

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

Таблиця основних мнемонік:

Деякі знаки, такі як амперсанд (&) або кутова дужка (<), обозначают начало мнемоники или HTML-тегов, так что отображаться не будут. Для вывода их в статье нужно использовать соответствующие спецсимволы.

Оновлене: 17 cічня 2015

Привіт, шановні читачі блогу сайт. Трохи раніше ми вже встигли поговорити про те, також дізналися про оформлення в ньому. Сьогодні у нас на черзі поняття пробілу в ХТМЛ, а ще пов'язане з ним форматування коду при його написанні (для зручності подальшого його читання і сприйняття).

Ну і в зв'язку з тим, що ми торкнемося теми нерозривного пробілу і м'якого переносу, нам доведеться акцентувати нашу увагу на так званих спецсимволи або мнемоніки, використовуваних в мові Html, які дозволять вам додати в код web документа безліч додаткових символів, на зразок вже згаданого вище . Але про все по порядку.

Прогалини і пробільні символи в мові Html

Перш, ніж переходити до питання форматування тексту за допомогою спеціально призначених для цього тегів (абзацу, заголовків і т.д.) я хочу зупинитися на тому моменті, як в мові ХТМЛ інтерпретуються прогалини, переноси рядки (Enter) і табуляція, як здійснюється розбивка тексту в вікні браузера при зміні його розміру.

Правда для такого роду візуального форматування (яка не буде видно на вебсторінці) найчастіше використовують не самі прогалини, а саме символи табуляції і розриву рядків. Є таке правило - коли починаєте писати вкладений Html тег, то зробіть відступ за допомогою табуляції  (Клавіша Tab на клавіатурі), а коли цей тег закриваєте, то приберіть відступ (поєднання клавіш Shift + Tab на клавіатурі).

Робити це потрібно так, щоб відкриває і закриває теги були б на одному вертикальному рівні (на однаковій кількості табуляцій від правого краю сторінки вашого Html редактора, наприклад, Notepad ++, про який я писав). Крім цього раджу безпосередньо після написання відкриває елемента зробити кілька переносів рядка і відразу ж прописати закриває на тому ж рівні (кількості табуляцій), щоб потім не забути це зробити.

Тобто відкриває і закриває елементи повинні стояти на одному рівні по вертикалі, а внутрішні теги зрушуємо на один знак табуляції і маємо в своєму розпорядженні закривають і відкривають знову ж на одному рівні.

Для простих веб документів це може здатися надмірністю, але при створенні більш-менш складних, їх код стане набагато більш наочним  і читаним за рахунок великої кількості прогалин, а також в ньому буде набагато простіше помітити помилки за рахунок симетричного розташування тегів.

Спецсимволи або мнемоніки в Html коді

Так, а тепер давайте поговоримо про так званих спеціальних символах, зручність використання яких я анонсував на початку цієї статті. Спецсимволи ще іноді називають мнемоніки або підстановки. Вони призначені для того, щоб вирішити досить давно виникла в мові гіпертекстової розмітки проблему, пов'язану з використовуваними кодуваннями.

Коли ви набираєте текст з клавіатури, то відбувається кодування символів вашої мови за заздалегідь встановленим алгоритмом, а потім вони відображаються на сайті за допомогою використовуваних вами шрифтів (де знайти і як встановити для сайту) за рахунок декодування.

Кодувань існує дуже багато, але для мови Html за замовчуванням була прийнята розширена версія кодувань.

У цьому кодуванні тексту було можливо записати всього лише 256 знаків - 128 від ASCII і ще 128 для букв російської мови. В результаті виникла проблема з використанням на сайтах знаки, які не входять до ASCII і не є буквами російської мови, що входять до складу кодування Windows-1251 (CP1251). Ну, заманулося вам використовувати тильду або апостроф, а можливості такої спочатку в використовуваної мовою Html кодуванні не закладено.

Саме для таких випадків і були придумані підстановки або ж, іншими словами, мнемоніки. Від самого початку спецсимволи мали цифровий вид запису, Але потім для найпоширеніших з них були додані їх літерні аналоги для простоти їх запам'ятовування.

У загальному розумінні, мнемоніка - це такий знак, який починається з амперсанда «&» і закінчується крапкою з комою «;». Саме за цими ознаками браузер при розборі Html коду виділяє з нього спецсимволи. Відразу за амперсандом в цифровому коді підстановки повинен слідувати знак решітки «#», який іноді називають хеш. А вже потім слідує цифровий код потрібного символу в кодуванні юнікод.

У юникоде можна записати більше 60 000 знаків - головне, щоб потрібний вам символ мнемоніки підтримувався використовуваним на вашому сайті шрифтом. Є шрифти з підтримкою майже всіх знаків кодування юнікод, а є варіанти тільки з певним набором символів.

Повний список спецсимволов буде просто величезний, але найбільш часто використовувані мнемоніки  ви можете запозичити, наприклад, з цієї таблиці:

Існує досить цікавий спосіб отримання коду Html  мнемонік  для необхідного вам знака. Для цього достатньо буде відкрити редактор Microsoft Word, Створити новий документ і вибрати з верхнього меню «Вставка» - «Символ» (я користуюся 2003 версією, тому не знаю як зробити аналогічну операцію в більш пізніх версіях).

У вікні, вам потрібно вибрати шрифт, наприклад, Times New Roman (або будь-який інший, який свідомо буде присутній на більшості комп'ютерів відвідувачів вашого сайту - Courier або Arial, наприклад).

Додайте з списку в свій документ Word  всі потрібні вам спецсимволи і збережіть даний вордовскій документ як веб сторінку (вибирається зі списку «.html» при збереженні). Ну, а потім вам лише залишиться відкрити цю веб сторінку в будь-якому Html редакторі (все той же Notepad ++ підійде) і ви побачите все цифрові коди потрібних вам мнемонік:

Спосіб трохи важкувато, але якщо закортить використовувати на сторінці свого сайту який-небудь рідкісний спецсимвол, то це буде простіше, ніж шукати в мережі інтернет таблиці, подібні наведеної трохи вище. Отриманий код спецсимволи вам потрібно буде вставити в потрібне місце і замість нього на веб сторінці браузер відобразить потрібний вам знак (наприклад, нерозривний пробіл).

Нерозривний пробіл і варіант переносу в прикладах

Як я вже згадував вище і як ви можете бачити з наведеної трохи вище таблиці спецсимволов, деякі мнемоніки в Html отримали крім цифрового ще й символьне позначення для їх більш простого запам'ятовування. Тобто замість знака решітки «#» (хешу) в символьних випадках застосовуються слова. Наприклад, все той же нерозривний пробіл може бути записаний або як (цифрова мнемоніка), або як (символьний).

При написанні статей, якщо вам буде потрібно вставити в текст документа знак амперсанда (&) або відкриває кутової дужки (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.

Тобто, якщо ви пишете статтю, в якій вам потрібно буде в текст вставити, наприклад, відображення тега< body>  або ж вам просто потрібно вставити знак менше (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.

Тому вам потрібно буде вставити для вирішення такого завдання наступну конструкцію:

Теж саме стосується і відображення коду самих мнемонік, бо вони починаються з амперсанда. Вам потрібно буде вставити в текст код з заміною знака амперсанда на його підстановку (спецсимвол):

Це потрібно буде зробити, щоб отримати на сторінці<, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.

Також ви швидше за все буде використовувати нерозривний пробіл, який на веб сторінці буде виглядати як звичайний пробіл, але при цьому браузер не сприйматиме його як символ пробілу взагалі і не здійснюватиме по ньому перенесення  (Наприклад, це буде доречно для таких словосполучень, як 1400 гБ і т.п., які не бажано буде розносити перенесенням за різними строками):

1400 гБ.

Іноді може виникнути зворотна ситуація, коли в тексті присутні дуже довгі слова і хочеться зробити так, щоб при виникненні необхідності браузер міг би розбивати це слова перенесенням. Для таких цілей передбачений спецсимвол «м'який перенос» -

Длінноепредлін & shyноеслово;

При виникненні необхідності переходу на інший рядок, браузер замість мнемоніки м'якого переносу поставить дефіс і відправить решту слова на наступний рядок. Якщо місця для розміщення всього цього слова на одному рядку буде досить, то ніякого перекладу рядка браузер малювати не буде. Ось так ось все просто.

Удачі вам! До швидких зустрічей на сторінках блогу сайт

Надіслати

Класснуть

Лінкануть

запинаючись

Одного вечора я відчув, що настав час розширити 97- й параграф «Ководство» Артемія Лебедєва.

На клавіатурі одна  риска, вона зазвичай правіше нуля і вище букв «З» і «Х». Необізнані люди називають її поперемінно то дефісом, то мінусом, то тире. Лебедєв пояснює нам, що це чотири  (З огляду на два різновиди тире) різних символу. Насправді їх як мінімум дев'ять, І про це я і розповім вам зараз.

Що стосується мінуса  (-), про нього вже багатьом добре все відомо: мінус використовується в математичних виразах, має таку ж ширину, як будь-яка цифра, вирівнюється по висоті великої літери, на відміну від тире і дефіс, і записується в HTML як -.

На цьому місці все зазвичай переходять до тире. Але стривайте, ми ще не розглянули три символи!

Який символ вживається в запису номерів телефонів (555-41-72)? Дефіс, скажете ви; а ось і ні! Для цього є окремий символ: цифрова риска  (Figure dash). Виглядає вона (-) практично як мінус, але мінусом при цьому не є.

Ви можете запитати: а чому тоді не можна використовувати мінус, раз він виглядає точно так же? Тому що мінус - це знак віднімання, а в номері телефону ніщо ні з чого не вираховується. З тієї ж причини, по якій для виділення тексту потрібно використовувати em, а не i. Це не можна пояснити, це можна тільки пізнати.

Цифрова риска має код U + 2012 і в HTML записується як -.

Про символі переносу, Також званим м'яким дефісом, теж багатьом відомо. Цей символ, що позначається в HTML як -, розставляються в словах між складами в тих місцях, де можна зробити перенесення. На екрані він не відображається, за винятком випадку, коли потрапляє на кінець рядка; в цьому випадку браузер (кажуть, з третьої версії навіть Firefox навчився це робити) не переносить все слово цілком, а ставить дефіс і переносить частину слова.

Це особливо допомагає в довгих словах, перенесення яких створює величезні порожні простори в правій частині екрана. Величезний недолік символу переносу полягає в тому, що його незручно розставляти вручну (втім, з цим можуть впоратися програми автотіпографірованія) і в тому, що його вживання захаращує і робить нечитабельним вихідний код тексту (тому краще, якщо розстановка символів перенесення проводиться CMS на етапі генерації HTML- коду з зберігається в базі даних тексту).

Ще один схожий на дефіс символ - риска (⁃), що вживається в якості маркерів списків ( чёрточний буліт). В Студії Лебедєва справедливо зауважують, що в російської друкарської традиції немає такого поняття, як буліт (маючи на увазі традиційні гуртки з квадратиками), і пропонують в якості маркера вживати (довге) тире; як ви можете помітити, вони саме так роблять (або робили) на своєму сайті і навіть вибухнули статтею, що розповідає, як це зробити.

Насправді для маркерів списків існує спеціальний символ, який має код U + 2043 (втім, Лебедєв стверджує, що до російської типографике це не відноситься). В HTML зробити для списку такий маркер досить просто, використовуючи CSS:

Ul (list-style: none inside;) ul\u003e li: before (content: "\\ 2043"; margin-left: -1ex; margin-right: 1ex;)

  (Зрозуміло, наведений код не ідеальний, та й працювати буде лише в правильних браузерах, але ідея вам зрозуміла, сподіваюся.)

Тепер нарешті можемо перейти до тире; тут все вже добре із'езжена: відома різниця між коротким тире  (-, en dash, риска шириною з букву «n», -) і довгим тире (-, em dash, риска шириною з букву «M», -). Відомо, що в російської типографике вживається виключно довге тире (хоча ведуться суперечки щодо можливості вживання короткого тире в числових діапазонах), тоді як на Заході зазвичай вважають за краще en dash.

Довге тире також вживається в російській мові в діалогах. На Заході ж для цієї мети часто вживають окремий символ горизонтальної риси (―):

- Je m'ennuie tellement, dit-elle.

  - Cela n'est pas de ma faute, rétorqua-t-il.

Отже, дев'ять різних рисок:

І, для порівняння, в одному рядку:
- ‐
−
‒
­
⁃
-
—
―

Теги: Додати теги