Атрибут classid в HTML


Содержание

Подключаем id и class(класс) в css, их различия

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

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

Подключить индивидуальные стили можно с помощью атрибутов «class»(класс) и «id», прописав их свойства в файле .css.

1 способ. Подключение стилей с помощью атрибута «class»

« ) и стили, заданные в файле применяются для данного элемента.

Это наиболее распространенный способ, потому что в большинстве случаев его удобнее использовать, чем описанный ниже с помощью «id». Обычно атрибут «class» используется для оформления стилей таких элементов, которые могут повторяться на одной странице: заголовки, ссылки, текст, таблицы, картинки и т. п. Но даже если тег используется всего 1 раз, к нему тоже можно применить стили с помощью атрибута «class».

— Вы можете подключить один или несколько стилей с помощью атрибута класс(class) у неограниченного количества элементов.

— Для изменения нескольких тегов с одним классом на разных страницах достаточно изменить всего 1 строчку.

— Если на странице несколько тегов с одним и тем же классом, то при их изменении с помощью скрипта javascript легко запутаться, т. к. при обращении к тегу по имени класса нужно точно указать номер очередности каждого.

Как установить стиль с помощью атрибута class

В файле .css пишется название стиля и в фигурных скобках <> пишутся свойства. Перед названием стиля нужно поставить точку, чтобы браузер понял, что он относится к class, а не к тегу.

HTML5

Добро пожаловать на сайт html-5.ru, посвящённому языку разметки HTML5. Здесь вы можете более подробно ознакомиться с новыми тегами и технологиями появившимися в HTML5.

Устаревшие атрибуты HTML5

Какие атрибуты в HTML5, являются устаревшими?

Движение концепции HTML5 заключается в том, чтобы код HTML-документа состоял лишь из «пустых» тегов, чтобы было как можно меньше атрибутов, а атрибуты форматирования вообще полностью отсутствовали.

В спецификации HTML5, у различных тегов устарели следующие атрибуты:

У тега устарели атрибуты alink=» » , bgcolor=» » , link=» » , marginbottom=» » , marginheight=» » , marginleft=» » , marginright=» » , margintop=» » , marginw , text=» » и vlink=» » .

У тега
устарел атрибут clear=» » .

У тега устарел атрибут name=» » .

У тега устарел атрибут profile=» » .

У тега устарел атрибут version=» » .

У тега устарел атрибут longdesc=» » .

У тега устарели атрибуты border=» » , longdesc=» » , lowsrc=»http://html-5.ru/ustarevshie-atributy-html5″ и name=» » .

У тега устарел атрибут usemap=» » .

У тега
устарели атрибуты charset=» » , methods=» » , rev=» » , target=» » , type=» » и urn=» » .

У тега устарел атрибут scheme=» » .

У тега устарел атрибут name=» » .

У тега устарели атрибуты archive=» » , , code=» » , codebase=» » , codetype=» » , declare=» » и standby=» » .

устарели атрибуты type=» » и valuetype=» » .

Атрибуты HTML class и id.

Довольно часто, просматривая исходный код многих HTML-страниц, можно видеть добавление к HTML-элементам двух атрибутов:

Посмотрите, скажем, на это изображение:

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

Как вы можете видеть из примера выше, атрибуты >

Возникает вопрос, что же можно указывать в качестве этого значения?

Значением этих атрибутов может быть:

+ Любая комбинация букв и цифр латинского алфавита [a-zA-Z0-9] знака «-» и «_».

НО, получившаяся комбинация не должна начинаться:

+ Двух знаков тире «—«

Таким образом значение атрибутов class и id придумываете вы сами.

Например, давайте для элемента абзаца на странице добавим атрибут class и придумаем для него какое-нибудь значение.

Добавление атрибута class или id, само по себе, никаких изменений во внешний вид элемента не вносит. Давайте в этом сейчас убедимся.

Так для чего же нужны эти атрибуты?

С их помощью вы даете элементам на странице что-то вроде уникального номера-названия.

Это чем-то похоже, когда в деревне каждую корову нумеруют специальной меткой, по которой ее потом можно будет отличить от других коров.

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

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

Таким образом, добавляя элементам на веб-странице атрибуты id или class мы просто даем им имена.

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

Общий HTML атрибут >

Атрибут class определяет один или несколько имен классов для HTML элемента.

В основном атрибут class используется для указания на класс в каскадной таблице стилей. Тем не менее, он также может использоваться скриптами JavaScript для манипулирования (посредством HTML DOM) элементами HTML с заданным классом.

В HTML5 атрибут class можно использовать с любым HTML элементом (все элементы с этим атрибутом будут проходить валидацию. Тем не менее, это не всегда имеет смысл!).

В HTML 4.01 атрибут class нельзя использовать с элементами , , , ,

13 Объекты, изображения и апплеты

13.1 Введение в объекты, изображения и апплеты

Функции мультимедиа языка HTML позволяют авторам включать в свои страницы изображения, апплеты (программы, которые автоматически загружаются и выполняются на машине пользователя), видеоклипы и другие документы в формате HTML.

Например, чтобы включить в документ изображение в формате PNG, авторы могут использовать следующий код:

В предыдущих версиях HTML авторы могли включать изображения (с помощью IMG ) и апплеты (с помощью APPLET ). Эти элементы имеют несколько ограничений:

  • Они не могут решить более общей проблемы — включение новых и возможных в будущем типов устройств.
  • Элемент APPLET работает только с апплетами языка Java. Этот элемент теперь нежелателен, вместо него используется элемент OBJECT .
  • Они вызывают проблемы доступности.

Для решения всех этих вопросов в HTML 4.0 вводится элемент OBJECT , обеспечивающий всестороннее решение для включения объектов. Элемент OBJECT позволяет авторам документов в формате HTML указывать всю информацию, необходимую для представления объекта агентом пользователя: исходный код, начальные значения и рабочие данные. В данной спецификации термин «объект» используется для описания всех объектов, которые Вы захотите включить в HTML-документы; другие термины: апплеты, подключаемые модули (plug-ins), дескрипторы устройств и т.д.

Новый элемент OBJECT , таким образом, subsumes некоторые задачи, выполняемые существующими элементами. Рассмотрим следующую классификацию функций:

Тип включения Конкретный элемент Общий элемент
Изображение IMG OBJECT
Апплет APPLET (Нежелателен.) OBJECT
Другой документ HTML IFRAME OBJECT

Из таблицы видно, что каждый тип включения имеет конкретное и общее решение. Общий элемент OBJECT служит решением для использования возможных в будущем типов устройств.

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

Для включения апплетов авторам следует использовать элемент OBJECT , поскольку использование элемента APPLET нежелательно.

Для включения одного документа HTML в другой авторы могут использовать новый элемент IFRAME или элемент OBJECT . В обоих случаях внедренный документ не зависит от основного документа. Визуальные агенты пользователей могут представлять внедренный документ в виде отдельного окна в основном документе. Для сравнения элементов OBJECT и IFRAME обратитесь к замечаниям о внедряемых документов.

С изображениями и другими включаемыми объектами могут быть связаны ссылки, с помощью стандартных механизмов ссылок, а также и с помощью навигационных карт (image maps). На навигационной карте задаются геометрические области включаемого объекта, и каждой из них назначается ссылка. При активизации эти ссылки могут вызывать загрузку документа, запускать программу на сервере и т.д.

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

13.2 Включение изображения: элемент IMG

Начальный тег: обязателен, Конечный тег: запрещен

Определения атрибутов src = uri [CT] Этот атрибут задает местоположение изображения. Примерами широко распознаваемых форматов являются GIF, JPEG и PNG. longdesc = uri [CT] Этот атрибут определяет ссылку на длинное описание изображения. Это описание должно дополнять краткое описание, задаваемое атрибутом alt . Если с изображением связана навигационная карта, в этом атрибуте должна приводиться информация о ее содержимом. Это особенно важно для серверных навигационных карт.

Элемент IMG внедряет изображение в текущий документ по адресу из определения элемента. Элемент IMG не имеет содержимого; обычно он замещается изображением, назначаемым атрибутом src , исключение при этом составляют выровненные влево или вправо изображения, которые «floated» out of line.

В приведенном ранее примере мы определили ссылку на семейную фотографию. Здесь мы вставим фотографию непосредственно в текущий документ:

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

В следующем примере показано, как можно использовать атрибут longdesc для ссылки на более подробное описание:

Начальный тег: обязателен, Конечный тег: обязателен

Определения атрибутов classid = uri [CT] Этот атрибут может использоваться для указания местоположения объекта с помощью URI. Он может использоваться вместе с атрибутом data или как альтернатива ему, в зависимости от типа объекта. codebase = uri [CT] Этот атрибут определяет базовый путь, используемый для разрешения относительных адресов URI, задаваемых в атрибутах classid , data и archive . Если этот атрибут отсутствует, значением по умолчанию является базовый адрес URI текущего документа. codetype = content-type [CI] Этот атрибут определяет тип содержимого данных, получения которых следует ожидать при загрузке объекта, задаваемого атрибутом classid . Этот атрибут не является обязательным, но рекомендуется, если используется атрибут classid , поскольку он позволяет агенту пользователя избежать загрузки информации для типа содержимого, который он не поддерживает. Если этот атрибут отсутствует, по умолчанию используется значение атрибута type . data = uri [CT] Этот атрибут может использоваться для указания местоположения данных объекта, например, данных изображения для объектов, определяющих изображения, или в более общем случае — serialized формы объекта, который может использоваться для повторного его создания. Если дается относительный адрес URI, он должен интерпретироваться относительно атрибута codebase . type = content-type [CI] Этот атрибут определяет тип содержимого для данных, задаваемых атрибутом data . Этот атрибут не является обязательным, но рекомендуется, если используется атрибут data , поскольку он позволяет агенту пользователя избежать загрузки информации для типа содержимого, который они не поддерживают. archive = uri list [CT] Этот атрибут может использоваться для определения разделенного пробелами списка адресов URI архивов, содержащих относящиеся к объекту ресурсы, который может включать ресурсы, задаваемые атрибутами classid и data . Предварительная загрузка архивов приведет к уменьшению времени загрузки объекта. Архивы, указанные в виде относительных адресов URI, должны интерпретироваться относительно атрибута codebase . declare [CI] Если этот логический атрибут указан, он делает текущее определение OBJECT только объявлением. Объект должен быть instantiated последующим определением OBJECT , ссылающимся на это объявление. standby = text [CS] Этот атрибут определяет сообщение, которое агент пользователя может генерировать при загрузке implementation и данных объекта.

В большинстве агентов пользователей имеются встроенные механизмы для генерации основных типов данных, таких как текст, изображения в формате GIF, цвета, шрифты и ряд графических элементов. Для генерации типов данных типов данных, которые агенты пользователей не поддерживают по умолчанию, они обычно запускают внешние приложения. Элемент OBJECT позволяет авторам ууправлять генерацией данных — задавать внешнюю генерацию или использование некоторой определяемой автором программы, генерирующей данные в агенте пользователя.

В более общем случае автор должен будет определить три типа информации:

  • Реализация включенного объекта. Например, если включенный объект — апплет, автор должен указать местоположение исполняемого кода апплета.
  • Генерируемые данные. Например, если включенный объект является программой, генерирующей данные шрифта, автор должен указать местоположение этих данных.
  • Дополнительные значения, необходимые объекту. Например, некоторым апплетам могут быть нужны исходные значения для их параметров.

Элемент OBJECT позволяет авторам указать все три типа данных объекта, но авторы не обязательно должны указывать их все. Например, некоторым объектам не требуются данные (например, апплет, выполняющий анимацию). Другим может быть не нужна инициализация. Другим же может не понадобиться дополнительная информация о реализации, то есть сам агент пользователя может уже знать, как генерировать этот тип данных (например, изображения в формате GIF).

Авторы задают реализацию объекта и местоположение данных, генерируемых с помощью элемента OBJECT . Однако для указания рабочих значений авторы используют элемент PARAM , обсуждаемый в разделе об инициализации объекта.

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

Информацию об элементе OBJECT в формах см. в разделе об управлении формами.

Агент пользователя должен интерпретировать элемент OBJECT в соответствии со следующими правилами старшинства:

  1. Сначала агент пользователя должен попытаться сгенерировать объект. Он не должен генерировать содержимое элемента, но должен проверить его на случай, если элемент содержит дополнительные дочерние элементы PARAM (см. инициализация объекта) или элементы MAP (см. клиентские навигационные карты).
  2. Если агент пользователя по какой-либо причине не может сгенерировать объект (не сконфигурирован для этого, недостаточно ресурсов, ошибочная архитектура и т.д.), он должен попытаться сгенерировать его содержимое.

Авторам не следует включать содержимое в элементы OBJECT , расположенные в элементе HEAD .

В следующем примере мы вставляем в документ апплет, представляющий часы, с помощью элемента OBJECT . Апплету, написанный на языке Python, не нужны дополнительные и рабочие значения. Атрибут classid определяет местоположение апплета:

Обратите внимание на то, что часы будут генерироваться, как только агент пользователя интерпретирует это объявление OBJECT . Можно отложить генерацию объекта, начав с объявления объекта (описывается ниже).

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

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

В следующем примере мы внедряем несколько объявлений OBJECT для того, чтобы показать работу альтернативной генерации. Агент пользователя попытается сгенерировать первый элемент OBJECT , который он может, в следующем порядке: (1) апплет Earth, написанный на языке Python, (2) клип Земли в формате MPEG, (3) изображение Земли в формате GIF, (4) альтернативный текст.

Внешнее объявление определяет апплет, которому не нужны данные или начальные значения. Второе объявление определяет клип в формате MPEG и, поскольку местоположение обработчика формата MPEG не указано, предполагается, что клип будет обрабатываться агентом пользователя. Мы также установили атрибут type , так что агент пользователя, который знает, что он не может сгенерировать клип в формате MPEG, не будет загружать файл «TheEarth.mpeg» из сети. В третьем объявлении задается местоположение файла в формате GIF и определяется альтернативный текст на случай, если все прочие механизмы не сработают.

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

Ниже приводится пример, показывающий, как встроенные данные могут be fed to an OBJECT :

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

13.3.2 Инициализация объекта: элемент PARAM

Начальный тег: обязателен, Конечный тег: запрещен

Определения атрибутовname = cdata Этот атрибут определяет имя рабочего параметра, которое должно быть понятно вставляемому объекту. Учитывает ли имя свойства регистр, зависит от конкретной реализации объекта. value = cdata Этот атрибут определяет значение рабочего параметра, задаваемого атрибутом name . Значения свойств не имеют значения в HTML; их значение определяется объектом. valuetype = data|ref|object [CI] Этот атрибут определяет тип атрибута value . Возможные значения:

  • data: Это значение используется по умолчанию. Оно означает, что значение, задаваемое атрибутом value , будет определяться и передаваться в объект в виде строки.
  • ref: Значение, задаваемое атрибутом value , является адресом URI ресурса, где хранятся рабочие значения. Это позволяет средствам поддержки идентифицировать адреса URI, данные в качестве параметров. Адрес URI должен передаваться в объект как есть, то есть неразрешенным.
  • object: Значение, задаваемое атрибутом value , является идентификатором, ссылающимся на объявление OBJECT в этом же документе. Идентификатором должно быть значение атрибута id для объявленного элемента OBJECT .

type = content-type[CI] Этот атрибут задает тип содержимого ресурса, назначаемого атрибутом value только в случае, если значением атрибута valuetype является «ref». Таким образом, этот атрибут определяет для агента пользователя тип значений, которые будут находиться по адресу URI, назначенному атрибутом value .

Элементы PARAM определяют набор значений, которые могут понадобиться объекту во время работы. В элементах OBJECT или APPLET может присутствовать любое число атрибутов PARAM в любом порядке, но они должны помещаться в начале тела включающего элемента OBJECT или APPLET .

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

Вернемся к примеру с часами и покажем использование элемента PARAM : предположим, что апплет может принимать два рабочих параметра, определяющих его начальную высоту и ширину. Мы можем установить исходные размеры 40×40 пикселов с помощью двух элементов PARAM .

В следующем примере рабочие данные для параметра «Init_values» объекта задаются в виде внешнего ресурса (файл GIF). Таким образом для атрибута valuetype устанавливается значение «ref», а атрибутом value является адрес URI ресурса.

Обратите внимание, что мы также установили атрибут standby , так что агент пользователя может отобразить сообщение во время загрузки генерирующего механизма.

Когда элемент OBJECT сгенерирован, агенты пользователя должны выполнить поиск содержимого только для тех элементов PARAM , которые являются их прямыми дочерними элементами и «feed» их to the OBJECT .

Таким образом, в следующем примере, если сгенерирован «obj1», «param1» применяется к «obj1» (и не применяется к «obj2»). Если «obj1» не сгенерирован, а «obj2» сгенерирован, «param1» игнорируется, а «param2» применяется к «obj2». Если ни один OBJECT не сгенерирован, ни один PARAM не применяется.

13.3.3 Глобальные схемы именования объектов

Местоположение обработчика объекта задается адресом URI. Как было сказано во введении в URI, первый сегмент абсолютного адреса URI задает схему именования, используемую для передачи данных, назначаемых адресом URI. Для документов в формате HTML этой схемой часто является «http». Некоторые апплеты могут использовать внешние схемы именования. Например, при указании апплета Java авторы могут использовать адреса URI, начинающиеся с «java», я для аппелтов ActiveX авторы могут использовать «cls >

В следующем примере мы вставляем апплет на языке Java в документ в формате HTML.

Установив атрибут codetype , агент пользователя может определить, нужно ли загружать ли приложение Java, в зависимости от своих возможностей.

Некоторым схемам генерации для определения обработки необходима дополнительная информация, поэтому им необходимо указать, где находится эта информация. Авторы могут указать путь к обработчику объекта с помощью атрибута codebase .

Чтобы объявить объект так, чтобы он не обрабатывался агентом пользователя при чтении, установите логический атрибут declare элемента OBJECT . В то же время авторы должны идентифицировать объявление, установив уникальное значение для атрибута id в элементе OBJECT . Инициализация объекта позже будет ссылаться на этот идентификатор.

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

Объект, определенный с атрибутом declare , инициализируется каждый раз, когда необходима генерация элемента, ссылающегося на этот объект (например, активизируется ссылка на него, активизируется объект, ссылающийся на него и т.д.).

В следующем примере мы объявляем OBJECT и вызываем его инициализацию, указав его в ссылке. Таким образом объект можно активизировать, щелкнув, например, на выделенном тексте.

Агенты пользователей, не поддерживающие атрибут declare , должны генерировать содержимое объявления OBJECT .

13.4 Включение апплета: элемент APPLET

Формальное определение см. в Transitional DTD.

Если апплет «deserialized», метод start() вызывается вместо метода init() . Атрибуты, допустимые при serialized исходного объекта, не восстанавливаются. Атрибуты, переданные в этот экземпляр APPLET , будут доступны апплету. Авторам следует очень осторожно использовать это свойство. Перед serialized вапплет должен быть остановлен.

Должен присутствовать один из атрибутов code или object . Если даны оба атрибута code и object , и в них указаны разные имена классов, это является ошибкой.

width = длина [CI] Этот атрибут определяет начальную ширину области отображения апплета (не включая окна и диалоги, создаваемые апплетом). height = длина [CI] Этот атрибут определяет начальную высоту области отображения апплета (не включая окна и диалоги, создаваемые апплетом).

Этот элемент, поддерживаемый всеми программами просмотра с поддержкой Java, позволяет дизайнерам внедрять апплеты Java в документы HTML. Он является нежелательным, и вместо него следует использовать элемент OBJECT .

Содержимое элемента APPLET служит альтернативной информацией для агентов пользователей, не поддерживающих этот элемент или не сконфигурированных для поддержки апплетов. В противном случае агенты пользователей должны игнорировать содержимое.

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
В следующем примере элемент APPLET включает в документ апплет на языке Java. Поскольку атрибут codebase не установлен, предполагается, что апплет находится в том же каталоге, что и сам документ.

Этот пример можно переписать с использованием элемента OBJECT следующим образом:

Задать для апплета исходные значения можно с помощью элемента PARAM .

ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
Следующий апплет на языке Java:

можно определить с использованием элемента OBJECT следующим образом:

13.5 Замечания о внедренных документах

Внедренный документ полностью независим от документа, в который он внедрен. Например, относительные адреса URI во внедренном документе разрешаются в соответствии с базовым адресом URI, указанным во внедренном документе, а не в основном документе. Внедренный документ только генерируется в другом документе (например, во вложенном окне); it во всех остальных отношениях он остается независимым.

Например, следующая строка внедряет содержимое файла embed_me.html в то место документа, в котором встречено определение OBJECT .

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

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

13.6 Навигационные карты

Навигационная карта создается путем назначения объекта с указанием соответствующих геометрических областей.

Имеется два типа навигационных карт:

  • Когда пользователь активизирует область клиентской навигационной карты с помощью мыши, координаты точки интерпретируются агентом пользователя. Агент пользователя выбирает ссылку, указанную для активизированной области, и выполняет ее.
  • Когда пользователь активизирует область серверной навигационной карты с помощью мыши, координаты точки щелчка передаются агенту на сервере, определенному с помощью атрибута href элемента A . Агент на сервере интерпретирует координаты и выполняет соответствующие действия.

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

13.6.1 Клиентские навигационные карты: элементы MAP и AREA

Начальный тег: обязателен, Конечный тег: обязателен

Начальный тег: обязателен, Конечный тег: запрещен

Определения атрибутов элемента MAP name = cdata [CI] Этот атрибут назначает имя навигационной карты, определяемой элементом MAP .

Определения атрибутов элемента AREAshape = default|rect|circle|poly [CI] Этот атрибут определяет форму области. Возможные значения:

  • default: Задает всю область.
  • rect: Определяет прямоугольную область.
  • circle: Определяет круглую область.
  • poly: Определяет многоугольную область.

coords = координаты[CN] Этот атрибут определяет положение формы на экране. Число и порядок значений зависят от определенной формы. Возможные комбинации:

  • rect: x левой границы, y верхней границы, x правой границы, y нижней границы.
  • circle: x центра, y центра, радиус. Примечание. Если радиус указан в процентах, агенты пользователя должны вычислять окончательное значение радиуса в зависимости от назначенных объекту ширины и высоты. Радиус должен быть наименьшим из этих двух значений.
  • poly: x1, y1, x2, y2, . xN, yN.

Координаты задаются относительно верхнего левого угла объекта. Все значения являются длинами. Все значения отделяются друг от друга запятыми. nohref [CI] Если этот логический атрибут установлен, он указывает, что с этой областью ссылка не связана.

Атрибут для установления связи навигационной карты с элементом usemap = uri [CT] Этот атрибут связывает навигационную карту с элементом. Навигационная карта определяется с помощью элемента MAP . Значение атрибута usemap должно совпадать со значением атрибута name связанного элемента MAP .

Элемент MAP определяет клиентскую навигационную карту, которая может быть связана с одним или несколькими элементами ( IMG , OBJECT или INPUT ). Навигационная карта связывается с элементом с помощью атрибута usemap этого элемента.

Наличие атрибута usemap в элементе OBJECT подразумевает, что объект включается в виде изображения. Более того , если с элементом OBJECT связана клиентская навигационная карта, агенты пользователей могут интерпретировать взаимодействие пользователя с элементом OBJECT исключительно в терминах клиентской навигационной карты. Это позволяет агентам пользователей (например, звуковым браузерам или роботам) взаимодействовать с элементом OBJECT , не обрабатывая его; агент пользователя может даже не загружать (или не обрабатывать) объект. Если с элементом OBJECT связана навигационная карта, авторы не могут быть уверены, что этот объект будет загружаться и обрабатываться всеми агентами пользователей.

Каждый элемент MAP может содержать следующее:

  1. Один или несколько элементов AREA . Эти элементы не имеют содержимого, но определяют геометрические области навигационной карты и ссылки, связанные с каждой областью. Обратите внимание, что при использовании этого метода элемент MAP не имеет генерируемого содержимого. Таким образом, авторы должны изменять текст для каждого элемента AREA с помощью атрибута alt (см. далее информацию о том, как указать альтернативный текст).
  2. Содержимое уровня блока. Сюда должны включаться элементы A , определяющие геометрические области навигационной карты, и ссылки, связанные с каждой областью. Обратите внимание, что при использовании этого метода содержимое элемента MAP может генерироваться агентом пользователя. Для создания более доступных документов авторам следует использовать этот способ.

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

Агенты пользователей и авторы должны обеспечивать текстовые альтернативы графических навигационных карт на случай, если графика недоступна или пользователь не может получить к ней доступ. Например, агенты пользователей могут использовать текст атрибута alt для создания текстовых ссылок вместо графической навигационной карты. Такие ссылки могут активизироваться различными способами (клавиатура, голос и т.д.).

Примечание. Элемент MAP не совместим с агентами пользователей для языка HTML версии 2.0.

Примеры клиентских навигационных карт

В следующем примере мы создаем клиентскую навигационную карту для элемента OBJECT . Сы не хотим генерировать содержимое карты при генерации элемента OBJECT , поэтому мы «скроем» элемент MAP в содержимом элемента OBJECT . Затем содержимое элемента MAP будет генерироваться, только если нельзя сегенировать содержимое элемента OBJECT .

Если агент пользователя не поддерживает формат PNG, он пытается сгенерировать изображение в формате GIF. Если он не поддерживает GIF (например, это речевой агент пользователя), он воспроизводит текстовое описание, указанное в содержимсом внутреннего элемента OBJECT . Если элементы OBJECT вложены таким образом, авторы могут обеспечивать совместное использование этими элементами навигационных карт:

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

Точно так же атрибут nohref элемента AREA объявляет, что с геометрической областью не связана ссылка.

13.6.2 Серверные навигационные карты

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

Определить серверную навигационную карту можно только для элементов IMG и INPUT . В случае элемента IMG этот элемент должен быть включен в элемент A . В случае элемента INPUT он должен иметь тип «image». В обоих случаях для элемента должен быть установлен логический атрибут ismap [CI].

Когда пользователь активизирует ссылку, щелкнув на изображении, экранные координаты отправляются непосредственно на сервер, на котором располагается документ. Экранные координаты выражаются в виде пикселов относительно изображения. Нормативную информацию об определении пикселов и об их масштабировании см. в [CSS1].

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

