HTML5 Cheat Sheet: Tags, Events, Attributes, and Canvas, Lecture notes of Web Programming and Technologies

Download HTML5 Cheat Sheet: Tags, Events, Attributes, and Canvas and more Lecture notes Web Programming and Technologies in PDF only on Docsity!

THE MEGA

CHEAT SHEET

TAGS - EVENT ATTRIBUTES - MOBILE - BROWSERS - CANVAS

HTML 5 TAGS

NEW HTML 5 TAGS

self-contained composition that is independently distributable section of page that consists of contenttangentially related to content around it sound content span of text to be isolated from surroundings for bidirectional formatting purposes area that can be used to draw graphics via JavaScript user invokable command dropdown list data template details of an element specifies that part of an application is interactive embedded content caption of figure element group of media content footer for section or page header for section or page group of headings for section generated key in a form specifies the main content area of an HTML document

acronym applet base font background sound big text centered text footnotes text font, size, and color sub window set of frames

provides searchable index related to current document directory list no embed section no frame section strikethrough text strikethrough text teletype text underlined text preformatted text

specifies a command that a user can invoke from a popup menu marked text measurement in defined range navigation links represents results of calculation progress of any kind of task marks the base text component of a ruby annotation. parenthesized ruby text ruby text marks a ruby text container for ruby text components in a ruby annotation ruby annotations section in a document media resources header of a detail element declares HTML fragments that can be cloned and inserted in the document by script. date/time specifies a text track for media such as video and audio video possible line break

Below is a full list of all the HTML 5 Tags / elements and a description of what

they are used for.

OLD UNSUPPORTED TAGS

onabort onbeforeunload onclick ondblclick ongesturechange ongestureend ongesturestart onkeydown onkeypress onkeyup onmousedown onmousemove

abort event before unload event mouse clicked event mouse double-clicked event gesture change event end of gesture event start of gesture event key pressed down event key pressed event key released event mouse button pressed down event mouse moved event

onmouseout onmouseover onmouseup onmove onorientationchange onpaste onresize ontouchcancel ontouchend ontouchmove ontouchstart

mouse cursor exited event mouse cursor entered event mouse button released event move event device orientation changed event paste event resize event touch canceled event touch ended event touch move event touch started event

Existing

Attributes In

HTML4 & 5

A list of existing attributes that are support in both HTML4 & HTML 5

HTML 5

Browser

Support

Desktop

Mobile

Below is a table showing the individual browser support specifications for each of the major web browsers in both desktop and mobile. We have given an over all percentage score on each browser, based on scores gathered by html5test.com

Fully Supported Partially Supported Not Supported

Overall Support of HTML 5 On Desktop Browsers

Overall Support of HTML 5 On Mobile Browsers

61% 83% 95% 71% 94%

81% 73% 88% 41% 82% 89% 62%

Event Handler

Content

Attributes

HTML 4 added the ability to let events trigger actions in a browser, like starting

a JavaScript when a user clicks on an element.

Below are event handler attributes that can be added to HTML elements to define

event actions.

onbeforeonload oncanplay oncanplaythrough oncontextmenu ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onformchange onforminput onhaschange oninput oninvalid

onloadeddata onloadedmetadata onloadstart onmessage onmousewheel onpause onplay onplaying onprogress onratechange onscroll onseeked onseeking onstalled onstorage onsuspend ontimeupdate onvolumechange onwaiting

before onload event media can start play media can be played to end context menu is triggered element is dragged at the end of drag operation element dragged on drop target element leaves valid drop target element is dragged over drop target at the start of drag operation dragged element is being dropped length of media is changed media resource element becomes empty media has reached end error occurs form changes form gets user input document has changed message is triggered element gets user input

media data is loaded duration of media element is loaded browser starts to load media data element is invalid mouse wheel is being rotated media data is paused media data is going to start playing media data has started playing browser is fetching media data media data's pplaying rate has changed element's scrollbar is being scrolled element's seeking attribute is not true element's seeking attribute is true there is error in fetching media data document loads browser has stopped fetching media data media changes its playing position media changes volume, also when mute media has stopped playing

Name

ATTRIBUTES Type Default lineWidth lineCap

Float String

1 Butt

lineJoin String miter

miterLimit Float 10

LINE STYLES

TEXT

RECTANGLES

Name

ATTRIBUTES Type Default strokeStyle fillStyle shadowOffsetX shadowOffsetY shadowBlur shadowColor

any any float float float string

black black

transparent black

Return Name Void addColorStop(float offset, string color)

METHODS

CANVASGRADIENT INTERFACE

Return Name CanvasGradient CanvasPattern

createLinearGradient(float x0, float y0, float r0, float x1, float y1, float r1) createPattern(Object image, string repetition)

METHODS Return Name Void Void Void Void Void Void Void Void Void

Void Void

Void

beginPath( ) closePath( ) fill( ) stroke( ) clip( ) moveTo( float x, float y) lineTo( float x, float y) quadraticCurveTo(float cpx, float cpy, float x, float y) bezierCurveTo(float cp1x, float cp1y, float cp2x, float cp2y,float x, float y ) arcTo(float x1, float y1, float x2, float y2, float radius ) arc(float x1, float y1, float radius ) float startAngle, float endAngle,boolean anticlockwise ) rect (float x, float w, float h)isPointInPath( float x, float y)

METHODS

ImageData interface

Return Name ImageData ImageData imagedata) ImageData void

createImageData( float sw, float sh) createImageData( ImageData getImageData(ImageData imagedata, float dx, float dy, [Optional] float dirtyX,float dirtyY, float dirtyWidth, float dirtyHeight)

width height data

unsigned long unsigned long CanvasPixelArray

[readonly] [readonly] [readonly]

COLORS, STYLES AND SHADOWS

PATHS

PIXEL MANIPULATION

Argument "image" can be of type HTMLImageElement,HTMLCanvasElement or HTMLVideoElement "repetition" supports any of the following values:[repeat (default), repeat-x, repeat-y, no-repeat]

Supports any of the following values: butt rounded square

Supports any of the following values:

Supports any of the following values:[start, end, left, right, center]

Supports an of the following values:[top, hanging, middle, alphabetic, ideographic, bottom]

round bevel miter

Name

ATTRIBUTES Type Default font textAlign

String String

10px sans-serif start

textBaseline String

width float [readonly]

alphabetic

METHODS

TextMetrics interface

Return Name Void Void TextMetrics

fillText(string text, float x, float y, [Optional] float maxWidth) strokeText(string text, float x, float y, [Optional] float maxWidth) measureText( string text)

METHODS Return Name Void Void Void

clearRect(float x, float y, float w, float h) fillRect(float x, float y, float w, float h) strokeRect(float x, float y, float w, float h)