Bootstrap Learning

Must Used Bootstrap Classes
class="lead"
class="col-lg-4-offset"
class="col-lg-4-pull"
class="col-lg-4-push"
class="text-left"
class="text-right"
class="text-center"
class="text-nowrap"
class="text-justify"
class="text-lowercase"
class="text-uppercase"
class="text-capitalize"
class="active"
class="success"
class="info"
class="warning"
class="danger"
class="input-lg"
class="text-hide"

Most Used Bootstrap tags
<abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
<mark>
<code>
<small>
<em>
<blockquote>
<footer>

<blockquote class="blockquote-reverse">
  ...
</blockquote>

UL LI
==================
<ul class="list-inline">
  <li>...</li>
</ul>

Table
=================
<table class="table table-striped">
  ...
</table>

Colors
@brand-primary: darken(#428bca, 6.5%);

Scaffolding
===================
@body-bg:    #fff;
@text-color: @black-50;

Links
=======================
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

How to Use Google Map on Web Page

 <head><style>
      #map-canvas {
        width: 500px;
        height: 400px;
background-color: #CCC;
      }
    </style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
      center: new google.maps.LatLng(28.38, 77.12),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
  <body>
  <div id="map-canvas"></div>
  </body>

Source to get Longitude and Latitude Values
http://www.latlong.net/

Must Use CSS

Body Right Side Image
body{
background: #FFFFFF url(http://3.bp.blogspot.com/-OmaZsi_XmgA/TzY787sKUrI/AAAAAAAABPg/xYSLXr8epZI/s1600/Gita+Blog+Side+Bar.jpg) repeat-y fixed top right;
}

Change Cursor for Site
<style>
body {
cursor: url('favicon.ico'), default;
}
</style>

Block Right Click Disable

tr

{

-ms-user-select:none;

-webkit-user-select:none;

-moz-user-select:none;

}

Use Google Font:

  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">

    <style>

      body {

        font-family: 'Open Sans', sans-serif;

      }

    </style>

Style to First Letter

<style type="text/css"> 

p:first-letter{

    font-size:200%;

    color:#8A2BE2;

}

Login Form Focus

:focus{

            border: thin black solid; 

            padding: 4px; 

        } 

</style>

Image Change on Mouseover
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

All HTML Events

Window Event Attributes

Events triggered for the window object (applies to the <body> tag):

Attribute	Value	Description
onafterprint	script	Script to be run after the document is printed
onbeforeprint	script	Script to be run before the document is printed
onbeforeunload	script	Script to be run when the document is about to be unloaded
onerror	script	Script to be run when an error occur
onhashchange	script	Script to be run when there has been changes to the anchor part of the a URL
onload	script	Fires after the page is finished loading
onmessage	script	Script to be run when the message is triggered
onoffline	script	Script to be run when the browser starts to work offline
ononline	script	Script to be run when the browser starts to work online
onpagehide	script	Script to be run when a user navigates away from a page
onpageshow	script	Script to be run when a user navigates to a page
onpopstate	script	Script to be run when the window's history changes
onresize	script	Fires when the browser window is resized
onstorage	script	Script to be run when a Web Storage area is updated
onunload	script	Fires once a page has unloaded (or the browser window has been closed)

---

Form Events

Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements):

Attribute	Value	Description
onblur	script	Fires the moment that the element loses focus
onchange	script	Fires the moment when the value of the element is changed
oncontextmenu	script	Script to be run when a context menu is triggered
onfocus	script	Fires the moment when the element gets focus
oninput	script	Script to be run when an element gets user input
oninvalid	script	Script to be run when an element is invalid
onreset	script	Fires when the Reset button in a form is clicked
onsearch	script	Fires when the user writes something in a search field (for <input="search">)
onselect	script	Fires after some text has been selected in an element
onsubmit	script	Fires when a form is submitted

---

Keyboard Events

