html+css+css3

Single label Double label

1. A single tag

• input img hr link mate br

2. Double label

• div ul li table tr td ol body

#### Two-column three-column layout

1. floating
2. positioning
3. Display: flex

CSS animations

1. Linear animation (shows transition graphics)
   • 1.1 Translation Animation
     • Transform: Translate/rotate rotate/ zoom scale/ skew
     • The rotation can be set using the Origin property
   • 1.2 Transition Animation
     • Transrion: Attribute delay time transition mode
2. Frame animation (no transition time, each time point arrives at the position)
   • 2.1 Custom animation
     • Anmiation: Indicates whether the animation name time motion mode is cyclic
   • 2.2 Animation playback sequence
     • We can use from{}to{} from where to where
     • Percentage applied

The difference between PX REM EM

1. Px is essentially a fixed pixel
2. Em is evaluated relative to its parent’s properties
3. Rem is relative to the root element

Media queries

• Adaptive displays different layouts according to the scale of the screen size

Vertically centered layout

1. Positioning (relative)
2. Positioning (absolute)
3. Display: flex
4. Margin: 0 auto

Float and the side effects of float

1. Float: left/right
2. Background doesn’t show

4. Margin padding does not display properly

Remove the floating

1. The parent sets the appropriate width and height
2. Overflow: hidden
3. The clear: both
4. After pseudo-class clears float

New h5 features and new H5 tags

1. Label semantics

• The page presents a clear structure
• It is convenient for the device to parse
• Good for search engine optimization
• Easy to maintain

2. Adding local Storage
3. Form placeholder has been added
4. Multimedia features (video and audio support)

Change the default style of the label

• a ext-decoration: none;
• Li list – style: none

Common browser kernels

1. Ie trident kernel
2. Firefox gecko kernel
3. Safari its kernel

4.chrome blink blink

Explain what the browser kernel understands

1. Rendering engine

• Render images HTML XML CSS

2. Js engine

• Perform js

Href and SRC

• Href identifier hypertext references are used to associate pages on link and A elements
• SRC indicates the reference source

How does the browser render the page

• Parsing an HTML file to create a DOM tree from top to bottom will block any style encountered by the script and the external style will not block
• Resolve CSS browser default styles < user Settings < external styles < inline styles < inline styles
• Combine CSS and DOM to build a render tree
• Layout and drawing redraw and rearrange

Front-end page layering

• structure
• modified
• behavior

XHTML is different from HTML

• xhtml
• The label must be closed
• Tags must be lowercase
• You have to have a root element

What does an anchor point do? How do you create an anchor point

• An anchor is a marker on a line in a document similar to a bookmark used to connect to a location in the document
• Give the tag a name or id value in the following a tag # value

Alt and title

• Title provides the title information for the element
• Alt is the text message that the image cannot display the prompt

Advantages and disadvantages of iframe

1. advantages

• Resolve slow loading of third-party content
• Parallel loading script

2. disadvantages

• Empty content also requires load time
• The element is not semantic enough

H5 label

• nva footer header vido aido asdie conent

Display: None and visibility: hidden

1. The same

• They both make elements invisible

2. different

• Display is a non-inherited property that makes it disappear from the DOM tree without taking up any space when rendering
• Visiblity takes up space and doesn’t disappear above the DOM tree except that the content doesn’t have inheritance properties

A way to hide elements

• Opacity: 0
• Visibility: hidden
• Display: none
• Height: 0 display none

Standard box model and weird box model

• Standard box model width = content.width
• Width = content+border+padding

Inheritable styles

• Text and font related can be inherited
• Cannot padding Margin width border

Implement vertical horizontal elements

• Give the element width margin-left/right: auto
• The parent element text-align center
• Absolute position: Absolute
• Flex layout

What’s the difference between a double colon and a single colon

• : : This is for the element
• : This is a pseudo-class

Implementation principle of bootstrap grid system