Координаты области, в которой произошел щелчок, передаются на сервер следующим образом. Агент пользователя получает новый адрес URI из адреса URI, указанного в атрибуте href элемента A , добавляя `?’, за которым следуют координаты x и y, разделенные запятой. Затем происходит переход по ссылке с использованием нового адреса URI. Например, в данном примере, если пользователь щелкает в точке с координатами x=10, y=27, то новый адрес URI — «http://www.acme.com/cgi-bin/competition?10,27».

Агенты пользователей, не предлагающие пользователям средств выбора определенных координат (например, неграфические агенты пользователей, зависящие от ввода с клавиатуры, речевые агенты пользователей и т.д.) должны при активизации ссылки передавать на сервер координаты «0,0».

13.7 Визуальное представление изображений, объектов и апплетов

Определения атрибутов width = длина [CN] Переопределение ширины изображения и объекта. height = длина [CN] Переопределение для изображения и объекта.

Если указаны атрибуты width и height , они сообщают агентам пользователя о необходимости переопределения исходного размера изображения или объекта этими значениями.

Если объектом является изображение, оно масштабируется. Агенты пользователей должны наилучшим образом масштабировать объект или изображение, чтобы они соответствовали ширине и высоте, определенным автором. Обратите внимание, что длины, выраженные в процентах, зависят от доступного горизонтального или вертикального пространства, а не от исходного размера изображения, объекта или апплета.

Атрибуты height и width дают агентам пользователей представление о размере изображения или объекта, чтобы они могли зарезервировать соответствующее пространство и продолжать генерацию документа, ожидая данных об изображении.

Атрибуты vspace и hspace определяют свободное пространство слева и справа (hspace) и над и под (vspace) IMG , APPLET , OBJECT . По умолчанию значение этого атрибута не определено, но обычно это небольшое ненулевое значение. Оба атрибута имеют значение типа длина.

Изображение или объект может окружать граница (например, если она указана пользователем или изображение имеет содержимое элемента A ).

Определения атрибутов border = пикселы Нежелателен. Атрибут border определяет ширину границы в пикселах. Значение этого атрибута, используемое по умолчанию, зависит от агента пользователя.

13.7.4 Выравнивание

Атрибут align определяет положение IMG , OBJECT или APPLET относительно его содержимого.

Следующие значения атрибута align относятся к положению объекта относительно окружающего текста:

  • bottom: означает, что окно объекта должно быть вертикально выровнено относительно текущей базовой линии. Это значение используется по умолчанию.
  • middle: означает, что центр объекта должен быть выровнен вертикально относительно текущей базовой линии.
  • top: означает, что верх объекта должен быть вертикально выровнен относительно верха текущей текстовой строки.

Два других значения, left и right , приводят к перемещению изображения к текущему левому или правому полю. Они обсуждаются в разделе о плавающих объектах.

Различие интерпретаций атрибута align. Агенты пользователей по-разному интерпретируют атрибут align . Некоторые принимают в расчет только текстовую строку, находящуюся перед элементом, некоторые учитывают текст по обеим сторонам элемента.

13.8 Как указать альтернативный текст

Определения атрибутов alt = текст [CS] Для агентов пользователей, не имеющих возможности вывести изображения, формы или апплеты, этот атрибут определяет альтернативный текст. Язык альтернативного текста определяется атрибутом lang .

Для некоторых нетекстовых элементов ( IMG , AREA , APPLET и INPUT ) авторы должны указывать альтернативный текст, служащий содержимым, если элемент нельзя нормально сгенерировать. Задание альтернативного текста помогает пользователям, не имеющих графических дисплеев, пользователям, браузеры которых не поддерживают формы, visually impaired users, пользователям синтезаторов речи, пользователям, графический агент которых сконфигурирован так, чтобы не выводить изображения и т.д.

Атрибут alt должен быть указан для элементов IMG и AREA . Он не является обязательным для элементов INPUT и APPLET .

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

  • Не указывайте несоответствующий альтернативный текст, включая изображения, предназначенные для форматирования страницы, например, alt=»red ball» не соответствует изображению, определяющему красный круг для отметки заголовка абзаца. В этих случаях в качестве альтернативного текста следует указать пустую строку («»). Авторам в любом случае рекомендуется не использовать изображения для форматирования страниц; вместо этого следует использовать таблицы стилей.
  • Не указывайте бессмысленный альтернативный текст (например, «dummy text»). Он не только будет frustrate пользователей, но также будет замедлять агенты пользователей, преобразующие текст в речь или текст Бройля.

Информацию об обработке случаев, когда альтернативный текст отсутствует, разработчики могут найти в разделе о генерации альтернативного текста.

Примечание. Подробнее о создании доступных документов HTML см. [WAIGUIDE].

Атрибуты элемента OBJECT

Атрибуты элемента OBJECT

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

Элемент OBJECT использует программы, находящиеся на компьютере посетителя, и с их помощью воспроизводит активное содержимое. Он может использовать программу проигрывания по умолчанию для конкретного типа файлов, если этот тип файлов знаком браузеру, или использовать конкретную указанную вами программу, если она есть на компьютере пользователя.

У этого элемента много атрибутов. Очевидно, что не все они являются обязательными, точнее, у этого элемента нет строго обязательных атрибутов. Однако среди них можно выделить наиболее важные, которые упростят и ускорят обработку вашего объекта браузером.

Атрибут classid указывает адрес программы, которая будет работать с объектом. В качестве значения этого атрибута можно указывать полный или относительный путь к файлу программы. Это не всегда удобно, потому что на разных компьютерах программы располагаются в разных местах, а на серверах обычно не бывает программ, необходимых для воспроизведения мультимедиа-файлов. Удобнее второй метод: использование идентификатора зарегистрированного ActiveX-приложения. В этом случае перед самим идентификатором должно стоять ключевое слово clsid, как в листинге 4.11. Чаще всего применяют именно второй вариант, потому что он универсален. Идентификаторы для различных приложений и активных объектов легко найти в Интернете.

Атрибут codetype должен принимать значение, содержащее MIME-тип объекта, который указан в атрибуте classid. Браузер использует эту информацию для подготовки ресурсов, необходимых для запуска файла.

Совет

MIME-тип (Multipurpose Internet Mail Extensions) – стандарт, используемый в Интернете, для указания типа объекта. Тип, соответствующий вашему объекту, можно посмотреть в реестре. Для этого в папке HKEY_CLASSES_ROOT нужно открыть папку с разрешением, соответствующим вашему объекту, и в строке Content Type будет указан MIME-тип объекта.

В листинге 4.11 показано применение атрибутов classid и codetype.

Листинг 4.11. Использование атрибутов classid и codetype

Атрибуты и свойства

Когда браузер загружает страницу, он «читает» (также говорят: «парсит») HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.

Например, для такого тега у DOM-объекта будет такое свойство body. .

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

DOM-свойства

Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.

DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.

Например, создадим новое свойство для document.body :

Мы можем добавить и метод:

Также можно изменять встроенные прототипы, такие как Element.prototype и добавлять новые методы ко всем элементам:

Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:

  • Им можно присвоить любое значение.
  • Они регистрозависимы (нужно писать elem.nodeType , не elem.NoDeTyPe ).

HTML-атрибуты

В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.

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

Пожалуйста, учтите, что стандартный атрибут для одного тега может быть нестандартным для другого. Например, атрибут «type» является стандартным для элемента (HTMLInputElement), но не является стандартным для (HTMLBodyElement). Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.

Мы можем увидеть это на примере ниже:

Таким образом, для нестандартных атрибутов не будет соответствующих DOM-свойств. Есть ли способ получить такие атрибуты?

Конечно. Все атрибуты доступны с помощью следующих методов:

  • elem.hasAttribute(name) – проверяет наличие атрибута.
  • elem.getAttribute(name) – получает значение атрибута.
  • elem.setAttribute(name, value) – устанавливает значение атрибута.
  • elem.removeAttribute(name) – удаляет атрибут.

Этим методы работают именно с тем, что написано в HTML.

Кроме этого, получить все атрибуты элемента можно с помощью свойства elem.attributes : коллекция объектов, которая принадлежит ко встроенному классу Attr со свойствами name и value .

Вот демонстрация чтения нестандартного свойства:

У HTML-атрибутов есть следующие особенности:

  • Их имена регистронезависимы ( id то же самое, что и ID ).
  • Их значения всегда являются строками.

Расширенная демонстрация работы с атрибутами:

Пожалуйста, обратите внимание:

  1. getAttribute(‘About’) – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.
  2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение «123» .
  3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML .
  4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value .

Синхронизация между атрибутами и свойствами

Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).

В примере ниже id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону:

Но есть и исключения, например, input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную:

  • Изменение атрибута value обновило свойство.
  • Но изменение свойства не повлияло на атрибут.

Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям value , и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.

DOM-свойства типизированы

DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип:

Есть и другие примеры. Атрибут style – строка, но свойство style является объектом:

Хотя большинство свойств, всё же, строки.

При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash .

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

Нестандартные атрибуты, dataset

При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Во-первых, давайте посмотрим, полезны они или нет? Для чего они нужны?

Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.

Также они могут быть использованы, чтобы стилизовать элементы.

Например, здесь для состояния заказа используется атрибут order-state :

Почему атрибут может быть предпочтительнее таких классов, как .order-state-new , .order-state-pending , order-state-canceled ?

Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто:

Но с пользовательскими атрибутами могут возникнуть проблемы. Что если мы используем нестандартный атрибут для наших целей, а позже он появится в стандарте и будет выполнять какую-то функцию? Язык HTML живой, он растёт, появляется больше атрибутов, чтобы удовлетворить потребности разработчиков. В этом случае могут возникнуть неожиданные эффекты.

Чтобы избежать конфликтов, существуют атрибуты вида data-*.

Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset .

Например, если у elem есть атрибут «data-about» , то обратиться к нему можно как elem.dataset.about .

Атрибуты, состоящие из нескольких слов, к примеру data-order-state , становятся свойствами, записанными с помощью верблюжьей нотации: dataset.orderState .

Вот переписанный пример «состояния заказа»:

Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.

Пожалуйста, примите во внимание, что мы можем не только читать, но и изменять data-атрибуты. Тогда CSS обновит представление соответствующим образом: в примере выше последняя строка (*) меняет цвет на синий.

Итого

  • Атрибуты – это то, что написано в HTML.
  • Свойства – это то, что находится в DOM-объектах.
Свойства Атрибуты
Тип Любое значение, стандартные свойства имеют типы, описанные в спецификации Строка
Имя Имя регистрозависимо Имя регистронезависимо

Методы для работы с атрибутами:

  • elem.hasAttribute(name) – проверить на наличие.
  • elem.getAttribute(name) – получить значение.
  • elem.setAttribute(name, value) – установить значение.
  • elem.removeAttribute(name) – удалить атрибут.
  • elem.attributes – это коллекция всех атрибутов.

В большинстве ситуаций предпочтительнее использовать DOM-свойства. Нужно использовать атрибуты только тогда, когда DOM-свойства не подходят, когда нужны именно атрибуты, например:

  • Нужен нестандартный атрибут. Но если он начинается с data- , тогда нужно использовать dataset .
  • Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство href – всегда полный URL, а нам может понадобиться получить «оригинальное» значение.

Задачи

Получите атрибут

Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.

5. HTML — Атрибуты

Вы уже знакомы с несколькими html-тегами и их использованием, например теги заголовков

, или тег абзаца

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

Атрибут — используется для определения характеристик html-элемента и помещается внутри открытого тега элемента. Все атрибуты состоят из двух частей — это имя и значение:

    Имя — это свойство, которое Вы хотите установить. Например, элемент абзаца

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

  • Значение — это значение, которое Вы хотите установить для свойства. Значение атрибута всегда помещается в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right.
  • Имена и значения атрибутов в HTML не зависят от регистра. Однако консорциум World Wide Web (W3C) рекомендует в своей рекомендации HTML 4 использовать атрибуты и значения атрибутов в нижнем регистре.

    Пример

    Получим следующий результат:

    Содержание

    Основные атрибуты HTML

    Существует четыре основных атрибута в HTML, которые могут использоваться для большинства html-элементов (хотя и не для всех):

    Атрибут id

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

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

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

    Атрибут title

    Атрибут title — дает название элемента для элемента. Синтаксис для атрибута title аналогичен атрибуту id.

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

    Пример

    Получим следующий результат:

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

    Атрибут class

    Атрибут class — используется для связывания элемента со списком стилей и задает класс элементу. Вы узнаете больше об использовании атрибута class, когда изучите CSS (каскадные таблицы стилей). Так что пока можете это пропустить.

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

    Атрибут style

    Атрибут style — позволяет указывать правила каскадной таблицы стилей (CSS) внутри элемента.

    Получим следующий результат:

    На данный момент мы не изучаем CSS, так что давайте продолжим, не беспокоясь о CSS. Здесь Вам нужно понять, какие существуют html-атрибуты, и как их можно использовать при форматировании содержимого.

    Атрибуты интернационализации

    Существует три атрибута интернационализации в HTML, которые доступны для большинства (хотя и не для всех) элементов XHTML.

    Атрибут dir

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

    Значение Описание
    ltr Слева направо (значение по умолчанию).
    rtl Справа налево (для языков, таких как иврит или арабский, которые читаются справа налево).

    Пример

    Получим следующий результат:

    Когда атрибут dir используется в теге , он определяет, как текст будет представлен во всем документе. При использовании в другом теге он управляет направлением текста только для содержимого этого тега.

    Атрибут lang

    Атрибут lang — позволяет указать основной язык, используемый в документе, но этот атрибут хранится в HTML только для обратной совместимости с более ранними версиями HTML. Этот атрибут был заменен атрибутом xml:lang в новых xhtml-документах.

    Значения атрибута lang — это стандартные двухсимвольные языковые коды ISO-639. Проверьте коды ISO-639 для языка HTML, перейдите по ссылке для получения полного списка кодов языков.

    Пример

    Атрибут xml:lang

    Атрибут xml:lang — это XHTML замена для атрибута lang. Значение атрибута xml:lang должно быть ISO-639 кодом страны, которые указаны выше.

    Общие атрибуты

    Ниже представлена таблица некоторых других атрибутов, которые можно легко использовать со многими html-тегами.

    Атрибут Опция Функция
    align right, left, center Горизонтальное выравнивание тегов.
    valign top, middle, bottom Вертикально выравнивает тегов внутри html-элемента.
    bgcolor числовые, шестнадцатеричные, RGB значения Помещает фоновый цвет за элемент.
    background URL Помещает фоновое изображение за элемент.
    id определяется пользователем Именование элемента для использования с каскадными таблицами стилей.
    class определяется пользователем Классифицирует элемент для использования с каскадными таблицами стилей.
    width числовое или процентное значение Задает ширину таблиц, изображений или ячеек таблицы.
    height числовое или процентное значение Задает высоту таблиц, изображений или ячеек таблицы.
    title определяется пользователем «Всплывающий» заголовок элементов.

    Мы ещё увидим соответствующие примеры атрибутов при изучении других html-тегов (полный список html-тегов и связанных атрибутов).

    Атрибут » >09.08.2013, 11:38. Просмотров 1091. Ответов 17

    На сайте есть гиперссылка «Last» (это переход к последней странице). Я хочу определить, как мне обратиться к этой гиперссылке из моей программы.

    В «Internet Explorer 10» открыл «F12 Разработчик». В «F12 Разработчик» увидел, что у гиперссылки «Last» есть атрибут » ).

    В интернете почитал, что тег «class» используется для оформления текста, а не для его идентификации. С помощью поиска по «F12 Разработчик» не нашёл, чтобы слово «Last» встречалось в разделе «style».

    Неграмотно сделана веб-страница или я неправильно понимаю ситуацию?

    У гиперссылки есть ещё атрибут «href». Т.е. моя программа может обратиться к нужной гиперссылке по трём параметрам:

    1. по атрибуту «class»;
    2. по атрибуту «href»;
    3. и по тексту, который отображает гиперссылка.

    Я хочу, чтобы моя программа обращалась к гиперссылке по атрибуту «class», но, почитав назначение этого атрибута, пришёл в тупик.

    Атрибут classid в HTML

    В CSS существует возможность обратиться к элементам html-документа по значению его атрибутов. Вы, конечно, уже знаете про ID и классы. Давайте взглянем на следующий html:

    У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

    Существует множество вариантов их использования. Давайте разберёмся более детально с различными опциями и попытаемся придумать сценарии использования атрибутов в реальной жизни.

    [rel = external]
    Атрибут точно соответствует заданному значению

    В приведённом выше примере, атрибут элемента h2 был равен «friend». Селектор, который мы написали ссылался на него, поскольку значение атрибута точно равно «friend». Именно точное. Давайте посмотрим на другой пример:

    Более реальный пример — стилизация блогролла (blogroll). Скажем у вас есть список ссылок на дружественные сайты:

    И вы хотите задать каждой ссылке свой стиль. Традиционный подход состоит в том, что каждой ссылке указывается класс, но этот подход требует дополнительной разметки. Другой способ — это использование псевдоселектора nth-child. Однако этот подход требует определённого порядка элементов. Эта проблема идеально подходит для применения селекторов по атрибутам, поскольку ссылки уже являются уникальными.

    Я уверен, что наиболее часто этот тип селектора используется для элементов input (text, radio и т.п.). Все эти элементы сильно отличаются друг от друга, и писать что-нибудь типа input в большинстве случаев не лучшая идея. Гораздо чаще используется следующая запись:

    Это единственный способ стилизовать элементы input без дополнительной разметки и всяческих ухищрений.

    [rel *= external]
    Атрибут содержит заданное значение.

    Теперь начинаются более интересные вещи. Знаку равенства в селекторе по атрибуту может предшествовать другой знак, который меняет назначение его использования. Например, "*=" означает "заданное значение может находиться где угодно в значении указанного атрибута". Взгляните на следующий пример:

    Не забывайте, что идентификаторы и классы - это тоже атрибуты и вы можете их в селекторах по атрибутам. Итак, давайте предположим, что вы пишете CSS для сайта, в котором вы не имеете доступа к разметке, а неопытный разработчик оставил вам такое:

    Вы можете подсветить все эти элементы следующим образом:

    [rel ^= external]
    Атрибут начинается с заданного значения

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

    [rel $= external]
    Атрибут заканчивается на заданное значение

    Если есть возможность сделать выбор по началу значения атрибута, то почему не быть и обратной возможности?

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

    = external]
    Атрибут находится в списке, разделённом пробелами

    Как вы уже знаете, вы можете указать несколько классов стилей для одного элемента. И если вы делаете именно так, то вы можете использовать имя класса для доступа к элементу в CSS. В случае использования селекторов по атрибуту, не всё так просто. Если атрибуту rel присвоено несколько значений (разделённых пробелами), то вам необходимо использовать "

    Вы можете подумать, почему бы нам не использовать в этом случае "*=" ? Действительно, такой вариант использования более гибок, однако он может быть слишком гибок. Рассматриваемый селектор требует, чтобы значение отделялось пробелом, а "*=" - нет. Таким образом, если у вас есть два элемента (один с rel=home friend-link, а второй с rel=home friend link), то вам необходимо использовать селектор для случая с пробелами, чтобы выбрать только второй элемент.

    [rel |= external]
    Атрибут находится в списке, разделённом дефисами

    Список, разделённый дефисами очень похож на описанный выше список разделённый пробелами. Но опять же есть свои особенности перед использованием селектора с "*=".

    [title = one][rel ^= external]
    Соответствие по нескольким атрибутам

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

    Поддержка браузерами

    Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.

    Илон Маск рекомендует:  Что такое код ncurses_has_key
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL