Все элементы HTML по WHATWG с угловыми скобками-мнемониками строкой
<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdi> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6> <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <u> <ul> <var> <video> <wbr>
Все элементы HTML столбцами
С угловыми скобками | С угловыми скобками-мнемониками | Без угловых скобок |
---|---|---|
|
|
|
Списки ,
Тег
<ol>…</ol> задаёт упорядоченный список. Элементы в нём имеют нумерацию. Используется когда порядок перечисления элементов имеет значение.
Тег
<ul>…</ul> задаёт неупорядоченный список. Используется когда порядок перечисления элементов не имеет значения.
Внутри тегов
<ol>…</ol> и
<ul>…</ul> пункты списков перечисляются с помощью тега
<li>…</li>.
Пример:
index.html
XHTML
<!DOCTYPE html>
<html>
<head>
<title>HTML ol ul example</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″>
</head>
<body>
Упорядоченный список:
<ol>
<li>Яйцо</li>
<li>Цыплёнок</li>
<li>Курица</li>
</ol>
Неупорядоченный список:
<ul>
<li>Кошка</li>
<li>Собака</li>
<li>Суслик</li>
</ul>
<p>
<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#olul»>Списки <ol></ol>, <ul></ul></a>
</p>
</body>
</html>
1 |
<!DOCTYPE html> <title>HTML ol ul example</title> <meta http-equiv=»Content-Type»content=»text/html;charset=utf-8″> </head> <li>Яйцо</li> <li>Цыплёнок</li> <li>Курица</li> </ol> <li>Кошка</li> <li>Собака</li> <li>Суслик</li> </ul> <a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#olul»>Списки <ol></ol>, <ul></ul></a> </p> |
white-space | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||
6.0+ | 8.0+ | 1.0+ | 4.0+ | 9.5+ | 1.0+ | 3.0+ | 1.0+ | 3.5+ |
1.0+
1.0+
Описание
Свойство white-space устанавливает, как отображать
пробелы между словами. В обычных условиях любое количество пробелов в коде HTML
показывается на веб-странице как один. Исключением является тег <pre>,
помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован
пользователем. Таким образом, white-space имитирует
работу тега <pre>, но в отличие от него не меняет шрифт
на моноширинный.
Значения
- normal
- Текст в окне браузера выводится как обычно, переносы строк устанавливаются
автоматически. - nowrap
- Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой;
вместе с тем, добавление тега <br> переносит текст
на новую строку. - pre
- Текст показывается с учетом всех пробелов и переносов, как они были добавлены
разработчиком в коде HTML.
Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. - pre-line
- В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
- pre-wrap
- В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку.
- inherit
- Наследует значение родителя.
Действие значений на текст представлено в табл. 1.
Значение | Перенос текста | Пробелы |
---|---|---|
normal | Переносится | Не учитываются |
nowrap | Не переносится | Не учитываются |
pre | Не переносится | Учитываются |
pre-line | Переносится | Не учитываются |
pre-wrap | Переносится | Учитываются |
Пример
HTML5CSS2.1IECrOpSaFx
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Браузеры
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line, pre-wrap и inherit. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.
Opera до версии 9.5 не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.
Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line.
Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap. Для <textarea> значения normal, nowrap, и pre воспринимаются как pre-wrap.
Урок 1
Тема: тэги, HTML документ.
Язык HTML основан на использовании тэгов. Тэги — это команды, которые указывают браузеру,
где и как расположить на странице текст и картинки, а также позволяют организовывать ссылки
на другие документы. Для того, чтобы браузер не путал тэги с текстом, их отмечают треугольными скобками
< и >. Большинство тэгов, как правило, используются парами. Т.е. первым идет открывающий тэг, он
объясняет браузеру, что делать с последующим текстом. Затем следует закрывающий тэг, который
указывает область действия первого. Отличается закрывающий тэг от открывающего наличием в нем
косой черты — слэша.
Пример HTML текста:
Тэги не чувствительны к регистру. Это означает, что <TITLE>,<title> и <TitLe> для браузера
абсолютно одинаковы.
Теперь рассмотрим, из чего, в основном, состоит HTML документ. Сам документ ограничивается
тэгами <HTML> и </HTML> — браузер должен знать, где страница начинается, и где заканчивается.
Состоит из заголовка (теги <HEAD> и </HEAD>), содежащего различную информацию о документе,
и, собственно, тела документа (теги <BODY></BODY>), т.е. того, что вы видите в окне
браузера. В заголовке находится заглавие (или название) страницы, рекомендуется не более 64 символов, теги <
TITLE> и <TITLE>. Пример:
Попробуйте набрать этот пример в любом текстовом редакторе и сохранить его с расширением
.html или .htm. Теперь можно его просматривать, как любой HTML документ.
Enjoy both worlds
As you can see, declarative validation is much more elegant, expressive, and in general simpler to use when compared to the classic Spring valiator way. On the other hand, the spring validation mechanism is well integrated in Spring MVC and if you’re using it for your web development, you probably want to take advantage of that. So what we’re really looking for is a way to enjoy both worlds. Luckily, due to the extensible nature of the Spring validation mechanism, we can easily get there. The idea is to simply create a spring validator implementation which delegates the validation tasks to the JSR-303 validator. So let’s do that:
First you’ll need to get a hold of the latest version of the reference implementation for JSR-303. You can either download the following jars manually:
Or, if you’re using maven (like me) you can just add the following to your pom:
<br> <repositories><br> <repository><br> <id>jboss</id><br> <url>http://repository.jboss.com/maven2</url><br> <releases><br> <enabled>true</enabled><br> </releases><br> <snapshots><br> <enabled>false</enabled><br> </snapshots><br> </repository><br> </repositories></p> <p><dependencies><br> <dependency><br> <groupid>org.hibernate</groupid><br> <artifactid>hibernate-validator</artifactid><br> <version>4.0.0.Beta2</version><br> </dependency><br> </dependencies><br>
Assuming you have your project setup already and spring configured, let’s look at the BeanValidator implementation:
<br> public class BeanValidator implements org.springframework.validation.Validator, InitializingBean {</p> <p> private Validator validator;</p> <p> public void afterPropertiesSet() throws Exception {<br> ValidatorFactory validatorFactory = Validation.buildDefaultValidatorFactory();<br> validator = validatorFactory.usingContext().getValidator();<br> }</p> <p> public boolean supports(Class clazz) {<br> return true;<br> }</p> <p> public void validate(Object target, Errors errors) {<br> Set<constraintviolation<object>&gt; constraintViolations = validator.validate(target);<br> for (ConstraintViolation<object> constraintViolation : constraintViolations) {<br> String propertyPath = constraintViolation.getPropertyPath().toString();<br> String message = constraintViolation.getMessage();<br> errors.rejectValue(propertyPath, "", message);<br> }<br> }<br> }<br>
Since the validation framework can potentially validate any object, the supports method return true to all types. Also notice that the bean validator is actually created at load time. This is fine as according to the spec. a Validator instance must be thread safe – this means that we can register this BeanValidator as a singleton in the application context and reuse it in all our controllers. All the validate method does is translate the constraint violations to error messages which are registered with the passed in errors instance.
Now that we have the BeanValidator ready, all that is required in order to use it is to register it in the application context. If you’re using spring’s component-scaning mechanism, you can simply annotate it with the @Component annotation, otherwise you can just add the following line to your application context configuration:
<br> <bean id="beanValidator" class="package.name.BeanValidator"><br>
Done! You can now inject this validator to all your SpringMVC controllers and benefit from the JSR-303 declarative validation.
JSR-303
JSR-303 is a specification for Bean Validation. The work on it started around one and a half years ago as an attempt to come up with a standard declarative validation framework. With Java 5 release and the introduction of annotations, more and more framework developers realized the potential of declarative validation. WebWork had it, Hiberante came up with the Hibernate Validator framework, and I developed such support for spring. We all had the same idea’s, we all shared the same points of views and it was just a matter of time until this would be standardized.
The goal of this specification is not to provide one solution to fit all your validation needs – not at all. There are many types of constraints in an application that span different layers. Data constraints on the database level, business rules on the service level, and even UI constraints purely on the UI level. JSR-303 target what I like to refer to as the model constraints. The idea is very simple – some constraints on your model are tightly coupled to it and therefore belongs next to it. The infrastructure defined by JSR-303 enables you to do that – you can describe the constraints using constraint annotations on your model and validate your model using constraint validators.
The subject is not empty
The body is not empty
Here is how you can model it as a java bean and define these constraints:
<br> public class Email {</p> <p> @NotEmpty @Pattern(".+@.+\\.+")<br> private String from;</p> <p> @NotEmpty @Pattern(".+@.+\\.+")<br> private String to;</p> <p> @NotEmpty<br> private String subject;</p> <p> @NotEmpty<br> private String body;</p> <p> // setters and getters<br> ...<br> }<br>
NOTE: it is possible to put the annotations on the fields or on the setter methods of the bean properties. Personally I like putting them on the fields as it’s easier to pick up when reading the code.
<br> Email email = new Email();<br> email.setFrom("[email protected]");<br> email.setTo("someone");<br> email.setSubject("");<br> email.setBody(null);</p> <p>ValidatorFactory validatorFactory = Validation.buildDefaultValidatorFactory();<br> Validator validator = validatorFactory.getValidator();</p> <p>Set<constraintviolation<email>&gt; violations = validator.validate(email);<br> for (ConstraintViolation<email> violation : violations) {<br> String propertyPath = constraintViolation.getPropertyPath().toString();<br> String message = constraintViolation.getMessage();<br> System.out.println("invalid value for: '" + propertyPath + "': " + message);<br> }<br>
Урок 2
Тема: выделение текста — физические и логические стили.
В HTML существует два подхода к шрифтовому выделению текста — т.н. физический и логический
стили.
Физические стили.
Под физическими стилями подразумевают прямое указание браузеру на модификацию текущего
шрифта. Т.е. между тэгами <B> и </B> будет жирный шрифт, а между <I> и
</I> — курсив (наклонный).
Шрифты могут комбинироваться. Например, используя такой текст
мы получим комбинацию жирного и наклонного шрифтов: пример.
Логические стили.
Используя логические стили, вы не можете точно знать, что увидит на экране читатель. Разные
браузеры толкуют одни и те же метки логических стилей по разному. Например, <STRONG> обычно
выделяет текст жирным шрифтом, но кто-то из читателей захочет, возможно, чтобы в данном случае
текст выделялся цветом. Таким образом логические стили дают большую свободу в выборе шрифтов
пользователю.
Элементы <ABBR> и <ACRONYM> могут содержать атрибут <TITLE>, описывающий
расшифровку аббревиатуры или сокращения:<ABBR TITLE=»World Wide Web»>WWW</ABBR>
Элементы ABBR и ACRONYM используются для голосовых браузеров (для слепых, например), в остальных
браузерах сокращения каким-либо шрифтом не выделяются.
Горизонтальная линия
Простой новый тег <hr> рисует в окне горизонтальную линию, не требует закрывающего тега. Часто применяется при верстке страницы в качестве декоративного элемента.
Имеет ряд атрибутов, align -выравнивание с одним из трёх значений (center, left, right) может быть применен, если задана длина линии атрибут width в пикселях или процентах. Так же можно задать толщину линии атрибут — size, цвет атрибут — color, и при необходимости отключить тень линии noshade.
Пример:
<html><head><title>Горизонтальная линия</title></head><body>Это просто линия по умолчанию: <hr><hr>Это линия без тени: <hr noshade ><hr noshade>Это линия окрашенная в кранный цвет: <hr color=»#ff0000″><hr color=»#ff0000″>Линия длиной 250 пикселей: <hr width=»250″><hr width=»250″>Линия длиной 250 и толщиной 5 пикселей: <hr width=»250″ size=»5″><hr width=»250″ size=»5″>Линия длиной 500, толщиной 50, синяя: <hr width=»500″ size=»50″ color=»#0000ff»><hr width=»500″ size=»50″ color=»#0000ff»>Примеры выравнивания:<hr align=»left» width=»250″ size=»5″><hr align=»center» width=»250″ size=»5″><hr align=»right» width=»250″ size=»5″><hr></body></html>
смотреть пример
По моему достаточно просто и эффективно.
Дефис и тире.
В полиграфии существует три очень похожих друг на друга знака: длинное тире, короткое тире и дефис. Из них на компьютерной клавиатуре есть только один — это дефис. Именно его обычно и используют во всех случаях, когда в тексте нужно поставить дефис или тире. Тем не менее следует придерживаться определенных правил пунктуации относительно применения этих знаков.
Так, дефис (-) применяется только внутри слов или между цифрами. Длинное тире (—), ставится между словами в предложении и отделяется от этих слов пробелами. Длинному тире соответствует ссылка-мнемоника —. Короткое тире (–) ставится между цифрами без букв или между словами, которые набраны прописными буквами, а также используется в качестве знака «минус» в математических формулах. Между коротким тире и словами пробел не ставится. Короткому тире соответствует ссылка-мнемоника –.
Применение дефиса и тире показано в следующем примере:
Пример: Спецсимволы — и –
- Результат
- HTML-код
- Попробуй сам »
Веб-страница что-то слишком долго открывается.
Она должна загружаться за 2–4 секунды.
Время – деньги…
Символ
Описание
Мнемоническое имя
Числовой код
неразрывный пробел
 
>
больше чем
>
>
&
амперсанд
&
&
»
прямая двойная кавычка
"
"
‘
апостроф
'
'
левая двойная угловая кавычка
«
«
правая двойная угловая кавычка
»
»
‘
левая одинарная кавычка
‘
‘
’
правая одинарная кавычка
’
’
‚
нижняя одинарная кавычка
‚
‚
“
левая двойная кавычка
“
“
”
правая двойная кавычка
”
”
„
нижняя двойная кавычка
„
„
€
euro
€
€
копирайт
©
©
знак зареrистрированной торrовой марки
®
®
Все элементы HTML по WHATWG с угловыми скобками строкой
<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdi> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <data> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <h1> <h2> <h3> <h4> <h5> <h6> <head> <header> <hgroup> <hr> <html> <i> <iframe> <img> <input> <ins> <kbd> <keygen> <label> <legend> <li> <link> <main> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <noscript> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <rp> <rt> <ruby> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <template> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <u> <ul> <var> <video> <wbr>
Все элементы HTML по WHATWG без угловых скобок строкой
a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins kbd keygen label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param pre progress q rp rt ruby s samp script section select small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr
- Справочник HTML
05.04.2014
Эпизод 5. Практическая работа
Взгляните на код скрипта (example7.php), который обрабатывает введенный в поле URL и разделяет его на составные части:
<?php
if (isset($_REQUEST))
{
// обрабатываем текст, введенный в поле ввода
$result =preg_match_all(«/(http://)?(www.)?
(+(.
+)*)((/(+/)+)(+))?/»,
$_REQUEST, $m);
}
?>
<form id=»checkform» name=»checkform»
action=»example7.php» method=»post»>
<table width=»60%»>
<tr>
<td width=»10%»>
URL:
</td>
<td>
<input type=»text» id=»url» name=»url» size=»15″
style=»width: 100%;»
value=»<?php echo $_REQUEST; ?>»>
</td>
</tr>
<tr>
<td colspan=»2″ align=»center»>
<input type=»submit» value=»Разделить»>
</td>
</tr>
</table>
</form>
<?php
// если был введен текст
if (isset($_REQUEST))
{
?>
<br>
<?php
// если было совпадение с паттерном
if ($result)
{
// выдаем результаты
?>
<table>
<tr>
<td><b>Полный URL:</b></td>
<td><?php echo $m ?></td>
</tr>
<tr>
<td><b>Протокол:</b></td>
<td><?php echo $m ?></td>
</tr>
<tr>
<td><b>Доменное имя:</b></td>
<td><?php echo $m ?></td>
</tr>
<tr>
<td><b>Запрошенный ресурс:</b></td>
<td><?php echo $m ?></td>
</tr>
<tr>
<td><b>Путь к ресурсу:</b></td>
<td><?php echo $m ?></td>
</tr>
<tr>
<td><b>Имя ресурса:</b></td>
<td><?php echo $m ?></td>
</tr>
</table>
<?php
}
else
{
// иначе сообщаем, что был введен
некорректный URL
?>
Введенный текст не является URL
<?php
}
}
?>
И, как всегда, в конце статьи — несколько задачек :-).
Наш паттерн не учитывает возможность присутствия параметров (http://некий_сайт/forum/showthread.php?goto=newpost&t=127) и фрагментов (http://некий_сайт/forum/showthread.php?p=60343#post60343). Попробуйте добавить в паттерн дополнительные подмаски для извлечения этих элементов.
Для повторяющихся подмасок функция preg_match_all() возвращает совпадение с их последним повторением. А что делать, если надо получить все такие совпадения? К примеру, разделить домен rock-kingdom.com.ua на составляющие? Или разделить список параметров на отдельные параметры и значения? Подсказка: перечитайте статью в МК, №9 (513).
Чтобы стать специалистами в этой области, нам осталось рассмотреть конструкции-утверждения, модификаторы и средства для замены текстовых фрагментов.
Где применяются регулярные выражения?
Много где! Их применение не ограничено программированием в области обработки текстовой информации.
На *NIX-серверах основные службы конфигурируются при помощи текстовых файлов. И при описании различных ограничений по доступу используется язык Perl-совместимых регулярных выражений. Загляните в конфиги Web-сервера (httpd.conf), proxy-сервера (squid.conf), и вы увидите там регулярные выражения. С помощью их и расширения Apache mod_rewrite возможна реализация Human Friendly URLs (например, www.site.com/prices вместо www.site.com/?show=prices). Ссылки подобного вида не только красиво смотрятся и лучше запоминаются, благодаря им сайт лучше индексируется поисковиками.
Robo UserWeb-droid editor
Читайте також
Урок 4
Тема: ссылки.
Ссылки — инструмент, позволяющий связывать между собой различные документы. Браузер обычно выделяет ссылку цветом и/или подчеркиванием. Описывается ссылка следующим образом:
Может содержать атрибут TITLE, описывающий ссылку. Если пользователь наведет указатель мыши на
ссылку, то появится ее описание — содержимое этого атрибута.
Различают относительные и абсолютные ссылки. Примеры относительной ссылки:
<A HREF=»filename.htm»> — на документ «filename.htm», находящийся в
одном каталоге с текущим документом;<A HREF=»./filename.htm»> — в точности то же самое;<A HREF=»folder/filename.htm»> — переход на файл «filename.htm» в
подкаталоге «folder» текущего каталога;<A HREF=»../folder/filename.htm»> — подняться вверх на один шаг по дереву
каталогов, перейти в каталог «folder» и осуществить переход на «filename.htm».
В абсолютной ссылке указывается полный путь к файлу:
<A HREF=»http://www.fortunecity.com/business/fax/339/index.htm»>
Относительные ссылки удобнее. Они не привязаны к конкретной структуре каталогов, т.е. вы можете
создать свой сайт на компьютере, тестировать и исправлять ошибки не подключаясь к Интернет. И лишь
после полной готовности перенести его на сервер, он будет работать так же.
Можно делать ссылки внутри документа. Это удобно для перехода к разным главам одной большой
статьи. Для этого необходимо создать некую опорную точку — анкер (anchor — якорь,англ.), на
которую и будет происходить переход. Разберем это на примере. Допустим, нам надо перейти на начало
этого урока. Для чего создадим такой анкер:
При этом слово «Ссылки» в тексте никак выделяться не будет. Теперь в тексте можем делать ссылку на анкер (и не один раз). Например, так:
И получите:
Можете нажать — пример работает! К этому анкеру можно перейти и из другого файла (например, чтобы сделать
ссылку к конкретному уроку 4, а не урокам HTML вообще). Тогда ссылка будет выглядеть так:
До сих пор мы рассматривали ссылки на HTML-документы. Однако возможны ссылки и на другие виды
ресурсов:
Такая ссылка запустит протокол передачи файлов и произведет выгрузку файла «file.ext»
из директории «directory» сервера «servername» на жесткий диск пользователя
(download).
Еще один вид ссылки — ссылка на почтовый ящик. Выглядит в тексте:
В окне браузера:
А это то же самое (ссылка на почтовый ящик), но с использованием атрибута TITLE. В тексте:
В окне браузера:
Попробуйте навести курсор на «автора».
Спецсимволы
Иногда, а порой даже часто, как например в этом сайте, в тексте не обойтись без знаков «меньше чем»-< и «больше чем»- > , но как быть если браузеры определяют <слово> или фразу заключенные в эти знаки как тег и следовательно не будут его отображать на мониторе? Или допустим Вам и вправду в тексте надо написать некий <тег>, но не для того чтобы дать очередную команду браузеру, а чтобы привести пример его написания посетителям страницы?
Для этих целей были придуманы так называемые спецсимволы.
Так например спецсимвол < — будет значить что в этом месте текста нужно поставить знак < а спецсимвол > обозначит символ >.
Все спецсимволы начинают писаться со знака &— амперсант этот знак указывает браузеру, что далее будет идти имя спецсимвола и воспринимать его следует не как текст, а как команду. Тут встаёт очередной вопрос, а как собственно в тексте предназначенного для вывода на экран поставить сам знак &— амперсант?
Для знака & тоже есть свой спецсимвол — &
Такая вот путаница получается..
Ещё, пожалуй, отдельного внимания заслуживает спецсимвол — это неразрывный пробел мы с ним уже сталкивались. Дело в том, что когда Вы пишите текст в блокноте или html редакторе «простых» пробелов между словами можно поставить сколь угодно много, но вот при чтении страницы браузером все они «удаляются» и между словами на странице будет не более одного пробела. Отсюда часто возникают проблемы с оформлением текста, красную строку, например, никак не сделать… вот и придумали люди спецсимвол он воспринимается браузером не как пробел, а как знак, только невидимый человеческому глазу.
А неразрывным он называется по тому, что группа таких пробелов воспринимается как цельное слово, следовательно, не переносится на следующую строку, если предложение подходит к установленным рамкам или же к краю окна. Так что в окне может появиться горизонтальная полоса прокрутки, если Вам это ненужно, ставьте между ними обыкновенные пробелы
Пример использования спецсимволов:
<html><head><title>пример в примере</title></head><body bgcolor=»#dddddd» text=»#222222″><table width=»600″ bgcolor=»#ffffff» cellspacing=»0″ cellpadding=»5″ border=»0″><tr><td width=»10″ bgcolor=»#808080″> </td><td><html> <br><head> <br><title>Моя первая страничка</title><br></head><br><body><br><center><h2>Привет мир!!!</h2></center><br><br><br>Это моя первая страничка!<br></body><br></html><br></td></tr></table></body></html>
смотреть пример
Пример в примере… навивает на философские мысли о бесконечности…
Ну вот теперь Вы знаете, как примерно выглядят все эти примерчики по «ту сторону экрана». Кстати, раз уж начал открывать военные тайны, данный пример является таблицей из двух ячеек, одна тоненькая слева выполняет сугубо декоративную функцию.. так вот если перед Вами встанет задача нарисовать ячейку таблицы без какого либо содержания вставляйте в неё знак пробела . Помните правило <тег>здесь что то обязательно должно быть</тег>? Спецсимвол пробела один из выходов в данном случае.
Кроме выше указанных есть еще целый ряд спецсимволов, чего там только нет: знаки зодиака, карточные масти, палочки, точечки, ёлочки, кругляшки, дроби.. Предназначены они уже не для каких-то «особых» задач, а просто выполняют свою роль ввиду отсутствия данных знаков на клавиатуре. Мою «коллекцию» спецсимволов можете посмотреть здесь.