π€ Getting started with HTML+CSS+JS π€
This article aims at the front-end entry-level Xiaobai and back-end junior programmers. After reading this article, there are π get instant results π Effect of
- π If you are a front-end Xiaobai, this article is the first window of your front-end career π
- π As a back-end junior programmer, you also need some understanding of the front-end. This article can lead you to the front-end π
If it is helpful to you, you are welcome π give the thumbs-up π’ comment β Collection
Don't say much, just start:
πHTML
1, Concept
Hyper Text Markup Language is the most basic web page development language
2, Quick start
1. html document
The suffix of html document is html or htm
2. Label classification
- Containment label: there are start label and end label. Such as < HTML ></html>
- Self closing and label: start label and end label are together. Such as < br / >
3. First knowledge of HTML
HTML code example * (let's get to know it through a short piece of HTML code) *:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>this is html code</title> </head> <body> <h1> hello world </h1> <font color="crimson">hello world</font> </body> </html>
Code effect:
4. HTML tags
4.1 document label
The most basic tags that make up html
- html: the root tag of the html document
- head: header tag, which is used to specify some attributes of html document and introduce external resources
- Title: title label
- Body: body label
- <! DOCTYPE html >: html5 defines this document as an html document
4.2 text label
Text related labels
- <!-- Notes -- >: Notes
- <h1>To < h6 >: title label (H1 to h6 fonts decrease gradually)
- <p>Paragraph label
- <br>Wrap label
- < HR > show a horizontal line
- <b>Bold label
- <i> Font Italic
- < font > font label
- < center > text centered
Make a small case according to the text label:
Case source code:
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Github brief introduction</title>
</head>
<body>
<h1>
Github brief introduction
</h1>
<hr color="#ffd700">
<p>
<font color="#Ff0000 "> GitHub < / font > is a hosting platform for < b > < I > open source and private software projects < / I > < / b >, which is named GitHub because it only supports Git as the only version library format.
</p>
<p>
GitHub Officially launched on April 10, 2008, except Git Code warehouse hosting and basic Web In addition to the management interface, it also provides subscription, discussion group, text rendering, online file editor, collaboration Atlas (report) and code fragment sharing( Gist)And other functions. At present, its registered users have exceeded 3.5 million, and the number of hosted versions is also very large, including many well-known open source projects Ruby on Rails,jQuery,python Wait.
</p>
<p>
As an open source code base and version control system, Github It has more than 9 million developer users. As more and more applications move to the cloud, Github It has become the preferred method to manage software development and discover existing code.
</p>
<p>
stay GitHubοΌUsers can easily find a large amount of open source code.
</p>
<hr color="#ffd700">
<font color="gray" size="2">
<center>
Baidu Encyclopedia<br>
copyright Copyright 2006-2018©, All Rights Reserved Jinggong network Anbei No. 11000002000001
</center>
</font>
</body>
</html>
4.3 picture label
This tag can be used to display the picture < img >, where the src attribute is used to specify the address of the picture
Code demonstration:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display img</title>
</head>
<body>
<!-- demonstration img label -->
<img src="github1.png">
<br>
<img src="gihub2.png" width="480" height="480">
</body>
</html>
Demonstration effect:
4.4 list label
List labels are divided into sequential list < ol > and unordered list < UL >, and list items are implemented with < li >
Code demonstration:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display ol and ul</title>
</head>
<body>
<!--Show ordered labels and no labels-->
<h1>Ordered label</h1><br>
<ol>
<li>github</li>
<li>gitee</li>
<li>idea</li>
</ol>
<h1>Unordered label</h1>
<ul>
<li>java</li>
<li>C++</li>
<li>python</li>
</ul>
</body>
</html>
Demonstration effect:
4.5. Link label
Use the a tag to define a hyperlink
Properties:
- href: Specifies the URL to access the resource
- target: Specifies the opening method of the resource (_self, default, open on the current page, _blank, open on a blank page)
Code demonstration:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display a </title>
</head>
<body>
<!--Link label-->
<h2>Open link on current page</h2><br>
<a href="https://www.baidu. Com "> Baidu < / a > < br >
<!--Consistent with the label above, target The default attribute is_self-->
<a href="https://www.baidu.com" target="_self "Baidu > < / a > < br >
<h2>Open link on blank page</h2><br>
<a href="https://www.csdn.net/" target="_blank">CSDN</a>
</body>
</html>
Demonstration effect:
4.6 div and span
- Div: each div occupies a whole line. Block level label
- span: the text information is displayed in one line, with inline labels
4.7 semantic labels
In order to improve the readability of the program, some tags are provided in html5.
- < header > header
- < footer > footer
4.8 form label
-
Table defines a table whose attributes are:
- Width: width
- border: border
- Cell adding: defines the distance between the content and the cell
- cellspacing: defines the distance between cells. If 0 is specified, the lines of the cell converge into one line
- bgcolor: background color
- align: alignment
-
tr defines a row whose attributes are:
- bgcolor: background color
- align: alignment
-
td defines a column whose attributes are:
- colspan: merge columns
- rowspan: merge rows
-
th defines the header cell
-
< caption >: table title
-
< thead >: indicates the header of the table
-
< tbody >: represents the body of the table
-
<tfoot>: represents the foot of the table
Code demonstration:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display table</title>
</head>
<body>
<!-- Here is table 1
In Table 1 cellpadding cellspacing bgcolor attribute,It can be compared with table 2
-->
<table width="250px" border="1px" align="left" cellpadding="10" cellspacing="0" bgcolor="#faebd7">
<caption>Student information form</caption><br>
<tr>
<th>number</th>
<th>full name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Xiao Wang</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>Lao Chen</td>
<td>28</td>
</tr>
</table>
<!--Here is form 2
Table 2 has td of rowspan And colspan,It can be compared with table 1
-->
<table width="250px" border="2px" align="center">
<caption>Commodity information sheet</caption><br>
<thead>
<tr>
<th>goods</th>
<th>quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hat</td>
<td>2</td>
<td>50</td>
</tr>
<tr>
<td>jacket</td>
<td>1</td>
<td rowspan="2">200</td>
</tr>
<tr>
<td>trousers</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">The total is 250 yuan</td>
</tr>
</tfoot>
</table><br>
</body>
</html>
Demonstration effect:
4.9 form label
The form tag is used to collect the data entered by the user and interact with the server.
Form is used to define the form. Its properties are:
- action: Specifies the URL to submit data
- Method: specify the submission method (common submission methods: get and post)
- get: the request parameters will be displayed in the address bar and encapsulated in the request line. The size of the request parameters is limited and not safe.
- post: the request parameters will not be displayed in the address bar, but will be encapsulated in the request body. There is no limit on the size of the request parameters, which is relatively safe.
If the data in the form item wants to be submitted, its name attribute must be specified.
Form item label:
- input: you can change the display style of the element through the value of the type attribute. The type attribute includes:
- Text: text input box, which is the default attribute. placeholder specifies the prompt information of the input box. When the content of the input box changes, it will be cleared automatically
- Password: password input box
- Radio: radio box. If you want multiple radio boxes to achieve the effect of radio selection, the value of the name attribute of multiple radio boxes must be the same. Generally, each radio box will be provided with a value attribute to specify the value submitted after it is selected, and the checked attribute can specify the default value
- checkbox: multi choice box. Generally, each radio box will be provided with the value attribute to specify the value submitted after it is selected. The checked attribute can specify the default value
- File: file selection box
- Hidden: hidden field, used to submit some information
- The three button attributes are submit (submit button, which can submit the form), button (normal button), image (picture submit button, src attribute specifies the path of the picture)
- Label: Specifies the text description information of the input item. The for attribute of label generally corresponds to the id attribute of input. If so, click the label area to get the focus of input input box.
- select: drop-down list
- Sub element: option, which specifies the list item
- textarea: text field
- cols: specify the number of columns and the number of characters in each row
- Rows: the default number of rows
Code demonstration:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dispalay form</title>
</head>
<body>
<h4>Here is a form</h4>
<form action="form_action.asp" method="get">
<label for="name">full name:</label>
<input type="text" id="name" name="name"/><br>
Gender:<select name="sex">
<option value="1">male</option>
<option value="2">female</option>
</select><br>
password:<input type="password" name="pwd"/><br>
education:<input type="radio" name="edu"/>undergraduate
<input type="radio" name="edu"/>specialty<br>
hobby:<input type="checkbox" name="hobby"/>Basketball
<input type="checkbox" name="hobby"/>Football
<input type="checkbox" name="hobby"/>Table Tennis<br>
personal data:<input type="file"><br>
Self evaluation:<textarea cols="50" ></textarea>
<input type="hidden" value="1"><br>
<input type="image" src="github1.png">
</form>
</body>
</html>
Demonstration effect:
πCSS
1, Concept
Cascading Style Sheets cascading style sheets (cascading: multiple styles can act on the same html element and take effect at the same time). CSS has powerful functions, which can separate content display from style control and reduce coupling (decoupling).
2, Use of CSS
The combination of css and html
1. Inline style
Use the style attribute in the tag to specify the css code, such as: < div style = "color: red;" > It has also been used in the introduction of html < / CSV >.
2. Internal style
In the head tag, define the style tag. The tag body content of the style tag is the css code, such as:
<style>
div{
color:blue;
}
</style>
<div>hello css</div>
3. External style
In the head tag, define the link tag and introduce external css resource files, such as:
a.css File:
div{
color:green;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
ps:
- Inline style, internal style and external style, css has a wider scope of action
- Inline styles are not commonly used
- The external style can be written as:
<style> @import "css/a.css"; </style>
3, CSS syntax
Format:
selector {
Property name 1:Attribute value 1;
Attribute name 2:Attribute value 2;
...
}
Selectors (described below): filter elements with similar characteristics
ps:
Each pair of attributes needs to be used; Separated, the last pair of attributes can not be added;
4, Selector
1. Base selector
-
id selector: select the element of the specific id attribute value It is recommended that the id value be unique in an html page
Syntax: #id attribute value {}
-
Class selector: select elements with the same class attribute value.
Syntax: class attribute value {}
The ps: id selector takes precedence over the class selector
-
Element selector: select an element with the same label name
Syntax: label name {}
ps: class selectors take precedence over element selectors
2. Extension selector
-
Select all elements:
Syntax: * {}
-
Union selector:
Syntax: selector 1, selector 2{}
-
Sub selector: filter selector 2 element under selector 1 element
Syntax: selector 1 selector 2{}
-
Parent selector: parent element selector 1 of filter selector 2
Element: selector 1 > selector 2{}
-
Attribute selector: select the element name with attribute name = attribute value
Syntax: element name [attribute name = "attribute value"] {}
example:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>E[att^=value]Application of attribute selector</title> <style type="text/css"> p[id^="one"]{ color:pink; font-family:"Microsoft YaHei "; font-size:20px; } </style> </head> <body> <h2>Spring hope</h2> <p id="one">The country has broken mountains and rivers, and the city has deep vegetation in spring.</p> <p id="two">When feeling, the flower splashes tears, hate the other bird's heart.</p> <p id="one1">The beacon fire lasts for three months, and the letter from home is worth ten thousand gold.</p> <p id="two1">The white head scratch is shorter, and the muddy desire is more than the hairpin.</p> </body> </html> -
Pseudo selector: select the state that some elements have
Syntax: element: state {}
Status:
- link: status of initialization
- visited: accessed status
- active: accessing status
- Hover: mouse hover
example:
<!DOCTYPE html> <html> <head> <style> /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } </style> </head> <body> <h1>CSS link</h1> <p><b><a href="/index.html" target="_blank">This is a link</a></b></p> <p><b>notes:</b>stay CSS In the definition, a:hover Must be in a:link and a:visited Before it takes effect.</p> <p><b>notes:</b>stay CSS In the definition, a:active Must be in a:hover Before it takes effect.</p> </body> </html>
5, Attributes
1. Font, text
- Find size: font size
- Color: text color
- Text align: alignment
- Line height: line height
2. Background
background
3. Border
border
4. Dimensions
- Width: width
- Height: height
5. Box model
-
Margin: outer margin
<html> <head> <style type="text/css"> p.margin {margin: 2cm 4cm 3cm 4cm} </style> </head> <body> <p>This paragraph does not specify an outer margin.</p> <p class="margin">This paragraph has a specified outer margin. This paragraph has a specified outer margin. This paragraph has a specified outer margin. This paragraph has a specified outer margin. This paragraph has a specified outer margin.</p> <p>This paragraph does not specify an outer margin.</p> </body> </html> -
padding: inner margin
- By default, the inside margin affects the size of the entire box
- box-sizing:boder-box; For the property of the investment related box, let the width and height be the size of the final box
-
Float: float
- left
- right
πJavaScript
1, Concept
A client script language (without compilation) that runs in the client browser, and each browser has JavaScript Parsing engine.
JavaScript can be used to enhance the interaction process between users and HTML pages, and can control HTML elements to make the page have some dynamic effects.
2, Basic grammar
1. Combine with html
- Internal js: define < script > tag, and the content of tag body is js code
- External js: define < script > tags and import external js files through src attribute
ps: < script > can be defined anywhere on the html page, but the defined location will affect the execution order, and < script > can define multiple.
2. Notes
- Single line comment: / comment content
- Multiline comment: / * comment content*/
3. Data type
3.1. Original data type:
- Number: number. Integer / decimal /NaN(not a number)
- String: string. String "abc" "a" 'abc'
- boolean: true and false
- null: a placeholder with an empty object
- Undefined: undefined. If a variable has no initialization value, it will be assigned to undefined by default
ps: in JS, if the operand is not the type required by the operator, the JS engine will automatically type convert the operand.
For other types, convert from string to number: convert according to literal value. If the literal value is not a number, it is converted to NaN (a number that is not a number), boolean to number: true to 1, and false to 0.
Other types are converted to boolean, number type, 0 or NaN is false, others are true, string type, except empty string (""), others are true, null & undefined: all are false, and all objects are true
3.2 reference data type
- object
4. Variable
var variable name = initialization value;
typeof operator: gets the type of the variable.
Note: after null operation, object is obtained
5. Operator
Unary operator:
- ++Self increasing
- – self subtraction
- +(-) sign
Arithmetic operator:
+ - * / % ...
Comparison operator:
>< > = < = = = = = = = = = = = (all equal to)
ps: strings are compared in dictionary order, bit by bit, until the size is obtained=== All equals to judge the type before comparison. If the types are different, it will directly return false== Only compare the values converted to the same type to see whether the values are equal.
Logical operators:
&& || !
Ternary operator:
Syntax: expression? Value 1: value 2, value 1 if true, value 2 if false,
var a = 3; var b = 4; var c = a > b ? 1:0;
6. Process control statement
- if...else...
- Switch: (in java, the data types that the switch statement can accept are byte int shor char, enumeration (1.5), string (1.7). In JS, the switch statement can accept any original data type)
- while
- do...while
- for
7. JS special syntax
- Statement with; At the end, if there is only one statement in a line; Can be omitted (not recommended)
- The var keyword can be used or not used for the definition of variables. It means that the defined variables are local variables, and it does not mean that the defined variables are global variables (not recommended)
8. 99 multiplication table case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>99 multiplication table</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table align='center'>");
//1. Complete the basic for loop nesting and display the multiplication table
for (var i = 1; i <= 9 ; i++) {
document.write("<tr>");
for (var j = 1; j <=i ; j++) {
document.write("<td>");
//Output 1 * 1 = 1
document.write(i + " * " + j + " = " + ( i*j) +" ");
document.write("</td>");
}
document.write("</tr>");
}
//2. Complete table nesting
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
3, Basic object
1. Function: function (method) object
(1) . creation method:
- Var fun = new function (formal parameter list, method body)// Forget it
- function method name (formal parameter list){
Method body
} - var method name = function (formal parameter list){
Method body
}
(2) . features:
- The method definition is that the type of formal parameter does not need to be written, and the return value type does not need to be written.
- Method is an object. If a method with the same name is defined, it will be overwritten
- In JS, the call of a method is only related to the name of the method, not the parameter list
- In the method declaration, there is a hidden built-in object (array), arguments, which encapsulates all the actual parameters
(3) , call
- Method name (actual parameter list);
2. Array: array object
(1) , create:
- Var arr = new array (element list);
- Var arr = new array (default length);
- var arr = [element list];
(2) . method:
-
Join (parameter): concatenates the elements in the array into a string according to the specified separator
var arrs = new Array("welcome","everyone") console.log(arrs.join());//Without parameters, it is the same as toString() console.log(arrs.join("")); console.log(arrs.join("-")); console.log(arrs.join("+"));
-
push() adds one or more elements to the end of the array and returns the new length
(3) , attribute
Length: the length of the array
(4) . features:
- In JS, the type of array elements is variable.
- JS, the array length is variable.
3,Boolean
4. Date: Date object
(1) , create
β var date = new Date();
(2) . method:
- toLocaleString(): returns the local time string format corresponding to the current date object
- getTime(): get the millisecond value. Returns the millisecond difference between the time described by the current scheduled object and zero on January 1, 1970
5. Math: Math objects
(1) , create:
Math objects can be used directly without creating them. Math. Method name ();
(2) . method:
- random(): returns a random number between 0 and 1. Including 0 and excluding 1
- ceil(x): round up the logarithm// 4.5 -> 5
- floor(x): round down the logarithm// 4.5 - > 4
- round(x): round the number to the nearest integer// 4.5 -> 5
(3) , attribute
β PI(3.141592653589793)
6,Number
7,String
8,Global
(1) . features:
Global object. This method encapsulated in global can be called directly without an object. Method name ();
(2) . method:
-
encodeURI():url encoding
-
decodeURI():url decoding
-
encodeURIComponent():url encoding, encoding more characters
-
decodeURIComponent():url decoding
-
parseInt(): convert a string into a number (judge whether each character is a number one by one until it is not a number, and convert the preceding number to number)
-
isNaN(): judge whether a value is NaN (NaN doesn't recognize six relatives or even himself. NaN's participation = = compare all and ask false)
-
eval(): speak JavaScript string and execute it as script code.
4, BOM
1. Concept
Browser Object Model the Browser Object Model encapsulates all components of the browser into objects
2. Composition
- Window: window object
- Navigator: Browser PAIR 8
- Screen: display screen object
- History: history object
- Location: address bar object
3. Window: window object
(1) Methods related to pop-up box:
- alert() displays a warning box with a message and a confirmation button.
- confirm() displays a dialog box with a message and a confirm button and a cancel button.
- If the user clicks the OK button, the method returns true
- If the user clicks the Cancel button, the method returns false
- prompt() displays a dialog box that prompts the user for input.
- Return value: get the value entered by the user
(2) Methods related to opening and closing
- close() closes the browser window. (who calls me, I close who)
- open() opens a new browser Window. (returns a new Window object)
(3) Methods related to timer
- Base note: setTimeout(): call a function or compute an expression after the specified millisecond count.
- clearTimeout(): cancels the timeout set by the setTimeout() method.
- setInterval() calls a function or evaluates an expression for a specified period (in milliseconds).
- clearInterval() cancels the timeout set by setInterval().
(4) . features
Window objects do not need to be created and can be used directly by window. window. Method name (); The window reference can be omitted and directly the method name ().
4. Location: address bar object
(1) , create
- window.location
- location
(2) . method
- reload() reloads the current document. brush
(3) , attribute
- href: sets or returns the full URL.
5. History: history object
(1) , create
- window.history
- history
(2) . method
- back(): load the previous URL in the history list.
- forward(): load the next URL in the history list.
- Go (parameter): load a specific page in the history list.
- Parameter positive: advance several history records
- Parameter negative: back several history records
(3) , attribute
- length: returns the number of URL s in the current window history list.
5, DOM
1. Concept
Document Object Model document object model encapsulates each component of a markup language document as an object. These objects can be used to perform CRUD dynamic operations on markup language documents.
2. DOM classification
The DOM standard is divided into three different parts:
- Core DOM - standard model for any structured document
- Document: document object
- Element: element object
- Attribute: attribute object
- Text: text object
- Comment: comment object
- Node: node object, the parent object of the other five
- XML DOM - standard model for XML documents
- HTML DOM - standard model for HTML documents
3. Core DOM model
3.1. Document object:
3.1.1. Create
- window.document
- document
3.1.2 method
- Get Element object:
- getElementById(): get the element object according to the id attribute value. The id attribute value is generally unique
- getElementsByTagName(): get the element objects according to the element name. The return value is an array
- getElementsByClassName(): get the element objects according to the Class attribute value. The return value is an array
- etElementsByName(): get element objects according to the value of the name attribute. The return value is an array
- Create additional DOM objects:
- createAttribute(name)
- createComment()
- createElement()
- createTextNode()
3.2 Element: Element object
3.2.1. Get / create
Get and create through document
3.2.2 method
- removeAttribute(): deletes an attribute
- setAttribute(): set attribute
3.3. Node: node object, the parent object of the other five
3.3.1 features
All nodes can be considered as a dom
3.3.2 method (CRUD dom tree)
- appendChild(): adds a new child node to the end of the child node list of the node.
- removeChild(): deletes (and returns) the specified child node of the current node.
- replaceChild(): replace a child node with a new node.
3.3.3 attributes
parentNode returns the parent node of the node.
6, Event monitoring mechanism
- Concept: after some operations are performed on some components, the execution of some codes is triggered.
- Events: some actions. For example: click, double-click, press the keyboard and move the mouse
- Event source: component. For example: button text input box
- Listener: code.
- Register listener: combine event, event source and listener. When an event occurs on the event source, it triggers the execution of a listener code.
1. Common events
- Click event:
- onclick: click the event
- Ondbllick: double click the event
- Focus event:
- onblur: lose focus
- onfocus: element gets focus.
- Load event:
- onload: a page or an image is loaded.
- Mouse events:
- onmousedown mouse button is pressed.
- onmouseup mouse button is released.
- onmousemove mouse is moved.
- onmouseover mouse over an element.
- onmouseout move the mouse away from an element.
- Keyboard events:
- onkeydown a keyboard key is pressed.
- onkeyup a keyboard key is released.
- onkeypress a keyboard key is pressed and released.
- Selection and change:
- The content of the onchange field is changed.
- The onselect text is selected.
- Form event:
- The onsubmit confirmation button is clicked.
- The onreset button is clicked.
2. Incident cases
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event</title>
</head>
<body>
<img id="github1" src="github1.png" onclick="fun();">
<img id="github2" src="github2.png">
<script>
function fun(){
alert('I was ordered');
alert('I was ordered again');
}
function fun2(){
alert('Why should I be old?');
}
//1. Get github2 object
var github2 = document.getElementById("github2");
//2. binding events
github2.onclick = fun2;
</script>
</body>
</html>
effect:
Click the second picture to display:
