Сколько атрибутов в html

Значения атрибутов

Каждый атрибут тега содержит значение определённого типа и формата написания. Различают следующие типы значений: ключевые слова, числа, дата и время, цвета, URL.

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

Не все атрибуты имеют значение по умолчанию, в случае отсутствия такого атрибута или при его некорректном значении, атрибут пропускается.

Ключевые слова

Это заданный фиксированный набор определённых слов, которые допустимо подставлять в качестве значений атрибутов. Ключевые слова не чувствительны к регистру и их можно писать любым удобным способом. Так, значения handheld , Handheld и HANDHELD по своему действию одинаковы.

В примере 1 показано создание формы, которая отправляется на сервер методом POST с помощью значения post атрибута method .

Пример 1. Метод отправки формы

HTML5 IE Cr Op Sa Fx

В данном примере в элементе используется атрибут method со значением post . Если этот атрибут не указать, то будет подставляться значение get , применяемое по умолчанию. Для первого элемента атрибут type не задан, поскольку он подставляется автоматически со значением text , а для второго атрибут type уже указан для создания кнопки отправки формы.

Числа

К числам относятся: положительные целые числа, содержащих одну или несколько цифр от 0 до 9; отрицательные числа; а также вещественные или дробные (например, 0.5).

Положительные целые числа

Активно применяются когда надо задать количество колонок, ограничить размер поля формы и количество вводимых символов, установить ширину и высоту рисунка и др. В примере 2 показано создание нумерованного списка, начинающегося с 11.

Пример 2. Использование целого числа

HTML5 IE Cr Op Sa Fx

Отрицательные целые числа

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

Для указания отрицательного числа перед ним ставится знак минус (-) без пробелов (например: -15). В примере 3 показано использование отрицательных значений.

Пример 3. Число со знаком минус

HTML5 IE Cr Op Sa Fx

       
Введите число с шагом 2
  

Браузер Firefox не поддерживает тип number и вместо него отображает обычное текстовое поле.

Вещественные числа

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

Примеры вещественных чисел: -0.84, 3.1415926, 1.717.

Есть и вторая форма записи вещественных чисел, когда после числа добавляется латинский символ e или E, а затем число означающее степень, причём оно может быть и со знаком минус. Это аналогично тому, что число перед E умножают на 10 в степени, указанной после символа E. Вот несколько примеров для наглядности.

3.1415926e5 = 3.1415926 × 10 5 = 3.1415926 × 100000 = 314159.26

5e-2 = 5 × 10 -2 = 5 / 100 = 0.05

78e2 = 78 × 10 2 = 7800

Браузер Opera некорректно работает с вещественными числами, в которых есть заглавная буква E, так что вставляйте строчную букву e.

Дата и время

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

Дата и время задается в особом формате, пример которого показан в табл. 1.

Табл. 1. Форматы даты и времени

Значение	Формат	Пример
Год	ГГГГ	2014
Месяц и год	ГГГГ-ММ	2014-12
Полная дата	ГГГГ-ММ-ДД	2014-12-23
Дата и время с минутами	ГГГГ-ММ-ДДTчч:мм	2014-07-24T18:18
Дата и время с секундами	ГГГГ-ММ-ДДTчч:мм:сс	2014-07-24T18:18:18
Дата и время с часовым поясом	ГГГГ-ММ-ДДTчч:мм:сс±чч:мм	2014-07-24T18:18:18+04:00

Для каждой единицы существует своя заданная форма и ограничения.

• Год — задается четырьмя цифрами (1860).
• Месяц — две цифры (01 — январь, 02 — февраль, 12 — декабрь).
• День — две цифры от 01 до 31.
• Час — две цифры от 00 до 23.
• Минуты — две цифры от 00 до 59.
• Секунды — две цифры от 00 до 59.
• Часовой пояс — часы и минуты с указанием знака плюс или минус.

Дата и время разделяются между собой заглавной латинской буквой T. Часовой пояс при необходимости пишется после времени со знаком плюс или минус. К примеру, для Москвы часовой пояс будет +03:00.

Цвета

Значение цвета представляет собой три числа в диапазоне от 0 до 255 в шестнадцатеричном представлении описывающие красную, зелёную и синюю компоненту в цветовом пространстве sRGB. Каждое значение цвета должно начинаться с символа решётки (#), после которого могут идти следующие шесть цифр или букв в любом регистре: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Другие символы не допускаются. Подробнее о цвете в HTML смотрите здесь.

URL

URL — это адрес документа или файл. Содержит в себе несколько частей, не все из которых являются обязательными. Это протокол, имя хоста, порт, путь, строка запроса и хэш. В табл. 2 перечислены параметры URL с их описанием.

Табл. 2. Параметры URL

Параметр	Описание	Пример
протокол	Сетевой протокол. Для гипертекстовых документов это HTTP.	http:// https://
имя хоста	Адрес сайта.	htmlbook.ru www.google.com
порт	Системный ресурс, выделяемый веб-серверу. По умолчанию имеет значение 80, его можно не указывать.	:80
путь	Путь к документу на сайте.	/open/doc.html
строка запроса	Строка, в которой передаются параметры GET-запроса со значениями. Пишется после знака вопроса (?).	?name=vasya
хэш	Строка после знака решётки (#).	#top

В зависимости от наличия тех или иных параметров различают абсолютные и относительные адреса. Абсолютный адрес содержит порт и имя хоста, относительный — путь к документу. Строка запроса и хэш допустимо добавлять к адресу любого типа. Если URL содержит только хэш, то в текущем документе произойдёт переход к элементу, у которого задано id=»имя_хэша» . Решётка в атрибуте id в таком случае не пишется.

Вопросы для проверки

1. Коля написал ошибочное число в следующем коде, но валидатор не выдал никакой ошибки. Почему?

2. Даша использовала число 12g5 в строке

Но браузер Chrome не показал никакого результата. Почему?

3. Сколько способов есть в HTML чтобы задать оранжевый цвет?

4. Адрес ссылки имеет следующий код. Но на странице нет элемента с идентификатором local . Что произойдёт, если щёлкнуть по такой ссылке?

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные материалы

• Самоучитель HTML4
• Самоучитель CSS
• Как добавить картинку на веб-страницу?
• Спецсимволы
• Структура HTML-кода
• Введение в HTML
• Способы добавления стилей на страницу
• Выравнивание текста
• Якоря
• Позиционирование элементов
• Как добавить иконку сайта в адресную строку браузера?
• Ссылки

Атрибуты HTML-тегов

Это задание архивной части. Перейдите по ссылке, чтобы пройти задание в актуальной части.

В предыдущем задании, как вы заметили, после вставки в код тега ничего не произошло. Почему же так вышло?

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

В общем случае тег записывается следующим образом:

Атрибутов может быть несколько, вот примеры:

В этом задании вы потренируетесь использовать атрибуты тегов.

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

• index.html Сплит-режим
• style.css Сплит-режим

Инструктор Кекс

В последующих курсах вам будет часто помогать с освоением тонкостей HTML и CSS инструктор Кексик. Дадим же ему возможность представиться:

---

Привет! Меня зовут Кекс и я ваш будущий инструктор. Я веб-разработчик и живу в Санкт-Петербурге. Мои самые известные проекты:
блог Cat Energy,
курс про ссылки и изображения в HTML Academy,
курс про HTML5 там же.

До встречи в последующих курсах!

body < font-family: "Georgia", serif; >blockquote < margin: 1.5em 0; padding: 0.5em 15px; line-height: 1.5; background-color: #f9f9f9; border-left: 2px solid #cccccc; >/* Пример оформления фотографии */ .photocard < display: block; width: 300px; margin: 20px auto; border-radius: 10px; box-shadow: 0 0 5px #666666; >
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ

Спасибо! Мы скоро всё исправим)

Атрибуты тегов

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

Для атрибутов тегов используются значения по умолчанию

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

Атрибуты без значений

Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения, как показано в примере 3.4.

Пример 3.4. Атрибуты без значений

В данном примере используется атрибут disabled , у которого явно не задано значение. Подобная запись называется «сокращенный атрибут тега».

Порядок атрибутов в тегах

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

Формат атрибутов

Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании атрибута. Так, в примере 3.3 упоминается тег , он добавляет на веб-страницу рисунок, а его атрибут width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то значение будет проигнорировано и возникнет ошибка при валидации документа.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

Популярные задачи

• TEX
• Отступы между блоков
• Андроид в тени
• Ссылка как кнопка
• Вложенные списки
• Форма регистрации
• Объединение ячеек таблицы
• Обязательные поля формы
• Цвет и фон в таблице
• Асуанская плотина
• Батарейка
• Заголовки

Элементы, теги и атрибуты — Основы HTML, CSS и веб-дизайна

Мало кто любит терминологию и формальности, но, к счастью, в мире HTML всё довольно просто.

1. Страница состоит из элементов.
2. Элемент — это набор из тегов и содержания.
3. Теги чаще всего идут парами: открывающий ( ) и закрывающий ( ). Между ними находится то, что попадает под действие этого тега.
4. Открывающий тег может содержать дополнительную информацию — атрибуты и значения атрибутов. Атрибуты позволяют «настроить» тег.

В примере из предыдущего урока есть элемент a (anchor — якорь), состоящий из открывающего и закрывающего тегов .

 href="https://ru.hexlet.io">Хекслет 

Это ссылка, и у неё есть атрибут href со значением https://ru.hexlet.io . Между открывающим и закрывающим тегами находится содержание — слово «Хекслет». Именно оно становится ссылкой.

А ниже есть картинка. Это пример одиночного тега, элемента, в котором не нужен закрывающий тег. Их ещё называют self-closing element — «самозакрывающиеся элементы».

 src="https://i.imgur.com/789p0uP.png"> 

Как видите, мы указали атрибут src (от английского «source» — источник) со значением https://i.imgur.com/789p0uP.png . Это адрес файла изображения.

А некоторые элементы состоят из нескольких вложенных элементов. Например, списки:

  Код. Тайный язык информатики (Чарльз Петцольд) Не заставляйте меня думать (Steve Krug) Дизайн привычных вещей (Donald Norman)  

. А каждая строчка списка — это элемент списка (list item) —
.

На странице это будет выглядеть примерно так:

1. Код. Тайный язык информатики (Чарльз Петцольд)
2. Не заставляйте меня думать (Steve Krug)
3. Дизайн привычных вещей (Donald Norman)

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

  Код. Тайный язык информатики (Чарльз Петцольд) Не заставляйте меня думать (Steve Krug) Дизайн привычных вещей (Donald Norman)  

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

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

• Статья «Как учиться и справляться с негативными мыслями»
• Статья «Ловушки обучения»
• Статья «Сложные простые задачи по программированию»
• Урок «Как эффективно учиться на Хекслете»
• Вебинар « Как самостоятельно учиться »

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях: