Web development model selection, who graduated from web development

What is? HTML?

HTML: ( Hypertext Markup Language ) Hypertext markup language , It's an iconic language . It includes a series of labels ． Through these tags, the document format on the network can be unified , To disperse Internet Resources are connected as a logical whole .

characteristic :

• Simplicity ： Super text markup language version upgrade adopts superset mode , So it is more flexible and convenient ;

• Extensibility ： The extensive application of hypertext markup language has brought about enhanced functions , Add identifier and other requirements , Hypertext markup language takes the form of subclass elements , Guarantee for system expansion ;

• Platform independence ： Although personal computers are popular , But use MAC Waiting for other machines , Hypertext markup language can be used on a wide range of platforms ;

• generality ： in addition ,HTML It's the universal language of the Internet , One is simple 、 Universal all set markup language . It allows web producers to create complex pages with text and images , These pages can be accessed by anyone else on the Internet , No matter what kind of computer or browser you use ;

CSS  piece

link  And  @import  The difference between

• link
    yes  
  HTML
    The way , 
  @import
    yes
  CSS
  The way

• link
    Maximum support for parallel downloads , 
  @import
    Too much nesting leads to serial downloads , appear  FOUC ( Document style lapses briefly )

• link
    Can pass  
  rel="alternate stylesheet"
    Specify candidate styles

• The browser to  
  link
    Support precedes  
  @import
   , have access to  
  @import
    Hide style from old browser

• @import
    Must be before the pattern rules , Can be in
  css
  Other documents are cited in the document

• On the whole ： 
  link
    be better than  
  @import
   ,
  link
  Higher priority

BFC  What's the usage?

• Create rules ：

• Root element

• Floating elements （ 
  float
    It does not take  
  none
   ）

• Absolute positioning elements （ 
  position
    The value is  
  absolute
    or  
  fixed
   ）

• display
    The value is  
  inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex
    One of the elements

• overflow
    It does not take  
  visible
    The elements of

• effect

• Can contain floating elements

• Not covered by floating elements

• Stop the parent-child element  
  margin
    Fold

Several ways to clear floating

• Parent  
  div
    Definition  
  height

• Blank at the end  
  div
    label  
  clear:both

• Parent  
  div
    Define pseudo class  
  :after
    and  
  zoom

• Parent  
  div
    Definition  
  overflow:hidden

• Parent  
  div
    Also floating , You need to define the width

• Add... At the end  
  br
    label  
  clear:both

Css3  New pseudo class  -  Pseudo elements

• p:first-of-type
    Choose the first one that belongs to its parent  <p>  Each of the elements  <p>  Elements .

• p:last-of-type
    Choose the last of its parent elements  <p>  Each of the elements  <p>  Elements .

• p:only-of-type
    The selection is unique to its parent element  <p>  Each of the elements  <p>  Elements .

• p:only-child
    Select each of the unique child elements that belong to its parent element  <p>  Elements .

• p:nth-child(2)
    Select each of the second child elements that belongs to its parent element  <p>  Elements .

• :enabled
    Enabled form elements .

• :disabled
    Disabled form elements .

• :checked
    The radio box or check box is selected .

• ::before
    Add content before element .

• ::after
    Add content after element , It can also be used to clear floats .

• ::first-line
    Add a special style line to the first line .

• ::first-letter
    Add a special style to the initial of the text .

• Pseudo class grammar is a ：, It's to make up for css The disadvantages of regular class selectors

• Pseudo element syntax two ：, It's an element generated by a virtual container created out of thin air

IE Box model  、W3C Box model

• W3C The box model ：  Content (content)、 fill ( padding )、 The border ( margin )、  Frame ( border );

• box-sizing: content-box

• width = content width;

• IE Box model ： IE  Of content  Part of it  border  and  padding  Calculated it ;

• box-sizing: border-box

• width = border + padding + content width

display:inline-block  When will the gap not be displayed ？

• Remove spaces

• Use  
  margin
    negative

• Use  
  font-size:0

• letter-spacing

• word-spacing

Inline elements float:left Whether it becomes a block level element or not ？

When the in line element is set to float, it becomes more like  

inline-block

 （ In line block level elements , Set up   The element that becomes this attribute will have both in line and block level features , The most obvious difference is that its default width is not  100% ）, In this case, set... To the elements in the line  

padding-top

  and  

padding-bottom

perhaps  

width 、 height

  It's all effective

If you need to write animation manually , How long do you think the minimum interval is , Why? ？

The default frequency for most displays is  60Hz 

《 Analysis of front-end interview questions in large factories +Web Core summary learning notes + Enterprise project actual combat source code + HD explanation of the latest video 》 Free open source Hui Xin search official account 【 Advanced programming 】

 , namely  1  seconds  60  Time , So the theoretical minimum interval is  1/60*1000ms ＝ 16.7ms

stylus/sass/less difference

• All have “ Variable ”、“ blend ”、“ nesting ”、“ Inherit ”、“ Color blending ” Five basic characteristics

• Sass
    and  
  LESS
    The grammar is more rigorous , 
  LESS
    Make sure you use braces “{}”, 
  Sass
    and  
  Stylus
    You can indent to show the relationship between hierarchy and nesting

• Sass
    No concept of global variables , 
  LESS
    and  
  Stylus
    There is a concept of scope similar to other languages

• Sass
    Is based on  
  Ruby
    Linguistic , and  
  LESS
    and  
  Stylus
    Can be based on  
  NodeJS NPM
    Download the corresponding library and compile it ; That's why you install Sass Sometimes when you're in trouble, you'll report an error , Need to install python Script

advantage ： I don't need to say more , Who knows , It's delicious .

rgba() and opacity What's the difference in the transparency of ？

• rgba()
    and  
  opacity
    Can achieve transparent effect , But the biggest difference is  
  opacity
    Acting on elements , And the transparency of everything inside the element ,

• and  
  rgba()
    Only the color of the element or its background .（ Set up  rgba  Children of transparent elements do not inherit the transparency effect ！）

The way to center horizontally

• The element is an in line element , Set parent element  
  text-align:center

• If the element width is fixed , You can set left and right  
  margin  by  auto
   ;

• If the element is absolutely positioned , Set parent element  
  position  by  relative
   , Element setting
  left:0;right:0;margin:auto;

• Use  
  flex-box
    Layout , Appoint  
  justify-content
    The attribute is
  center

• display
    Set to  
  tabel-ceil

The way to center vertically

• Set the display mode to table , 
  display:table-cell
   , Simultaneous setting  
  vertial-align：middle

• Use  
  flex
    Layout , Set to  
  align-item：center

• Set in absolute positioning  
  bottom:0,top:0
   , And set up  
  margin:auto

• Set at fixed height in absolute positioning  
  top:50%,margin-top
    The value is a negative value of half the height

• Text vertical center setting  
  line-height
    by  
  height
    value

browser   piece

The understanding of the browser kernel

• It is mainly divided into two parts ：
  Rendering engine
  、
  js engine

• Rendering engine ：
  Responsible for getting the content of the web page （html css img ...）, And how to display the web page , And then output to the monitor or printer . Different browser cores have different syntax interpretations for web pages , So the rendering effect is different

• js engine ：
  Parsing and execution javascript  To achieve the dynamic effect of the web

• Starting with the rendering engine and js The engine doesn't differentiate very clearly , later js The engine is becoming more and more independent , The kernel tends to be just a rendering engine

• IE : trident
    kernel

• Firefox ： gecko
    kernel

• Safari : webkit
    kernel

• Opera
   : It used to be  
  presto
    kernel , 
  Opera
    Now switched to
  Google - Chrome
    Of  
  Blink
    kernel

• Chrome:Blink
   ( be based on  
  webkit
   ,
  Google And Opera Software
  Jointly develop )

HTTP  The request mode scenario

• Get
    Method ： Access to data is usually ( View the data )- see

• POST
    Method ： Submitting data to a server usually ( Create data )-create

• PUT
    Method ： Submitting data to a server usually ( Update data )-update, And
  POST
  Methods like , It's also about submitting data , but
  PUT
  Determine the location of resources on the server , Often used to modify data

• HEAD
    Method ： Request only the first part of the page

• DELETE
    Method ： Delete resources on the server

• OPTIONS
    Method ： Used to get the current
  URL
  Supported request mode

• TRACE
    Method ： Used to activate a remote application layer request message loop

• CONNECT
    Method ： Convert request links to transparent
  TCP/IP
  The passage of

HTTP Status code

• 1XX
   ： Information status code

• 100 continue
    continue , Generally in the sending  post  When asked , Has been sent.  http header  After that, the server will return this information , confirm , Then send the specific parameter information

• 2XX
   ： Success status code

• 200 ok
    Normal return information

• 201 created
    The request succeeded and the server created a new resource

• 202 accepted
    The server has received the request , But not yet processed

• 3XX
   ： Redirect

• 301 move per
    The requested page has been permanently redirected

• 302 found
    Temporary redirection

• 303 see other
    Temporary redirection , And always use get Request new url

• 304 not modified
    Since last request , The requested page has not been modified

• 4XX
   ： Client error

• 400 bad request
    The server cannot understand the format of the request , Clients should not try to make requests again with the same content

• 401 unauthorized
    Request not authorized

• 403 forbidden
    Blocking access

• 404 not found
    Can't find how url Matching resources

• 5XX
   ： Server error

• 500 internal server error
    The most common server side error

• 503 service unacailable
    The server is temporarily unable to process the request （ Maybe it's overload maintenance ）

Last

Technology has no end , I can't finish learning , The most important thing is to live 、 No baldness . Reading or watching video when starting with zero basis , I think adults , Why do you have to do multiple choice questions , Both . Read as you like , Watch videos if you like . The most important thing is that in the process of self-study , Be sure not to look high and hold low , We have to fight , Put what you've learned into the project , solve the problem , After that, I further developed my own technology .

[ Open source sharing ：【 Analysis of front-end interview questions in large factories + Core summary learning notes + Real project practice + The latest explanation video 】](()

After learning the skill , We're about to start preparing for the interview , Be sure to prepare your resume when looking for a job , After all, a resume is a stepping stone to finding a job , There is also the need to do more interview questions , Review and consolidate .