• Divide the page into 12 equal parts. Jq-developed components adjust the margins inside and outside with media queries

Position has those values

• Absolute absolute relative to the root element relative to the parent if the parent has relative
• Reative: to orientate relative to the current position
• Fixed Indicates that the device is positioned relative to itself

When does z-index take effect

• Stack boxes when absolute and flxed

Resolve white space between images and text

• Set the image to pseudo-diaPlay: block
• Make div line-height small enough

The child element sets maegin-top and the parent element moves with it

• Pseudo elements

Parent: : before {display: table;
            content: "";
        }
Copy the code

• Give the parent element a overflow: hidden

The parameters of the box – shadow

• Horizontal shadow X Vertical shadow Y Blur Radius Shadow size Shadow color
• Box-shadow: 3 4 10 3 red

The table with

• Rowspan rows
• Colspan across the column

Common CSS layouts

• The table layout
• Box layout
• Liquid layout
• Flex layout
• Adaptive layout

Range of new features

• Fillet radius
• Shadow shadow
• Linear gradient
• Transform tarsform
• rgba
• The picture frame
• Media queries
• Is the element…

CSS selector weights

CSS selectors	The weight
Label selector	1
Class selectors	10
The id selector	100
Inline style	1000
For the element	1
pseudo-classes	10

A The four states of the tags and the order in which they are placed

• link visited hover active

How to reconstruct the page

• Write CSS to streamline your pages and improve your user experience

The content attribute

• Content is used with: before and: after to insert generated content

What are the adaptive units in the CSS

• % vw (relative to viewport width unit) vh REM em

Animation and tranition

• The same function is to change the attribute value of the element to achieve the animation effect
• The transition is a smooth transition between two properties to achieve animation effects and therefore cannot achieve complex animations. Animtion sets multiple keyframes and defines the properties of each keyframe so that complex animations can be achieved

Talk about the understanding of SASS

• Sass can reduce code by using variable computation. Sass is a preprocessor capable of using nested syntax to implement code reuse, looping and inheritance

What’s so cool about template strings

• Variable tag text can be inlaid without being affected by carriage return Spaces

The difference between an arrow function and a normal function

1. Appearance is different
2. Arrow functions are anonymous
3. It doesn’t have its own “this” to point to
4. New cannot be used as a constructor
5. No Object. Prototype property

Get and POST

• Get s get Obtains resources from the server. Post Sends data to the server
• Get is to pass parameters through the address bar. = Value Multiple data uses & connect POST to seal the field in a request sent to the server. The process is invisible
• Get transmits a small amount of data. Post transmits a large amount of data
• Get is insecure post is more secure than GET

url

• The path

What is cross-domain and how to solve cross-domain

• A domain name component protocol subdomain name Main domain name port number requested resource
• Cross-domain due to the same origin policy of JS browsers cannot execute scripts of other websites. The so-called same origin refers to the protocol domain name and port consistency
• Resolve cross-domain JSOP Script tag CORS cross-resource sharing

What is the JSONP principle

• Json you are a text-based format that is better than lightweight
• Jsonp An important point of JSONP is that it allows users to pass in a callback function. The core of jSONP is to dynamically add tags to call scripts from other websites

Prototype chain

1. Every JS object has a prototype object
2. The chain of archetypes because the archetype is itself an object and he has his own archetype and his own archetype has his own archetype and so it forms a chain and that chain is called the chain of archetypes
3. –proto– prototype Every js object created has a –proto– property that points to the constructor’s prototype object We concatenate the –proto– property until object.prototype.–proto– is empty

Call aplay bind

• The bind call does not execute directly but returns a copy of the function that changes the context
• Call and apply are executed directly
• Call is passed as a number and apply is passed as an array

Status code

• 1XX Information category Indicates that the web browser request is being received
• 2XX successfully received the correct understanding and processing
• 200 Success and return data
• 3XX redirection indicates that the redirection is not successful
• 4XX Client error
• 400 The requested address is invalid
• 404 Page not found
• 403 Access Denied
• The 5XX server fails

What is Ajax how do you create a native Ajax

• Ajax is a technique for keeping up with new parts of a web page without having to load the entire page
• Creating an Ajax

(1) creates the XMLHttprequset objectvar xhr  =newXMLhttpRequset (),2Open (Request mode get, address URL) (3Xhr.send () (4Xhr.onreadystatechage =function(a){}
Copy the code

• Mimicking an interface

// Easy-mock simulates a GET interface
var url = "https://www.easy-mock.com/mock/5bad8210a1b7f6239a61664f/pcTest";
// Create an HTTP request
var xhr = new XMLHttpRequest();
xhr.open("get",url);
xhr.send();// Send the request
xhr.onreadystatechange = function(){
// When the request succeeds
    if(xhr.readyState === 4 && xhr.status == 200) {var reponse = xhr.responseText;
        Parse () converts a string to a JSON object
        var name = JSON.parse(reponse).data.name;
        console.log(name)
    }
}
Copy the code

• Readystate holds xHLHTTprequset state
• 0: requests initialization
• 1: The server connection is established
• 2: Request accepted
• 3: The request is being processed
• 4: Request completed and response ready

HTTP request and response composition

• HTTP request format The request line consists of the request method field url field and HTTP protocol field
• HTTP request response status code Number and text composition Display success or failure Response header contains the response body such as the date, time, content type and length from the server

Synchronous what is asynchronous

• The synchronization client does nothing while waiting for the server to respond
• An asynchronous client initiating a request can perform other operations while the server is responding

Task queue JS execution mechanism

• The js execution mechanism is executed from top to bottom in a single thread. The previous task is executed and the next task needs to wait, but the delayed execution of the task will skip the delayed task and enter the task queue. After the execution of the main thread, the code in the execution task queue will generate synchronous asynchronism

Does declaring a variable with let bring it forward

• There is no mechanism in JS to return variables declared by var and functions declared by function to the top of the scope before the program executes

Difference between document.write and innerHtml

• Document. wirte rewrites the entire page
• InnerHTML just overwrites the content of the element that it belongs to

Browser caching mechanism

• There are two types of browser cache: strong cache and negotiated cache
• Strong caching forces the browser cache to be used without asking the browser for a specified period of time

Let const var

• Const defines constants that cannot be modified and must be initialized
• Var definition face change can be modified can be repeated declaration not initialized output undefined will not report an error
• Let is a block-level scoped function defined inside and has no effect on the outside of the function

Ajax parameter passing in JQ

$.ajax({
    url:"Address".type:"POST" // Send mode
    dataType: "jsonp"// Parsing mode
    success:function(res){
            varsubjects = res.subjects; }})Copy the code

How to understand this in JS

• Method refers to who calls the method
• Event to the current object
• Constructor to point to the instantiated object
• The ordinary function this points to the window
• The timer itself is a window method

The Promise principle and how to use promises

• Promise was able to convert asynchronous code into synchronous code to solve callback hell and modularize complex asynchronous callbacks
• Promise is a constructor that creates an instance into its own resolve, Reject methods
• Traditional asynchronous code does not return a value does not throw an exception promise will throw an exception until the bubble is caught

What are the new es6 features

• Let and const
• Deconstructing assignment…
• Arrow function
• Class class
• promise tent
• Template string
• Import/export import exports

The difference between deep copy and shallow copy

• Base type names and values are stored in stack memory
• The name of the reference data type is in the stack and the value is in the heap and the stack provides a reference address to point to the heap
• Shallow-copy both variables to the same address and if you change one of them you change the other one

var obj = {
            name: "li",}var xu = obj;
        xu.name = "xu";
        console.log(obj, xu);
Copy the code

• Deep copy copies the value of an object to its new variable and modifies one object without changing the other

        varan = { ... obj }; an.name ="an";
        console.log(obj, an);
Copy the code

The callback function

• The argument to a function is another function
• Callback hell is asynchronous. Each layer of callback depends on the last function to execute, so callback hell is formed

The difference between timers

• Settimeout Executes once after the specified time
• Setinterval is executed in a cycle of call times

Dom loading sequence

• Parsing HTML structure loading external scripts and stylesheet files Parsing execution scripts loading images external files the page is loaded

Send the action request in the form

• Action = URL is used to specify the format to handle the submitted form. It can be a URL address (submitted to the program) or an E-mail address.

What is routing

• Routing displays different pages based on different urls
• Install the appropriate module to configure router.js

Name Path Component: Specifies the component to use for routing {path: '/detail/:id'.name: 'detail'.component: () = > import('./views/Detail.vue')}Copy the code

• Labels are used to switch between routes

<router-link to="/about">about</router-link>

Define eventshandleClick(){
    this.$router.push('/about');
  }
Copy the code

Js to determine the method of data type

• Determine the basic data type Typeof
• Basic data type: Number string Boolean Undefined null
• Determine the reference data type instantof
• Reference data type: Array Object function

Type of output false

• “”
• 0
• null
• undefined
• false
• nan

Js method to create an object

• Literals can only be created once with poor reuse
• The constructor
• Through the object

 var person = new Object(a); person.name ="li";
 person.age = 21;
 person.Introduce = function () {
         alert("My name is " + this.name + ".I'm " + this.age);
     };
 person.Introduce();
Copy the code

Window. onLoad differs from document.ready

• Document. ready (not including images and other non-text media files) is quickly used in JQ
• Window. onload is a function that executes after the DOM document tree is loaded and all files are loaded.

Three main features of object orientation

• Polymorphic encapsulation inheritance
• Object orientation is a development idea that determines which functions to call depending on the parameters passed in

Js language features

• The asynchronous callback function executed by the closure code implements synchronous and asynchronous synchronous and asynchronous blocking and non-blocking

What happens when YOU new an object

• Instantiate an object
• Call the constructor to point the constructor’s this to the instantiated object
• The new object shares basic function methods and properties
• Return a new object

Js built-in objects and functions

1. Data encapsulation class object

• string()
• number()
• boolean()
• array()
• function()
• object()
• data()
• math()
• arguments()
• error()

2. Built-in methods

• alert()
• eval()
• parseln()
• prompt

3. Array arR method

• join
• length
• reverse
• sort

4.data

• getDay
• getHours
• getData
• getMinutes

5. Mathematical functions

• (1) The abs function: math.abs (same below) returns the absolute value of a number.
• (2) ACOS function: return the inverse cosine value of a number, the result is 0 ~ π radians.
• (3) AsIN function: return the arcsine value of a number, the result is -π/2 ~ π/2 radians.
• (4) Atan function: returns the arctangent value of a number, the result is -π/2 ~ π/2 radians.
• (5) ATan2 function: returns the polar Angle value of a coordinate.
• (6) Ceil function: returns the minimum integer value of a number (greater than or equal to).
• (7) The cosine function: returns the cosine of a number, the result is -1 ~ 1.
• (8)exp function: returns the power of e(natural log).
• The floor function returns the maximum integer value of a number (less than or equal to).
• Log function: the natural logarithm function returns the natural logarithm (e) value of a number.
• (11) Max function: returns the maximum value of two numbers.
• Min function: Returns the minimum value of two numbers.
• Pow function: returns the power of a number.
• Random function: Returns a random value of 0 ~ 1.
• The round function returns the rounded value of a number of type integer.
• Sin: Returns the sine of a number, -1 ~ 1.
• SQRT: returns the square root of a number.
• Tan function: returns the tangent of a number.

6. String function String

• (1) Anchor function: generate a link point to be used as hyperlink. The name of the link point set by the anchor function and the URL set by the other function link.
• (2)big function: add font to 1, and… The label results are identical.
• (3) Blink function: make the string blink, and… The label results are identical.
• (4) The bold function makes the font bold, and… The label results are identical.
• (5)charAt function: returns a character specified in the string.
• (6) Fixed function: set the font to a fixed width font, and.The label results are identical.
• (7)fontcolor function: set fontcolor, and the label result is the same.
• (8)fontsize function: set fontsize, and the label result is the same.
• IndexOf: Returns the first index found in a string, starting from the left.
• (10)italics function: make font to italics, and… The label results are identical.
• (11)lastIndexOf: Returns the first index found in the string, starting at the right.
• Length function: Returns the length of the string. (No parentheses)
• (13) Link function: generate a hyperlink, equivalent to setting the URL address of A.
• (14) Small function: reduce the font size by one, and.The label results are identical.
• (15) Strike function: add a line in the middle of the text, and
  
  .
  The label results are identical.
• (16)sub function: display string as subscript.
• (17) The substring function: returns several characters specified in the string.
• (18) Sup function: shows the string as superscript.
• (19)toLowerCase function: converts string toLowerCase.
• (20)toUpperCase function: converts string toUpperCase.

Event bubbling and capturing

• When the time of a child element is triggered, the event is propagated up from the event source to trigger the parent click event
• Events occur from the outermost layer knowing the specific element addEventListener True catch false bubble

Event delegation

• The pre-dom event capture phase delegates what happens in the specific DOM to the broader DOM and gives the parent element an event that all of its children can use called event delegation

Js add delete change check

1. create

• CreateElement () creates a specific element
• CreateTextNode Creates a text node

2. Add Remove replace insert

• The appendchild add
• Removechild removed
• Replacechild replacement
• InserBefore insert

3. To find the

• GetElementsByTagName () // Pass the tag name

-getelementsByName () // By the value of the element’s Name attribute -getelementById () // by the element Id, unique

Variable scope

• The valid range of a variable is closely related to where it is defined. A scope describes a variable from a spatial point of view and can be understood as the available range of a variable. Depending on the scope, variables can be divided into local variables and global variables

The dom event flow

• Top-down capture
• Scoped at the deepest target stage
• Bubbling from the top down

Clear event bubbling and event default behavior

• Give the target function an Event object
• Event. stopPropagation Prevents bubbling
• Event.preventdefault Prevents the default behavior

Js data types and differences

• Basic data type value immutable comparison is the value comparison variable placed in the stack area
• Reference data type value variable comparison is value and address comparison
• Values are placed in the stack area and addresses are placed in the heap area

What is js

• Client-side and server-side scripting languages are object-oriented programming languages

hasOwnProperty

• HasOwnProperty (key) // Obj is the object. Key is the string to determine whether an object property contains a key

Es5 ES6 Instantiates objects

• Var creates function objects
• The class to create

closure

• A closure is when a function returns, A stack area did not release resources JS allows the use of internal function – the function definition and function expression is located in the function in the body of another function These internal function can be used in all of the local variable declaration in the outer function, parameters, and statement of other internal functions When the inner function outside contains its outer function is invoked to form closure

The difference between Break and contiune

• Break Breaks out of the current loop
• Contiune jumps out of the current cycle and enters the next cycle

How do I get all browsers to support ES6

• Compile to ES5 using Webpack

cookie localstorage seessionstorage

• Again, the browser stores the data
• Locakstorage and sessionStorage 5-20MB one permanent storage one closed page clear security is high

CSS animation is different from JS animation

• Parsing js does not perform as well as CSS
• Js can achieve pause play clear
• Js is relatively complex

Talk about your understanding of modularity

• Convenient modular development is an idea that simplifies complex pages

Talk about your understanding of front-end engineering

• The programmer closest to the user
• Implementing page interaction
• Can solve the adapter problem
• Optimize to improve user experience