Tài liệu HTML & CSS: The Complete Reference- P6 pdf

• In early drafts of HTML5 specification, the legend element was used instead of the dt and dd elements added later.. hidefocus="true | false" 5.5 language="javascript | jscript | vbs |

Trang 1

NOTE MSDN documentation for this element appears incorrect for event handlers Not all core events are listed, but during testing they all worked Other extended events like onbeforecopy,

oncopy, oncontextmenu, and more were also verified as functional under Internet Explorer 8.

Element-Specific Attributes cite The value of this attribute is a URL that designates a source document or message that might explain why the information was deleted.

datetime This attribute is used to indicate the date and time the deletion was made The value

of the attribute is a date in a special format as defined by ISO 8601 The basic date format is

YYYY-MM-DDThh:mm:ssTZD

where the following is true:

YYYY=four-digit year such as 1999 MM=two-digit month (01=January, 02=February, and so on.) DD=two-digit day of the month (01 through 31)

hh=two-digit hour (00 to 23) (24-hour clock, not AM or PM) mm=two-digit minute (00 through 59)

ss=two-digit second (00 through 59) TZD=time zone designator

The time zone designator is either Z, which indicates Universal Time Coordinate or coordinated universal time format (UTC), or +hh:mm, which indicates that the time is a local time that is hh hours and mm minutes ahead of UTC Alternatively, the format for the time zone designator could be –hh:mm, which indicates that the local time is behind UTC Note that the letter T actually appears in the string, all digits must be used, and 00 values for minutes and seconds might be required An example value for the datetime attribute might be 1999-10-6T09:15:00-05:00, which corresponds to October 6, 1999, 9:15 A.M., U.S Eastern Standard Time.

Example

<p><del cite="http://www.democompany.com/changes/oct.html"

datetime="2008-10-06T09:15:00-05:00">

The penalty clause applies to client lateness as well

</del> <ins>No more penalties</ins></p>

Compatibility

HTML 4, 4.01, 5 XHTML 1.0, 1.1

Firefox 1+, Internet Explorer 4+, Netscape 6+, Opera 7+, Safari 1+

Notes

• Browsers can render deleted (<del>) text in a different style to show the changes that have been made to the document Internet Explorer renders the deleted text as strikethrough text Eventually, a browser could have a way to show a revision history on a document.

Trang 2

• User agents that do not understand <del> or <ins> will show the information anyway, so there is no harm in adding information—only in deleting it Because of the fact that <del>-enclosed text might show up, it might be wise to comment it out within the element, as shown here:

<del>

<! This is old information >

</del>

<details> (Additional Details)

This HTML5 element represents additional information or interactive elements that can be shown on demand.

HTML5 Standard Syntax

<details accesskey="spaced list of accelerator key(s)"

id="unique alphanumeric identifier"

itemid="microdata id in URL format"

HTML5 Event Attributes

onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,

Trang 3

onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, onvolumechange, onwaiting

Example

<details onclick="this.open='open';">

<dt>Help?</dt>

<dd>

<p>This could give you help with HTML5 but we need more implementations to

prove how things will work.</p>

• In early drafts of HTML5 specification, the legend element was used instead of the

dt and dd elements added later.

accesskey="spaced list of accelerator key(s)"

contenteditable="true | false | inherit"

Trang 4

hidefocus="true | false" (5.5) language="javascript | jscript | vbs | vbscript" (4) tabindex="number" (5.5)

Events Defined by Internet Explorer

onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu,

oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onselectstart

Example

<p>The <dfn>dfn</dfn> element is an element which is used to set off the

defining instance of a term Now that's a self-contained example!</p>

Compatibility

HTML 2, 3.2, 4, 4.01, 5 XHTML 1.0, 1.1, Basic

Trang 5

• HTML 2 and 3.2 defined no attributes for this element.

• HTML5 suggests that the section or content grouping nearest an occurrence of a dfn

element must contain the actual definition.

<dir> (Directory List)

This element encloses a list of brief, unordered items, such as might occur in a menu or directory It is deprecated or obsolete under most specifications.

Standard Syntax (Transitional Only—Deprecated)

<dir class="class name(s)"

unselectable="on | off" (5.5)

HTML 4 Event Attributes

onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup

oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onselectstart, ontimeerror

Trang 6

Element-Specific Attribute compact This attribute reduces the white space between list items.

Firefox 1+, Internet Explorer 2+, Netscape 1+, Opera 2.1+, Safari 1+

• Most browsers will not render a <dir> tag any differently from the <ul> tag.

• HTML 2 and 3.2 define only the compact attribute.

• Most browsers will not render the compact list style.

• For XHTML transitional compatibility, the compact attribute must have a value:

contextmenu="id of menu"

Trang 7

datasrc="id of data source object supplying data" (4) disabled="false | true" (5.5)

tabindex="number" (5.5) unselectable="on | off" (5.5)

Trang 8

Element-Specific Attribute nowrap This Internet Explorer–specific attribute is used to control the wrapping of text within a <div> tag If set to yes, text should not wrap The default is no CSS rules should

