Тег перевода строки html – Тег | htmlbook.ru

Содержание

Перенос строки в html при изменении размера. HTML абзац, красная строка, перенос строки.

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

Я расскажу вам о теге br — он делает перенос строки в HTML, то есть разбивает строку на две части — причем делает это принудительно, заканчивая текущую строку в том месте, где был вставлен и перенося ее вторую часть на новый ряд.

Где используется этот тег, когда конкретно возникает неотложна необходимость вставить в текст перевод строки без создания нового абзаца? Например, это может пригодиться в оформлении контента — если у вас есть сайт со стихами и отрывками стихов, текстами песен или чем-то подобным.

Все о теге для переноса строки br

Тег br осуществляет одинарный перенос строки в HTML (что это такое описано ) и определяется всеми браузерами. Да, чуть не забыл — если вы используете тег br, то в отличие от тега абзаца p, у вас не добавляется пустой отступ (перед строкой).

Тег br является пустым (пустой значит без содержимого, ничего не содержит), а значит его не нужно закрывать. А так как его не нужно закрывать, было придумано краткое описание — оно изначально подразумевает то, что сам тег не имеет закрывающего тега.

Представьте на минуту, что не было бы краткого описания. Что тогда? Тогда пришлось бы каждый раз «закрывать и открывать» перенос строки примерно так:
. Это как минимум неудобно. Но, тем не менее, в строгом XHTML закрывать его обязательно тегом
.

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


br >

Результат:

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

Ура, второе предложение на новой строке.

Реальный пример:

А. Блок

Ночь, улица, фонарь, аптека,

Бессмысленный и тусклый свет.

Живи еще хоть четверть века —

Все будет так. Исхода нет.

И повторится все, как встарь:

Ночь, ледяная рябь канала,

Аптека, улица, фонарь.

Результат:

Ночь, улица, фонарь, аптека,
Бессмысленный и тусклый свет.
Живи еще хоть четверть века —
Все будет так. Исхода нет.

Умрешь — начнешь опять сначала
И повторится все, как встарь:
Ночь, ледяная рябь канала,
Аптека, улица, фонарь.

Как выглядит:


Зачем придумали тег br?

Необходимость этого тега существует хотя бы потому что перенести строку «как в Ворде» (как делают неопытные пользователи), путем написания десятков пробелов подряд, — не выйдет.

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

