Learn front-end finishing
Editor: vscode
Learning courses: a dark horse crossing the front Tencent classroom courses
♥ HTML+CSS ♥
HTML Infrastructure
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <title></title>
> <meta charset="UTF-8">
> <meta name="viewport" content="width=device-width, initial-scale=1">
> <link href="css/style.css" rel="stylesheet">
> </head>
> <body>
>
> </body> </html>
html comments
<!--内容-->
css Notes:
/*内容*/
js comments
单行代码 //内容
多行代码 /*内容*/
1 line-level elements, inline elements Inline
Feature: content deciding the height occupied by the element
can not be changed by the width and height CSS
span del A strong EM
Any element with inline text has characteristics
2-level elements Block
Feature: a separate line
can be changed by the width and height CSS
div P UL address form Li OL
3 OK-Block-level block elements inline
Feature: determine the size of the content
can change the width and height
img
Row-level nested rows only element-level elements
block elements can be nested to any element
inline inline-block -> text-earth element
Special HTML tags
iframe frame to another Web page as a whole to introduce its own page
css selector type
1 ID Selector
2 class
. 3 tag
4 wildcard
5 Property
6 pseudo class
7 pseudo-elements
8 adjacent sub-selection selector
Weight
! Important infinity
inline style 1000
ID selector 100
properties, pseudo-class selectors, class 10
tag, the pseudo-element 1
wildcard adjacent sub Selector Selector 0
Use
position: Absolute;
a float: left / right;
automatically triggers the display: inline-block; element into the row-level block elements
Box model:
a border wall box
2 padding padding
. 3 content box height width
. 4 margin Margin
model four parts
margin + border + padding + (content = width + height)
A trigger box BFC (Block the format context)
(clear float floating element flow)
position: Absolute;
the display: inline-Block;
a float: left / right;
overflow: hidden;
position: absolute; float: left / right
from the inner element to convert Inline-block
Pseudo processing elements
{
Content: ""
Clear: both;
}
Three-piece single text overflow handling
overflow: hidden;
text-overflow: ellipsis;
White Space-: nowrap;
Text and graphics processing
A three-piece add text css
text-indent: ** PX;
White Space-: nowrap;
overflow: hidden;
2 add text change padding
height: 0px;
padding-Top: ** PX;
overflow: hidden;
♥ javascript ♥
The composition of the browser: shell core rendering engine (grammar rules and rendering) js engine other modules
javascript: single-threaded ECMA interpreted language labeling
Mainstream browser kernel
IE ------------- Trident
Chrome ----- WebKit / Blink
Firefox Gecko -------
Opera Presto --------
Safari - ------ webkit
The definition of variables: the assignment statement
JS is a parasitic language, HTML can not run out (except node.js)
Basic Rules statement js
* statement later use semicolon ";" exc funtion for else the like
* js syntax error will cause the end of the succeeding code, but does not affect other blocks of code JS
* Writing format specification '+ - =' two surfaces shall have space, easy good-looking, easy to program maintenance
NaN:Not a Number
alert pop
API (application interfaces) General Procedure Interface
Operator javascript:
"+" Math 1, 2. link string data type plus any strings equal to the string
"-" "*" "/" "%" "=" "()"
priority "=" weakest " () "strongest
“++” “–” “+=” “-=” “*=” “%=”
The evaluation order from right to left
to calculate the order from left to right
* Comparison operators
">" "<" "=" "> =", "<=", "! ="
Result of the comparison boolean value
* Logical operator
"&&" and (the whole truth to be true) "||" or "!" Non-
* Operation result as a true value
It was identified as a false value
undefined null NaN "" 0 false
Value Type - Data type
original value (unchangeable) Stack
Number var A = -123.123;
Boolean to false var A = / to true;
String var B = "ABCD"; string
undefined var b; output display undefined
null var B = null;
determine the type of value
Reference value heap
Array
Object
funtion
...
DATE
RegExp
Both situations are not the same assignment
Input n-
var = n-the parseInt (window.promat ( 'INPUT'));
Conditional statements
if(){
}
switch(){ //条件
case:**; //情况
}
break 中断语句
continue
For loop
for(var i = 0; i < 10; i++){
document.write('a');
}
while statement
while(){
}
js achieve Fibonacci number column rank n
var n = parseInt(window.prompt('input'));
var first = 1,
second = 1,
third;
if(n > 2){
for(var i = 0;i < n-2; i++){
third = first + second;
first = second;
second = third;
}
document.write(third);
}else{
document.write(1);
}
Seek within 100 primes
var count = 0;
for(var i = 1; i < 100;i ++){
for(var j = 1; j <=i ; j++){
if(i % j ==0){
count++;
}
if( j==i && count==2){
document.write(i + " ");
}
}
count = 0;
}
