Как отформатировать текст в HTML?

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

  • Структурная разметка — использование тегов заголовков и абзацев
  • Семантическая разметка — использование полужирного, сильного, подчеркивания и т. Д.

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

Форматирование по-другому

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

Возьмем пример тегов и .

  • (Акцент) — логический тег
  • (курсив) — физический тег

Создайте простую HTML-страницу с таким текстом — «Это выделенный текст , а это текст, выделенный курсивом » — в текстовом редакторе. Посмотрите, как это выглядит в вашем браузере.

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

Это выделенный текст а это текст, выделенный курсивом.

Выглядит абсолютно так же, не так ли !? Тогда в чем суть наличия как логических, так и физических стилей? Читайте дальше…

Это вполне логично — форматирование HTML

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

— это указывает заголовок самого высокого уровня на странице. Однако не уточняется, должно ли это быть Arial или Times New Roman, 20 или 24 пункта. Поэтому, если вы хотите изменить представление всех тегов H1, вы можете просто изменить его определение (это можно сделать с помощью таблиц стилей).

Еще одно преимущество логических тегов заключается в том, что они помогают обеспечить согласованность ваших документов. Например, рассмотрим тег . Большинство браузеров выделяют его жирным шрифтом. Что, если бы вы хотели, чтобы это было подчеркнуто? Логические стили предлагают гибкость изменения атрибутов отображения при минимальном изменении кода.

Физический — форматирование HTML

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

Однако рекомендуется придерживаться одного типа тегов, то есть физических или логических, по всему документу и не путать их!

Приправим его немного с помощью тега

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

<FONT FACE="Comic Sans" COLOR="Red">
Is this comical and red and big?
</FONT>

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

Это комично, красное и большое?

Заметка: В HTML4 мы можем использовать атрибут размера шрифта, чтобы указать размер в HTML. Но атрибут «размер» для шрифтов не поддерживается в HTML 5. Следовательно, мы использовали встроенный стиль, чтобы увеличить размер шрифта до 30 пикселей.

Эй, шрифт не Comic Sans MS. Давайте внесем это изменение и посмотрим сейчас.

<FONT FACE="Comic Sans MS" COLOR="Red">
Is this comical and red and big?
</FONT>

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

Это комично, красное и большое?

Это хорошо!! Это означает, что если начертание шрифта указано неправильно, текст будет отображаться шрифтом по умолчанию. Итак, что мы можем сделать в качестве меры безопасности? Попробуйте это!

<FONT FACE="Comic Sans, Verdana, Arial, Times New Roman" COLOR="Red">
Is this comical and red and big?
</FONT>

Если первый указанный шрифт недоступен на клиентском компьютере, выбирается следующий из списка. Теперь измените его на:

<FONT FACE="Comic Sans, Verdana, Arial, Times New Roman" COLOR="#FFDD89">
Is this comical and red and big?
</FONT>

О !, это означает, что могут быть стандартные цвета, а также индивидуальные цвета с использованием значений #RRGGBB! Этот атрибут RRGGBB может принимать шестнадцатеричные значения от 000000 до FFFFFF — по одному байту для каждого основного цвета.

Заметка: Настоятельно рекомендуется управлять стилем элементов с помощью CSS централизованно, хотя вы можете управлять им с помощью HTML.

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

Ниже приведены некоторые из HTML-тегов, используемых в базовой типографике:

Открытие тега Закрытие тега Описание

Заголовок уровня 1

Заголовок уровня 2

Заголовок уровня 3

Заголовок уровня 4
Заголовок 5-го уровня
Заголовок уровня 6

Пункт
Заблокировать цитату
Подчеркнуть
Сильный

Разрыв строки

Горизонтальная линия
Курсив
<ПОДДЕРЖКА> Надстрочный
Нижний индекс
Смелый
Аббревиатура или акроним
Справка
Определение первого экземпляра термина
<АДРЕС> подробности адреса
Вставленный контент
Удаленный контент
Зачеркивание

Пример:

Наконец, давайте закончим эту главу полным примером:

Абзац начинается здесь. Это зачеркнутый контент подлежит удалению, но сохраняется для справки. Вот и вот удаленный контент.

Этот пример сделан со ссылкой на WebNots и переместите курсор здесь на HTML чтобы увидеть аббревиатуру HTML.

WebNots


Похожие записи

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *