Таблица основных тегов html с примерами

оглавление

• Относительный шрифт: Относительное окно просмотра: Относительный размер родительского элемента:

1. Абсолютная единица длины

Они прикреплены друг к другу и не изменятся из-за изменения размеров других элементов.

единица измерения	имя	Эквивалентно
px	Пикселей	Типичная единица измерения, многие другие единицы длины напрямую отображаются на пиксели.
cm	Сантиметры	1cm = 10mm = 96px/2.54 = 37.8px
mm	Миллиметры	1mm = 0.1cm = 3.78px
Q	1/4 мм (четверть миллиметра)	1q = 1/4mm = 0.945px
in	Дюймы (дюймы)	1in = 2.54cm = 96px
pc	Picas	1pc = 12pt = 1/6in = 1/6*96px = 16px
pt	Точки	1pt = 1/72in = =0.0139in = 1/722.54cm = 1/7296px = 1.33px

px (пиксель) пиксель

px означает «абсолютный размер» (не совсем абсолютный), который фактически является пикселем, определенным в CSS (этот пиксель отличается от физического пикселя устройства).

Использование px для установки размера шрифта, ширины и высоты элемента относительно стабильно и точно. В IE он не может адаптироваться к изменениям, произведенным при увеличении масштаба браузера (не имеет большого значения, игнорируйте это).

2. Единица относительной длины

Укажите длину относительно другой длины. Есть:

2.1 Относительные единицы длины, относящиеся к шрифтам:

em

• em — относительная единица длины шрифта.
• Если используется для самого атрибута font-size, это размер шрифта относительно родительского элемента.
• Если используется для других атрибутов (ширина, высота), он зависит от размера шрифта самого элемента.
• Больше используется за рубежом;заметка: Размер шрифта по умолчанию любого браузера составляет 16 пикселей; Поэтому => Для удобства преобразования в селекторе тела можно объявить: Таким образом,;Недостатки:Он наследует размер шрифта родительского элемента. Каждый раз, когда размер шрифта родительского элемента изменяется, его необходимо пересчитывать.

rem

Rem — это новая единица относительной длины шрифта в CSS3, которая относится только к корневому элементу, а именно к размеру шрифта HTML-элементов.

• Единицы Rem не поддерживаются в аббревиатурах шрифтов и псевдоэлементах в IE9 / 10.
• IE9 / 10 поддерживается частично, и все основные версии IE11 +, Firefox, Chrome, Safari и Opera поддерживаются. Для обеспечения совместимости с браузерами, которые не поддерживают rem, нам нужно написать соответствующее значение px перед rem, чтобы браузеры, которые не поддерживают, могли быть элегантными. Понижение версии.

ex

• ex относится к высоте строчной буквы x в используемом шрифте. Но высота у разных шрифтов x может быть разной. Фактически, многие браузеры принимают половину значения em как значение ex.
• ex часто используется для точной настройки на практике

ch

• ch похож на ex и определяется как ширина числа 0. Если ширина числа 0 не может быть определена, возьмите половину значения em в качестве значения ch
• ch в основном используется для набора шрифтов Брайля на практике
• Совместимость: IE8 не поддерживает

2.2 Единицы относительной длины, относящиеся к области просмотра:

: Высота области просмотра, по умолчанию — 1% от высоты области просмотра. : Ширина области просмотра, по умолчанию 1% от ширины области просмотра. : 1/100 меньшего значения высоты и ширины области просмотра макета. : 1/100 большего значения высоты и ширины области просмотра макета.

• «Область просмотра» в модуле области просмотра на стороне рабочего стола, несомненно, относится к видимой области браузера;
• Но на мобильном терминале это относится к области просмотра макета (область просмотра макета).

2.3 Относительно ширины и высоты или размера шрифта содержащего блока