Attribute	Value	Description
onkeydown	script	Fires when a user is pressing a key
onkeypress	script	Fires when a user presses a key
onkeyup	script	Fires when a user releases a key

---

Mouse Events

Events triggered by a mouse, or similar user actions:

Attribute	Value	Description
onclick	script	Fires on a mouse click on the element
ondblclick	script	Fires on a mouse double-click on the element
ondrag	script	Script to be run when an element is dragged
ondragend	script	Script to be run at the end of a drag operation
ondragenter	script	Script to be run when an element has been dragged to a valid drop target
ondragleave	script	Script to be run when an element leaves a valid drop target
ondragover	script	Script to be run when an element is being dragged over a valid drop target
ondragstart	script	Script to be run at the start of a drag operation
ondrop	script	Script to be run when dragged element is being dropped
onmousedown	script	Fires when a mouse button is pressed down on an element
onmousemove	script	Fires when the mouse pointer is moving while it is over an element
onmouseout	script	Fires when the mouse pointer moves out of an element
onmouseover	script	Fires when the mouse pointer moves over an element
onmouseup	script	Fires when a mouse button is released over an element
onmousewheel	script	Deprecated. Use the onwheel attribute instead
onscroll	script	Script to be run when an element's scrollbar is being scrolled
onwheel	script	Fires when the mouse wheel rolls up or down over an element

---

Clipboard Events

Attribute	Value	Description
oncopy	script	Fires when the user copies the content of an element
oncut	script	Fires when the user cuts the content of an element
onpaste	script	Fires when the user pastes some content in an element

---

Media Events

Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most common in media elements, like <audio>, <embed>, <img>, <object>, and <video>):

Attribute	Value	Description
onabort	script	Script to be run on abort
oncanplay	script	Script to be run when a file is ready to start playing (when it has buffered enough to begin)
oncanplaythrough	script	Script to be run when a file can be played all the way to the end without pausing for buffering
oncuechange	script	Script to be run when the cue changes in a <track> element
ondurationchange	script	Script to be run when the length of the media changes
onemptied	script	Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)
onended	script	Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")
onerror	script	Script to be run when an error occurs when the file is being loaded
onloadeddata	script	Script to be run when media data is loaded
onloadedmetadata	script	Script to be run when meta data (like dimensions and duration) are loaded
onloadstart	script	Script to be run just as the file begins to load before anything is actually loaded
onpause	script	Script to be run when the media is paused either by the user or programmatically
onplay	script	Script to be run when the media is ready to start playing
onplaying	script	Script to be run when the media actually has started playing
onprogress	script	Script to be run when the browser is in the process of getting the media data
onratechange	script	Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)
onseeked	script	Script to be run when the seeking attribute is set to false indicating that seeking has ended
onseeking	script	Script to be run when the seeking attribute is set to true indicating that seeking is active
onstalled	script	Script to be run when the browser is unable to fetch the media data for whatever reason
onsuspend	script	Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason
ontimeupdate	script	Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)
onvolumechange	script	Script to be run each time the volume is changed which (includes setting the volume to "mute")
onwaiting	script	Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data)

---

Misc Events

Attribute	Value	Description
onerror	script	Fires when an error occurs while loading an external file
onshow	script	Fires when a <menu> element is shown as a context menu
ontoggle	script	Fires when the user opens or closes the <details> element

CSS and CSS3 Properties

Color Properties

Property	Description	CSS
color	Sets the color of text	1
opacity	Sets the opacity level for an element	3

Background and Border Properties

Property	Description	CSS
background	Sets all the background properties in one declaration	1
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	1
background-color	Sets the background color of an element	1
background-image	Sets the background image for an element	1
background-position	Sets the starting position of a background image	1
background-repeat	Sets how a background image will be repeated	1
background-clip	Specifies the painting area of the background	3
background-origin	Specifies the positioning area of the background images	3
background-size	Specifies the size of the background images	3
border	Sets all the border properties in one declaration	1
border-bottom	Sets all the bottom border properties in one declaration	1
border-bottom-color	Sets the color of the bottom border	1
border-bottom-left-radius	Defines the shape of the border of the bottom-left corner	3
border-bottom-right-radius	Defines the shape of the border of the bottom-right corner	3
border-bottom-style	Sets the style of the bottom border	1
border-bottom-width	Sets the width of the bottom border	1
border-color	Sets the color of the four borders	1
border-image	A shorthand property for setting all the border-image-* properties	3
border-image-outset	Specifies the amount by which the border image area extends beyond the border box	3
border-image-repeat	Specifies whether the image-border should be repeated, rounded or stretched	3
border-image-slice	Specifies the inward offsets of the image-border	3
border-image-source	Specifies an image to be used as a border	3
border-image-width	Specifies the widths of the image-border	3
border-left	Sets all the left border properties in one declaration	1
border-left-color	Sets the color of the left border	1
border-left-style	Sets the style of the left border	1
border-left-width	Sets the width of the left border	1
border-radius	A shorthand property for setting all the four border-*-radius properties	3
border-right	Sets all the right border properties in one declaration	1
border-right-color	Sets the color of the right border	1
border-right-style	Sets the style of the right border	1
border-right-width	Sets the width of the right border	1
border-style	Sets the style of the four borders	1
border-top	Sets all the top border properties in one declaration	1
border-top-color	Sets the color of the top border	1
border-top-left-radius	Defines the shape of the border of the top-left corner	3
border-top-right-radius	Defines the shape of the border of the top-right corner	3
border-top-style	Sets the style of the top border	1
border-top-width	Sets the width of the top border	1
border-width	Sets the width of the four borders	1
box-decoration-break	Sets the behaviour of the background and border of an element at page-break, or, for in-line elements, at line-break.	3
box-shadow	Attaches one or more drop-shadows to the box	3

Basic Box Properties

Property	Description	CSS
bottom	Specifies the bottom position of a positioned element	2
clear	Specifies which sides of an element where other floating elements are not allowed	1
clip	Clips an absolutely positioned element	2
display	Specifies how a certain HTML element should be displayed	1
float	Specifies whether or not a box should float	1
height	Sets the height of an element	1
left	Specifies the left position of a positioned element	2
overflow	Specifies what happens if content overflows an element's box	2
overflow-x	Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area	3
overflow-y	Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area	3
padding	Sets all the padding properties in one declaration	1
padding-bottom	Sets the bottom padding of an element	1
padding-left	Sets the left padding of an element	1
padding-right	Sets the right padding of an element	1
padding-top	Sets the top padding of an element	1
position	Specifies the type of positioning method used for an element (static, relative, absolute or fixed)	2
right	Specifies the right position of a positioned element	2
top	Specifies the top position of a positioned element	2
visibility	Specifies whether or not an element is visible	2
width	Sets the width of an element	1
vertical-align	Sets the vertical alignment of an element	1
z-index	Sets the stack order of a positioned element	2

Flexible Box Layout

Property	Description	CSS
align-content	Specifies the alignment between the lines inside a flexible container when the items do not use all available space.	3
align-items	Specifies the alignment for items inside a flexible container.	3
align-self	Specifies the alignment for selected items inside a flexible container.	3
display	Specifies how a certain HTML element should be displayed	1
flex	Specifies the length of the item, relative to the rest	3
flex-basis	Specifies the initial length of a flexible item	3
flex-direction	Specifies the direction of the flexible items	3
flex-flow	A shorthand property for the flex-direction and the flex-wrap properties	3
flex-grow	Specifies how much the item will grow relative to the rest	3
flex-shrink	Specifies how the item will shrink relative to the rest	3
flex-wrap	Specifies whether the flexible items should wrap or not	3
justify-content	Specifies the alignment between the items inside a flexible container when the items do not use all available space.	3
margin	Sets all the margin properties in one declaration	1
margin-bottom	Sets the bottom margin of an element	1
margin-left	Sets the left margin of an element	1
margin-right	Sets the right margin of an element	1
margin-top	Sets the top margin of an element	1
max-height	Sets the maximum height of an element	2
max-width	Sets the maximum width of an element	2
min-height	Sets the minimum height of an element	2
min-width	Sets the minimum width of an element	2
order	Sets the order of the flexible item, relative to the rest	3

Text Properties

Property	Description	CSS
hanging-punctuation	Specifies whether a punctuation character may be placed outside the line box	3
hyphens	Sets how to split words to improve the layout of paragraphs	3
letter-spacing	Increases or decreases the space between characters in a text	1
line-break	Specifies how/if to break lines	3
line-height	Sets the line height	1
overflow-wrap	Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box)	3
tab-size	Specifies the length of the tab-character	3
text-align	Specifies the horizontal alignment of text	1
text-align-last	Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"	3
text-combine-upright	Specifies the combination of multiple characters into the space of a single character	3
text-indent	Specifies the indentation of the first line in a text-block	1
text-justify	Specifies the justification method used when text-align is "justify"	3
text-transform	Controls the capitalization of text	1
white-space	Specifies how white-space inside an element is handled	1
word-break	Specifies line breaking rules for non-CJK scripts	3
word-spacing	Increases or decreases the space between words in a text	1
word-wrap	Allows long, unbreakable words to be broken and wrap to the next line	3

Text Decoration Properties

Property	Description	CSS
text-decoration	Specifies the decoration added to text	1
text-decoration-color	Specifies the color of the text-decoration	3
text-decoration-line	Specifies the type of line in a text-decoration	3
text-decoration-style	Specifies the style of the line in a text decoration	3
text-shadow	Adds shadow to text	3
text-underline-position	Specifies the position of the underline which is set using the text-decoration property	3

Font Properties

Property	Description	CSS
@font-face	A rule that allows websites to download and use fonts other than the "web-safe" fonts	3
@font-feature-values	Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType	3
font	Sets all the font properties in one declaration	1
font-family	Specifies the font family for text	1
font-feature-settings	Allows control over advanced typographic features in OpenType fonts	3
font-kerning	Controls the usage of the kerning information (how letters are spaced)	3
font-language-override	Controls the usage of language-specific glyphs in a typeface	3
font-size	Specifies the font size of text	1
font-size-adjust	Preserves the readability of text when font fallback occurs	3
font-stretch	Selects a normal, condensed, or expanded face from a font family	3
font-style	Specifies the font style for text	1
font-synthesis	Controls which missing typefaces (bold or italic) may be synthesized by the browser	3
font-variant	Specifies whether or not a text should be displayed in a small-caps font	1
font-variant-alternates	Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values	3
font-variant-caps	Controls the usage of alternate glyphs for capital letters	3
font-variant-east-asian	Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)	3
font-variant-ligatures	Controls which ligatures and contextual forms are used in textual content of the elements it applies to	3
font-variant-numeric	Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers	3
font-variant-position	Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font	3
font-weight	Specifies the weight of a font	1

Writing Modes Properties

Property	Description	CSS
direction	Specifies the text direction/writing direction	2
text-orientation	Defines the orientation of the text in a line	3
text-combine-upright	Specifies the combination of multiple characters into the space of a single character	3
unicode-bidi	Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document	2
writing-mode		3

Table Properties

Property	Description	CSS
border-collapse	Specifies whether or not table borders should be collapsed	2
border-spacing	Specifies the distance between the borders of adjacent cells	2
caption-side	Specifies the placement of a table caption	2
empty-cells	Specifies whether or not to display borders and background on empty cells in a table	2
table-layout	Sets the layout algorithm to be used for a table	2

Lists and Counters Properties

Property	Description	CSS
counter-increment	Increments one or more counters	2
counter-reset	Creates or resets one or more counters	2
list-style	Sets all the properties for a list in one declaration	1
list-style-image	Specifies an image as the list-item marker	1
list-style-position	Specifies if the list-item markers should appear inside or outside the content flow	1
list-style-type	Specifies the type of list-item marker	1