Но не стоит злоупотреблять тегом
, чтобы все больше и больше увеличивать расстояние между строками — для этого лучше всего воспользоваться базовыми инструментами HTML+CSS. Недопустимо создание новых абзацев или «как бы абзацев» (это считае

offlink.ru

javascript — Как сделать перенос строки после тега и удалить все html-теги регулярным выражением

Stack Overflow на русском

Loading…

  1. 0
  2. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  3. Войти Регистрация
  4. текущее сообщество

    ru.stackoverflow.com

    Как правильно оформлять перенос строк в HTML? [Архив]


    Просмотр полной версии : Как правильно оформлять перенос строк в HTML?


    Юннат

    27.05.2013, 03:57

    Рекомендуется каждый абзац заключать внутри тегов абзац
    А как лучше оформить дополнительные пробел между строками? Например когда надо увеличить отступ вниз.

    DLE по умолчанию пустую строку прописывает так: <p>&nbsp;</p>
    Нормально ли это? Может лучше <p></p>?
    Или вообще использовать тег <br>?

    Какой вариант HTML тега предпочтительнее с точки зрения СЕО?


    для сео никакой разниц.

    <p> — абзац
    br перенос строки


    😮 А причем здесь Яндекс?


    igor3333

    27.05.2013, 10:29

    <p></p> — так ненадо — это бред пустым абзацем делать отступ , топорно получается и тем более если внутри абзаца нужен перенос то это непокатит — будут ощибки верстки

    <br> — тег предназначен специально для переноса на новую строку , да и писать его меньше символов 🙂


    DLE по умолчанию пустую строку прописывает так:  
    Нормально ли это? Может лучше ?
    Или вообще использовать тег ?

    Какой вариант HTML тега предпочтительнее с точки зрения СЕО?

    Думаю лучше не использовать <br/> для отступов, между абзацами/блоками.

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

    <p>текст</p>
    <div></div>

    Полезность для SEO не гарантирую, но это точно смотрится лучше и семантичнее чем «<BR/><BR/><BR/><BR/>» 🙂


    igor3333

    27.05.2013, 10:55

    или padding задать для тега p и будут отступы и никакого лишнего кода


    или padding задать для тега p и будут отступы и никакого лишнего кода
    Так делать не надо и всякие style и color прописывать, правьте CSS .
    А вообще текст можно вставлять без тегов, потому что он автоматом попадает в div или table самой Cms .


    igor3333

    28.05.2013, 09:40

    Так делать не надо и всякие style и color прописывать, правьте CSS .
    А вообще текст можно вставлять без тегов, потому что он автоматом попадает в div или table самой Cms .
    Так я про CSS и говорю.
    Локально прописать типа #dle-content p {padding:5px 0 5px 0;} как то так.


    SergeiRast

    28.05.2013, 19:53

    Так я про CSS и говорю.
    Локально прописать типа #dle-content p {padding:5px 0 5px 0;} как то так.
    А ещё локальней p{padding:5px 0;} =)


    igor3333

    28.05.2013, 19:57

    А ещё локальней p{padding:5px 0;} =)
    это как раз глобально для всех тегов p на сайте =)


    DjekLondon

    28.05.2013, 20:05

    для разделения абзацев — тег p
    для переноса строк в самом абзаце — br


    для переноса строк в самом абзаце — br
    br — это зло неимоверное


    br — это зло неимоверное зло — несемантичное использование тегов. Попробуйте сделать разметку стихов абзацами без переноса строки. Будет и некрасиво и семантически бессмысленно.


    wano-moroz

    29.05.2013, 08:07

    Ребята вы что курите, отсыпьте…

    Вот единственно возможный правильный ответ.
    для разделения абзацев — тег p
    для переноса строк в самом абзаце — br (в CSS которому задаётся нужного/нужных размера отступ)

    Как вам (ну или тем у кого вы это увидели) могло даже в голову прийти что-то типа <p>&nbsp;</p> и тем более всякие padding и div, я в шоке…


    Попробуйте сделать разметку стихов абзацами без переноса строки
    Категоричность трактовки какой-либо идеи — всегда приводит к «левому уклонизму»… ))


    searchengines.guru

    HTML-теги для работы с текстом

    <h2>, <h3>, <h4>, <h5>, <H5>, <H6>.

    Всего 6 видов заголовков — от h2 до H6. Тегу h2 соответствует самый большой заголовок, тегу H6 — самый маленький. Закрывающий тег обязателен.

    Атрибуты:

    align — Выравнивает заголовок в соответствии со следующими значениями:

    center — По центру.

    left — По левому краю.

    right — По правому краю.

    title — Всплывающая подсказка.

    Пример:


    Тег <h3> и вид текста в нем.

    ……..


    А это уже заголовок в теге <H6>

    Тег <p> создает новый параграф.

    Атрибуты:

    align — Выравнивает параграф относительно одной из сторон документа.

    left — выравнивание по правому краю (По умолчанию ).

    right — выравнивание по правому краю.

    center — выравнивание по центру.

    justify — выравнивание по ширине.

    title — Всплывающая подсказка.

    Пример:

    Первый параграф.

    Второй параграф.

    Контейнер <b> </b> выделяет текст жирным шрифтом.

    Аналогичный тег — <strong> </strong>, он тоже выделяет текст жирным. Но его не рекомендуется использовать больше 1-2 раз на странице — при большом количестве тегов <strong> на странице поисковые системы могут воспринять это как спам.

    Атрибуты:

    title — Всплывающая подсказка.

    Пример:

    Это простой текст.

    Это текст выделенный жирным шрифтом..

    Контейнер <strong> </strong> выделяет текст жирным шрифтом.

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

    Атрибуты:

    title — Всплывающая подсказка.

    Пример:

    Это простой текст.

    Эта страница посвящена HTML-тегам для работы с текстом. Главная мысль страницы выделена тегом <strong>.

    Тег <hr> добавляет в документ горизонтальную линию.

    Закрывающий тег не обязателен.

    Атрибуты:

    size — Устанавливает толщину линии.

    width — Устанавливает ширину линии в пикселах или процентах.

    noshade — Создает линию без тени.

    color — Задает линии определенный цвет.

    Пример:

    <hr noshade=»noshade» color=»#00FF33″ />.


    Тег <br /> переводит текст на новую строку.

    Закрывающий тег не обязателен.

    Пример:

    Очень длинный текст, который нужно разбить на две строки.

    Очень длинный текст,
    но уже разбитый на две строки вставкой тега <br /> после слова «текст,».

    Контейнер <nobr> </nobr> запрещает перевод строки.

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

    Пример:

    Очень длинный текст, который не переносится на две строки и заключен в контейнер <nobr> </nobr>.

    Контейнер <sub> </sub> делает подиндекс.

    Набираем формулу H<sub>2</sub>0. Результат в примере.

    Пример:

    Контейнер <sup> </sup> делает надиндекс.

    Набираем формулу X<sup>2</sup> = 4. Результат в примере.

    Пример:

    Контейнер <big> </big> выводит более крупный, чем окружающий текст.

    Атрибуты:

    title — Всплывающая подсказка.

    Пример:

    Это простой текст.

    Это более крупный текст.

    Контейнер <small> </small> выводит более мелкий, чем окружающий текст.

    Атрибуты:

    title — Всплывающая подсказка.

    Пример:

    Это простой текст.

    Это более мелкий текст.

    Контейнер <i> </i> выделяет текст курсивом.

    Вместо него рекомендован Контейнер <em> </em>.

    Пример:

    Это простой текст.

    Это текст заключенный в контейнер <i> </i>.

    Контейнер <em> </em> выделяет текст курсивом.

    Рекомендован вместо контейнера <i> </i>.

    Пример:

    Это простой текст.

    Это текст заключенный в контейнер <em> </em>.

    Тег <s> делает текст зачеркнутым.

    Закрывающий тэг </s> обязателен. Не ркомендован для использования.

    Пример:

    Это текст заключенный в контейнер <s> </s>.

    Тег <tt> выделяет текст моноширинным шрифтом.

    Закрывающий тэг </tt> обязателен.

    Вместо него рекомендован контейнер <kbd> </kbd>.

    Пример:

    Это простой текст.

    Это текст заключенный в контейнер <tt> </tt>.

    Тег <kbd> выделяет текст моноширинным шрифтом.

    Закрывающий тэг </kbd> обязателен.

    Рекомендован вместо контейнера <tt> </tt>.

    Пример:

    Это простой текст.

    Это текст заключенный в контейнер <kbd> </kbd>.

    Контейнер <u> </u> делает текст подчеркнутым.

    Не рекомендован для использования.

    Пример:

    Это простой текст.

    Это текст заключенный в контейнер <u> </u>.

    Тег <font> определяет цвет, размер и выводимый шрифт.

    Закрывающий тег </font> обязателен.

    color — определяет цвет текста.

    face — определяет гарнитуру шрифта.

    size — определяет размер текста в пределах от 1 до 7, где 1 — самый мелкий шрифт. По умолчанию равен 3.

    Пример:

    <font color=»#0000CC» face=»Verdana» size=»5″></font>.

    <font color=»#CA0000″ face=»Times New Roman» size=»2″></font>.

    Тег <pre> предварительно отформатированный текст.

    Преформатированный текст отображается моношириным шрифтом.

    <pre>предварительно отформатированный текст, 
    с сохранением последовательно поставленных пробелов.</pre>
    .

    Тег <marquee> заставляет текст перемещаться из стороны в сторону.

    Закрывающий тег </marquee> обязателен.

    Атрибуты:

    behavior — Определяет вид движения.

    alternate — Колебательные движения налево и направо.

    scroll — Перемещение текста в направлении, указанном в direction. Достигнув края экрана, надпись появляется снова с противоположной стороны.

    slide — Схоже с scroll, но текст перемещается только один раз и останавливается.

    direction — Определяет направление движения.

    down — Движение вниз.

    left — Движение справа налево (по умолчанию).

    right — Движение слева направо.

    up — Движение вверх.

    Пример:

    <marquee behavior=»alternate» direction=»right»></marquee>

    Тег <q> предназначен для включения в документ короткой цитаты.

    Закрывающий тег </q> обязателен.

    <q>Цитата</q>.

    Цитата.

    Тег <blockquote> предназначен для включения в документ длинной цитаты.

    Закрывающий тег </blockquote> обязателен. Тег <blockquote> создает отступы с обеих сторон и отделяется от остального текста пустыми строками.

    Какой-то текст,

    здесь цитата
    и текст продолжается.

    Контейнер <address> </address> применяют для указания сведений об авторе.

    Сюда же обычно помещаются и сведения об авторских правах, а также дата создания и последней модификации документа.
    Текст обычно отображается курсивом. .

    Пример:

    Информация об авторе!
    .

    Тег <cite> используется для цитат.

    Закрывающий тег </cite> обязателен. Обычно отображается курсивом.

    Пример:

    Какой-то текст, (здесь цитата) и текст продолжается.

    Контейнер <code> </code> применяют для выделения программного кода, отображаемого на странице.

    Oтображается моноширинным шрифтом.

    Пример:

    Таким образом отобразится текст в контейнере <code> </code>.

    html-css-tegs.ru

    HTML: Теги для текста | HTML самоучитель

    В HTML есть теги для изменения внешнего вида текста, такие как <b> и <i>. Они используются для выделения текста полужирным шрифтом или курсивом, такие теги в HTML называются тегами для форматирования.

    Форматирование текста

    Этот пример демонстрирует, как вы можете отредактировать текст в HTML документе, используя специальные теги:

    
    <html>
      <body>
    
        <p><b>Текст</b></p>
        <p><strong>Текст</strong></p>
        <p><em>Текст</em></p>
        <p><i>Текст</i></p>
        <p><small>Текст</small></p>
        <p>Это<sub> нижний индекс</sub> и <sup>верхний индекс</sup></p>
    
      </body>
    </html>
    
    Попробовать »

    Тег <pre>

    Тег <pre> позволяет выделить часть исходного текста, которая должна отобразиться браузером в первоначальном виде, то есть теми же символами и с тем же количеством пробелов и разрывов строк. Весь текст, заключенный между открывающим тегом <pre> и закрывающим </pre>, будет отображаться моноширинным шрифтом:

    
    <html>
      <body>
    
        <pre>
          Он сохраняет авторское форматирование текста
          (оставляет без изменений)
          и делает шрифт моноширинным
        </pre>
    
      </body>
    </html>
    
    Попробовать »

    Теги для отображения кода

    Пример, показанный ниже, демонстрирует разницу вывода содержимого тегов на экран:

    
    <html>
      <body>
    
        <p><code>Программный код</code>
          <br>
          <kbd>Ввод с клавиатуры</kbd>
          <br>
          <samp>Образец кода</samp>
          <br>
          <var>Выделение переменной</var>
        </p>
        <p>
          Эти теги обычно используются для того, чтобы показать на странице программный код
        </p>
    
    </body>
    </html>
    
    Попробовать »

    Тег <address>

    Адрес является распространенным элементом многих HTML-документов, для выделения адреса на странице существует специальный тег <address>, отделяющий текст, заключенный в него, от всего остального содержимого.

    Чаще всего он используется для выделения контактной информации, например адреса электронной почты или способа связи с автором/владельцем документа, статьи или сайта:

    
    <html>
      <body>
    
        <p>Вы можете найти меня на моем сайте</p>
        <address>
          <a href="www.puzzleweb.ru">Мой сайт для связи</a>
        </address>
    
      </body>
    </html>
    
    Попробовать »

    Аббревиатуры

    Пример демонстрирует, как можно написать аббревиатуру или сокращение:

    
    <html>
     <body>
    
        <p><abbr title="Неопознанный Летающий Объект">НЛО</abbr><br><br><br>
          Атрибут title нужен для всплывающей подсказки, она появляется
          при наведении курсора на аббревиатуру.
        </p>
    
      </body>
    </html>
    
    Попробовать »

    Направление текста

    Пример демонстрирует, как можно изменить направление текста:

    
    <html>
      <body>
    
        <p>
          Тег bdo определяет направление текста - слева направо и наоборот.<br><br>
          <bdo dir="rtl">
            Это наш текст
          </bdo>
        </p>
    
      </body>
    </html>
    
    Попробовать »

    Цитаты

    В HTML есть два тега для выделения цитат в тексте — <q> и <blockquote>. Тег <q> является строчным элементом и предназначен для выделения коротких цитат непосредственно в тексте абзаца. Текст, размещенный внутри элемента <q>, по умолчанию большинством браузеров отображается в двойных кавычках.

    В отличие от тега <q>, тег <blockquote> является блочным элементом, он предназначен для выделения длинных цитат, которые по объему больше похожи на целые абзацы. В большинстве браузеров текст элемента <blockquote> будет отображаться с небольшим отступом вправо и иметь разрывы строки до и после себя:

    
    <html>
      <body>
    
        <p>Длинная цитата:</p>
        <blockquote>
          Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
          Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
        </blockquote>
        <p><b>Для длинных цитат браузер вставляет отступы со всех сторон. </b>
          <br><br>
          Короткая цитата: 
          <q>Это короткая цитата.</q><br>
          <b>Короткие цитаты заключаются в двойные кавычки.</b>
        </p>
    
    </body>
    </html>
    
    Попробовать »

    Удаленный и вставленный текст

    Пример демонстрирует, как можно в документе пометить текст, который был удален (помечается как перечеркнутый) или вставлен (помечается как подчеркнутый):

    
    <html>
      <body>
    
        <p>
          Содержимое тега del, большинство браузеров отображает <del>перечеркнутым</del>, а 
          содержимое тега ins - <ins>подчеркнутым</ins>
        </p>
    
      </body>
    </html>
    
    Попробовать »

    Примечание: также подчёркивание и перечёркивание можно задать с помощью CSS свойства text-decoration.

    puzzleweb.ru

    HTML-текст

    Опубликовано: 20 марта 2014 Обновлено: 4 октября 2019

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

    Теги для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство font-family).

    Грамотно отформатированный текст дает понять поисковым системам, какие слова несут важную смысловую нагрузку, по каким из них предпочтительно ранжировать веб-страницу в поисковой выдаче. Вся текстовая информация, отображаемая на сайте, размещается внутри тега <body>.

    Теги для HTML текста

    • Содержание:
    • 1. Теги заголовков: <h2...h6>
    • 2. Теги для форматирования текста: <b>, <em>, <i>, <small>, <strong>, <sub>, <sup>, <ins>, <del>, <mark>
    • 3. Теги для ввода «компьютерного» текста: <code>, <kbd>, <samp>, <var>, <pre>
    • 4. Теги для оформления цитат и определений: <abbr>, <bdo>, <blockquote>, <q>, <cite>, <dfn>
    • 5. Абзацы, средства переноса текста: <p>, <br>, <hr>

    1. Теги заголовков

    Заголовки являются важными элементами веб-страницы, они упорядочивают текст, формируя его визуальную структуру. Теги <h2>...<h6> должны использоваться только для выделения заголовков нового раздела или подраздела. При использовании заголовков необходимо учитывать их иерархию, т.е. за <h2> должен следовать <h3> и т.д. Также не допускается вложение других тегов в теги <h2>...<h6>.

    1.1. Тег <h2>

    Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Тег <h2> должен быть уникальным для каждой страницы сайта. Рекомендуется прописывать тег в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.

    1.2. Тег <h3>

    Им обозначаются подзаголовки тега <h2>. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.

    1.3. Тег <h4>

    Показывает подзаголовки тега <h3>. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.

    1.4. Теги <h5>, <h5>, <h6>

    Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.
    Для всех тегов доступны ‎глобальные атрибуты.

    2. Теги для форматирования текста

    2.1. Тег <b>

    Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.
    Для тега доступны ‎глобальные атрибуты.

    2.2. Тег <em>

    Отображает шрифт курсивом, придавая тексту значимость.
    Для тега доступны ‎глобальные атрибуты.

    2.3. Тег <i>

    Отображает шрифт курсивом.
    Для тега доступны ‎глобальные атрибуты.

    2.4. Тег <small>

    Уменьшает размер шрифта на единицу по отношению к обычному тексту.
    Для тега доступны ‎глобальные атрибуты.

    2.5. Тег <strong>

    Задаёт полужирное начертание шрифта, относится к тегам логической разметки, указывая браузеру на важность текста.
    Для тега доступны ‎глобальные атрибуты.

    2.6. Тег <sub>

    Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.
    Для тега доступны ‎глобальные атрибуты.

    2.7. Тег <sup>

    Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.
    Для тега доступны ‎глобальные атрибуты.

    2.8. Тег <ins>

    Выделяет текст в новой версии документа, подчёркивая его.
    Для тега доступны следующие атрибуты: cite, datetime.

    2.9. Тег <del>

    Перечёркивает текст. Используется для выделения текста, удаленного из документа.
    Для тега доступны следующие атрибуты: cite, datetime.

    2.10. Тег <mark>

    Применяется для выделения фрагментов текста в справочных целях, окрашивая блок символов желтым цветом.
    Для тега доступны ‎глобальные атрибуты.

    3. Теги для ввода «компьютерного» текста

    3.1. Тег <code>

    Служит для выделения фрагментов программного кода. Отображается моноширинным шрифтом.
    Для тега доступны ‎глобальные атрибуты.

    3.2. Тег <kbd>

    Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображается моноширинным шрифтом.
    Для тега доступны ‎глобальные атрибуты.

    3.3. Тег <samp>

    Применяется для выделения результата, полученного в ходе выполнения программы. Отображается моноширинным шрифтом.
    Для тега доступны ‎глобальные атрибуты.

    3.4. Тег <var>

    Выделяет имена переменных, отображая курсивом.
    Для тега доступны ‎глобальные атрибуты.

    3.5. Тег <pre>

    Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.
    Для тега доступны ‎глобальные атрибуты.

    4. Теги для оформления цитат и определений

    4.1. Тег <abbr>

    Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.
    Для тега доступны ‎глобальные атрибуты.

    4.2. Тег <bdo>

    Используется для замещения текущего направления текста, т.е. текст в теге отображается зеркально.
    Для тега доступен атрибут dir.

    4.3. Тег <blockquote>

    Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.
    Для тега доступен атрибут cite.

    4.4. Тег <q>

    Используется для выделения коротких цитат. Браузерами заключается в кавычки.
    Для тега доступен атрибут cite.

    4.5. Тег <cite>

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

    4.6. Тег <dfn>

    Позволяет выделить текст как определение. Несмотря на наличие специального тега, рекомендуется выделять текст силами CSS.
    Для тега доступен атрибут title.

    5. Абзацы, средства переноса текста

    5.1. Тег <p>

    Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхний и нижний отступ, равный 1em, при этом отступы соседних абзацев «схлопываются».
    Для тега доступны ‎глобальные атрибуты.

    5.2. Тег <br>

    Переносит текст на следующую строку, создавая разрыв строки.
    Для тега доступны ‎глобальные атрибуты.

    5.3. Тег <hr>

    Используется для разделения контента на веб-странице. Отображается в виде горизонтальной линии.
    Для тега доступны ‎глобальные атрибуты.

    html5book.ru

    Текст в html

    У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

    Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.

    Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.

    Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.

    Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента web-страницы по отдельности.

    Строчные элементы обрамляются тегами <span>…</span>.

    Для обрамления элементов блочного типа используется пара <div>…</div>.

    Браузеры обрамляют div-блоки разрывами строки.

    Блок <div> не может располагаться внутри блока <span>.

    Пример
    <!DOCTYPE html>
    <html>
    <head>
        <title>Блоки</title>
        <meta charset="Windows-1251">
    </head>
    <body>
    <div>Первый блок текста</div>
    <div>Второй блок текста.</div>
    </body>
    </html>

    Основные теги форматирования текста

    <p>…</p> Абзац.
    <h2>…</h2> Заголовок первого уровня.
    <h3>…</h3> Заголовок второго уровня.
    <h6>…</h6> Заголовок шестого уровня.
    <br> Переход на новую строку.
    <q>…</q> Браузер автоматически берет текст в кавычки. Изменить вид кавычек можно стилевым свойством quotes.
    <hr> Горизонтальная разделительная линия.
    <pre>…</pre> Текст фиксированной ширины с сохранением всех пробелов и переносов.
    Пример
    <!DOCTYPE html>
    <html>
    <head>
        <title>Заголовки и абзацы</title>
        <meta charset="Windows-1251">
    </head>
    <body>
    <h2>Заголовок<br>первого уровня</h2>
    <h3>Заголовок второго уровня</h3>
    <h4>Заголовок третьего уровня</h4>
    <h5>Заголовок четвертого уровня</h5>
    <h5>Заголовок пятого уровня</h5>
    <h6>Заголовок шестого уровня</h6>
    <hr>
    <p>Тест абзаца</p>
    </body>
    </html>

    Создайте текстовый файл, как в примере. Сохраните его с расширением html.

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

    Для создания и редактирования html-страниц подойдёт даже Блокнот. Но я рекомендую использовать Notepad++ или PhpStorm.

    Выделение в тексте

    <b>…</b> Полужирный шрифт.
    <i>…</i> Курсив.
    <ins>…</ins> Подчеркнутый текст.
    <del>…</del> Перечеркнутый текст.
    <sup>…</sup> Надстрочный текст.
    <sub>…</sub> Подстрочный текст.
    Пример
    <b>Текст может быть полужирным</b>. <i>Текст может быть курсивом.</i><br>
    <ins>Текст можно подчеркнуть.</ins> <del>Текст можно зачеркнуть.</del><br>
    Текст может быть <sup>надстрочным</sup>. Текст может быть <sub>подстрочным</sub>.

    РЕЗУЛЬТАТ:

    Текст может быть полужирным. Текст может быть курсивом.
    Текст можно подчеркнуть. Текст можно зачеркнуть.
    Текст может быть надстрочным. Текст может быть подстрочным.

    Цитаты, переменные, адреса

    <address>…
    </address>
    Служит для предоставления автором документа контактной информации, чтобы желающие могли связаться с автором материала. Обычно отображается курсивом. Блочный элемент.
    <blockquote>…
    </blockquote>
    Выделение цитат. Блочный элемент.
    <cite>…</cite> Выделение цитат. Обычно отображается курсивом.
    <code>…</code> Вывод текста шрифтом фиксированной ширины. Применяется, как правило, для вывода небольшого куска программного кода (для больших листингов используется тег <pre>).
    <em>…</em> Выделение важных фрагментов текста. Обычно отображается курсивом.
    <kbd>…</kbd> Вывод текста шрифтом фиксированной ширины.
    <samp>…</samp> Вывод текста шрифтом фиксированной ширины.
    <strong>…</strong> Сильное выделение важных фрагментов текста. Обычно отображается полужирным шрифтом.
    <var>…</var> Используется для отметки имен переменных. Обычно отображается курсивом.

    Читать дальше: HTML списки

    htmlweb.ru

    Отправить ответ

    avatar
      Подписаться  
    Уведомление о