Процент — это относительная единица длины относительно высоты и ширины содержащего блока или размера шрифта. Концепцию содержащего блока нельзя просто понимать как родительский элемент. В случае статического и относительного позиционирования содержащий блок обычно является его родительским элементом. Если это абсолютно позиционированный элемент, содержащий блок должен быть ближайшим элементом-предком, положение которого нестатично. Если это элемент с фиксированной позицией, содержащий его блок — это область просмотра.

Теги форматирования

Теги форматирования используются для визуального и логического выделения фрагментов текста.

Тег
Описание

Определяет акроним.Не поддерживается в HTML5.

Определяет аббревиатуру или акроним.

Содержит контактную информацию об авторе/владельце документа/статьи.

Устанавливает жирное начертание текста.

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

Переопределяет текущее направление текста.

Определяет шрифт большего размера.Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.

Определяет длинную цитату.

Определяет выровненный по центру текст.Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.

Помечает текст как цитату или сноску на другой материал

Определяет фрагмент компьютерного кода.

Определяет удаленный текст.


Содержит определение термина или слова. По умолчанию, выделяется курсивом.

Используется для акцентирования фрагмента текста. Выделяется курсивом.

Определяет шрифт, цвет и размер текста. Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.

Выделяет фрагмент текста курсивным начертанием.

Определяет вставленный текст, который отображается подчеркнутым.

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

Содержит выделенный/подсвеченный текст.
Новый элемент в HTML5.

Определяет скалярную величину в том же диапазоне или графическое представление дробного числа.

Определяет предварительно отформатированный текст.

Определяет индикатора прогресса выполнения задачи (progress bar).Новый элемент в HTML5.

Определяет короткую цитату.

Содержит альтернативный текст, который показывается в браузере, не поддерживающем тег .Новый элемент в HTML5.

Содержит аннотации сверху или снизу от текста, заключенного в тег (для западно-азиатских языков).
Новый элемент в HTML5.

Содержит аннотации сверху или снизу от текста, заключенного в тег (для восточно-азиатских языков).Новый элемент в HTML5.


Содержит текст, который уже не актуален.

Содержит результат вывода компьютерной программы или скрипта.


Подчеркивает важность выделенного фрагмента текста.

_{Определяет текст с нижним индексом.
Определяет текст с верхним индексом}

Определяет шаблон.

Определяет время/дату.Новый элемент в HTML5.

Отображает шрифт моноширинным текстом.Не поддерживается в HTML5․ Рекомендуется использование CSS стилей.

Определяет текст, стилистически отличающийся от обычного текста.

Определяет математические/переменные величины.

Указывает браузеру, что при необходимости можно сделать перенос строки.
Новый элемент в HTML5.

Set Font Size With Em

To allow users to resize the text (in the browser menu), many
developers use em instead of pixels.

1em is equal to the current font size. The default text size in browsers is
16px. So, the default size of 1em is 16px.

The size can be calculated from pixels to em using this formula: pixels/16=em

Example

h1 {  font-size: 2.5em; /* 40px/16=2.5em */}h2 {  font-size: 1.875em; /* 30px/16=1.875em */
}p {  font-size: 0.875em; /* 14px/16=0.875em */}

In the example above, the text size in em is the same as the previous example
in pixels. However, with the em size, it is possible to adjust the text size
in all browsers.

Unfortunately, there is still a problem with older versions
of Internet Explorer.
The text becomes larger than it should
when made larger, and smaller than it should when made smaller.

Font Size

The property sets the size of the text.

Being able to manage the text size is important in web design. However, you
should not use font size adjustments to make paragraphs look like headings, or
headings look like paragraphs.

Always use the proper HTML tags, like <h1> — <h6> for headings and <p> for
paragraphs.

The font-size value can be
an absolute, or relative size.

Absolute size:

• Sets the text to a specified size
• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
• Absolute size is useful when the physical size of the output is known

Relative size:

• Sets the size relative to surrounding elements
• Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Определение и использование

Тег используется для встраивания изображения в HTML страницу.

Изображения технически не вставляются на веб страницу; изображения связаны с веб страницами.
Тег создает удерживающее пространство для ссылочного изображения.

Тег имеет два обязательных атрибута:

• src — Указывает путь к изображению
• alt — Задает альтернативный текст для изображения, если изображение по какой-либо причине не может быть отображено

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

Совет: Чтобы связать изображение с другим документом,
просто вложите тег в тег <a> (см. пример ниже)

HTML Теги

<!—…—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Основные HTML-теги

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

• <!—…—> — одиночный тег, внутри которого размещается комментарий. Комментарий — это текст, который не обрабатывается браузером. Внутри тега можно писать, что угодно, даже другие теги — работать они не будут, на экране не отобразятся. Разработчики комментируют код либо чтобы другим веб-мастерам было проще в нём разобраться, либо чтобы спустя продолжительное время его быстро смогли понять они сами.
• <html>, <!DOCTYPE>, <head>, <body>, <title> — теги, которые должны присутствовать в любом приличном HTML-документе (подробнее см. «Как создать сайт в Блокноте»).
• <meta> — тег содержит вспомогательную информацию для браузеров и поисковиков. Внутри него можно прописать ключевые слова, описание страницы, кодировку документа, имя автора и т. д.
• <script> содержит ссылку на файл сценария или сам код.
• <style> — тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов <style>, определяющих разные стили разных частей страницы.
• <header> — полная противоположность <footer>, его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.
• <footer> хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.
• <main> содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри <main> должна располагаться как раз эта статья.
• <a> предназначен для создания ссылок. Ссылки — корень гипертекста, поэтому им посвящена отдельная статья.
• <img> нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу статья).
• <blockquote>, <br>, <hi1>-<hi6>, <hr>, <i>, <p>, <s>, <strong>, <ins> и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML».
• <div> — блочный элемент. Текст внутри <div></div> форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).
• <span>. У вас есть абзац <p> или блок <div>. Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег <span>.
• <ol>, <ul>, <li> — теги списков. Маркированные, нумерованные — работа этих тегов. Есть ещё списки определений, за которые отвечают теги <dd>, <dt> и <dl>, но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков».
• <table>, <tbody>, <thead>, <td>, <th> и <tr> используются при создании таблиц и подробно рассматриваются в отдельной статье.
• <form> — тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри <form></form> вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий — всё это элементы формы, код которых размещается внутри контейнера <form>.
• <button> — тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами <form></form>).
• <input> создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер <form>. Но зачем нам тогда отдельно <button>, если есть универсальный <input>? <button> позволяет создать кнопку с расширенными параметрами. Например, на кнопке <button> можно разместить картинку. На элементе, созданном через <input>, такого сделать нельзя.
• <menu> и <command> — теги создания меню в HTML 5. <menu> — это контейнер, внутри которого помещаются элементы <command>, добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.
• <textarea> — ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.

Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS Z-indexCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !importantCSS Math Functions

Новые единицы измерения в CSS

Чтобы было еще проще писать стилевые правила, зависящие только
от размера шрифта по умолчанию, с 2013 года в CSS есть новая
единица: . Один (от «root em»,
т.е. «корневой em» или «em корневого элемента») — это размер шрифта
корневого элемента в документе. В отличие от ,
который может быть для каждого элемента свой,
для всего документа один и тот же. Например, чтобы задать
элементам P и H1 одинаковый внешний отступ слева, вот для сравнения
CSS-код до 2013 года:

p { margin-left: 1em }
h1 { font-size: 3em; margin-left: 0.333em }

и новая версия:

p { margin-left: 1rem }
h1 { font-size: 3em; margin-left: 1rem }

Благодаря другим новым единицам стало можно указывать размеры
относительно окна пользователя. Это и . Единица  — 1/100 ширины окна, а  — 1/100 его высоты. Еще есть ,
соответствующая меньшему из и .
И (можете догадаться, что она делает).

Атрибуты