be used instead of this attribute.

<div class="special" id="div1" style="background-color: yellow;">

Divs are useful for setting arbitrary style

Notes

• A <div> tag is a generic block tag and is very useful for binding scripts or styles to

an arbitrary section of a document It complements <span>, which is used inline.

• Excessive use of <div> tags is almost as bad as excessive use of tables, particularly when structuring page content.

• The HTML 4 specification specifies that the datafld, dataformatas, and datasrc

attributes are reserved for <div> and might be supported in the future They were removed from XHTML, but Internet Explorer supports them for data binding.

• Under the HTML 4.01 strict specification, the align attribute is not supported.

• HTML 3.2 supports only the align attribute.

compact="compact" (transitional only)

Trang 9

Trang 10

Element-Specific Attribute compact This attribute reduces the white space between list items.

Notes

• The items in the list comprise two parts: the term, indicated by the dt element, and its definition, indicated by the dd element However, there is no requirement to match these elements, alternate them, or anything else, at least syntax-wise.

• Some page designers might use a <dl> tag or <ul> tag to create text indention

Although this is a common practice on the Web, it is not advisable because it confuses the meaning of the element by making it a physical layout device rather than a list A CSS property like margin or position should be used instead.

Trang 11

• HTML 2 and 3.2 support only the compact attribute for this element.

• For XHTML compatibility, the compact attribute must be expanded:

<dl compact="compact"> under the transitional form It is deprecated under the strict specification In practice, regardless of whether it is indicated, the compact

attribute generally has no effect.

<dt> (Term in a Definition List or Caption in Figure or Details)

This element identifies a definition list term in a list of terms and definitions Under HTML5, the element is also used within <details> and <figure> tags to represent a caption for content.

Standard Syntax

<dt class="class name(s)"

tabindex="number" (5.5) unselectable="on | off" (5.5)

HTML 4 Event Attributes

onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup

Trang 12

Element-Specific Attribute nowrap This Internet Explorer–specific attribute is used to control the wrapping of text within a <dt> tag If set to yes, text should not wrap The default is no CSS properties should be used instead of this attribute.

<img src="desmond.jpg" alt="Desmond Baby" height="320" width="150">

<p>A photo of Desmond circa 2010.</p>

</dd>

</figure>

Trang 13

HTML 2, 3.2, 4, 4.01, 5 XHTML 1.0, 1.1, Basic

Notes

• Traditionally, this element occurs within a list of defined terms enclosed by a <dl>

tag It is generally used in conjunction with a <dd> tag, which indicates its definition However, <dt> tags do not require a one-to-one correspondence with

• Under XHTML 1.0, the closing </dt> tag is mandatory.

• HTML 2 and 3.2 support no attributes for this element.

<em> (Emphasis)

This inline element indicates emphasized text, which many browsers will display as italic text Standard Syntax

<em class="class name(s)"

Trang 14

Trang 15

• As a logical element, em is a prime candidate to bind style information to For example, to define emphasis to mean a larger font size in the Impact font instead of italics, you might use a CSS rule like the following in a document-wide style sheet:

em {font-size: larger; font-family: Impact; font-style: normal;}

• HTML 2 and 3.2 support no attributes for this element.

This widely supported nonstandard element specifies an object, typically a multimedia element, to be embedded in an HTML document The syntax can be somewhat variable given the plug-in–specific attributes found, so the reference covers those commonly found Proprietary Syntax (Commonly Supported)

palette="background | foreground" (4) pluginspage="URL"

Trang 16

onactivate, onbeforeactivate, onbeforecut, onbeforedeactivate, onbeforepaste, onblur, oncontextmenu, oncontrolselect, oncut, ondeactivate, onfocus,

onfocusin, onfocusout, onhelp, onload, onlosecapture, onmouseenter, onmouseleave, onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onscroll

Element-Specific Attributes align This attribute controls the alignment of adjacent text with respect to the embedded object The default value is left.

alt This attribute indicates the text to be displayed if the embedded object cannot be executed.

border This attribute specifies the size, in pixels, of the border around the embedded object.

code This attribute specifies the name of the file containing the compiled Java class if the

embed element is used to include a Java applet This is a strange alternative form of Java inclusion documented by Microsoft.

codebase This specifies the base URL for the plug-in or potential applet in the case of the alternative form under Internet Explorer.

name This attribute specifies a name for the embedded object, so that it can be referenced

by client-side programs in an embedded scripting language.

palette This attribute is used only on Windows systems to select the color palette used for the plug-in and might be set to background or foreground The default is background pluginspage This attribute contains the URL of instructions for installing the plug-in required to render the embedded object.

Trang 17

src This attribute specifies the URL of source content for the embedded object.

type This attribute specifies the MIME type of the embedded object It is used by the browser to determine an appropriate plug-in for rendering the object It can be used instead

of the src attribute for plug-ins that have no content or that fetch it dynamically.

units This Netscape 4+–specific attribute is used to set the units for measurement for the embedded object in pixels or as a relative em value.

