- Перенос строки в html при изменении размера. HTML абзац, красная строка, перенос строки.
- javascript — Как сделать перенос строки после тега и удалить все html-теги регулярным выражением
- Как правильно оформлять перенос строк в HTML? [Архив]
- HTML-теги для работы с текстом
- HTML: Теги для текста | HTML самоучитель
- HTML-текст
- Текст в html
Перенос строки в html при изменении размера. HTML абзац, красная строка, перенос строки.
HTML-оформление постов и страниц очень важное дело — оно помогает оформлять контент таким способом, чтобы пользователю было удобно его читать.
Я расскажу вам о теге br — он делает перенос строки в HTML, то есть разбивает строку на две части — причем делает это принудительно, заканчивая текущую строку в том месте, где был вставлен и перенося ее вторую часть на новый ряд.
Где используется этот тег, когда конкретно возникает неотложна необходимость вставить в текст перевод строки без создания нового абзаца? Например, это может пригодиться в оформлении контента — если у вас есть сайт со стихами и отрывками стихов, текстами песен или чем-то подобным.
Все о теге для переноса строки br
Тег br осуществляет одинарный перенос строки в HTML (что это такое описано ) и определяется всеми браузерами. Да, чуть не забыл — если вы используете тег br, то в отличие от тега абзаца p, у вас не добавляется пустой отступ (перед строкой).
Тег br является пустым (пустой значит без содержимого, ничего не содержит), а значит его не нужно закрывать. А так как его не нужно закрывать, было придумано краткое описание — оно изначально подразумевает то, что сам тег не имеет закрывающего тега.
Представьте на минуту, что не было бы краткого описания. Что тогда? Тогда пришлось бы каждый раз «закрывать и открывать» перенос строки примерно так:
. Это как минимум неудобно. Но, тем не менее, в строгом XHTML закрывать его обязательно тегом
.
Если стоит задача увеличить расстояние по вертикали — между теми строками, где вы вставляете перенос — сделайте двойной перенос, вставив тег
дважды подряд.
br
>
Результат:
Чтобы осуществить перенос следующего предложения на новую строку, используем тег br.
Ура, второе предложение на новой строке.
Реальный пример:
А. Блок
Ночь, улица, фонарь, аптека,
Бессмысленный и тусклый свет.
Живи еще хоть четверть века —
Все будет так. Исхода нет.
И повторится все, как встарь:
Ночь, ледяная рябь канала,
Аптека, улица, фонарь.
Результат:
Ночь, улица, фонарь, аптека,
Бессмысленный и тусклый свет.
Живи еще хоть четверть века —
Все будет так. Исхода нет.
Умрешь — начнешь опять сначала
И повторится все, как встарь:
Ночь, ледяная рябь канала,
Аптека, улица, фонарь.
Как выглядит:
Зачем придумали тег br?
Необходимость этого тега существует хотя бы потому что перенести строку «как в Ворде» (как делают неопытные пользователи), путем написания десятков пробелов подряд, — не выйдет.
Почему не выйдет? Потому что любое количество пробелов будет считаться браузером как один пробел, а не перенос строки — браузер автоматически удаляет лишние пробелы. Для этого и нужен перенос строк.
Но не стоит злоупотреблять тегом
, чтобы все больше и больше увеличивать расстояние между строками — для этого лучше всего воспользоваться базовыми инструментами HTML+CSS. Недопустимо создание новых абзацев или «как бы абзацев» (это считае
offlink.ru
javascript — Как сделать перенос строки после тега и удалить все html-теги регулярным выражением
Stack Overflow на русскомLoading…
- 0
- +0
- Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
- Справка Подробные ответы на любые возможные вопросы
- Мета Обсудить принципы работы и политику сайта
- О нас Узнать больше о компании Stack Overflow
- Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
- Войти Регистрация
-
текущее сообщество
Как правильно оформлять перенос строк в HTML? [Архив]
Просмотр полной версии : Как правильно оформлять перенос строк в HTML?
Юннат
27.05.2013, 03:57
Рекомендуется каждый абзац заключать внутри тегов абзацА как лучше оформить дополнительные пробел между строками? Например когда надо увеличить отступ вниз.
DLE по умолчанию пустую строку прописывает так: <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;} как то так.
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> </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 октября 2019HTML- текст представлен в спецификации тегами для форматирования и группировки текста. Теги представляют собой контейнеры для текста и не имеют визуального отображения.
Теги для форматирования текста несут смысловую нагрузку и обычно задают для текста, заключенного внутрь, стилевое оформление, например, выделяют текст жирным начертанием или отображают его шрифтом другого семейства (свойство 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