Animation Properties

Property	Description	CSS
@keyframes	Specifies the animation	3
animation	A shorthand property for all the animation properties below, except the animation-play-state property	3
animation-delay	Specifies when the animation will start	3
animation-direction	Specifies whether or not the animation should play in reverse on alternate cycles	3
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle	3
animation-fill-mode	Specifies what values are applied by the animation outside the time it is executing	3
animation-iteration-count	Specifies the number of times an animation should be played	3
animation-name	Specifies a name for the @keyframes animation	3
animation-timing-function	Specifies the speed curve of the animation	3
animation-play-state	Specifies whether the animation is running or paused	3

Transform Properties

Property	Description	CSS
backface-visibility	Defines whether or not an element should be visible when not facing the screen	3
perspective	Specifies the perspective on how 3D elements are viewed	3
perspective-origin	Specifies the bottom position of 3D elements	3
transform	Applies a 2D or 3D transformation to an element	3
transform-origin	Allows you to change the position on transformed elements	3
transform-style	Specifies how nested elements are rendered in 3D space	3

Transitions Properties

Property	Description	CSS
transition	A shorthand property for setting the four transition properties	3
transition-property	Specifies the name of the CSS property the transition effect is for	3
transition-duration	Specifies how many seconds or milliseconds a transition effect takes to complete	3
transition-timing-function	Specifies the speed curve of the transition effect	3
transition-delay	Specifies when the transition effect will start	3

Basic User Interface Properties

Property	Description	CSS
box-sizing	Tells the browser what the sizing properties (width and height) should include	3
content	Used with the :before and :after pseudo-elements, to insert generated content	2
cursor	Specifies the type of cursor to be displayed	2
icon	Provides the author the ability to style an element with an iconic equivalent	3
ime-mode	Controls the state of the input method editor for text fields	3
nav-down	Specifies where to navigate when using the arrow-down navigation key	3
nav-index	Specifies the tabbing order for an element	3
nav-left	Specifies where to navigate when using the arrow-left navigation key	3
nav-right	Specifies where to navigate when using the arrow-right navigation key	3
nav-up	Specifies where to navigate when using the arrow-up navigation key	3
outline	Sets all the outline properties in one declaration	2
outline-color	Sets the color of an outline	2
outline-offset	Offsets an outline, and draws it beyond the border edge	3
outline-style	Sets the style of an outline	2
outline-width	Sets the width of an outline	2
resize	Specifies whether or not an element is resizable by the user	3
text-overflow	Specifies what should happen when text overflows the containing element	3

Multi-column Layout Properties

Property	Description	CSS
break-after	Specifies the page-, column-, or region-break behavior after the generated box	3
break-before	Specifies the page-, column-, or region-break behavior before the generated box	3
break-inside	Specifies the page-, column-, or region-break behavior inside the generated box	3
column-count	Specifies the number of columns an element should be divided into	3
column-fill	Specifies how to fill columns	3
column-gap	Specifies the gap between the columns	3
column-rule	A shorthand property for setting all the column-rule-* properties	3
column-rule-color	Specifies the color of the rule between columns	3
column-rule-style	Specifies the style of the rule between columns	3
column-rule-width	Specifies the width of the rule between columns	3
column-span	Specifies how many columns an element should span across	3
column-width	Specifies the width of the columns	3
columns	A shorthand property for setting column-width and column-count	3
widows	Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element	2

Paged Media

Property	Description	CSS
orphans	Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element	2
page-break-after	Sets the page-breaking behavior after an element	2
page-break-before	Sets the page-breaking behavior before an element	2
page-break-inside	Sets the page-breaking behavior inside an element	2

Generated Content for Paged Media

Property	Description	CSS
marks	Adds crop and/or cross marks to the document	3
quotes	Sets the type of quotation marks for embedded quotations	2

Filter Effects Properties

Property	Description	CSS
filter	Defines effects (e.g. blurring or color shifting) on an element before the element is displayed	3

Image Values and Replaced Content

Property	Description	CSS
image-orientation	Specifies a rotation in the right or clockwise direction that a user agent applies to an image (This property is likely going to be deprecated and its functionality moved to HTML)	3
image-rendering	Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled	3
image-resolution	Specifies the intrinsic resolution of all raster images used in/on the element	3
object-fit	Specifies how the contents of a replaced element should be fitted to the box established by its used height and width	3
object-position	Specifies the alignment of the replaced element inside its box	3

Masking Properties

Property	Description	CSS
mask		3
mask-type		3

Speech Properties

Property	Description	CSS
mark	A shorthand property for setting the mark-before and mark-after properties	3
mark-after	Allows named markers to be attached to the audio stream	3
mark-before	Allows named markers to be attached to the audio stream	3
phonemes	Specifies a phonetic pronunciation for the text contained by the corresponding element	3
rest	A shorthand property for setting the rest-before and rest-after properties	3
rest-after	Specifies a rest or prosodic boundary to be observed after speaking an element's content	3
rest-before	Specifies a rest or prosodic boundary to be observed before speaking an element's content	3
voice-balance	Specifies the balance between left and right channels	3
voice-duration	Specifies how long it should take to render the selected element's content	3
voice-pitch	Specifies the average pitch (a frequency) of the speaking voice	3
voice-pitch-range	Specifies variation in average pitch	3
voice-rate	Controls the speaking rate	3
voice-stress	Indicates the strength of emphasis to be applied	3
voice-volume	Refers to the amplitude of the waveform output by the speech synthesises	3

Marquee Properties

Property	Description	CSS
marquee-direction	Sets the direction of the moving content	3
marquee-play-count	Sets how many times the content move	3
marquee-speed	Sets how fast the content scrolls	3
marquee-style	Sets the style of the moving content	3

HTML & HTML5 Tags

Tags	Description
<!--...-->	Defines a comment
<!DOCTYPE>	Defines the document type
<a>	Defines a hyperlink
<abbr>	Defines an abbreviation or an acronym
<acronym>	Not supported in HTML5. Use <abbr> instead.Defines an acronym
<address>	Defines contact information for the author/owner of a document
<applet>	Not supported in HTML5. Use <object> instead.Defines an embedded applet
<area>	Defines an area inside an image-map
<article>	Defines an article
<aside>	Defines content aside from the page content
<audio>	Defines sound content
<b>	Defines bold text
<base>	Specifies the base URL/target for all relative URLs in a document
<basefont>	Not supported in HTML5. Use CSS instead.Specifies a default color, size, and font for all text in a document
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo>	Overrides the current text direction
<big>	Not supported in HTML5. Use CSS instead.Defines big text
<blockquote>	Defines a section that is quoted from another source
<body>	Defines the document's body
<br>	Defines a single line break
<button>	Defines a clickable button
<canvas>	Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption>	Defines a table caption
<center>	Not supported in HTML5. Use CSS instead.Defines centered text
<cite>	Defines the title of a work
<code>	Defines a piece of computer code
<col>	Specifies column properties for each column within a <colgroup> element
<colgroup>	Specifies a group of one or more columns in a table for formatting
<datalist>	Specifies a list of pre-defined options for input controls
<dd>	Defines a description/value of a term in a description list
<del>	Defines text that has been deleted from a document
<details>	Defines additional details that the user can view or hide
<dfn>	Represents the defining instance of a term
<dialog>	Defines a dialog box or window
<dir>	Not supported in HTML5. Use <ul> instead.Defines a directory list
<div>	Defines a section in a document
<dl>	Defines a description list
<dt>	Defines a term/name in a description list
<em>	Defines emphasized text
<embed>	Defines a container for an external (non-HTML) application
<fieldset>	Groups related elements in a form
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content
<font>	Not supported in HTML5. Use CSS instead.Defines font, color, and size for text
<footer>	Defines a footer for a document or section
<form>	Defines an HTML form for user input
<frame>	Not supported in HTML5.Defines a window (a frame) in a frameset
<frameset>	Not supported in HTML5.Defines a set of frames
<h1> to <h6>	Defines HTML headings
<head>	Defines information about the document
<header>	Defines a header for a document or section
<hgroup>	Defines a group of headings
<hr>	Defines a thematic change in the content
<html>	Defines the root of an HTML document
<i>	Defines a part of text in an alternate voice or mood
<iframe>	Defines an inline frame
<img>	Defines an image
<input>	Defines an input control
<ins>	Defines a text that has been inserted into a document
<kbd>	Defines keyboard input
<keygen>	Defines a key-pair generator field (for forms)
<label>	Defines a label for an <input> element
<legend>	Defines a caption for a <fieldset> element
<li>	Defines a list item
<link>	Defines the relationship between a document and an external resource (most used to link to style sheets)
<main>	Specifies the main content of a document
<map>	Defines a client-side image-map
<mark>	Defines marked/highlighted text
<menu>	Defines a list/menu of commands
<menuitem>	Defines a command/menu item that the user can invoke from a popup menu
<meta>	Defines metadata about an HTML document
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links
<noframes>	Not supported in HTML5.Defines an alternate content for users that do not support frames
<noscript>	Defines an alternate content for users that do not support client-side scripts
<object>	Defines an embedded object
<ol>	Defines an ordered list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<output>	Defines the result of a calculation
<p>	Defines a paragraph
<param>	Defines a parameter for an object
<pre>	Defines preformatted text
<progress>	Represents the progress of a task
<q>	Defines a short quotation
<rp>	Defines what to show in browsers that do not support ruby annotations
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>	Defines a ruby annotation (for East Asian typography)
<s>	Defines text that is no longer correct
<samp>	Defines sample output from a computer program
<script>	Defines a client-side script
<section>	Defines a section in a document
<select>	Defines a drop-down list
<small>	Defines smaller text
<source>	Defines multiple media resources for media elements (<video> and <audio>)
<span>	Defines a section in a document
<strike>	Not supported in HTML5. Use <del> instead.Defines strikethrough text
<strong>	Defines important text
<style>	Defines style information for a document
<sub>	Defines subscripted text
<summary>	Defines a visible heading for a <details> element
<sup>	Defines superscripted text
<table>	Defines a table
<tbody>	Groups the body content in a table
<td>	Defines a cell in a table
<textarea>	Defines a multiline input control (text area)
<tfoot>	Groups the footer content in a table
<th>	Defines a header cell in a table
<thead>	Groups the header content in a table
<time>	Defines a date/time
<title>	Defines a title for the document
<tr>	Defines a row in a table
<track>	Defines text tracks for media elements (<video> and <audio>)
<tt>	Not supported in HTML5. Use CSS instead.Defines teletype text
<u>	Defines text that should be stylistically different from normal text
<ul>	Defines an unordered list
<var>	Defines a variable
<video>	Defines a video or movie
<wbr>	Defines a possible line-break

JavaScript Libraries

Prototype JS
====================
Prototype enhances JavaScript by providing classes and inheritance.
http://prototypejs.org/learn/
http://api.prototypejs.org/dom/dollar/

MooTools
=================
MooTools also includes some lightweight effects and animation functions.

Script.aculo.us
====================
Open-source JavaScript framework for visual effects and interface behaviors.

UIZE 
========================
Widgets, AJAX, DOM, templates, and more.

Ext Core
==============

jsPHP
==============
Pseudo-implementation of JavaScript for PHP 5
Following Attributes Available in Language

1.     prototype inheritence, chaining and other object oriented features
2.     JSBoolean, JSNumber, JSString, JSObject, JSArray, JSFunction, JSRegExp, JSDate, JSError and JSMath, as well as the global helper functions, such as parseInt or isNaN.

Tutorial
http://www.jsphp.org/tutorial
Download
https://github.com/SOLFENIX/jsphp
How to
http://www.dyn-web.com/javascript/
Important
http://www.dyn-web.com/sitemap.php

JSDoc
==========
Doc generators

JS Charts
==========
JS Charts is a JavaScript based chart generator that requires little or no coding
Just include our scripts, prepare your chart data in XML, JSON or JavaScript Array and your chart is ready!
http://www.jscharts.com/how-to-use
http://www.jscharts.com/

highlight.js
==================
Syntax highlighting for the Web
https://highlightjs.org/static/demo/
How to Use
https://highlightjs.org/usage/
Download
https://highlightjs.org/download/

Crayon Syntax Highlighter
===========================
For Wordpress
https://github.com/aramk/crayon-syntax-highlighter/blob/master/crayon_formatter.class.php
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

Source for Javascript Libraries
https://www.javascripting.com/

Javascript Tags Must Use

<!-- Redirect in case javascript is disabled on the page -->
<noscript>
   <meta http-equiv="refresh" content="0; url=http://www.espncricinfo.com/australia-v-india-2014-15/engine/current/match/754741.html?version=iframe" />
</noscript>

<!-- Redirect in case of browsers less than IE8 -->
<!--[if lt IE 8]>
   <meta http-equiv="refresh" content="0; url=http://www.espncricinfo.com/australia-v-india-2014-15/engine/current/match/754741.html?version=iframe" />
<![endif]-->

LightBox

HOW TO USE
====================
Step 1 - Load the Javascript and CSS

1. Download and unzip the latest version of Lightbox.
2. Look inside the js folder to find jquery-1.11.0.min.js and lightbox.min.js and load both of these files. Load jQuery first.
3. <script src="js/jquery-1.11.0.min.js"></script>
4. <script src="js/lightbox.min.js"></script>
5. Look inside the css folder to find lightbox.css and load it.
6. <link href="css/lightbox.css" rel="stylesheet" />
7. Look inside the img folder to find close.png, loading.gif, prev.png, and next.png. These files are used in lightbox.css. By default, lightbox.css will look for these images in a folder called img.

Step 2 - Turn it on

1. Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
2. <a href="img/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a>
3. Optional: Add a data-title attribute if you want to show a caption.
4. If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all of the images. 

For example:
<a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

Source:
http://lokeshdhakar.com/projects/lightbox2/

Retina JS

Retina graphics for your website. retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.

How it works
===============
When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

The script assumes you use Apple's prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.

For example, if you have an image on your page that looks like this:
<img src="/images/my_image.png" />

The script will check your server to see if an alternative image exists at this path:
"/images/my_image@2x.png"

How to use
===============
JavaScript
The JavaScript helper script automatically replaces images on your page with high-resolution variants (if they exist). To use it, download the script and include it at the bottom of your page.

• Place the retina.js file on your server
• Include the script on your page 

<script type="text/javascript" src="/scripts/retina.js"></script> 

(put it at the bottom of your template, before your closing </body> tag)
That's it!

LESS
============
The LESS CSS mixin is a helper for applying high-resolution background images in your stylesheet. You provide it with an image path and the dimensions of the original-resolution image. The mixin creates a media query specifically for Retina displays, changes the background image for the selector elements to use the high-resolution (@2x) variant and applies a background-size of the original image in order to maintain proper dimensions. To use it, download the mixin, import or include it in your LESS stylesheet, and apply it to elements of your choice.

Steps:
Syntax:
.at2x(@path, [optional] @width: auto, [optional] @height: auto);

Steps:

• Add the .at2x() mixin from retina.less to your LESS stylesheet
• In your stylesheet, call the .at2x() mixin anywhere instead of using background-image 

#logo {
  .at2x('/images/my_image.png', 200px, 100px);
} 

Will compile to: 

#logo {
  background-image: url('/images/my_image.png');
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px;
  }
}