Атрибут	Значение	Описание
alt	text	Задает альтернативный текст для изображения
crossorigin	anonymous use-credentials	Разрешить использование изображений со сторонних сайтов, разрешающих кросс-исходный доступ, с canvas
height	pixels	Задает высоту изображения
ismap	ismap	Задает изображение в качестве карты изображений на стороне сервера
longdesc	URL	Задает URL для подробного описания изображения
referrerpolicy	no-referrerno-referrer-when-downgradeorigin origin-when-cross-originunsafe-url	Указывает, какие ссылки следует использовать при извлечении изображения
sizes	sizes	Задает размеры изображений для различных макетов страниц
src	URL	Указывает путь к изображению
srcset	URL	Указывает путь к изображению, который будет использоваться в различных ситуациях
usemap	#mapname	Задает изображение в качестве карты изображений на стороне клиента
width	pixels	Задает ширину изображения

Использование заголовков

В нашем примере очень хотелось бы, чтобы название и автор стихотворения были бы выделены. Для этого можно использовать заголовки. У заголовка существуют уровни: H1 – самый первый уровень и, соответственно,  текст, заключенный в контейнер <H1>…</H1>, будет самым большим. Н6 – самый нижний уровень и самый маленький размер текста.

Содержимое тэгов <H1>, <H2>, …, <H6> всегда начинается с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

У тэгов <H1>, <H2>, …, <H6>  также имеется атрибут.

ALIGN определяет выравнивание заголовка. Параметр ALIGN такие же как и у атрибута ALIGN тэга P.

Сделаем в нашем примере название стихотворения заголовком первого уровня и выравнивание по центру, а автора – вторым уровнем и выравнивание по правому краю.

Пример:

<H1 ALIGN = “CENTER”>
Унылая пора! Очей очарованье!...
</H1>

Результат:

CSS шрифт

С помощью команд CSS вы можете контролировать различные аспекты текстового представления. Давайте сначала посмотрим, как можно указать тип, размер и стиль шрифта (что представляют собой шрифты, объясняется в статье «Шрифты на сайт — руководство»).

Тип шрифта

Тип шрифта устанавливается с помощью font-family: value, с конкретным названием шрифта (например, Verdana) или одним из следующих слов — категориями шрифта:

• serif — шрифты с засечками, например Times New Roman.
• sans-serif — шрифты без засечек, например Arial.
• monospace — шрифты, в которых все символы занимают одинаковую ширину, например Courier New.

Когда вы выбираете serif, sans-serif или monospace, браузер автоматически выбирает определенный тип шрифта из указанной категории.

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

Если у пользователя не установлен первый указанный шрифт, браузер использует второй шрифт, если он не установлен, третий и т. д. Если ни один из указанных типов шрифтов не установлен, браузер будет использовать любой из шрифтов по умолчанию, которые являются универсальными и установлены почти на всех компьютерах (Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana).

Размер шрифта

Размер шрифта (размер текста) устанавливается с помощью font-size, например:

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

В качестве основы берется размер родительского элемента, приравненный к среднему. Относительный размер шрифта также может быть указан с словами larger (больше) или smaller (меньше).

Толщина шрифта

Толщина шрифта указывается с помощью font-weight, а для значений можно использовать:

• числа от 100 до 900, кратные 100 (100, 200, 300 и т.д.). 100 соответствует самой маленькой толщине шрифта, а 900 — самой большой;
• слова bold (соответствует числу 700), normal (эквивалентно 400) — значение по умолчанию, bolder и lighter — соответственно большей и меньшей толщины шрифта относительно элемента-родителя.

Стиль шрифта

С CSS можно задать определенный стиль шрифта — например, шрифт может быть курсивный. Этот стиль шрифта указывается с помощью font-style: italic:

На месте italic можно использовать normal (обычный текст) или oblique — шрифты, которые поддерживают наклонные символы. На практике, italic и oblique выглядят одинаково.

Описанные здесь свойства шрифта можно задать сокращенно с помощью свойства font и списка желаемых параметров, разделенных пробелами друг с другом. Вот и пример:

Перечисление параметров идет в следующем порядке: стиль, толщина, размер, вид шрифта.