This article from @fe_duzhe – Front-end interview basics will help you find a job

HTML

What SEO does the front end need to pay attention to?

  • Reasonable title, description, keywords: search for the weight of the three decreased one by one, the title value can emphasize the key, important keywords should not appear more than 2 times, and to the front, different pages of title to be different; Description summarizes the content of the page, the length is appropriate, not excessive stacking keywords, different page description is different; Keywords list the key keywords
  • Semantic HTML code that conforms to W3C specifications: semantic code makes it easy for search engines to understand web pages
  • Important content HTML code in the front: search engines grab HTML order from top to bottom, some search engines have restrictions on the length of the grab, to ensure that important content will be captured
  • Do not output important content in JS: crawlers do not execute JS to retrieve content
  • Use iframes sparingly: Search engines do not crawl iframes
  • Alt must be used for non-decorative images
  • Improve site speed: Site speed is an important indicator of search engine ranking

What is the difference between the img tag title and Alt

  • The title isglobal attributesIs used to provide an addition to the elementadvisory information. Usually displayed when the mouse is slid over an element.
  • Alt isimgIs an equivalent description of the picture content. It is used to display and read the picture when the picture cannot be loaded. Removable images are highly accessible. In addition to pure decorative images, meaningful values must be set, and search engines will focus on analysis.

What is a doctype? Examples of common doctypes and features

  • <! DOCTYPE>The declaration must be the first line of the HTML document, located<html>Tag before.
  • <! DOCTYPE>Declarations are not HTML tags; It is an instruction to the Web browser about which HTML version of the page to write.
  • In HTML 4.01,<! DOCTYPE>Declare a reference to DTD, because HTML 4.01 is based on SGML. DTDS dictate rules for markup languages so that browsers can render content correctly.
  • HTML5 is not based on SGML, so there is no need to reference DTDS.

Common DOCTYPE declarations

  • HTML 4.01 Strict: This DTD contains all HTML elements and attributes, but not declarative and deprecated elements (such as fonts). Do not allow Framesets
<! DOCTYPE HTML PUBLIC"- / / / / W3C DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd">
Copy the code
  • HTML 4.01 Transitional: This DTD contains all HTML elements and attributes, both presentable and deprecated (such as font). Do not allow Framesets
<! DOCTYPE HTML PUBLIC"- / / / / W3C DTD HTML 4.01 Transitional / / EN" 
"http://www.w3.org/TR/html4/loose.dtd">
Copy the code
  • HTML 4.01 Frameset: This DTD is equivalent to HTML 4.01 Transitional, but allows Frameset content.
<! DOCTYPE HTML PUBLIC"- / / / / W3C Frameset DTD HTML 4.01 / / EN" 
"http://www.w3.org/TR/html4/frameset.dtd">
Copy the code
  • XHTML 1.0 Strict: This DTD contains all HTML elements and attributes, but excludes demonstrative and deprecated elements (such as font). Framesets are not allowed. Markup must be written in well-formed XML
<! DOCTYPE html PUBLIC"- / / / / W3C DTD XHTML 1.0 Strict / / EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Copy the code
  • XHTML 1.0 Transitional: This DTD contains all HTML elements and attributes, both presentable and deprecated (such as font). Framesets are not allowed. Markup must be written in well-formed XML
<! DOCTYPE html PUBLIC"- / / / / W3C DTD XHTML 1.0 Transitional / / EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Copy the code
  • XHTML 1.0 Frameset: This DTD is equivalent to XHTML 1.0 Transitional, but allows Frameset content.
<! DOCTYPE html PUBLIC"- / / / / W3C DTD XHTML 1.0 Frameset / / EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Copy the code
  • XHTML 1.1: This DTD is equivalent to XHTML 1.0 Strict, but allows the addition of models (such as ruby support for East Asian languages).
<! DOCTYPE html PUBLIC"- / / / / W3C DTD XHTML 1.1 / / EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Copy the code

HTTP status code and its meaning

  • 1XX: indicates the information status code
  • 2XX: success status code
  • 3XX: redirection
  • 4XX: Client error
  • 5XX: Server error

Common status codes:

  • 200: Request succeeded
  • 301: Resources (web pages, etc.) are permanently transferred to another URL
  • 404: Requested resource (web page, etc.) does not exist
  • 500: Internal server error

What are the HTML global attributes

* Id class data-* title style * ID class data-* title style

How can HTML elements be classified

  • Block level elements:div p header footer h1~h6 ol ul ...
  • Inline elements:a b span em strong i ...
  • Inline-block elements:input img ...

CSS

What are the CSS selectors

Introduce the standard CSS box model? What’s different about the box model for the lower version of IE?

  • There are two types, IE box model and W3C box model;
  • Box model: Content, padding, margin, border;
  • Difference: The content section of IE takes the border and padding into account;

How is the CSS priority algorithm calculated

  • The nearest priority rule applies to the nearest style definition in the case of the same weight
  • The loading style is based on the last loaded location

The priorities are:

  • Same weight: Inline style Sheet (inside tag) > Embedded Style Sheet (in current file) > External Style Sheet (in external file)
  • ! important > id > class > tag
  • importantHas a higher priority than inline
  • The labeldivThe weight is: 1; The weight of class is: 10; The weight of the ID is 100

What are the options for vertically centered CSS elements?

  • position: absolute; top:0; left: 0; right:0; bottom: 0; margin: auto
  • position: absolute; top: 50%; left: 50%; margin-top: -110px; margin-left: -73px;(The width and height of vertically centered elements should be fixed)
  • vertical-align: middle(Add line height to div height)
  • CSS 3 ie 9 + :position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  • CSS 3 ie 9 + :display:table-cell
  • CSS 3 ie 9 + :position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%)
  • CSS 3 ie 9 + :display:flex; align-items:center; justify-content: center;

CSS schemes that make elements invisible

  • opacity:0Make the element transparent to 0 and it will be rendered, taking up space
  • visibility:hiddenMaking elements invisible will render and take up space
  • position:absoluteElements removed from the visual area will be rendered and take up space
  • clip-pathThe clipping element shift makes the element invisible, rendered, and takes up space
  • diaplay:noneMakes elements invisible and will not be rendered

What are the properties of box-sizing