vspace This attribute specifies, in pixels, the size of the top and bottom margins between the embedded object and surrounding text.

Example

<! embed with a close tag >

<embed src="testmovie.mov" height="150" width="150">

<fieldset> (Form Field Grouping)

This element allows form designers to group thematically related controls together The element usually contains a legend element, which labels the grouped form controls.

Standard Syntax

<fieldset class="class name(s)"

dir="ltr | rtl"

Trang 18

contextmenu="id of menu"

data-X="user-defined data"

disabled="disabled"

draggable="true | false | auto"

form="id of related form"

Trang 19

Notes

• Grouping controls makes it easier for users to understand the purposes of the controls while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents The proper use of this element makes documents more accessible to users with disabilities.

• The full set of data-binding attributes likely needs to be bound to this element but is missing from MSDN documentation.

• The caption for a <fieldset> tag can be defined by the legend element There should only be a single legend element within the element.

<figure> (Figure)

This HTML5 element represents a group of content enclosed in a dd element, often with a caption defined by a dt element, that can be moved away from the main flow of the document The way in which this element is implemented is similar to how the figures in this book are presented—not necessarily directly adjacent to the text discussing them HTML5 Standard Syntax

<figure accesskey="spaced list of accelerator key(s)"

Trang 20

draggable="true | false | auto"

hidden="hidden"

<header><h1>Welcome to the Example</h1></header>

<p>Yes it is another boring example In this case we would like you

to review <a href="#fig1">Figure Ex-1</a></p>

<p>More and more text is found until eventually the figure is

located.</p>

<figure>

<dd>

<img src="screensnap.png"

alt="A screen capture of the Figure Element in action">

<p>The mighty fig tag has returned from HTML 3 as figure to haunt

Trang 21

HTML5 Not currently supported by any browser, but addressed with a custom element

Notes

• While this element is not yet supported, it is easily simulated by using a custom tag

or using a <div> tag with a special class.

• Early drafts of HTML5 suggested using a <legend> tag for captioning; later, the

<dt> and <dd> tags were introduced for containing figure caption and figure content, respectively.

<font> (Font Definition)

This element allows specification of the size, color, and font of the text it encloses.

Standard Syntax (Transitional Only)

<font class="class name(s)"

unselectable="on | off"(5.5)

Attributes Defined by Netscape

point-size="point size for font" (4) weight="100 | 200 | 300 | 400 | 500

600 | 700 | 800 | 900" (4)

onactivate, onbeforedeactivate, onbeforeeditfocus, onblur, onclick, oncontrolselect, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfocus, onkeydown,

onkeypress, onkeyup, onhelp, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmove, onmoveend, onmovestart, onreadystatechange, onresizeend, onresizestart, onselectstart, ontimeerror

Trang 22

Element-Specific Attributes color This attribute sets the text color using either a browser-dependent named color or a

color specified in the hexadecimal #RRGGBB format.

face This attribute contains a list of one or more font names separated by commas The user agent looks through the specified font names and renders the text in the first font that

and -, increment or decrement the font size relative to the current size The value for

increment or decrement should range only from +1 to +6 or -1 to -6 weight Under Netscape 4, this attribute specifies the weight of the font, with a value of 100

being lightest and 900 being heaviest This is listed primarily for historical purposes; such visual changes are best implemented using the font-weight CSS property.

Example

<p><font color="#FF0000" face="Helvetica, Times Roman" size="+1">

Relatively large red text in Helvetica or Times

</font></p>

Compatibility

HTML 3.2, 4, 4.01 (transitional) XHTML 1.0 (transitional)

Firefox 1+, Internet Explorer 2+, Netscape 1.1+, Opera 4+, Safari 1+

Trang 23

<footer> (Footer)

This HTML5 element represents the footer section of a document or a section element it is contained within Like a typical document footer in print, it should contain supplementary information about the related content.

HTML5 Standard Syntax

<footer accesskey="spaced list of accelerator key(s)"

<header><h1>Welcome to the Example</h1></header>

<p>Yes it is another boring example.</p>

Trang 24

• While this element is not yet supported, it is easily simulated by using a custom tag

or using a <div> tag with a special class.

• A footer element should be included in the HTML5 outlining process.

<form> (Form for User Input)

The element defines a fill-in form that can contain labels and form controls, such as menus and text entry boxes that might be filled in by a user.

Standard Syntax

<form accept-charset="list of supported character sets"

action="URL"

class="class name(s)"

dir="ltr | rtl"

enctype="application/x-www-form-urlencoded | multipart/form-data | text/plain | Media Type as per RFC 2045"

Trang 25

oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfocus, onfocusin, onfocusout, onhelp, onkeydown, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange, onreadystatechange, onreset onresizeend, onresizestart, onselectstart, onsubmit, ontimeerror

Tiêu đề	HTML and XHTML Element Reference
Trường học	University of Example
Chuyên ngành	Web Development
Thể loại	Reference Book
Năm xuất bản	2023
Thành phố	Hanoi

Định dạng
Số trang	50
Dung lượng	270,27 KB