Задаёт цвет фона.
Тег:
[контейнерный]
Создаёт ячейку в таблице. Допустимые атрибуты:
,
,
,
,
...
| Указывает кол-во столбцев, которое объединено в одной ячейке. От 1 до...
| Указывает кол-во строк, которое объединено в одной ячейке. От 1 до...
Тег:
[контейнерный]
Определяет заголовок таблицы. Нормальная ячейка с отцентрованным жирным текстом.
Тег:
[контейнерный]
Создает новый параграф. Встречая этот тег, браузер продолжает текст с новой строки.
Возможные атрибуты:
.
Тег:
[контейнерный]
Задаёт заголовок....
- самый большой заголовок....
- самый маленький заголовок.
Возможные атрибуты:
.
Тег:
[одиночный]
Переносит текст на новую строку.
Тег:
[одиночный]
Запрещает перевод строки.
Тег:
[контейнерный]
Создает жирый текст.
пример
.
Тег:
[контейнерный]
Создаёт подчёркнутый текст.
пример
.
Тег:
[контейнерный]
Создаёт наклонный текст.
пример
.
Тег:
[контейнерный]
пример
.
Тег:
[контейнерный]
Создаёт текст - имитирующий стиль печатной машинки.
пример
.
Тег:
[контейнерный]
Наклонный текст (воспринимается посковыми роботами как выделение).
Тег:
[контейнерный]
Жирный текст (воспринимается посковыми роботами, как особо сильное выделение).
Тег:
[одиночный]
Добавляет в HTML документ горизонтальную линию. Возможные атрибуты:
Создает линию без тени.
Устанавливает высоту (толщину) линии.
Устанавливает ширину линии.
Задаёт горизонтальное выравнивание в таблице.
Задает линии определенный цвет.
Тег:
[контейнерный]
Задаёт в тексте нижний индекс. Пример: Н
2
O .
Тег:
[контейнерный]
Задаёт в тексте верхний индекс. Пример c 2 =a 2 +b 2 . Тег:
[контейнерный]
Используется для форматирования текста. Не действует без атрибутов. Возможные атрибуты:
Указывает шрифт.
Устанавливает размер текста. От 1 до 7.
Задает тексту определенный цвет.
Тег:
[контейнерный]
Указывает путь на другую страницу.
Указывает в каком окне открывать гиперссылку.
Выскакивает подсказка при наведении на ссылку.
Открывает почтовую программу с указанным EMAIL.
Отмечает часть текста, как метку для гипперссылок на странице. Служит якорем.
Указывает путь к якорю. |
В прошлой статье я вам рассказывал про , как ими пользоваться и т.д. А сегодня я вам расскажу о еще одной неотъемлемой части в сайтостроении, а именно про атрибуты тегов html. И конечно же по традиции мы рассмотрим их на живых примерах и испробуем это на нашем сайте с Лукоморьем, который мы заманьячили в прошлой статье.
Атрибут
— это специальное дополнение к тегу, которое расширяет его возможности и может менять свойства содержимого. И если тег всегда фиксированный, то атрибут может иметь множество значений. Например, в теге мы можем поставить атрибуты цвета текста, его размера, шрифта и т.д. Но фонт мы подробнее рассмотрим в другой статье.
Различают универсальные и неуниверсальные атрибуты. Универсальные подходят практически для любых тегов, а неуниверсальные подходят для одного или нескольких, но далеко не для всех...
Атрибут записывается внутри тега после его значения, но до закрывающей угловой скобки. Сначала ставится сам атрибут, затем знак равенства, а потом само значение в кавычках. Выглядит это так:
Текст
Что следует из этого примера? Мы открыли абзац, и внутри тега поставили атрибут align, который отвечает за выравнивание текста. Далее мы проставили знак «=», который означает, что мы присваиваем значение этому атрибуту. Далее в кавычках мы пишем это самое значение. В данном случае это «center»
. Это означает, что текст в данном (и только в данном!) абзаце мы выровняем по центру. Попробуйте сами.
Но не забывайте заглядывать на сайт htmlbook
. Там вы точно найдете что чему соответствует. Это просто настольный справочник для любого веб-разработчика, а тем более для начинающего.
Как вы уже поняли, этот атрибут означает выравнивание текста. Ставится он обычно в тех тегах, которые отвечают за сам контент (текст, картинки и т.д.). В общем его можете ставить в заголовках (,...,), в абзацах (
), картинках ![]()
, блочный элемент ().
Возможные значения атрибутов:
- left — выравнивание по левому краю (стоит по умолчанию)
- right — выравнивание по правому краю
- center — выравнивание по центру
- justify — выравнивание по всей ширине
Попробуйте попрактиковаться и посмотрите как будет меняться расположение ваших элементов.
Title
Знакомое название, правда? Действительно. Есть такой тег, и мы его ставим между
и
. Но сейчас я говорю именно об атрибуте, и подходит он практически к любому тегу, так как является универсальным. А нужен он в качестве подсказки при наведении. И суть состоит в том, что вы сами пишите эту подсказку. Выглядит это примерно так:
Сколько будет 5-3?
Что мы тут видим? В начале открываем абзац, потом прописываем сам атрибут и даем ему значение «Ну что ты тупишь? Будет 2». Далее пишем отображаемый текст, ну и в конце закрываем тег
.
Что после этого произойдет? Сохраните документ и сами увидите. При наведении на текст курсором должна появиться всплывающая подсказочка.
Несколько значений
В одном теге может находиться сколько угодно атрибутов. Главное, чтобы они соответствовали данной метке. Вот вам пример:
Содержимое
Как видите тут все довольно просто, просто в одном теге нужно писать все атрибуты через пробел. Из данного примера мы видим, что содержимое будет выравнено по правому краю, и при наведении на него курсором мышки нам всплывет подсказка. Всё просто. Надеюсь, всё понятно?
Ну а теперь давайте вернемся к нашему Лукоморью, которое мы делали на прошлом занятии.
Живой пример
- Выровнять весь текст в документе с «Лукоморьем» по центру (вместе с заголовками),
- В заголовке первого уровня поставить подсказку «Автор произведения — А.С. Пушкин»
Если у вас нету выполненного файла из предыдущего занятия, то возьмите его и проставьте все нужные атрибуты, чтобы получилось всё по заданию.
И по традиции в начале всё сделайте сами. А если не получится, то смотрите действия, которые я написал ниже.
После этого сохраняем html-документ и запускаем его. Проверяем, что у нас получилось. Всё правильно? Я думаю, что у вас всё должно получиться. Но всё таки я чувствую, что многие из вас задолбались проставлять атрибуты в каждом четверостишии. Я вам покажу, как этот процесс облегчить.
Если вам нужно ставить один и тот же атрибут к какому-то большому отрезку, то в этом нам поможет тег
. DIV — это просто пустой блочный элемент, который служит некоторым контейнером для объединения. Сюда можно запихнуть различные атрибуты с цель применения к общему фрагменту. А уж если вы вообще хотите применить атрибут ко всему документу, то его вообще можно прописать в основной тег
.
В общем в этом случае вам можно не ставить в каждый тег атрибут align="center"
. Вам лишь нужно нужно поставить
перед заголовком, и закрыть его с помощью
в конце всего текста. Ну а внутри ставим align="center"
, но уже всего один раз. По моему это гораздо быстрее и удобнее и в итоге получается то же самое.
Ну как? Разобрались в общем принципе? Просто дальше мы будем изучать еще больше. Главное, чтобы вы поняли сам принцип расстановки тегов и атрибутов. В случае чего задавайте свои вопросы. Буду рад на них ответить.
Ну а для полноценного обучения принципа созданиям сайта рекомендую к просмотру отличный видеокурс "HTML5 и CSS3 с нуля до профи
". Там вы изучите HTML, CSS, научитесь верстать сайты-визитки, блоги и даже интернет-магазины. Курс просто офигительный для начинающего веб-разработчика.
Ну а я на сегодня заканчиваю. Надеюсь, что статья вам понравилась и была для вас полезной. Не забудьте подписаться на обновления моего блога, чтобы всегда быть в курсе всего самого интересного и не пропустить новых уроков. Ну а я с вами на сегодня прощаюсь. Желаю вам успехов в освоении материала. Пока-пока!
С уважением, Дмитрий Костин.
Атрибуты задаются в начальном тэге элемента и состоят из имени
и значения
, которые отделяются друг от друга знаком равно (=). Например в атрибуте href="http://www.сайт/"
href
является именем, а http://www.сайт/
значением.
HTML-теги могут содержать один или несколько атрибутов. Атрибуты добавляются в тег для того, чтобы информировать браузер о том, как данный тег должен отображаться в html-документе.
Атрибут title
Рассмотрим следующий пример:
В этом примере используется тег , который предназначен для обозначения аббревиатуры или акронима. В начальном теге элемента дополнительно был добавлен атрибут. Этот атрибут содержит заголовок для элемента.
Имя атрибута title
. В этом примере, мы дали ему значение Язык гипертекстовой разметки
.
Атрибут title может (необязательно) использоваться в любом HTML - элементе, чтобы предоставить дополнительную информацию о содержимом элемента.
При использовании атрибута title, большинство браузеров будет отображать его значение как "всплывающую подсказку", когда пользователь наводит указатель мыши на элемент.
Атрибут alt
Вы уже знаете, что изображения вставляются в Web-страницы с помощью одинарного тега ![]()
. Атрибут alt добавляется внутрь тera ![]()
и определяет для добавленноrо на WеЬ-страницу rpaфическоrо элемента альтернативный текст. Этот текст называется альтернативным, поскольку может отображаться на экране как альтернатива самому изображению.
В следующем примере вы увидите, как браузер работает с атрибутом alt, когда появляется «отсутствующее» изображение. Если рисунок не может быть найден или по какой-то причине не загружается, вместо него выводится значение атрибута alt. Поменяйте имя файла с изображением с orange.jpg на pencil.jpg. На самом деле такого файла не существует, поэтому вы получите «отсутствующее» изображение.
Атрибут href
Вы можете добавить сразу несколько атрибутов к элементу.
Вот пример сложения двух атрибутов к элементу (который используется для создания гиперссылки на другую веб - страницу).
Пример HTML:
Попробуй сам
HTML Tutorials
Атрибут href определяет расположение веб - страницы, на которую ведет ссылка.
Мы также используем атрибут title для того, чтобы обеспечить некоторую консультационную помощь для пользователя в виде всплывающей подсказки.
Указывать атрибуты можно только внутри открывающих тегов и если атрибутов несколько, то между ними ставится пробел. При этом нельзя в одном теге задавать два одинаковых атрибута, даже если у них разные значения, то есть дублировать их запрещено. Атрибуты, как и теги, нечувствительны к регистру, то есть их допустимо писать заглавными и строчными буквами. Значения атрибутов можно брать в необязательные двойные (" ") или одинарные кавычки(" ").
Иногда бывает необходимо использовать кавычки. В этом примере атрибут заголовка не будет отображаться правильно, так как в значении атрибута содержатся пробелы:
Одинарные или двойные кавычки?
Чаще всего в HTML используются "двойные кавычки", но вы можете использовать и "одинарные". Иногда вам придется использовать одинарные кавычки, если в значении есть часть, которая отдельно должна быть заключена в кавычки:
HTML
Можно наоборот:
HTML
Общие атрибуты
Ниже представлен список некоторых атрибутов, которые стандартны для большинства html-элементов:
Атрибут
Значение
Описание
| align
| right, left, center
| Горизонтальное выравнивание тегов
|
| valign
| top, middle, bottom
| Вертикальное вырвнивание тегов внутри HTML-элемента.
|
| background
| URL
| Расположение фонового изображения
|
| id
| Уникальное имя
| Уникальное имя для использования с каскадными таблицами стилей.
|
| class
| правило класса или стиль класса
| Классифицирует элемент для использования с каскадными таблицами стилей.
|
| width
| Числовое значение
| Определяет ширину таблиц, изображений или ячеек таблицы.
|
| height
| Числовое значение
| Определяет высотуу таблиц, изображений или ячеек таблицы.
|
| title
| Текст подсказки
| Текст, отображаемый во всплывающей подсказке.
|
Полный список всех атрибутов для каждого элемента HTML, указан в нашем справочнике: HTML Атрибуты.
Задачи
Первое итоговое задание
Вы познакомились с тегами, необходимыми для создания простейшей HTML-страницы, а также с атрибутами и их значениями, которые очень важны для корректного отображения документа, оптимизации и продвижения в поисковиках.
Пришло время повторить изученное и выполнить несложные задания:
Всплывающая подсказка
Сделайте всплывающую подсказку с текстом "Хороший сайт", который появляется когда вы наводите указатель мыши на абзац, как показано на рис. 1.
Всплывающая подсказка
Title="Хороший сайт">сайт - сайт для разработчиков.
Размеры изображения
Измените размер изображения до 200 пикселей в ширину и 150 пикселей в высоту.
Размеры изображения
Размеры изображения
HTML - язык гипертекстовой разметки. В его основе лежат так называемые теги. Теги - это некие элементы обвертки, задающие формат и свойства элементов веб-страницы. На одной странице мы собрали для вас актуальный справочник тегов HTML.
Всего насчитывается более ста элементов разметки. Каждый имеет ряд атрибутов и собственный синтаксис. Справочник по тегам HTML поможет быстрой найти нужный вам элемент.
Список тегов HTML
Ниже в таблице представлен список тегов HTML5 с кратким описанием на русском языке.
Тег
Краткое описание
|
|
Комментарий.
|
|
|
Определяет тип документа.
|
|
|
Ссылка, гиперссылка, якорь.
|
|
|
Определяет текст как аббревиатуру.
|
|
|
Контактная информация автора или владельца документа.
|
|
|
Определяет область на карте-изображении
|
|
|
Статья
|
|
|
Контент в стороне (содержимое не является основным на странице по смыслу)
|
|
|
Позволяет вставить воспроизводимый аудио файл.
|
|
|
Полужирный текст.
|
|
|
Задает базовый URL или аттрибут target для относительных ссылок в документе.
|
|
|
Область, где написание текста может имееть другое направления.
|
|
|
Устанавливает направление написания текста. В отличии от направление указывается физическое направление
|
|
|
Цитата.
|
|
|
Указывает область body документа.
|
|
Перенос строки.
|
|
|
Кликабельная кнопка
|
|
|
Используется для рисовании графики с помощью скриптов
|
|
|
Подпись таблицы.
|
|
|
Сноска на название материала.
|
|
|
Используется для вставки компьютерного кода в текстовом виде.
|
|
|
Задает характеристики колонок в таблице.
|
|
|
Определяет группу из одной или более колонок таблицы для форматирования.
|
|
|
Используется для определения предопределенных вариантов на выбор при вводе в текстовом поле
|
|
|
Определяет описание термина из тега в списке терминов
|
|
|
Текст, который удален в новой версии документа.
|
|
|
Определяет дополнительную информацию, которую пользователь может просмотреть или скрыть
|
|
|
Указывает, что содержимое является термином.
|
|
|
Определяет диалоговое окно или интерактивный элемент
|
|
|
Блочный элемент - один из основных элементов верстки.
|
|
|
Определяет список определений
|
|
|
Название термина в списке определений
|
|
|
выделенный по смыслу текст (обычно, текст выделенный курсивом).
|
|
|
Контейнер для внешнего приложения
|
|
|
Группа связанных элементов в форме
|
|
|
Заголовок для элемента
|
|
|
Определяет автономную группу из нескольких элементов (например картинка с подписью)
|
|
|
Нижний колонтитул
|
|
|
Определяет форму пользовательского ввода
|
| -
|
Заголовки HTML разного уровня: , , , , , .
|
|
|
Указывает область head документа.
|
|
|
Блок заголовка
|
|
|
Горизонтальная линия - тематический разделитель.
|
|
|
Корневой элемент. Сообщает браузеру, что данный документ является HTML документом.
|
|
|
Выделяет текст курсивом.
|
|
|
Определяет встроенный фрейм
|
![]()
|
Изображение, картинка.
|
|
|
Поле для ввода
|
|
|
Текст, который был добавлен в новой версии документа.
|
|
|
Текст введенный с клавиатуры или названия кнопок клавиатуры. Обычно выделен моноширинным шрифтом.
|
|
|
Метка для поля ввода. Указывает на привязку элемента (обычно текста) к полю ввода.
|
|
|
Заголовок элементов
|
|
|
Элемент списка
|
|
|
Определяет привязку внешнего ресурса (чаще всего, привязку таблицы стилей CSS)
|
|
|
Основной контент
|
|
|
Контейнер для . Определяет пользовательскую карту на изображении
|
|
|
Выделенный текст (обычно с помощью подсветки фона).
|
|
|
Контейнер для списка пунктов меню
|
|
|
Определяет элементы, которые пользователь может вызвать из контекстного меню
|
|
|
Используется для определения мета-данных документа.
|
|
|
Измеритель значений в заданном диапазоне
|
|
|
Контейнер для навигационных элементов
|
|
|
Альтернативный контент для пользователей, отключивших скрипты
|
|
|
Определяет встроенный объект
|
|
|
Определяет нумерованный список
|
|
|
Определяет группу связанных вариантов в выпадающем списке. Дает название группу
|
|
|
Параметр (вариант выбора) в выпадающем списке
|
|
|
Результат вычислений
|
|
Абзац.
|
|
|
Задает параметры для встроенных объектов
|
|
|
Контейнер для нескольких изображений
|
|
|
Предварительно отформатированный текст.
|
|
|
Индикатор выполнения (прогресса)
|
|
|
Цитата в тексте.
|
|
|
Альтернативный текст, если браузер не поддерживает тег .
|
|
|
Аннотация к содержимому тега .
|
|
|
Контейнер для символов и их расшифровки (в основном для Восточно-азиатских символов, иероглифов).
|
|
|
Перечеркнутый текст.
|
|
|
Текст, являющийся результатом выполнения компьютерной программы (обычно выводится моноширинным шрифтом).
|
|
|
Определяет скрипт или подключение скрипта из внешнего ресурса.
|
|
|
Раздел
|
|
|
Определяет выпадающий список
|
|
|
Текст шрифтом меньшего размера.
|
|
|
Определяет ресурс для тегов , и .
|
|
|
Строчный элемент.
|
|
|
Текст, выделенный по значению. Обычно отображается полужирным.
|
|
|
Определяет контейнер для определения стилей документа
|
|
|
Отображает текст в виде нижнего индекса.
|
|
|
Заголовок внутри тега
|
|
|
Отображает текст в виде верхнего индекса.
|
| Определяет таблицу.
|
|
|
Определяет область контента в таблице.
|
|
|
Ячейка в таблице .
|
|
Многострочное поле для ввода
|
|
|
Определяет группу строк в нижней части таблицы - нижний колонтитул. Подробнее
|
|
Место, где допускается перенос строки.
|
Устаревшие теги HTML
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Тег
Краткое описание
|
|
Акроним. Используйте тег вместо него
|
|
|
Встроенный апплет. Используйте или вместо него.
|
|
|
Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
|
|
|
Текст большего размера. Используйте вместо него
|
|
|
Отцентрованный текст. Используйте вместо него
|
|
|
Список директорий. Используйте |
|
|
Определяет цвет, размер и семейство шрифта. Используйте вместо него
|
|
|
Фрейм внутри . Используйте вместо него
|
|
|
Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
|
|
|
Альтернативный текст, если фреймы не поддерживаются
|
|
|
Перечеркнутый текст. Используйте или вместо него
|
|
|
Моноширный текст. Используйте вместо него
|
|
|
Подчеркнутый текст. Используйте вместо него
|
Мы уже разобрались. Мы выяснили, что у них есть содержимое. Однако это ещё не всё. У тегов также есть атрибуты, которые расширяют их возможности, а у атрибутов, в свою очередь, есть значения. С их помощью элементу можно задавать параметры, определять стиль оформления. Например, тегом
вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.
Как писать атрибуты?
Атрибуты - зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично - это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?
Значения с атрибутами записываются в таком формате: Атрибут=”значение”
lang=”en”
Писать атрибуты всегда нужно внутри открывающего тега, после зарезервированного слова.
Абзац
Обычно для одного тега доступно несколько атрибутов. В каком порядке они будут перечислены, неважно.
Универсальные атрибуты
Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.
- accesskey
позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1
пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.
В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:
Ссылка будет открываться по нажатию сочетания клавиш с единицей
- class
позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
- С помощью contenteditable
можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true
- правку разрешить, false
- запретить.
- При помощи атрибута contextmenu
вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге
, а атрибуту contextmenu присваивается его идентификатор.
- dir
определяет направление текста: слева направо (ltr)
или справа налево (rtl)
.
- draggable
позволяет запретить (false)
или разрешить (true)
пользователю перетаскивать наделённый этим атрибутом элемент страницы.
- dropzone
указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy
), перемещать (move
) или создать на него ссылку (link)
.
- hidden
- атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true - скрывается.
- id
задаёт идентификатор элемента - своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-)
и подчёркивания (_)
. Русских букв содержать не может.
- lang
помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский - ru
, английский - en
и т. п.).
- spellcheck
включает (true)
или отключает (false)
проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.
- style
позволяет задать оформление элемента с помощью CSS-кода.
- tabindex
даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута - целое положительное число.
- title
- всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.
- translate
разрешает (yes)
или запрещает (no)
перевод содержимого тега.
- align
задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left
), по правому краю (right
), по центру (center)
или по ширине (justify)
. Для изображений (тег
![]()
) также доступно выравнивание по верхней границе самого высокого элемента строки (top
), по нижней границе (bottom)
, а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.
Стоит иметь в виду, что использовать атрибут align
не рекомендуется, а выравнивать текст лучше с помощью CSS.
Пример использования атрибутов
В качестве примера рассмотрим строку HTML-кода:
Этот текст можно редактировать
Вся строка создаёт абзац текста, который пользователь может в браузере самостоятельно изменять.
Разберём каждый элемент строки.
- открывающий тег контейнера, хранящего абзац.
- закрывающий тег.
Между символами >
и <
расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.
contenteditable
=”true
” - это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable
=”true
”. Атрибут contenteditable
задаёт, сможет ли пользователь редактировать содержимое элемента, значение true
, написанное в кавычках через знак равно, редактирование разрешает:
Атрибут=”значение”
contenteditable=”true”
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам:
| | |
