Шпаргалка html

The element.

<IMG><APPLET>

The syntax is:

 <OBJECT attributes> Alternative action </OBJECT>

attributesAlternative action<OBJECT>ALT=<IMG><OBJECT>

Attributes for any type of Object

WIDTH=: width of rendered area in pixels;
HEIGHT=: height of rendered area in pixels.
BORDER=: width of border line drawn round area ("0" for none).
HSPACE=: horizontal gutter in pixels;
VSPACE=: vertical gutter in pixels.
ALIGN=: vertical or horizontal alignment, eg "top", "left" etc.
STANDBY=: text to display while fetching/loading object.

Attributes for graphics/images

TYPE=: specifies the type of image file, eg
"image/gif", "image/jpeg" or "image/png".
DATA=: gives the URL reference to the image file, eg
"piccy.gif" or "../images/photo.jpeg" etc.

Attributes for code applets

CODETYPE=: specifies the particular «language» the applet is coded in
(ie it is not restricted to just Java).
CLASSID=: specifies the URL reference to the applet code;
CODEBASE=: specifies the Base URL if CLASSID was just a leafname not in the
current directory.
DATA=: specifies the URL reference to data for the code (if required).

Event Attributes

HTML <object> tag support following event attributes.

Attributes	Value	Description
onfocus	script	element gets focus on object when script tobe run.
onblur	script	element lose the focus on object when scrip tobe run.
onabort	script	element gets aborted on object when script tobe run.
onchange	script	element gets anytime change on object when script tobe run.
onbeforeunload	script	element gets unloaded on object when scrip tobe run.
onclick	script	clicked on object when script tobe run.
ondblclick	script	double click on object when script tobe run.
onkeydown	script	key is pressed when script tobe run.
onkeypress	script	key is pressed over element then released when script tobe run.
onkeyup	script	key is released over element when script tobe run.
onmousedown	script	mouse button was pressed over an element when script tobe run.
onmouseout	script	mouse pointer release over an element when script tobe run.
onmousemove	script	run mouse pointer moved when script tobe run.
onmouseover	script	run mouse pointer move over when script tobe run.
onmouseup	script	mouse button is released when script tobe run.
onreset	script	form has been reset when script tobe run.
onselect	script	Select some content when script tobe run.
onsubmit	script	form has been submitted when script tobe run.
onload	script	object has load when script tobe run.
onchange	script	allow to change the object when script tobe run.
onunload	script	unload to the browser window when script tobe run.
ondrag	script	element being dragged when script tobe run.
ondragend	script	element being stop dragged when script tobe run.
ondragenter	script	element being go target dragged when script tobe run.
ondragleave	script	element being leave to target dragged when script tobe run.
ondragover	script	element being over to target dragged when script tobe run.
ondragstart	script	element being start dragged when script tobe run.
ondrop	script	element being dropped when script tobe run.
onerror	script	element error occurs when script tobe run.
onmessage	script	element message display when script tobe run.
onerror	script	element error occurs when script tobe run.
onmousewheel	script	mouse wheel will be rotate when script tobe run.
onscroll	script	scrollbar is scroll when script tobe run.
onresize	script	element should be resize when script tobe run.
onselect	script	all element content selected when script tobe run.
onstorage	script	element should be store in target when script tobe run.

PNG image files.

W3C propose that this file format could replace the current GIF format,
for two main reasons:

GIF is getting a bit old (in computing terms); and the increasing
number of «variations» has made it progressively less «standardised»;
Unisys and Compuserve claim Patent and Copyright (respectively);
OK, you and I know that nowhere in the civilised world can you patent
an algorithm — but hey, the U.S.ofA. is involved here; as a result,
W3C have never been able to formally endorse/recommend the GIF format,
but the new PNG is known to be free of «legal encumbrances».

Functions which replicate those available in GIF;
Enhancements/expansions to GIF facilities;
Brand new additions; and
Features which PNG deliberately does not support.

Basic features:

It is a bit-map file;
Lossless compression is used to minimise file-size;
There may be 2, 4, 16 or 256 «logical» colours, indexing into a palette;
The palette can be 8 bits per colour (24-bit «depth»);
One «colour» may be declared as being transparent;
Data may be «interlaced» (allowing an image to build up from low
resolution to high resolution during fetching).

Extended features:

A 256-greyscale can be used (which doesn’t need a palette);
The palette can be 16 bits per colour (48-bit «depth»);
Interlacing now makes the lo-res image appear «squared», not «stripey».

Additional features:

The file has a «chunk» structure, to implement all these additions;
Each pixel can be defined by a colour-triplet «TrueColour», of either
24 or 48 bit depth (palette not normally then used);
There can be a full «Alpha channel»: each pixel can have an 8-bit
«opacity», for making translucent images;
There is provision for including a «Gamma correction» table;
Raw data can be pre-processed («filtered»), which may improve the
subsequent compression;
Textual fields can be included, eg to contain authorship;
… plus other progressively more obscure features!

Things it doesn’t do:

Although large images can be divided up into a number of smaller and
more manageable data chunks, each file only ever contains one image
(so you can forget about animations
There is no provision for «lossy» compression; it is considered that
JPEG format continues to be plenty adequate for that purpose.

Should I use them from now on everywhere?

But it is reasonable to guess that:

Browsers that implement <OBJECT> can probably also render PNGs;
Browsers that can’t render PNGs, probably can’t do <OBJECT> either:

<OBJECT><IMG>

Свои DOM-свойства

Ранее мы видели некоторые встроенные свойства DOM-узлов. Но, технически, никто нас ими не ограничивает.

Узел DOM – это объект, поэтому, как и любой объект в JavaScript, он может содержать пользовательские свойства и методы.

Например, создадим в новое свойство и запишем в него объект:

Можно добавить и новую функцию:

Нестандартные свойства и методы видны только в JavaScript и никак не влияют на отображение соответствующего тега.

Обратим внимание, пользовательские DOM-свойства:

Могут иметь любое значение.
Названия свойств чувствительны к регистру.
Работают за счёт того, что DOM-узлы являются объектами JavaScript.

Значение и применение

Элемент <object> — это универсальный способ внедрения в страницу мультимедийного контента — видео, flash-роликов, апплетов, изображений и даже веб-страниц. Он может содержать несколько элементов <param>, которые используются, чтобы определить параметры для плагинов, встроенных в элемент <object>.

Внутри элемента <object> также можно поместить резервный контент, который отображается, если не поддерживается мультимедийный файл. Атрибуты и параметры меняются в зависимости от типа объекта и иногда уникальны для сторонних плагинов, отображающих мультимедийный контент.

Плагины

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

Плагины — это компьютерные программы, расширяющие стандартную функциональность браузера.

Плагины использовались для самых разных целей:

Запуск Java апплетов
Запуск ActiveX управления
Отображение Flash фильмов
Отображение карт
Проверка на вирусы
Убедитесь, удостоверение личности с банк id

Внимание!

Большинство браузеров больше не поддерживают Java апплеты и плагины.

Элементы управления ActiveX больше не поддерживаются ни в одном браузере.

Поддержка Shockwave Flash также была отключена в современных браузерах.

HTML Reference

HTML by AlphabetHTML by CategoryHTML Global AttributesHTML EventsHTML CanvasHTML Audio/VideoHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

Когда полезен доступ к атрибутам?

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

Например, свойства тега описаны в спецификации DOM: .

Например, у него есть свойство . Кроме того, он имеет и другие свойства, общие для всех элементов, которые описаны в спецификации в .

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

Рассмотрим несколько примеров.

Синхронизация не гарантирует одинакового значения в атрибуте и свойстве.

Для примера, посмотрим, что произойдёт с атрибутом при изменении свойства:

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

Стало быть, если мы хотим именно то, что в HTML, то нужно обращаться через атрибут.

Есть и другие подобные атрибуты

Кстати, есть и другие атрибуты, которые не копируются в точности

Например, DOM-свойство имеет логическое значение , а HTML-атрибут – любое строковое, важно лишь его наличие

Работа с через атрибут и свойство:

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

Чаще синхронизация – односторонняя: свойство зависит от атрибута, но не наоборот.

Например, при изменении свойства атрибут не меняется:

То есть, изменение DOM-свойства на атрибут не влияет, он остаётся таким же.

А вот изменение атрибута обновляет свойство:

Эту особенность можно красиво использовать.

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

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

Атрибуты

Элементам DOM, с другой стороны, соответствуют HTML-теги, у которых есть текстовые атрибуты.

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

Доступ к атрибутам осуществляется при помощи стандартных методов:

– проверяет наличие атрибута
– получает значение атрибута
– устанавливает атрибут
– удаляет атрибут

Эти методы работают со значением, которое находится в HTML.

Также все атрибуты элемента можно получить с помощью свойства , которое содержит псевдо-массив объектов типа .

В отличие от свойств, атрибуты:

Всегда являются строками.
Их имя нечувствительно к регистру (ведь это HTML)
Видны в (за исключением старых IE)

Рассмотрим отличия между DOM-свойствами и атрибутами на примере HTML-кода:

Пример ниже устанавливает атрибуты и демонстрирует их особенности.

При запуске кода выше обратите внимание:

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

Параметр ALIGN

HTML:

3.2

XHTML:

1.0

1.1

Описание

Определяет выравнивание объекта на странице и способ его отображения совместно
с другими нижележащими элементами вроде текста

Аргументы

absmiddle: Выравнивание середины объекта по середине текущей строки.
baseline: Выравнивание объекта по базовой линии текущей строки.
bottom: Выравнивание нижней границы объекта по окружающему тексту.
left: Выравнивает объект по левому краю окна, текст обтекает его справа.
middle: Выравнивание середины объекта по базовой линии текущей строки.
right: Выравнивает объект по правому краю окна, текст обтекает слева.
texttop: Верхняя граница объекта выравнивается по самому высокому текстовому элементу
текущей строки.
top: Верхняя граница объекта выравнивается по самому высокому элементу текущей
строки.

Значение по умолчанию

bottom

Пример 2. Выравнивание объекта

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег OBJECT, параметр align</title>
</head>
<body>
<p><object data=»demo.mpg» width=»400″ height=»300″
align=»left»></object></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
</body>
</html>

Теги объектов

EMBED используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает.

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

OBJECT сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает.

PARAM предназначен для передачи значений параметров Java-апплетам или объектам веб-страницы, созданным с помощью тегов APPLET или OBJECT.

Attributes

= New in HTML5.

Attribute	Value	Description
align	top bottom middle left right	Not supported in HTML5. Specifies the alignment of the <object> element according to surrounding elements
archive	URL	Not supported in HTML5.A space separated list of URL’s to archives. The archives contains resources relevant to the object
border	pixels	Not supported in HTML5. Specifies the width of the border around an <object>
classid	class_ID	Not supported in HTML5.Defines a class ID value as set in the Windows Registry or a URL
codebase	URL	Not supported in HTML5.Defines where to find the code for the object
codetype	media_type	Not supported in HTML5.The media type of the code referred to by the classid attribute
data	URL	Specifies the URL of the resource to be used by the object
declare	declare	Not supported in HTML5.Defines that the object should only be declared, not created or instantiated until needed
form	form_id	Specifies one or more forms the object belongs to
height	pixels	Specifies the height of the object
hspace	pixels	Not supported in HTML5. Specifies the whitespace on left and right side of an object
name	name	Specifies a name for the object
standby	text	Not supported in HTML5.Defines a text to display while the object is loading
type	media_type	Specifies the media type of data specified in the data attribute
usemap	#mapname	Specifies the name of a client-side image map to be used with the object
vspace	pixels	Not supported in HTML5. Specifies the whitespace on top and bottom of an object
width	pixels	Specifies the width of the object

Using a PNG inside

   <OBJECT TYPE="image/png" DATA="thing.png">
     <IMG SRC="thing.gif" ALT="Wot no piccy">
   </OBJECT>

<OBJECT><IMG>WIDTH=HEIGHT=ALIGN=BORDER=HSPACE=TITLE=VSPACE=

Different browsers may interpret this in the following ways:

If it supports <OBJECT> and can render PNGs, then «thing.png» will
appear, and the <IMG> and </OBJECT> tags will be skipped over;
If it supports <OBJECT> but cannot render PNGs, then it should instead
implement the «alternative» <IMG> tag, and «thing.gif» should appear;
If it doesn’t support <OBJECT> it will ignore that tag, carry on and
«obey» the <IMG> tag to render the GIF, and ignore the </OBJECT> tag;
If graphics have been turned off, it should drop through to the ALT
attribute and display «Wot no piccy».

John Alldred <[email protected]> 28May98
http://www.protovale.co.uk/john/

Back to Home Page . . . . . .
Back to «Tutors» page

HTML Справочник

HTML по алфавитуHTML по категориямHTML Поддержка браузераHTML АтрибутыHTML Глобальные атрибутыHTML СобытияHTML ЦветаHTML CanvasHTML Аудио/видеоHTML Наборы символовHTML Типы документовHTML URL КодировкаHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКонвертер PX в EMКомбинации клавиш

HTML Теги

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

HTML Теги

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

Browser compatibility

Desktop	Mobile
Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes
Yes	12	1	Yes	Yes	Yes	Yes	Yes	4	Yes	Yes	Yes

Параметр HEIGHT и WIDTH

Описание

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

Если используется процентная запись, то размеры объекта вычисляются относительно
родительского элемента — контейнера, где находится тег <OBJECT>.
В случае отсутствия родительского контейнера, в его качестве выступает окно
браузера. Иными словами, width=»100%»
означает, что объект будет занимать всю доступную ширину веб-страницы.

Да.

Любое целое положительное число в пикселах или процентах.

HTML Tags

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

Tag Attributes

HTML <object> tag support following specific attributes.

Attributes	Value	Description
data	URL	Specify the URL of the embedded object.
form	form_id	Specify one or more forms that associate with <object> element.
height	pixels	Specify the height of the embedded object.
name	text	Specify the name of the embedded object.
type	MIME_type	Specify the content type of the embedded object.
usemap	#name	Specify name of the <map> element used with embedded object.
width	pixels	Specify the width of the embedded object.
Following attribute has been removed in HTML5.
align	top bottom left right middle	Specify the alignment of the <object> element according to parent element.
archive	URL	Specifies the archives embedded object URL list separated by whitespace.
border	pixels	Specify the border thickness around embedded object.
codebase	URL	Specify the URL of the object source.
hspace	pixels	Specify the space on left and right side of the embedded object.
standby	text	Specify the text to display while loading object.
vspace	pixels	Specify the space on top and bottom side of the embedded object.

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

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

Точный набор свойств описан в стандарте, обычно мы более-менее представляем, если пользуемся HTML, какие свойства могут быть, а какие – нет.

Для нестандартных атрибутов DOM-свойство не создаётся.

Например:

Свойство является стандартным, только если оно описано в стандарте именно для этого элемента.

То есть, если назначить элементу атрибут , то свойство от этого не появится. Как, впрочем, и если назначить ссылке атрибут :

Нестандартные атрибуты иногда используют для CSS.

В примере ниже для показа «состояния заказа» используется атрибут :

Почему именно атрибут? Разве нельзя было сделать классы , , ?

Конечно можно, но манипулировать атрибутом из JavaScript гораздо проще.

Например, если нужно отменить заказ, неважно в каком он состоянии сейчас – это сделает код:

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

…То есть, требуется больше исходной информации и надо написать больше букв. Это менее удобно.

Проще говоря, значение атрибута – произвольная строка, значение класса – это «есть» или «нет», поэтому естественно, что атрибуты «мощнее» и бывают удобнее классов как в JS так и в CSS.

The element.

Attributes for any type of Object

Attributes for graphics/images

Attributes for code applets

Event Attributes

PNG image files.

Basic features:

Extended features:

Additional features:

Things it doesn’t do:

Should I use them from now on everywhere?

Свои DOM-свойства

Значение и применение

Плагины

HTML Reference

HTML Tags

Когда полезен доступ к атрибутам?

Атрибуты

Параметр ALIGN

Описание

Аргументы

Значение по умолчанию

See also

HTML

Теги объектов

Attributes

Using a PNG inside

HTML Справочник

HTML Теги

HTML Теги

Browser compatibility

Параметр HEIGHT и WIDTH

Описание

HTML Tags

Tag Attributes

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

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

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