Front-end Three Musketeers--HTML, CSS, JavaScript

1、HTML：

(1 Introduction:

Html is a kind of xml and follows the xml format:

• HTML is a web page file, and page elements (dom elements) can be provided through html
• The overall structure of html is a tree structure, also called dom tree (multi-word count)
• Learning html is learning page elements (dom, tags)

(2) Common Elements Tags :

• ① h label: title
  
• ② Paragraph tags:
  
• ③ Line break tag: (in html, the use of line breaks in the content will not make the content displayed on the webpage wrap)
  
• ④ Link label:
  
• ⑤ Picture:
  
• ⑥ List:
  
• ⑦ Form:
  
• ⑧ Form:
  
• ⑨ Block:
  

2、CSS：

(1) Use the style attribute directly on the dom element to bind the style of the dom element:

(2) CSS file, or the style set in the html <style> tag:

• ① Specify the style through tags: all tags use this style:
  
• ② Specify the style by id: bind a unique id to the dom element

• ③ Specify the style by class: multiple dom elements can be bound to the same class

3、JavaScript

(1) Variables:

JavaScript is a weakly typed language (variables are only loaded at runtime, and types can change at runtime)

• var x: define a global variable (dynamic type)
• let x: define a local variable

(2) Simple type:

• Number
• String (single quote/double quote can be used)
• boolean
• Array var x = new Array(); var x = [1,2,3];
• json object: {key1:value1,key2:value2}
• undefined: undefined var x;
• null: special type, which means empty, var x = null;
• function: function object var x = function(){}, function x(){}
  After the function is defined, it can be executed: x()

(3) Use of types:

① Array:

• Definition: let x = new Array(); x = [];
• Add element: x.push(element)
• Traverse: for(let i in x) i = array index
      for(let e of x) e = each element in the array e = x[i]

② json：

• Definition: let x = {};
• Add key-value pairs: x.key = value; x.id = 1;--> x = {id:1}
        x['key'] = value; x['id'] = 1; (keys can use variables )
• Traverse: for(let k in x){} key = k, value = x[k];

③ function：

• 定义：let x = function(){} / function x(){}
• Method parameters: any of the above types can be used x = function(y){} (methods can also be used as method parameters)
• Return value: optional

(4) Special:

① console.log() // Print log in the developer tool console

② JavaScript built-in objects:

• window, document (objects that exist in the page initialization, already carry attributes)
• window.location.href = "jump path"; // the current page will jump to the specified path
• document.getElementById("dom element id") // Get a dom element
  Similar to jquery frame: $("#id of a dom element") returns the dom object of jquery
• document.getElementById("#xxx").innerHTML = …; // dom element tag content modification

③ Combination of html and js: (dom elements are all based on event-driven)

Common events:

• onload: Use the body tag, execute the event function after the document is loaded
• onclick: mouse click event, event that dom element has
• onchange: input tag, select, execute function when content is changed
• onfocus: execute when the focus is obtained <input type="text" οnfοcus="function name()"/>
• onblur: execute when the focus is lost
• onsubmit: form element binding submission event <form οnsubmit="function name()">...< /form>