1. 自由主题
2. 三大框架
   1. Angular
      1. Angular HOME
         1. AngularJS extends HTML with new attributes. AngularJS is perfect for Single Page Applications (SPAs). AngularJS is easy to learn.
         2. 子主题 2
   2. React
   3. Vue
3. 自动化工具
   1. Node
      1. npm
      2. nvm
   2. webpack
   3. bower
   4. gulp
4. 三大基础
   1. CSS
      1. CSS tutorial
         1. HOME
            1. CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed.
         2. Syntax
         3. how to
            1. External style sheet Internal style sheet Inline style
         4. colors
            1. a valid color name - like "red"
            2. an RGB value - like "rgb(255, 0, 0)"
            3. a HEX value - like "#ff0000"
         5. Bg
            1. background-color
            2. background-image
            3. background-repeat
            4. background-attachment
            5. background-position
         6. borders
            1. dotted - Defines a dotted border
            2. dashed - Defines a dashed border
            3. solid - Defines a solid border
            4. double - Defines a double border
            5. groove - Defines a 3D grooved border. The effect depends on the border-color value
            6. ridge - Defines a 3D ridged border. The effect depends on the border-color value
            7. inset - Defines a 3D inset border. The effect depends on the border-color value
            8. outset - Defines a 3D outset border. The effect depends on the border-color value
            9. none - Defines no border
            10. hidden - Defines a hidden border
         7. margins
            1. All the margin properties can have the following values:
            2. auto - the browser calculates the margin
            3. length - specifies a margin in px, pt, cm, etc.
            4. % - specifies a margin in % of the width of the containing element
            5. inherit - specifies that the margin should be inherited from the parent element
         8. padding
            1. All the padding properties can have the following values:
            2. length - specifies a padding in px, pt, cm, etc.
            3. % - specifies a padding in % of the width of the containing element
            4. inherit - specifies that the padding should be inherited from the parent element
         9. H/W
            1. Note: The height and width properties do not include padding, borders, or margins; they set the height/width of the area inside the padding, border, and margin of the element!
         10. box model
             1. box parts
             2. Explanation of the different parts:
             3. Content - The content of the box, where text and images appear
             4. Padding - Clears an area around the content. The padding is transparent
             5. Border - A border that goes around the padding and content
             6. Margin - Clears an area outside the border. The margin is transparent
             7. The box model allows us to add a border around elements, and to define space between elements.
             8. Width and Height of an Element
             9. Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
         11. Outline
             1. The CSS outline properties specify the style, color, and width of an outline. An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". However, the outline property is different from the border property - The outline is NOT a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.
             2. outline style
             3. Note: None of the OTHER CSS outline properties described below will have ANY effect unless the outline-style property is set!
             4. dotted - Defines a dotted outline
             5. dashed - Defines a dashed outline
             6. solid - Defines a solid outline
             7. double - Defines a double outline
             8. groove - Defines a 3D grooved outline. The effect depends on the outline-color value
             9. ridge - Defines a 3D ridged outline. The effect depends on the outline-color value
             10. inset - Defines a 3D inset outline. The effect depends on the outline-color value
             11. outset - Defines a 3D outset outline. The effect depends on the outline-color value
             12. none - Defines no outline
             13. hidden - Defines a hidden outline
         12. text
             1. Note: For W3C compliant CSS: If you define the color property, you must also define the background-color
             2. Note: It is not recommended to underline text that is not a link, as this often confuses the reader.
             3. Text Transformation
             4. p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; }
             5. 子主题 4
             6. Property Description
             7. color Sets the color of text
             8. direction Specifies the text direction/writing direction
             9. letter-spacing Increases or decreases the space between characters in a text
             10. line-height Sets the line height
             11. text-align Specifies the horizontal alignment of text
             12. text-decoration Specifies the decoration added to text
             13. text-indent Specifies the indentation of the first line in a text-block
             14. text-shadow Specifies the shadow effect added to text
             15. text-transform Controls the capitalization of text
             16. 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
             17. vertical-align Sets the vertical alignment of an element
             18. white-space Specifies how white-space inside an element is handled
             19. word-spacing Increases or decreases the space between words in a text
         13. fonts
             1. Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.
         14. icons
             1. How To Add Icons The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. Add the name of the specified icon class to any inline HTML element (like <i> or <span>). All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)
         15. links
             1. The four links states are:
             2. a:link - a normal, unvisited link
             3. a:visited - a link the user has visited
             4. a:hover - a link when the user mouses over it
             5. a:active - a link the moment it is clicked
             6. When setting the style for several link states, there are some order rules: a:hover MUST come after a:link and a:visited a:active MUST come after a:hover
         16. lists
             1. Property Description
             2. list-style Sets all the properties for a list in one declaration
             3. list-style-image Specifies an image as the list-item marker
             4. list-style-position Specifies if the list-item markers should appear inside or outside the content flow
             5. list-style-type Specifies the type of list-item marker
         17. tables
             1. CSS Table Properties
             2. Property Description
             3. border Sets all the border properties in one declaration
             4. border-collapse Specifies whether or not table borders should be collapsed
             5. border-spacing Specifies the distance between the borders of adjacent cells
             6. caption-side Specifies the placement of a table caption
             7. empty-cells Specifies whether or not to display borders and background on empty cells in a table
             8. table-layout Sets the layout algorithm to be used for a table
         18. display
             1. CSS Display/Visibility Properties
             2. Property Description
             3. display Specifies how an element should be displayed
             4. visibility Specifies whether or not an element should be visible
         19. position
             1. static
             2. HTML elements are positioned static by default.
             3. Static positioned elements are not affected by the top, bottom, left, and right properties.
             4. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:
             5. relative
             6. positioned relative to its normal position.
             7. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
             8. fixed
             9. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
             10. A fixed element does not leave a gap in the page where it would normally have been located.
             11. absolute
             12. An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
             13. However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
             14. Note: A "positioned" element is one whose position is anything except static.
             15. overlapping elements
             16. When elements are positioned, they can overlap other elements.
             17. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
             18. An element can have a positive or negative stack order:
             19. all css positioning property
             20. Property Description
             21. bottom Sets the bottom margin edge for a positioned box
             22. clip Clips an absolutely positioned element
             23. cursor Specifies the type of cursor to be displayed
             24. left Sets the left margin edge for a positioned box
             25. overflow Specifies what happens if content overflows an element's box
             26. overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area
             27. overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area
             28. position Specifies the type of positioning for an element
             29. right Sets the right margin edge for a positioned box
             30. top Sets the top margin edge for a positioned box
             31. z-index Sets the stack order of an element
         20. overflow
             1. The CSS overflow property specifies whether to clip content or to add scrollbars when the content of an element is too big to fit in a specified area.
             2. The overflow property has the following values: visible - Default. The overflow is not clipped. It renders outside the element's box hidden - The overflow is clipped, and the rest of the content will be invisible scroll - The overflow is clipped, but a scrollbar is added to see the rest of the content auto - If overflow is clipped, a scrollbar should be added to see the rest of the content Note: The overflow property only works for block elements with a specified height. Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though "overflow:scroll" is set).
         21. float
             1. The float property specifies whether or not an element should float.
             2. The clear property is used to control the behavior of floating elements.
             3. The clearfix Hack - overflow: auto; If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. Then we can add overflow: auto; to the containing element to fix this problem:
             4. Web Layout Example It is common to do entire web layouts using the float property:
         22. inline-block
             1. The inline-block Value It has been possible for a long time to create a grid of boxes that fills the browser width and wraps nicely (when the browser is resized), by using the float property. However, the inline-block value of the display property makes this even easier. inline-block elements are like inline elements but they can have a width and a height.
         23. align
             1. CSS Layout - Horizontal & Vertical Align
             2. Center Align Elements To horizontally center a block element (like <div>), use margin: auto; Setting the width of the element will prevent it from stretching out to the edges of its container. The element will then take up the specified width, and the remaining space will be split equally between the two margins:
         24. combinators
             1. A combinator is something that explains the relationship between the selectors.
             2. There are four different combinators in CSS3:
             3. 后代Fn：descendant selector (space)
             4. 子代F1：child selector (>)
             5. 邻系：adjacent sibling selector (+)
             6. 同系：general sibling selector (~)
         25. pseudo-classes
             1. What are Pseudo-classes?
             2. A pseudo-class is used to define a special state of an element.
             3. Style an element when a user mouses over it
             4. Style visited and unvisited links differently
             5. Style an element when it gets focus
             6. Syntax The syntax of pseudo-classes: selector:pseudo-class { property:value; }
             7. Anchor Pseudo-classes Links can be displayed in different ways:
             8. Pseudo-classes and CSS Classes Pseudo-classes can be combined with CSS classes: When you hover over the link in the example, it will change color:
             9. Hover on <div> An example of using the :hover pseudo-class on a <div> element:
             10. Simple Tooltip Hover Hover over a <div> element to show a <p> element (like a tooltip): p { display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; }
             11. CSS - The :first-child Pseudo-class
             12. Match the first <i> element in all <p> elements p i:first-child { color: blue; }
             13. Match all <i> elements in all first child <p> elements p:first-child i { color: blue; }
             14. CSS - The :lang Pseudo-class The :lang pseudo-class allows you to define special rules for different languages. In the example below, :lang defines the quotation marks for <q> elements with lang="no":
             15. 伪类和为元素
             16. All CSS Pseudo Classes
             17. Selector Example Example description
             18. :active a:active Selects the active link
             19. :checked input:checked Selects every checked <input> element
             20. :disabled input:disabled Selects every disabled <input> element
             21. :empty p:empty Selects every <p> element that has no children
             22. :enabled input:enabled Selects every enabled <input> element
             23. :first-child p:first-child Selects every <p> elements that is the first child of its parent
             24. :first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
             25. :focus input:focus Selects the <input> element that has focus
             26. :hover a:hover Selects links on mouse over
             27. :in-range input:in-range Selects <input> elements with a value within a specified range
             28. :invalid input:invalid Selects all <input> elements with an invalid value
             29. :lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
             30. :last-child p:last-child Selects every <p> elements that is the last child of its parent
             31. :last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
             32. :link a:link Selects all unvisited links
             33. :not(selector) :not(p) Selects every element that is not a <p> element
             34. :nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
             35. :nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
             36. :nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
             37. :nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
             38. :only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
             39. :only-child p:only-child Selects every <p> element that is the only child of its parent
             40. :optional input:optional Selects <input> elements with no "required" attribute
             41. :out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
             42. :read-only input:read-only Selects <input> elements with a "readonly" attribute specified
             43. :read-write input:read-write Selects <input> elements with no "readonly" attribute
             44. :required input:required Selects <input> elements with a "required" attribute specified
             45. :root root Selects the document's root element
             46. :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
             47. :valid input:valid Selects all <input> elements with a valid value
             48. :visited a:visited Selects all visited links
             49. All CSS Pseudo Elements
             50. Selector Example Example description
             51. ::after p::after Insert content after every <p> element
             52. ::before p::before Insert content before every <p> element
             53. ::first-letter p::first-letter Selects the first letter of every <p> element
             54. ::first-line p::first-line Selects the first line of every <p> element
             55. ::selection p::selection Selects the portion of an element that is selected by a user
         26. Pseudo-Elements
             1. Style the first letter, or line, of an element Insert content before, or after, the content of an element
             2. selector::pseudo-element { property:value; }
             3. The ::first-letter Pseudo-element
             4. The ::first-line Pseudo-element
             5. Pseudo-elements and CSS Classes
         27. opacity/transparency
             1. Transparent Hover Effect
             2. The opacity property is often used together with the :hover selector to change the opacity on mouse-over:
         28. navigation bar
             1. Navigation Bar = List of Links ul>li*n>a ul { list-style-type: none; margin: 0; padding: 0; } li a { display: block; width: 60px; background-color: #dddddd; }
             2. ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; border: 1px solid #555; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; } li a.active { background-color: #4CAF50; color: white; } li a:hover:not(.active) { background-color: #555; color: white; }
             3. body {margin: 0;} ul.sidenav { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } ul.sidenav li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } ul.sidenav li a.active { background-color: #4CAF50; color: white; } ul.sidenav li a:hover:not(.active) { background-color: #555; color: white; } div.content { margin-left: 25%; padding: 1px 16px; height: 1000px; } @media screen and (max-width: 1050px){ ul.sidenav { width:100%; height:auto; position:relative; } ul.sidenav li a { float: left; padding: 15px; } div.content {margin-left:0;} } @media screen and (max-width: 400px){ ul.sidenav li a { text-align: center; float: none; } }
         29. dropdowns
             1. basic example
             2. <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <h2>Hoverable Dropdown</h2> <p>Move the mouse over the text below to open the dropdown content.</p> <div class="dropdown"> <span>Mouse over me</span> <div class="dropdown-content"> <p>Hello World!</p> </div> </div>
         30. tooltip
             1. A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:
             2. .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; }
         31. image gallery
             1. div.img { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.img:hover { border: 1px solid #777; } div.img img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; }
         32. image sprites
             1. An image sprite is a collection of images put into a single image.
             2. A web page with many images can take a long time to load and generates multiple server requests.
             3. Using image sprites will reduce the number of server requests and save bandwidth.
         33. attribute selectors
             1. CSS [attribute] Selector
             2. CSS [attribute="value"] Selector
             3. CSS [attribute~="value"] Selector
             4. CSS [attribute|="value"] Selector
             5. CSS [attribute^="value"] Selector
             6. CSS [attribute$="value"] Selector
             7. CSS [attribute*="value"] Selector
         34. forms
         35. counters
             1. body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; }
      2. CSS3
         1. rounded corners
            1. CSS3 border-radius Property
         2. border images
            1. The CSS3 border-image property allows you to specify an image to be used instead of the normal border around an element.
         3. backgrounds
            1. CSS3 Background Properties
            2. Property Description
            3. background A shorthand property for setting all the background properties in one declaration
            4. background-clip Specifies the painting area of the background
            5. background-image Specifies one or more background images for an element
            6. background-origin Specifies where the background image(s) is/are positioned
            7. background-size Specifies the size of the background image(s)
         4. colors
         5. gradient
            1. Linear Gradients (goes down/up/left/right/diagonally)
            2. Radial Gradients (defined by their center)
         6. shadow effects
            1. text-shadow
            2. box-shadow
         7. text
            1. Property Description
            2. text-align-last Specifies how to align the last line of a text
            3. text-emphasis A shorthand for setting text-emphasis-style and text-emphasis-color in one declaration
            4. text-justify Specifies how justified text should be aligned and spaced
            5. text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
            6. word-break Specifies line breaking rules for non-CJK scripts
            7. word-wrap Allows long words to be able to be broken and wrap onto the next line
         8. fonts
            1. Descriptor Values Description
            2. font-family name Required. Defines a name for the font
            3. src URL Required. Defines the URL of the font file
            4. font-stretch normal
            5. condensed
            6. ultra-condensed
            7. extra-condensed
            8. semi-condensed
            9. expanded
            10. semi-expanded
            11. extra-expanded
            12. ultra-expanded Optional. Defines how the font should be stretched. Default is "normal"
            13. font-style normal
            14. italic
            15. oblique Optional. Defines how the font should be styled. Default is "normal"
            16. font-weight normal
            17. bold
            18. 100
            19. 200
            20. 300
            21. 400
            22. 500
            23. 600
            24. 700
            25. 800
            26. 900 Optional. Defines the boldness of the font. Default is "normal"
            27. unicode-range unicode-range Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF"
         9. 2d transform
         10. 3d transform
         11. transitions
         12. animations
         13. images
         14. buttons
         15. pagination examples
         16. multiple columns
         17. user interface
         18. box sizing
         19. flexible box
      3. Responsive Web Design
         1. intro
            1. What is Responsive Web Design? Responsive web design makes your web page look good on all devices. Responsive web design uses only HTML and CSS. Responsive web design is not a program or a JavaScript.
         2. The Viewport
            1. Viewport
            2. The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size. Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen. This was not perfect!! But a quick fix.
            3. Setting The Viewport
            4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
            5. Size Content to The Viewport
            6. Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally! So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience. Some additional rules to follow: 1. Do NOT use large fixed width elements - For example, if an image is displayed at a width wider than the viewport it can cause the viewport to scroll horizontally. Remember to adjust this content to fit within the width of the viewport. 2. Do NOT let the content rely on a particular viewport width to render well - Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well. 3. Use CSS media queries to apply different styling for small and large screens - Setting large absolute CSS widths for page elements, will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.
         3. Grid View
            1. Many web pages are based on a grid-view, which means that the page is divided into columns:
            2. Building a Responsive Grid-View box-sizing: border-box;
         4. Media Queries
            1. @media only screen and (max-width: 500px) { body { background-color: lightblue; } }
         5. Images
            1. If the width property is set to 100%, the image will be responsive and scale up and down:
            2. Using The max-width Property
            3. Add an Image to The Example Web Page
            4. div { width: 100%; height: 400px; background-image: url('img_flowers.jpg'); background-repeat: no-repeat; background-size: contain; border: 1px solid red; }
            5. HTML5 <picture> Element
         6. Videos
         7. Frameworks
         8. Templates
   2. javascript
      1. DOM
         1. DOM HTML tree
            1. With the object model, JavaScript gets all the power it needs to create dynamic HTML:
            2. JavaScript can change all the HTML elements in the page
            3. JavaScript can change all the HTML attributes in the page
            4. JavaScript can change all the CSS styles in the page
            5. JavaScript can remove existing HTML elements and attributes
            6. JavaScript can add new HTML elements and attributes
            7. JavaScript can react to all existing HTML events in the page
            8. JavaScript can create new HTML events in the page
            9. What You Will Learn
            10. How to change the content of HTML elements
            11. How to change the style (CSS) of HTML elements
            12. How to react to HTML DOM events
            13. How to add and delete HTML elements
            14. What is the DOM?
            15. "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
            16. The W3C DOM standard is separated into 3 different parts:
            17. Core DOM - standard model for all document types
            18. XML DOM - standard model for XML documents
            19. HTML DOM - standard model for HTML documents
            20. The HTML DOM is a standard object model and programming interface for HTML. It defines:
            21. The HTML elements as objects
            22. The properties of all HTML elements
            23. The methods to access all HTML elements
            24. The events for all HTML elements
            25. In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
         2. JavaScript - HTML DOM Methods
            1. HTML DOM methods are actions you can perform (on HTML Elements).
            2. HTML DOM properties are values (of HTML Elements) that you can set or change.
            3. The DOM Programming Interface
            4. In the DOM, all HTML elements are defined as objects.
            5. The programming interface is the properties and methods of each object.
            6. A property is a value that you can get or set (like changing the content of an HTML element).
            7. A method is an action you can do (like add or deleting an HTML element).
         3. JavaScript HTML DOM Document
            1. The HTML DOM document object is the owner of all other objects in your web page.
            2. Finding HTML Elements
            3. Method Description
            4. document.getElementById(id) Find an element by element id
            5. document.getElementsByTagName(name) Find elements by tag name
            6. document.getElementsByClassName(name) Find elements by class name
            7. Changing HTML Elements
            8. Method Description
            9. element.innerHTML = new html content Change the inner HTML of an element
            10. element.attribute = new value Change the attribute value of an HTML element
            11. element.setAttribute(attribute, value) Change the attribute value of an HTML element
            12. element.style.property = new style Change the style of an HTML element
            13. Adding and Deleting Elements
            14. Method Description
            15. document.createElement(element) Create an HTML element
            16. document.removeChild(element) Remove an HTML element
            17. document.appendChild(element) Add an HTML element
            18. document.replaceChild(element) Replace an HTML element
            19. document.write(text) Write into the HTML output stream
            20. Adding Events Handlers
            21. Method Description
            22. document.getElementById(id).onclick = function(){code} Adding event handler code to an onclick event
            23. Finding HTML Objects
            24. Property Description DOM
            25. document.anchors Returns all <a> elements that have a name attribute 1
            26. document.applets Returns all <applet> elements (Deprecated in HTML5) 1
            27. document.baseURI Returns the absolute base URI of the document 3
            28. document.body Returns the <body> element 1
            29. document.cookie Returns the document's cookie 1
            30. document.doctype Returns the document's doctype 3
            31. document.documentElement Returns the <html> element 3
            32. document.documentMode Returns the mode used by the browser 3
            33. document.documentURI Returns the URI of the document 3
            34. document.domain Returns the domain name of the document server 1
            35. document.domConfig Obsolete. Returns the DOM configuration 3
            36. document.embeds Returns all <embed> elements 3
            37. document.forms Returns all <form> elements 1
            38. document.head Returns the <head> element 3
            39. document.images Returns all <img> elements 1
            40. document.implementation Returns the DOM implementation 3
            41. document.inputEncoding Returns the document's encoding (character set) 3
            42. document.lastModified Returns the date and time the document was updated 3
            43. document.links Returns all <area> and <a> elements that have a href attribute 1
            44. document.readyState Returns the (loading) status of the document 3
            45. document.referrer Returns the URI of the referrer (the linking document) 1
            46. document.scripts Returns all <script> elements 3
            47. document.strictErrorChecking Returns if error checking is enforced 3
            48. document.title Returns the <title> element 1
            49. document.URL Returns the complete URL of the document 1
         4. JavaScript HTML DOM Elements
            1. This page teaches you how to find and access HTML elements in an HTML page.
            2. Finding HTML Elements
            3. Finding HTML elements by id
            4. Finding HTML elements by tag name
            5. Finding HTML elements by class name
            6. Finding HTML elements by CSS selectors
            7. Finding HTML elements by HTML object collections
            8. var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length; i++) { text += x.elements[i].value + "<br>"; } document.getElementById("demo").innerHTML = text;
         5. JavaScript HTML DOM - Changing HTML
            1. The HTML DOM allows JavaScript to change the content of HTML elements.
         6. JavaScript HTML DOM - Changing CSS
            1. The HTML DOM allows JavaScript to change the style of HTML elements.
         7. JavaScript HTML DOM Animation
         8. JavaScript HTML DOM Events
         9. JavaScript HTML DOM EventListener
            1. The addEventListener() method attaches an event handler to the specified element. The addEventListener() method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to one element. You can add many event handlers of the same type to one element, i.e two "click" events. You can add event listeners to any DOM object not only HTML elements. i.e the window object. The addEventListener() method makes it easier to control how the event reacts to bubbling. When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup. You can easily remove an event listener by using the removeEventListener() method.
         10. JavaScript HTML DOM Navigation
             1. With the HTML DOM, you can navigate the node tree using node relationships.
             2. DOM Nodes
             3. According to the W3C HTML DOM standard, everything in an HTML document is a node:
             4. The entire document is a document node
             5. Every HTML element is an element node
             6. The text inside HTML elements are text nodes
             7. Every HTML attribute is an attribute node
             8. All comments are comment nodes
             9. Navigating Between Nodes
             10. parentNode
             11. childNodes[nodenumber]
             12. firstChild
             13. lastChild
             14. nextSibling
             15. previousSibling
             16. The nodeName Property
             17. nodeName is read-only
             18. nodeName of an element node is the same as the tag name
             19. nodeName of an attribute node is the attribute name
             20. nodeName of a text node is always #text
             21. nodeName of the document node is always #document
             22. Note: nodeName always contains the uppercase tag name of an HTML element.
             23. The nodeValue Property
             24. The nodeValue property specifies the value of a node.
             25. nodeValue for element nodes is undefined
             26. nodeValue for text nodes is the text itself
             27. nodeValue for attribute nodes is the attribute value
             28. The nodeType Property
             29. The most important node types are:
             30. Element type NodeType
             31. Element 1
             32. Attribute 2
             33. Text 3
             34. Comment 8
             35. Document 9
         11. JavaScript HTML DOM Elements (Nodes)
             1. Creating New HTML Elements (Nodes)
             2. var para = document.createElement("p");
             3. var node = document.createTextNode("This is new.");
             4. para.appendChild(node);
             5. var element = document.getElementById("div1");
             6. element.appendChild(para);
             7. Creating new HTML Elements - insertBefore()
             8. Removing Existing HTML Elements
             9. parent.removeChild(child);
             10. The method node.remove() is implemented in the DOM 4 specification.
             11. But because of poor browser support, you should not use it.
             12. Replacing HTML Elements
             13. parent.replaceChild(para,child);
         12. JavaScript HTML DOM Node List
             1. A node list is a collection of nodes
             2. HTML DOM Node List Length
      2. ES
         1. ES5
            1. JavaScript Forms
            2. JavaScript Objects
            3. In JavaScript, objects are king. If you understand objects, you understand JavaScript.
            4. Booleans can be objects (or primitive data treated as objects)
            5. Numbers can be objects (or primitive data treated as objects)
            6. Strings can be objects (or primitive data treated as objects)
            7. Dates are always objects
            8. Maths are always objects
            9. Regular expressions are always objects
            10. Arrays are always objects
            11. Functions are always objects
            12. Objects are objects
            13. Objects are Variables Containing Variables
            14. JavaScript variables can contain single values:
            15. var person = "John Doe";
            16. Objects are variables too. But objects can contain many values.
            17. The values are written as name : value pairs (name and value separated by a colon).
            18. Object Properties
            19. Objects written as name value pairs are similar to:
            20. Associative arrays in PHP
            21. Dictionaries in Python
            22. Hash tables in C
            23. Hash maps in Java
            24. Hashes in Ruby and Perl
            25. Object Methods
            26. Methods are actions that can be performed on objects.
            27. Creating a JavaScript Object
            28. Define and create a single object, using an object literal.
            29. Define and create a single object, with the keyword new.
            30. Define an object constructor, and then create objects of the constructed type.
            31. In ECMAScript 5, an object can also be created with the function Object.create().
            32. The two examples above do exactly the same. There is no need to use new Object().
            33. For simplicity, readability and execution speed, use the first one (the object literal method).
            34. Using an Object Constructor
            35. function person(first, last, age, eye) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eye; } var myFather = new person("John", "Doe", 50, "blue"); var myMother = new person("Sally", "Rally", 48, "green");
            36. The this Keyword
            37. In JavaScript, the thing called this, is the object that "owns" the JavaScript code. The value of this, when used in a function, is the object that "owns" the function. The value of this, when used in an object, is the object itself. The this keyword in an object constructor does not have a value. It is only a substitute for the new object. The value of this will become the new object when the constructor is used to create an object. Note that this is not a variable. It is a keyword. You cannot change the value of this.
            38. Built-in JavaScript Constructors
            39. var x1 = new Object(); // A new Object object
            40. var x2 = new String(); // A new String object
            41. var x3 = new Number(); // A new Number object
            42. var x4 = new Boolean(); // A new Boolean object
            43. var x5 = new Array(); // A new Array object
            44. var x6 = new RegExp(); // A new RegExp object
            45. var x7 = new Function(); // A new Function object
            46. var x8 = new Date(); // A new Date object
            47. var x1 = {}; // new object
            48. var x2 = ""; // new primitive string
            49. var x3 = 0; // new primitive number
            50. var x4 = false; // new primitive boolean
            51. var x5 = []; // new array object
            52. var x6 = /()/ // new regexp object
            53. var x7 = function(){}; // new function object
            54. JavaScript Objects are Mutable
            55. Objects are mutable: They are addressed by reference, not by value.
            56. var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} var x = person; x.age = 10; // This will change both x.age and person.age
            57. Note: JavaScript variables are not mutable. Only JavaScript objects.
            58. JavaScript Object Properties
            59. Properties are the most important part of any JavaScript object.
            60. Properties are the values associated with a JavaScript object.
            61. A JavaScript object is a collection of unordered properties.
            62. Properties can usually be changed, added, and deleted, but some are read only.
            63. Accessing JavaScript Properties
            64. objectName.property // person.age
            65. objectName["property"] // person["age"]
            66. objectName[expression] // x = "age"; person[x]
            67. JavaScript for...in Loop
            68. Adding New Properties
            69. Deleting Properties
            70. Property Attributes
            71. All properties have a name. In addition they also have a value. The value is one of the property's attributes. Other attributes are: enumerable, configurable, and writable. These attributes define how the property can be accessed (is it readable?, is it writable?) In JavaScript, all attributes can be read, but only the value attribute can be changed (and only if the property is writable). ( ECMAScript 5 has methods for both getting and setting all property attributes)
            72. Prototype Properties
            73. JavaScript objects inherit the properties of their prototype.
            74. The delete keyword does not delete inherited properties, but if you delete a prototype property, it will affect all objects inherited from the prototype.
            75. JavaScript Object Methods
            76. JavaScript methods are the actions that can be performed on objects.
            77. A JavaScript method is a property containing a function definition.
            78. Methods are functions stored as object properties.
            79. Accessing Object Methods
            80. methodName : function() { code lines }
            81. objectName.methodName()
            82. Using Built-In Methods
            83. var x = message.toUpperCase();
            84. Adding New Methods
            85. JavaScript Object Prototypes
            86. Every JavaScript object has a prototype. The prototype is also an object.
            87. All JavaScript objects inherit their properties and methods from their prototype.
            88. All JavaScript objects inherit the properties and methods from their prototype. Objects created using an object literal, or with new Object(), inherit from a prototype called Object.prototype. Objects created with new Date() inherit the Date.prototype. The Object.prototype is on the top of the prototype chain. All JavaScript objects (Date, Array, RegExp, Function, ....) inherit from the Object.prototype.
            89. Creating a Prototype
            90. The standard way to create an object prototype is to use an object constructor function:
            91. function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; }
            92. The constructor function is the prototype for Person objects. It is considered good practice to name constructor function with an upper-case first letter.
            93. Adding Properties and Methods to Objects
            94. Adding a Property to an Object
            95. Adding a Method to an Object
            96. Adding Properties to a Prototype
            97. To add a new property to a prototype, you must add it to the constructor function:
            98. function Person(first, last, age, eyecolor) { this.firstName = first; this.lastName = last; this.age = age; this.eyeColor = eyecolor; this.nationality = "English" }
            99. Prototype properties can have prototype values (default values).
            100. Adding Methods to a Prototype
            101. Using the prototype Property
            102. Person.prototype.nationality = "English";
            103. Only modify your own prototypes. Never modify the prototypes of standard JavaScript objects.
            104. JavaScript Function Definitions
            105. JavaScript functions are defined with the function keyword.
            106. You can use a function declaration or a function expression.
            107. Function Declarations
            108. function functionName(parameters) { code to be executed }
            109. Function Expressions
            110. var x = function (a, b) {return a * b};
            111. The function above is actually an anonymous function (a function without a name).
            112. Functions stored in variables do not need function names. They are always invoked (called) using the variable name.
            113. The function above ends with a semicolon because it is a part of an executable statement.
            114. The Function() Constructor
            115. Most of the time, you can avoid using the new keyword in JavaScript.
            116. Function Hoisting
            117. Because of this, JavaScript functions can be called before they are declared:
            118. myFunction(5); function myFunction(y) { return y * y; }
            119. Functions defined using an expression are not hoisted.
            120. Self-Invoking Functions
            121. (function () { var x = "Hello!!"; // I will invoke myself })();
            122. The function above is actually an anonymous self-invoking function (function without name).
            123. Functions Can Be Used as Values
            124. Functions are Objects
            125. A function defined as the property of an object, is called a method to the object.
            126. A function designed to create new objects, is called an object constructor.
            127. JavaScript Function Parameters
            128. A JavaScript function does not perform any checking on parameter values (arguments).
            129. Function Parameters and Arguments
            130. Function parameters(形参) are the names listed in the function definition.
            131. Function arguments(实参) are the real values passed to (and received by) the function.
            132. Parameter Rules
            133. JavaScript function definitions do not specify data types for parameters.
            134. JavaScript functions do not perform type checking on the passed arguments.
            135. JavaScript functions do not check the number of arguments received.
            136. Parameter Defaults
            137. If a function is called with missing arguments (less than declared), the missing values are set to: undefined
            138. Sometimes this is acceptable, but sometimes it is better to assign a default value to the parameter:
            139. The Arguments Object
            140. JavaScript functions have a built-in object called the arguments object.
            141. Arguments are Passed by Value
            142. The parameters, in a function call, are the function's arguments.
            143. JavaScript arguments are passed by value: The function only gets to know the values, not the argument's locations.
            144. If a function changes an argument's value, it does not change the parameter's original value.
            145. Changes to arguments are not visible (reflected) outside the function.
            146. Objects are Passed by Reference
            147. In JavaScript, object references are values.
            148. Because of this, objects will behave like they are passed by reference:
            149. If a function changes an object property, it changes the original value.
            150. Changes to object properties are visible (reflected) outside the function.
            151. JavaScript Function Invocation
            152. JavaScript functions can be invoked in 4 different ways.
            153. Each method differs in how this is initialized.
            154. The this Keyword
            155. In JavaScript, the thing called this, is the object that "owns" the current code.
            156. The value of this, when used in a function, is the object that "owns" the function.
            157. Invoking a JavaScript Function
            158. You have already learned that the code inside a JavaScript function will execute when "something" invokes it. The code in a function is not executed when the function is defined. It is executed when the function is invoked. Some people use the term "call a function" instead of "invoke a function". It is also quite common to say "call upon a function", "start a function", or "execute a function". In this tutorial, we will use invoke, because a JavaScript function can be invoked without being called.
            159. The Global Object
            160. When a function is called without an owner object, the value of this becomes the global object.
            161. In a web browser the global object is the browser window.
            162. This example returns the window object as the value of this:
            163. Invoking a function as a global function, causes the value of this to be the global object.
            164. Using the window object as a variable can easily crash your program.
            165. Invoking a Function as a Method
            166. myObject.fullName();
            167. Invoking a function as an object method, causes the value of this to be the object itself.
            168. Invoking a Function with a Function Constructor
            169. var x = new myFunction("John","Doe");
            170. If a function invocation is preceded with the new keyword, it is a constructor invocation.
            171. Invoking a Function with a Function Method
            172. In JavaScript, functions are objects. JavaScript functions have properties and methods.
            173. call() and apply() are predefined JavaScript function methods. Both methods can be used to invoke a function, and both methods must have the owner object as first parameter.
            174. With call() or apply() you can set the value of this, and invoke a function as a new method of an existing object.
            175. JavaScript Closures
            176. JavaScript variables can belong to the local or global scope.
            177. Private variables can be made possible with closures.
            178. Variable Lifetime
            179. Global variables live as long as your application (your window / your web page) lives.
            180. Local variables have short lives. They are created when the function is invoked, and deleted when the function is finished.
            181. JavaScript Nested Functions
            182. In fact, in JavaScript, all functions have access to the scope "above" them.
            183. JSON
            184. JSON Syntax
            185. JSON: JavaScript Object Notation.
            186. JSON is a syntax for storing and exchanging data.
            187. JSON is an easier-to-use alternative to XML.
            188. {"employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]}
            189. JSON Syntax Rules
            190. Data is in name/value pairs
            191. Data is separated by commas
            192. Curly braces hold objects
            193. Square brackets hold arrays
            194. JSON Values
            195. A number (integer or floating point)
            196. A string (in double quotes)
            197. A Boolean (true or false)
            198. An array (in square brackets)
            199. An object (in curly braces)
            200. null
            201. JSON Objects
            202. JSON objects are written inside curly braces.
            203. JSON Arrays
            204. JSON Files
            205. JSON How To
            206. JSON Http Request
            207. A common use of JSON is to read data from a web server, and display the data in a web page.
            208. JSON Function Files
            209. A common use of JSON is to read data from a web server, and display the data in a web page.
            210. JSON SQL
            211. This example reads JSON data from a web server running PHP and MySQL:
            212. Tutorial
            213. intro
            214. JavaScript Can Change HTML Content: document.getElementById("demo").innerHTML = "Hello JavaScript";
            215. JavaScript Can Change HTML Attributes: document.getElementById('myImage').src='pic_bulbon.gif'
            216. JavaScript Can Change HTML Styles (CSS) document.getElementById("demo").style.fontSize = "25px";
            217. JavaScript Can Hide/Show HTML Elements
            218. JavaScript Output
            219. JavaScript can "display" data in different ways: Writing into an alert box, using window.alert(). Writing into the HTML output using document.write(). Writing into an HTML element, using innerHTML. Writing into the browser console, using console.log().
            220. JavaScript does NOT have any built-in print or display functions.
            221. JavaScript Keywords
            222. Keyword Description
            223. break Terminates a switch or a loop
            224. continue Jumps out of a loop and starts at the top
            225. debugger Stops the execution of JavaScript, and calls (if available) the debugging function
            226. do ... while Executes a block of statements, and repeats the block, while a condition is true
            227. for Marks a block of statements to be executed, as long as a condition is true
            228. function Declares a function
            229. if ... else Marks a block of statements to be executed, depending on a condition
            230. return Exits a function
            231. switch Marks a block of statements to be executed, depending on different cases
            232. try ... catch Implements error handling to a block of statements
            233. var Declares a variable
            234. JavaScript Type Operators
            235. Operator Description
            236. typeof Returns the type of a variable
            237. instanceof Returns true if an object is an instance of an object type
            238. JavaScript Comparison and Logical Operators
            239. Operator Description
            240. == equal to
            241. === equal value and equal type
            242. != not equal
            243. !== not equal value or not equal type
            244. > greater than
            245. < less than
            246. >= greater than or equal to
            247. <= less than or equal to
            248. ? ternary operator
            249. JavaScript Operator Precedence Values
            250. Value Operator Description Example
            251. 19 ( ) Expression grouping (3 + 4)
            253. 18 . Member person.name
            254. 18 [] Member person["name"]
            256. 17 () Function call myFunction()
            257. 17 new Create new Date()
            259. 16 ++ Postfix Increment i++
            260. 16 -- Postfix Decrement i--
            262. 15 ++ Prefix Increment ++i
            263. 15 -- Prefix Decrement --i
            264. 15 ! Logical not !(x==y)
            265. 15 typeof Type typeof x
            267. 14 * Multiplication 10 * 5
            268. 14 / Division 10 / 5
            269. 14 % Modulo division 10 % 5
            270. 14 ** Exponentiation 10 ** 2
            272. 13 + Addition 10 + 5
            273. 13 - Subtraction 10 - 5
            275. 12 << Shift left x << 2
            276. 12 >> Shift right x >> 2
            278. 11 < Less than x < y
            279. 11 <= Less than or equal x <= y
            280. 11 > Greater than x > y
            281. 11 >= Greater than or equal x >= y
            283. 10 == Equal x == y
            284. 10 === Strict equal x === y
            285. 10 != Unequal x != y
            286. 10 !== Strict unequal x !== y
            288. 6 && And x && y
            289. 5 || Or x || y
            291. 3 = Assignment x = y
            292. 3 += Assignment x += y
            293. 3 -= Assignment x -= y
            294. 3 *= Assignment x *= y
            295. 3 /= Assignment x /= y
            296. JavaScript Data Types
            297. JavaScript Functions
            298. JavaScript Objects
            299. JavaScript Scope
            300. In JavaScript, scope is the set of variables, objects, and functions you have access to.
            301. Local JavaScript Variables
            302. Global JavaScript Variables
            303. Automatically Global: If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable.
            304. Global Variables in HTML: Your global variables (or functions) can overwrite window variables (or functions). Any function, including the window object, can overwrite your global variables and functions.
            305. The Lifetime of JavaScript Variables: The lifetime of a JavaScript variable starts when it is declared. Local variables are deleted when the function is completed. Global variables are deleted when you close the page.
            306. Function Arguments: Function arguments (parameters) work as local variables inside functions.
            307. JavaScript Events
            308. HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events.
            309. HTML Events
            310. Event Description
            311. onchange An HTML element has been changed
            312. onclick The user clicks an HTML element
            313. onmouseover The user moves the mouse over an HTML element
            314. onmouseout The user moves the mouse away from an HTML element
            315. onkeydown The user pushes a keyboard key
            316. onload The browser has finished loading the page
            317. JavaScript Strings
            318. his is the list of special characters that can be added to a text string with the backslash sign:
            319. Code Outputs
            320. \' single quote
            321. \" double quote
            322. \\ backslash
            323. \n new line
            324. \r carriage return
            325. \t tab
            326. \b backspace
            327. \f form feed
            328. JavaScript String Methods
            329. String Methods and Properties Primitive values, like "John Doe", cannot have properties or methods (because they are not objects). But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.
            330. String Length:str.length
            331. Finding a String in a String The indexOf() method returns the index of (the position of) the first occurrence of a specified text in a string: Both the indexOf(), and the lastIndexOf() methods return -1 if the text is not found. The lastIndexOf() method returns the index of the last occurrence of a specified text in a string:
            332. Searching for a String in a String:str.search('') Did You Notice? The two methods, indexOf() and search(), are equal. They accept the same arguments (parameters), and they return the same value. The two methods are equal, but the search() method can take much more powerful search values. You will learn more about powerful search values in the chapter about regular expressions.
            333. Extracting String Parts There are 3 methods for extracting a part of a string: slice(start, end) substring(start, end) substr(start, length)
            334. Replacing String Content The replace() method replaces a specified value with another value in a string: var n = str.replace(/Microsoft/g,"W3Schools");
            335. Converting to Upper and Lower Case A string is converted to upper case with toUpperCase()||toLowerCase():
            336. The concat() Method concat() joins two or more strings:
            337. All string methods return a new string. They don't modify the original string. Formally said: Strings are immutable: Strings cannot be changed, only replaced.
            338. Extracting String Characters
            339. There are 2 safe methods for extracting string characters:
            340. charAt(position)
            341. The charAt() method returns the character at a specified index (position) in a string:
            342. charCodeAt(position)
            343. The charCodeAt() method returns the unicode of the character at a specified index in a string:
            344. Accessing a String as an Array is Unsafe
            345. var str = "HELLO WORLD"; str[0]; // returns H This is unsafe and unpredictable: It does not work in all browsers (not in IE5, IE6, IE7) It makes strings look like arrays (but they are not) str[0] = "H" does not give an error (but does not work)
            346. Converting a String to an Array
            347. A string can be converted to an array with the split() method:
            348. If the separator is omitted, the returned array will contain the whole string in index [0].
            349. If the separator is "", the returned array will be an array of single characters:
            350. JavaScript Numbers
            351. JavaScript Numbers are Always 64-bit Floating Point
            352. Precision Integers (numbers without a period or exponent notation) are considered accurate up to 15 digits. var x = 999999999999999; // x will be 999999999999999 var x = (0.2 * 10 + 0.1 * 10) / 10; // x will be 0.3 var x = 0.2 + 0.1; // x will be 0.30000000000000004 var y = 9999999999999999; // y will be 10000000000000000
            353. NaN - Not a Number
            354. Numbers Can be Objects: var x = 123; var y = new Number(123); // typeof x returns number // typeof y returns object
            355. JavaScript Number Methods
            356. Number Methods and Properties Primitive values (like 3.14 or 2014), cannot have properties and methods (because they are not objects). But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.
            357. The toString() Method toString() returns a number as a string. All number methods can be used on any type of numbers (literals, variables, or expressions):
            358. The toExponential() Method toExponential() returns a string, with a number rounded and written using exponential notation. A parameter defines the number of characters behind the decimal point:
            359. The toFixed() Method toFixed() returns a string, with the number written with a specified number of decimals:
            360. The toPrecision() Method toPrecision() returns a string, with a number written with a specified length:
            361. The valueOf() Method valueOf() returns a number as a number. In JavaScript, a number can be a primitive value (typeof = number) or an object (typeof = object). The valueOf() method is used internally in JavaScript to convert Number objects to primitive values. There is no reason to use it in your code.
            362. Converting Variables to Numbers
            363. The Number() method
            364. The parseInt() method
            365. The parseFloat() method
            366. JavaScript Math Object
            367. Math.PI;
            368. Math.round()
            369. Math.pow()
            370. Math.sqrt()
            371. Math.abs()
            372. Math.ceil()
            373. Math.floor()
            374. Math.sin()
            375. Math.cos()
            376. Math.min() and Math.max()
            377. Math.random()
            378. Math Properties (Constants)
            379. Math.E // returns Euler's number
            380. Math.PI // returns PI
            381. Math.SQRT2 // returns the square root of 2
            382. Math.SQRT1_2 // returns the square root of 1/2
            383. Math.LN2 // returns the natural logarithm of 2
            384. Math.LN10 // returns the natural logarithm of 10
            385. Math.LOG2E // returns base 2 logarithm of E
            386. Math.LOG10E // returns base 10 logarithm of E
            387. JavaScript Random
            388. Math.random()
            389. JavaScript Random Integers
            390. A Proper Random Function: function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min) ) + min; }
            391. JavaScript Dates
            392. JavaScript Date Formats
            393. Creating Date Objects
            394. new Date()
            395. new Date(milliseconds)
            396. new Date(dateString)
            397. new Date(year, month, day, hours, minutes, seconds, milliseconds)
            398. Time Zones
            399. When setting a date, without specifying the time zone, JavaScript will use the browser's time zone.
            400. When getting a date, without specifying the time zone, the result is converted to the browser's time zone.
            401. In other words: If a date/time is created in GMT (Greenwich Mean Time), the date/time will be converted to CDT (Central US Daylight Time) if a user browses from central US.
            402. JavaScript Date Formats
            403. JavaScript Date Input
            404. There are generally 4 types of JavaScript date input formats:
            405. Type Example
            406. ISO Date "2015-03-25" (The International Standard)
            407. var d = new Date("2015-03-25");
            408. Short Date "03/25/2015" or "2015/03/25"
            409. var d = new Date("03/25/2015");
            410. Long Date "Mar 25 2015" or "25 Mar 2015"
            411. var d = new Date("Mar 25 2015");
            412. Full Date "Wednesday March 25 2015"
            413. JavaScript Date Output
            414. Independent of input format, JavaScript will (by default) output dates in full text string format:
            415. Wed Mar 25 2015 08:00:00 GMT+0800 (中国标准时间)
            416. JavaScript Date Methods
            417. Method Description
            418. getDate() Get the day as a number (1-31)
            419. getDay() Get the weekday as a number (0-6)
            420. getFullYear() Get the four digit year (yyyy)
            421. getHours() Get the hour (0-23)
            422. getMilliseconds() Get the milliseconds (0-999)
            423. getMinutes() Get the minutes (0-59)
            424. getMonth() Get the month (0-11)
            425. getSeconds() Get the seconds (0-59)
            426. getTime() Get the time (milliseconds since January 1, 1970)
            427. Date Set Methods
            428. setDate() Set the day as a number (1-31)
            429. setFullYear() Set the year (optionally month and day)
            430. setHours() Set the hour (0-23)
            431. setMilliseconds() Set the milliseconds (0-999)
            432. setMinutes() Set the minutes (0-59)
            433. setMonth() Set the month (0-11)
            434. setSeconds() Set the seconds (0-59)
            435. setTime() Set the time (milliseconds since January 1, 1970)
            436. JavaScript Arrays
            437. The Difference Between Arrays and Objects
            438. In JavaScript, arrays use numbered indexes.
            439. In JavaScript, objects use named indexes.
            440. Arrays are a special kind of objects, with numbered indexes.
            441. When to Use Arrays. When to use Objects.
            442. You should use objects when you want the element names to be strings (text).
            443. You should use arrays when you want the element names to be numbers.
            444. JavaScript Array Methods
            445. Converting Arrays to Strings: toString() The join() method also joins all array elements into a string.
            446. Popping and Pushing
            447. Shifting Elements
            448. The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:
            449. Changing Elements
            450. Deleting Elements: Using delete may leave undefined holes in the array. Use pop() or shift() instead.
            451. Splicing an Array: var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi");
            452. Using splice() to Remove Elements
            453. Joining Arrays The concat() method creates a new array by concatenating two arrays
            454. Slicing an Array
            455. The valueOf() Method: The valueOf() method is the default behavior for an array. It converts an array to a primitive value. All JavaScript objects have a valueOf() and a toString() method.
            456. Sorting Arrays
            457. SortArrays
            458. The sort() method sorts an array alphabetically:
            459. fruits.sort();
            460. Reversing an Array
            461. The reverse() method reverses the elements in an array.
            462. Numeric Sort
            463. By default, the sort() function sorts values as strings.
            464. points.sort(function(a, b){return a - b});
            465. Try it Yourself »
            466. The Compare Function
            467. The compare function should return a negative, zero, or positive value, depending on the arguments:
            468. function(a, b){return a-b}
            469. Sorting an Array in Random Order
            470. points.sort(function(a, b){return 0.5 - Math.random()});
            471. Try it Yourself »
            472. Sorting Object Arrays
            473. The solution is to write a compare function to compare the property values:
            474. cars.sort(function(a, b){return a.year - b.year});
            475. Comparing string properties is a little more complex::
            476. cars.sort(function(a, b){ var x = a.type.toLowerCase(); var y = b.type.toLowerCase(); if (x < y) {return -1;} if (x > y) {return 1;} return 0; });
            477. JavaScript Booleans
            478. A JavaScript Boolean represents one of two values: true or false.
            479. Everything Without a "Real" is False
            480. JavaScript Comparison and Logical Operators
            481. Operator Description Comparing Returns Try it
            482. == equal to x == 8 false Try it »
            483. x == 5 true Try it »
            484. x == "5" true Try it »
            485. === equal value and equal type x === 5 true Try it »
            486. x === "5" false Try it »
            487. != not equal x != 8 true Try it »
            488. !== not equal value or not equal type x !== 5 false Try it »
            489. x !== "5" true Try it »
            490. x !== 8 true Try it »
            491. > greater than x > 8 false Try it »
            492. < less than x < 8 true Try it »
            493. >= greater than or equal to x >= 8 false Try it »
            494. <= less than or equal to x <= 8 true
            495. Logical Operators
            496. Operator Description Example Try it
            497. && and (x < 10 && y > 1) is true Try it »
            498. || or (x == 5 || y == 5) is false Try it »
            499. ! not !(x == y) is true
            500. Conditions
            501. if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; }
            502. JavaScript Switch Statement
            503. switch(expression) { case n: code block break; case n: code block break; default: default code block }
            504. JavaScript For Loop
            505. Different Kinds of Loops
            506. for - loops through a block of code a number of times
            507. for/in - loops through the properties of an object
            508. while - loops through a block of code while a specified condition is true
            509. do/while - also loops through a block of code while a specified condition is true
            510. JavaScript While Loop
            511. while (condition) { code block to be executed }
            512. do { code block to be executed } while (condition);
            513. JavaScript Break and Continue
            514. The Break Statement
            515. It was used to "jump out" of a switch() statement.
            516. The Continue Statement
            517. The continue statement breaks one iteration (in the loop), if a specified condition occurs, and continues with the next iteration in the loop.
            518. JavaScript Labels
            519. break labelname;
            520. continue labelname;
            521. JavaScript Type Conversion
            522. JavaScript Data Types
            523. In JavaScript there are 5 different data types that can contain values:
            524. string
            525. number
            526. boolean
            527. object
            528. function
            529. And 2 data types that cannot contain values:
            530. null
            531. undefined
            532. There are 35types of objects:
            533. Object
            534. Date
            535. Array
            536. Regexp
            537. JSON
            538. The typeof Operator
            539. The constructor Property
            540. The constructor property returns the constructor function for all JavaScript variables.
            541. JavaScript Type Conversion
            542. The Unary + Operator
            543. The unary + operator can be used to convert a variable to a number:
            544. Automatic Type Conversion
            545. The result is not always what you expect:
            546. JavaScript Regular Expressions
            547. /pattern/modifiers;
            548. /w3schools/i is a regular expression.
            549. w3schools is a pattern (to be used in a search).
            550. i is a modifier (modifies the search to be case-insensitive).
            551. Regular Expression Modifiers
            552. Modifier Description
            553. i Perform case-insensitive matching
            554. g Perform a global match (find all matches rather than stopping after the first match)
            555. m Perform multiline matching
            556. Regular Expression Patterns
            557. Expression Description
            558. [abc] Find any of the characters between the brackets
            559. [0-9] Find any of the digits between the brackets
            560. (x|y) Find any of the alternatives separated with |
            561. Metacharacter Description
            562. \d Find a digit
            563. \s Find a whitespace character
            564. \b Find a match at the beginning or at the end of a word
            565. \uxxxx Find the Unicode character specified by the hexadecimal number xxxx
            566. Quantifier Description
            567. n+ Matches any string that contains at least one n
            568. n* Matches any string that contains zero or more occurrences of n
            569. n? Matches any string that contains zero or one occurrences of n
            570. JavaScript Errors - Throw and Try to Catch
            571. JavaScript Debugging
            572. The console.log() Method
            573. Setting Breakpoints
            574. The debugger Keyword
            575. Major Browsers' Debugging Tools
            576. JavaScript Hoisting
            577. Hoisting is JavaScript's default behavior of moving declarations to the top.
            578. JavaScript Declarations are Hoisted
            579. In JavaScript, a variable can be declared after it has been used.
            580. JavaScript Initializations are Not Hoisted
            581. JavaScript only hoists declarations, not initializations.
            582. Declare Your Variables At the Top !
            583. JavaScript Use Strict
            584. "use strict"; Defines that JavaScript code should be executed in "strict mode".
            585. Not Allowed in Strict Mode
            586. Using a variable, without declaring it, is not allowed:
            587. Using an object, without declaring it, is not allowed:
            588. Deleting a variable (or object) is not allowed.
            589. Deleting a function is not allowed.
            590. Duplicating a parameter name is not allowed:
            591. Writing to a read-only property is not allowed:
            592. Writing to a get-only property is not allowed:
            593. Deleting an undeletable property is not allowed:
            594. The string "eval" cannot be used as a variable:
            595. The string "arguments" cannot be used as a variable:
            596. The with statement is not allowed:
            597. For security reasons, eval() is not allowed to create variables in the scope from which it was called:
            598. JavaScript Style Guide and Coding Conventions
            599. JavaScript Best Practices
            600. Avoid global variables, avoid new, avoid ==, avoid eval()
            601. JavaScript Common Mistakes
            602. Accidentally Using the Assignment Operator
            603. Expecting Loose Comparison
            604. Confusing Addition & Concatenation
            605. Addition is about adding numbers.
            606. Concatenation is about adding strings.
            607. var x = 10 + 5; // the result in x is 15
            608. var x = 10 + "5"; // the result in x is "105"
            609. Misunderstanding Floats
            610. All numbers in JavaScript are stored as 64-bits Floating point numbers (Floats).
            611. Breaking a JavaScript String
            612. Misplacing Semicolon
            613. if (x == 19);
            614. Breaking a Return Statement
            615. Accessing Arrays with Named Indexes
            616. Ending an Array Definition with a Comma
            617. points = [40, 100, 1, 5, 25, 10,];
            618. Ending an Object Definition with a Comma
            619. Undefined is Not Null
            620. With JavaScript, null is for objects, undefined is for variables, properties, and methods.
            621. To be null, an object has to be defined, otherwise it will be undefined.
            622. If you want to test if an object exists, this will throw an error if the object is undefined:
            623. if (typeof myObj !== "undefined" && myObj !== null)
            624. Expecting Block Level Scope
            625. JavaScript Performance
            626. Reduce Activity in Loops
            627. var i; var l = arr.length; for (i = 0; i < l; i++) {
            628. Reduce DOM Access
            629. Accessing the HTML DOM is very slow, compared to other JavaScript statements.
            630. Reduce DOM Size
            631. Avoid Unnecessary Variables
            632. Delay JavaScript Loading
            633. Avoid Using with
            634. JavaScript Reserved Words
            635. JavaScript Reserved Words
            636. abstract arguments boolean break byte
            637. case catch char class* const
            638. continue debugger default delete do
            639. double else enum* eval export*
            640. extends* false final finally float
            641. for function goto if implements
            642. import* in instanceof int interface
            643. let long native new null
            644. package private protected public return
            645. short static super* switch synchronized
            646. this throw throws transient true
            647. try typeof var void volatile
            648. while with yield
            649. JavaScript Objects, Properties, and Methods
            650. Array Date eval function hasOwnProperty
            651. Infinity isFinite isNaN isPrototypeOf length
            652. Math NaN name Number Object
            653. prototype String toString undefined valueOf
            654. Java Reserved Words
            655. getClass java JavaArray javaClass JavaObject JavaPackage
            656. Windows Reserved Words
            657. alert all anchor anchors area
            658. assign blur button checkbox clearInterval
            659. clearTimeout clientInformation close closed confirm
            660. constructor crypto decodeURI decodeURIComponent defaultStatus
            661. document element elements embed embeds
            662. encodeURI encodeURIComponent escape event fileUpload
            663. focus form forms frame innerHeight
            664. innerWidth layer layers link location
            665. mimeTypes navigate navigator frames frameRate
            666. hidden history image images offscreenBuffering
            667. open opener option outerHeight outerWidth
            668. packages pageXOffset pageYOffset parent parseFloat
            669. parseInt password pkcs11 plugin prompt
            670. propertyIsEnum radio reset screenX screenY
            671. scroll secure select self setInterval
            672. setTimeout status submit taint text
            673. textarea top unescape untaint window
            674. JavaScript JSON
            675. JSON is a format for storing and transporting data.
            676. JSON is often used when data is sent from a server to a web page.
            677. What is JSON?
            678. SON stands for JavaScript Object Notation
            679. JSON is lightweight data interchange format
            680. JSON is language independent *
            681. JSON is "self-describing" and easy to understand
         2. ES6
      3. BOM
         1. JavaScript Window Screen
            1. The window.screen object contains information about the user's screen.
            2. screen.width
            3. screen.height
            4. screen.availWidth
            5. screen.availHeight
            6. screen.colorDepth
            7. screen.pixelDepth
         2. JavaScript Window Location
            1. window.location.href returns the href (URL) of the current page
            2. window.location.hostname returns the domain name of the web host
            3. window.location.pathname returns the path and filename of the current page
            4. window.location.protocol returns the web protocol used (http:// or https://)
            5. window.location.assign loads a new document
            6. The window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.
         3. JavaScript Window History
            1. The window.history object contains the browsers history.
            2. history.back() - same as clicking back in the browser
            3. history.forward() - same as clicking forward in the browser
         4. JavaScript Window Navigator
            1. The window.navigator object contains information about the visitor's browser.
            2. navigator.appName
            3. navigator.appCodeName
            4. navigator.platform
         5. JavaScript Popup Boxes
            1. JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
         6. JavaScript Timing Events
            1. JavaScript can be executed in time-intervals.
            2. This is called timing events.
            3. Timing Events
            4. setTimeout(function, milliseconds)
            5. Executes a function, after waiting a specified number of milliseconds.
            6. setInterval(function, milliseconds)
            7. Same as setTimeout(), but repeats the execution of the function continuously.
         7. JavaScript Cookies
            1. Cookies let you store user information in web pages.
            2. What are Cookies?
            3. Cookies are data, stored in small text files, on your computer.
            4. When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user.
            5. Cookies were invented to solve the problem "how to remember information about the user":
            6. When a user visits a web page, his name can be stored in a cookie.
            7. Next time the user visits the page, the cookie "remembers" his name.
            8. Cookies are saved in name-value pairs like:
            9. Create a Cookie with JavaScript
            10. document.cookie = "username=John Doe";
            11. Read a Cookie with JavaScript
            12. var x = document.cookie;
            13. Change a Cookie with JavaScript
            14. document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
            15. Delete a Cookie with JavaScript
   3. HTML
      1. html5 tutorial
         1. introduction
            1. 超文本标记语言: HyperText Markup Language
            2. <tagname attr>content</tagname>
         2. editors
            1. notepad ,textEdit
         3. elements
            1. opening tag+closing tag
            2. empty tag:br,hr(空元素在开始标签中关闭)
            3. <tagname>contents</tagname>
         4. attributes
            1. html元素可以设置属性
            2. 属性可以在元素中添加附加信息
            3. 属性一般描述于开始标签
            4. 属性一般以字面量形式出现name='value'
            5. id,class,style,title,href,type,src,name,value,alt,disabled...
         5. headings
            1. h1-h6:Headings Are Important
            2. Search engines use the headings to index the structure and content of your web pages. Users skim your pages by its headings. It is important to use headings to show the document structure.
            3. hr:Defines a thematic change in the content
            4. 注释：<!--...-->
         6. paragraphs
            1. Note: Browsers automatically add some white space (a margin) before and after a paragraph.
            2. br:The HTML <br> element defines a line break.
         7. styles
            1. syntax:<tagname style="property:value;">
         8. formatting
            1. b:bold
            2. strong:important
            3. i:italic
            4. em:emphasized
            5. mark:marked
            6. small:small
            7. del:deleted
            8. ins:inserted
            9. sub:subscript
            10. sup:superscript
         9. quotations
            1. q:for short quotations
            2. blockquote:for quotations
            3. abbr:for abbreviations
            4. address:for contact information
            5. cit:for work title
            6. bdo:for bi-directional override(书写顺序)
         10. computercode
             1. kbd:defines keyboard input
             2. samp:for computer output(计算输出)
             3. code:for computer code
             4. var :for variables
             5. pre:defines preformatted text
         11. commens
         12. colors
             1. color names
             2. rgb value
             3. rgba
             4. hex
         13. styles-css
             1. CSS stands for Cascading Style Sheets.CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.
             2. CSS can be added to HTML elements in 3 ways: Inline - by using the style attribute in HTML elements Internal - by using a <style> element in the <head> section External - by using an external CSS file
         14. links
             1. A link does not have to be text. It can be an image or any other HTML element.
             2. HTML Links - The target Attribute The target attribute specifies where to open the linked document. The target attribute can have one of the following values: _blank - Opens the linked document in a new window or tab _self - Opens the linked document in the same window/tab as it was clicked (this is default) _parent - Opens the linked document in the parent frame _top - Opens the linked document in the full body of the window framename - Opens the linked document in a named frame
         15. images
             1. HTML Images Syntax:In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag.
             2. The alt Attribute The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). If a browser cannot find an image, it will display the value of the alt attribute:
             3. Image Size - Width and Height You can use the style attribute to specify the width and height of an image.Note: Always specify the width and height of an image. If width and height are not specified, the page will flicker(抖动) while the image loads.
             4. Width and Height, or Style? Both the width, height, and style attributes are valid in HTML5. However, we suggest using the style attribute（推荐用style）. It prevents internal or external styles sheets from changing the original size of images:
             5. Image Floating Use the CSS float property to let the image float to the right or to the left of a text:
             6. Image Maps Use the <map> tag to define an image-map. An image-map is an image with clickable areas. The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates a relationship between the image and the map. The <map> tag contains a number of <area> tags, that defines the clickable areas in the image-map:
         16. tables
             1. table>tr>th*m+tr>td*m------Note: The <td> elements are the data containers of the table.They can contain all sorts of HTML elements; text, images, lists, other tables, etc.
             2. HTML Table - Adding a Border If you do not specify a border for the table, it will be displayed without borders. A border is set using the CSS border property:table, th, td { border: 1px solid black; }Remember to define borders for both the table and the table cells.
             3. HTML Table - Collapsed Borders If you want the borders to collapse into one border, add the CSS border-collapse property: Example table, th, td { border: 1px solid black; border-collapse: collapse; }
             4. HTML Table - Adding Cell Padding Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property: Example th, td { padding: 15px; }
             5. HTML Table - Left-align Headings By default, table headings are bold and centered. To left-align the table headings, use the CSS text-align property: Example th { text-align: left; }
             6. HTML Table - Adding Border Spacing Border spacing specifies the space between the cells. To set the border spacing for a table, use the CSS border-spacing property: Example table { border-spacing: 5px; }
             7. HTML Table - Cells that Span Many Columns To make a cell span more than one column, use the colspan attribute:HTML Table - Cells that Span Many Rows To make a cell span more than one row, use the rowspan attribute:
             8. HTML Table - Adding a Caption To add a caption to a table, use the <caption> tag:The <caption> tag must be inserted immediately after the <table> tag.
             9. A Special Style for One Table To define a special style for a special table, add an id attribute to the table:table#t01 { width: 100%; background-color: #f1f1c1; }
             10. links
             11. 子主题 1
             12. 子主题 2
             13. 子主题 3
             14. 子主题 4
             15. 子主题 5
         17. lists
             1. Unordered HTML List An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default:
             2. Unordered HTML List - Choose List Item Marker The CSS list-style-type property is used to define the style of the list item marker: Value Description disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked
             3. Ordered HTML List An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:
             4. Ordered HTML List - The Type Attribute The type attribute of the <ol> tag, defines the type of the list item marker: Type Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers
             5. HTML Description Lists HTML also supports description lists. A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
             6. Nested HTML Lists List can be nested (lists inside lists):Note: List items can contain new list, and other HTML elements, like images and links, etc.
             7. 子主题 7
         18. blocks
             1. HTML Block and Inline Elements Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
             2. Block-level Elements:A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
             3. div
             4. p
             5. h1-h6
             6. form
             7. ul,ol,dl,li
             8. table,tr,th
             9. hr,br,
             10. 子主题 8
             11. inline elements:An inline element does not start on a new line and only takes up as much width as necessary.
             12. span,i,em,b,strong,
             13. img,a
             14. code,kbd
             15. 子主题 4
         19. classes
             1. 子主题 1
             2. 子主题 2
             3. 子主题 3
             4. 子主题 4
         20. iframes
         21. js
         22. head
             1. The HTML <head> Element The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, links, scripts, and other meta information. The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
         23. layout
             1. layout elements
             2. header
             3. nav
             4. section
             5. article
             6. aside
             7. footer
             8. <header> - Defines a header for a document or a section <nav> - Defines a container for navigation links <section> - Defines a section in a document <article> - Defines an independent self-contained article <aside> - Defines content aside from the content (like a sidebar) <footer> - Defines a footer for a document or a section <details> - Defines additional details <summary> - Defines a heading for the <details> element
             9. HTML Layout Techniques There are four different ways to create multicolumn layouts. Each way has its pros and cons: HTML tables CSS float property CSS framework CSS flexbox
             10. Do NOT use tables for your page layout!
             11. CSS Frameworks If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.
             12. CSS Floats It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.
             13. CSS Flexbox Flexbox is a new layout mode in CSS3. Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier. Learn more about flexbox in our CSS Flexbox chapter.
             14. 子主题 7
             15. 子主题 8
         24. responsive
             1. What is Responsive Web Design? Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:
         25. entities(实体)
             1. Result Description Entity Name Entity Number non-breaking space &nbsp; &#160; < less than &lt; &#60; > greater than &gt; &#62; & ampersand &amp; &#38; " double quotation mark &quot; &#34; ' single quotation mark (apostrophe) &apos; &#39; ¢ cent &cent; &#162; £ pound &pound; &#163; ¥ yen &yen; &#165; € euro &euro; &#8364; © copyright &copy; &#169; ® registered trademark &reg; &#174; Note: Entity names are case sensitive.
         26. symbols
             1. 子主题 1
             2. 子主题 2
             3. 子主题 3
             4. 子主题 4
         27. charset：http://www.w3schools.com/html/html_charset.asp
         28. URL Encode：http://www.w3schools.com/html/html_urlencode.asp
         29. 子主题 29
      2. html forms
         1. forms
            1. The <form> Element The HTML <form> element defines a form that is used to collect user input:
            2. The Action Attribute The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page on the server when the user clicks on the submit button. In the example above, the form data is sent to a page on the server called "action_page.php". This page contains a server-side script that handles the form data: <form action="action_page.php"> If the action attribute is omitted, the action is set to the current page.
            3. The Method Attribute The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data: <form action="action_page.php" method="get">
            4. When to Use GET? The default method when submitting form data is GET. However, when GET is used, the submitted form data will be visible in the page address field: action_page.php?firstname=Mickey&lastname=Mouse Note: GET must NOT be used when sending sensitive information! GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too. When to Use POST? Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field. POST has no size limitations, and can be used to send large amounts of data.
            5. The Name Attribute Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data of that input field will not be sent at all. This example will only submit the "Last name" input field:
            6. Grouping Form Data with <fieldset> The <fieldset> element is used to group related data in a form. The <legend> element defines a caption for the <fieldset> element.
         2. form elements
            1. input:type=xxx
            2. select>option*n
            3. textarea
            4. button
            5. datalist
            6. HTML5 <datalist> Element The <datalist> element specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of the pre-defined options as they input data. The list attribute of the <input> element, must refer to the id attribute of the <datalist> element. OperaSafariChromeFirefoxInternet Explorer Example <form action="action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
            7. keygen
            8. The purpose of the <keygen> element is to provide a secure way to authenticate users
            9. output
            10. The <output> element represents the result of a calculation (like one performed by a script).
         3. input types
            1. text
            2. radio
            3. checkbox
            4. email
            5. number
            6. file
            7. color
            8. range
            9. url
            10. search
            11. button
            12. time
            13. week
            14. month
            15. date
            16. datetime-local
            17. datetime
         4. input attributes
            1. The value Attribute The value attribute specifies the initial value for an input field:
            2. The readonly Attribute The readonly attribute specifies that the input field is read only (cannot be changed): Example <form action=""> First name:<br> <input type="text" name="firstname" value="John" readonly> </form>
            3. The disabled Attribute The disabled attribute specifies that the input field is disabled.
            4. The size Attribute The size attribute specifies the size (in characters) for the input field: Example <form action=""> First name:<br> <input type="text" name="firstname" value="John" size="40"> </form>
            5. The maxlength Attribute The maxlength attribute specifies the maximum allowed length for the input field: Example <form action=""> First name:<br> <input type="text" name="firstname" maxlength="10"> </form>
            6. The autocomplete Attribute The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.
            7. The novalidate Attribute The novalidate attribute is a <form> attribute. When present, novalidate specifies that the form data should not be validated when submitted. OperaSafariChromeFirefoxInternet Explorer Example Indicates that the form is not to be validated on submit: <form action="action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>
            8. The autofocus Attribute The autofocus attribute specifies that the input field should automatically get focus when the page loads. OperaSafariChromeFirefoxInternet Explorer Example Let the "First name" input field automatically get focus when the page loads: First name:<input type="text" name="fname" autofocus>
            9. The form Attribute The form attribute specifies one or more forms an <input> element belongs to. Tip: To refer to more than one form, use a space-separated list of form ids. OperaSafariChromeFirefoxInternet Explorer Example An input field located outside the HTML form (but still a part of the form): <form action="action_page.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">
            10. The formaction Attribute The formaction attribute specifies the URL of a file that will process the input control when the form is submitted. The formaction attribute overrides the action attribute of the <form> element. The formaction attribute is used with type="submit" and type="image".
            11. The formenctype Attribute The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method="post").
            12. The formmethod Attribute The formmethod attribute defines the HTTP method for sending form-data to the action URL.
            13. The list Attribute The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element. OperaSafariChromeFirefoxInternet Explorer Example An <input> element with pre-defined values in a <datalist>: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer">
            14. The min and max Attributes The min and max attributes specify the minimum and maximum values for an <input> element.
            15. The multiple Attribute The multiple attribute specifies that the user is allowed to enter more than one value in the <input> element. The multiple attribute works with the following input types: email, and file.
            16. The pattern Attribute The pattern attribute specifies a regular expression that the <input> element's value is checked against
            17. The placeholder Attribute The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).
            18. The required Attribute
            19. The step Attribute
      3. html5
         1. intro
            1. What is New in HTML5?
            2. <!DOCTYPE html>
            3. <meta charset="UTF-8">,The default character encoding in HTML5 is UTF-8.
            4. New HTML5 Elements
            5. New semantic elements like <header>, <footer>, <article>, and <section>.
            6. New attributes of form elements like number, date, time, calendar, and range.
            7. New graphic elements: <svg> and <canvas>.
            8. New multimedia elements: <audio> and <video>.
            9. New HTML5 API's (Application Programming Interfaces)
            10. HTML Geolocation
            11. HTML Drag and Drop
            12. HTML Local Storage
            13. Tip: HTML Local storage is a powerful replacement for cookies.
            14. HTML Application Cache
            15. HTML Web Workers
            16. HTML SSE
         2. HTML5 Browser Support
            1. HTML5 Browser Support HTML5 is supported in all modern browsers. In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements. Because of this, you can "teach" older browsers to handle "unknown" HTML elements. You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements.
            2. Define Semantic Elements as Block Elements HTML5 defines eight new semantic elements. All these are block-level elements. To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block: header, section, footer, aside, nav, main, article, figure { display: block; }
            3. Add New Elements to HTML You can also add new elements to an HTML page with a browser trick. This example adds a new element called <myHero> to an HTML page, and defines a style for it:<!DOCTYPE html> <html> <head> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #dddddd; padding: 50px; font-size: 30px; } </style> </head> <body> <h1>A Heading</h1> <myHero>My Hero Element</myHero> </body> </html>
            4. Problem With Internet Explorer 8 You could use the solution described above for all new HTML5 elements. However, IE8 (and earlier) does not allow styling of unknown elements! Thankfully, Sjoerd Visscher created the HTML5Shiv! The HTML5Shiv is a JavaScript workaround to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9. You will require the HTML5shiv to provide compatibility for IE Browsers older than IE 9.
            5. Syntax For HTML5Shiv The HTML5Shiv is placed within the <head> tag. The HTML5Shiv is a javascript file that is referenced in a <script> tag. You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article>, <section>, <aside>, <nav>, <footer>.
         3. New Elements in HTML5
            1. New Semantic/Structural Elements
            2. <article> Defines an article in the document
            3. <aside> Defines content aside from the page content
            4. <bdi> Defines a part of text that might be formatted in a different direction from other text
            5. <details> Defines additional details that the user can view or hide
            6. <dialog> Defines a dialog box or window
            7. <figcaption> Defines a caption for a <figure> element
            8. <figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
            9. <footer> Defines a footer for the document or a section
            10. <header> Defines a header for the document or a section
            11. <main> Defines the main content of a document
            12. <mark> Defines marked or highlighted text
            13. <menuitem> Defines a command/menu item that the user can invoke from a popup menu
            14. <meter> Defines a scalar measurement within a known range (a gauge)
            15. <nav> Defines navigation links in the document
            16. <progress> Defines the progress of a task
            17. <rt> Defines an explanation/pronunciation of characters (for East Asian typography)
            18. <ruby> Defines a ruby annotation (for East Asian typography)
            19. <section> Defines a section in the document
            20. <summary> Defines a visible heading for a <details> element
            21. <time> Defines a date/time
            22. <wbr> Defines a possible line-break
            23. New Form Elements
            24. <datalist> Defines pre-defined options for input controls
            25. <keygen> Defines a key-pair generator field (for forms)
            26. <output> Defines the result of a calculation
            27. New Input Types
            28. New Input Types
            29. color date datetime datetime-local email month number range search tel time url week
            30. New Input Attributes
            31. autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step
            32. HTML5 - New Attribute Syntax
            33. HTML5 allows four different syntaxes for attributes. This example demonstrates the different syntaxes used in an <input> tag: Type Example Empty <input type="text" value="John" disabled> Unquoted <input type="text" value=John> Double-quoted <input type="text" value="John Doe"> Single-quoted <input type="text" value='John Doe'> In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.
            34. HTML5 Graphics
            35. <canvas> Draw graphics, on the fly, via scripting (usually JavaScript) <svg> Draw scalable vector graphics
            36. New Media Elements
            37. <audio> Defines sound content
            38. <embed> Defines containers for external applications (like plug-ins)
            39. <source> Defines sources for <video> and <audio>
            40. <track> Defines tracks for <video> and <audio>
            41. <video> Defines video or movie content
            42. HTML5 Semantic Elements
            43. Semantic elements = elements with a meaning.
            44. HTML5 Migration
            45. You can migrate from XHTML to HTML5, using the same recipe.
            46. HTML5 Style Guide and Coding Conventions
            47. Always keep your code tidy, clean, and well-formed.
      4. html graphics
         1. canvas
            1. he HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
         2. SVG
            1. What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define graphics for the Web SVG is a W3C recommendation
            2. <!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>
            3. <svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> </svg>
            4. <svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg>
            5. <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>
            6. <svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> Sorry, your browser does not support inline SVG. </svg>
            7. Canvas Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Well suited for graphic-intensive games SVG Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google Maps) Slow rendering if complex (anything that uses the DOM a lot will be slow) Not suited for game applications
         3. google Maps
            1. Google Maps allows you to display maps on your web page:
            2. <!DOCTYPE html> <html> <body> <h1>My First Google Map</h1> <div id="map" style="width:400px;height:400px;background:yellow"></div> <script> function myMap() {     var mapOptions = {         center: new google.maps.LatLng(51.5, -0.12),         zoom: 10,         mapTypeId: google.maps.MapTypeId.HYBRID     } var map = new google.maps.Map(document.getElementById("map"), mapOptions); } </script> <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script> </body> </html>
      5. html media
         1. Media
            1. http://www.w3schools.com/html/html_media.asp
         2. Video
         3. Audio
         4. Plug-ins
         5. YouTube
      6. H5 APIs
         1. Geolocation
            1. Geolocation is most accurate for devices with GPS, like iPhone.
            2. <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
         2. Drag/Drop
         3. Local Storage
         4. App Cache
         5. Web Workers
            1. A web worker is a JavaScript running in the background, without affecting the performance of the page.
         6. SSE
            1. Server-Sent Events allow a web page to get updates from a server.
5. 三大（UI）库
   1. jQuery
      1. jQuery Tutorial
         1. jQuery greatly simplifies JavaScript programming.
         2. jQuery Get Started
         3. jQuery Syntax
            1. With jQuery you select (query) HTML elements and perform "actions" on them.
            2. Basic syntax is: $(selector).action()
            3. The Document Ready Event
            4. Trying to hide an element that is not created yet
            5. Trying to get the size of an image that is not loaded yet
            6. This is to prevent any jQuery code from running before the document is finished loading (is ready).
            7. It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.
         4. jQuery Selectors
            1. Syntax Description Example
            2. $("*") Selects all elements Try it
            3. $(this) Selects the current HTML element Try it
            4. $("p.intro") Selects all <p> elements with class="intro" Try it
            5. $("p:first") Selects the first <p> element Try it
            6. $("ul li:first") Selects the first <li> element of the first <ul> Try it
            7. $("ul li:first-child") Selects the first <li> element of every <ul> Try it
            8. $("[href]") Selects all elements with an href attribute Try it
            9. $("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank" Try it
            10. $("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank" Try it
            11. $(":button") Selects all <button> elements and <input> elements of type="button" Try it
            12. $("tr:even") Selects all even <tr> elements Try it
            13. $("tr:odd") Selects all odd <tr> elements Try it
         5. jQuery Event Methods
            1. jQuery is tailor-made to respond to events in an HTML page.
      2. jQuery Effects
         1. jQuery Effects - Hide and Show
         2. jQuery Effects - Fading
         3. jQuery Effects - Sliding
         4. jQuery Effects - Animation
         5. jQuery Stop Animations
         6. jQuery - Chaining
      3. jQuery HTML
         1. jQuery - Get Content and Attributes
            1. Get Content - text(), html(), and val()
            2. Get Attributes - attr()
         2. jQuery - Add Elements
            1. append() - Inserts content at the end of the selected elements
            2. prepend() - Inserts content at the beginning of the selected elements
            3. after() - Inserts content after the selected elements
            4. before() - Inserts content before the selected elements
         3. jQuery - Remove Elements
            1. remove() - Removes the selected element (and its child elements)
            2. empty() - Removes the child elements from the selected element
         4. jQuery - Get and Set CSS Classes
            1. addClass() - Adds one or more classes to the selected elements
            2. removeClass() - Removes one or more classes from the selected elements
            3. toggleClass() - Toggles between adding/removing classes from the selected elements
            4. css() - Sets or returns the style attribute
         5. jQuery - Dimensions
            1. With jQuery, it is easy to work with the dimensions of elements and browser window.
            2. jQuery Dimension Methods
            3. width()
            4. height()
            5. innerWidth()
            6. innerHeight()
            7. outerWidth()
            8. outerHeight()
      4. jQuery Traversing
         1. Traversing the DOM
         2. jQuery Traversing - Ancestors
            1. parent()
            2. parents()
            3. parentsUntil()
         3. jQuery Traversing - Descendants
            1. children()
            2. find()
         4. jQuery Traversing - Siblings
            1. siblings()
            2. next()
            3. nextAll()
            4. nextUntil()
            5. prev()
            6. prevAll()
            7. prevUntil()
         5. jQuery Traversing - Filtering
            1. jQuery first() Method
            2. jQuery last() Method
            3. jQuery eq() method
            4. jQuery filter() Method
            5. jQuery not() Method
      5. jQuery AJAX
         1. AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
         2. jQuery - AJAX load() Method
            1. $(selector).load(URL,data,callback);
         3. jQuery - AJAX get() and post() Methods
      6. jQuery Misc
         1. jQuery - The noConflict() Method
   2. Bootstrap
      1. Bootstrap 3 Tutorial
         1. Bootstrap Get Started
            1. What is Bootstrap?
            2. Bootstrap is a free front-end framework for faster and easier web development
            3. Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
            4. Bootstrap also gives you the ability to easily create responsive designs
         2. Bootstrap Grids
            1. Grid Classes
            2. The Bootstrap grid system has four classes:
            3. xs (for phones)
            4. sm (for tablets)
            5. md (for desktops)
            6. lg (for larger desktops)
         3. Bootstrap Text/Typography
         4. Bootstrap Tables
         5. Bootstrap Images
         6. Bootstrap Jumbotron and Page Header
         7. Bootstrap Wells
         8. Bootstrap Alerts
         9. Bootstrap Buttons
         10. Bootstrap Button Groups
         11. Bootstrap Glyphicons
         12. Bootstrap Badges and Labels
         13. Bootstrap Progress Bars
         14. Bootstrap Pagination
         15. Bootstrap Pager
         16. Bootstrap List Groups
         17. Bootstrap Panels
         18. Bootstrap Dropdowns
         19. Bootstrap Collapse
         20. Bootstrap Tabs and Pills
         21. Bootstrap Navigation Bar
         22. Bootstrap Forms
         23. Bootstrap Form Inputs
         24. Bootstrap Form Inputs (more)
         25. Bootstrap Input Sizing
         26. Bootstrap Media Objects
         27. Bootstrap Carousel Plugin
         28. Bootstrap Modal Plugin
         29. Bootstrap Tooltip Plugin
         30. Bootstrap Popover Plugin
         31. Bootstrap Scrollspy Plugin (Advanced)
         32. Bootstrap Affix Plugin (Advanced)
      2. Bootstrap Grid System
         1. Bootstrap Grid - Stacked-to-horizontal
         2. Bootstrap Grid - Small Devices
         3. Bootstrap Grid - Medium Devices
         4. Bootstrap Grid - Large Devices
      3. Bootstrap Templates
         1. Bootstrap Theme "Simply Me"
         2. Bootstrap Theme "Company"
         3. Bootstrap Theme "The Band"
   3. mui
6. 计算机知识储备
   1. 编译原理
   2. 计算机网络
   3. 软件工程/测试原理
7. 版本控制
   1. Git
      1. git init（初始化）
         1. Directory（目录）:A folder used for storing multiple files.
         2. Repository(存储库)：A directory where Git has been initialized to start version controlling your files.
      2. git status(检索状态)
         1. The .git directory: It's usually hidden but we're showing it to you for convenience. If you click it you'll notice it has all sorts of directories and files inside it. You'll rarely ever need to do anything inside here but it's the guts of Git, where all the magic happens.
         2. It's healthy to run git status often. Sometimes things change and you don't notice it.
      3. git add xx.txt
         1. deleted: File has been deleted and is waiting to be removed from Git.
         2. untracked: Files aren't tracked by Git yet. This usually indicates a newly created file.
         3. staged(暂存): Files are ready to be committed.
         4. unstaged: Files with changes that have not been prepared to be committed.
      4. git commit -m 'xxx'
         1. //Staging Area: A place where we can group files together before we "commit" them to Git. Commit A "commit" is a snapshot of our repository. This way if we ever need to look back at the changes we've made (or if someone else does), we will see a nice timeline of all changes.
      5. git log
         1. git log
      6. git remote add origin https://github.com/try-git/try_git.git
         1. //git remote: Git doesn't care what you name your remotes, but it's typical to name your main one origin. It's also a good idea for your main repository to be on a remote server like GitHub in case your machine is lost at sea during a transatlantic boat cruise or crushed by three monkey statues during an earthquake.
         2. 作者： 行云流水7
         3. 链接：http://www.imooc.com/article/14426
         4. 来源：慕课网
         5. 本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
      7. git push -u origin master
      8. git pull origin master
      9. git diff HEAD
      10. git diff --staged
      11. git reset octofamily/octodog.txt
      12. git checkout --ocotcat.txt
      13. git branch clean_up
      14. git checkout clean_up
      15. git rm '*.txt'
      16. git checkout master
      17. git merge clean_up
      18. git branch -d clean_up
      19. git push
   2. SVN