hi! Everybody is good! I am a medical examiner, a treatment department front-end code ape 🐒, dialogue with the code, listen to the voice of their heart, looking forward to everyone’s praise 👍 and attention ➕.

📢 has recently sorted out some front-end high-frequency interview questions and shared them with you. If you have any questions, please leave comments and correct them. I will update the interview column in the long term.

1. What isDOCTYPEWhat does it do?

Doctype is an HTML5 document declaration that tells the browser which HTML version of the standard to parse the document with. Over the course of browser development, there have been many versions of HTML, with slightly different formats written between them. If the browser is not told in advance, then the browser does not know what the document parsing criteria are? At this point, most browsers will turn on maximum compatibility mode to parse web pages, which is commonly called weird mode. This not only reduces parsing efficiency, but also causes unpredictable bugs in the parsing process, so document declaration is a must.

2. Tell me about thehtmlSemantic understanding

The semantic of HTML tag, in simple terms, is to use the right tag to do the right thing, to a piece of content with the most appropriate and most appropriate tag, so that the page has a good structure, page elements have meaning, no matter who can understand what the content is.

The advantages of semantization are as follows:

  • It is also possible to have a clean structure without CSS styles
  • It is beneficial for SEO to establish good communication with search engines and help crawler to capture more effective information. Crawler relies on tags to determine the context and the weight of each keyword
  • Easier team development and maintenance, more readable semantics, W3C compliant teams follow this standard, reducing differentiation

3. src 和 hrefThe difference between

SRC and href are attributes of specific elements in HTML that can be used to bring in external resources. The differences are as follows:

  • SRC: the full namesourceIt is usually used for img, video, audio, and script elements. SRC points to the source address of the requested external resource. The content pointed to will be embedded in the document where the current tag is located. When the browser parses this element, it suspends other resource downloads until the resource is loaded, compiled, and executed. This is why js scripts are placed at the bottom and not at the head.
  • Href: the full namehyper referenceWhen the browser recognizes the file it points to, it will download the resource in parallel without stopping processing the current document. It is usually used for the A and link elements.

4. title 与 h1The difference between,b 与 strongThe difference between,i 与 emThe difference between?

  • titleProperty represents the title of the web page,h1The element represents the page content title with clear hierarchy, which also has a great influence on the page information fetching
  • strongStrong, strong, strong, strong, strongbIs to show and emphasize the content
  • i 是italicShort for italic, an early italic element, indicating that content is presented in italic, whileem 是emphasizeShort for emphasize, text that emphasizes

5. What are strict mode and promiscuous mode?

  • Strict mode: Runs to the highest standards supported by the browser
  • Promiscuous mode: Pages are displayed in a loose downward compatible manner, mimicking the behavior of older browsers

6. What are the three layers of the front page?

Composition: structure layer, presentation layer, behavior layer

  1. Structural layer

    The structure layer is similar to the foundation of a house and the cantilevered frame of a house. It is created by HTML, the hypertext markup language (HTML), which is the various tags in a page. The structure layer holds all the content that the user can see, such as a piece of text, an image, a video, etc

  2. Presentation Layer

    Presentation layer is created by CSS, its role is how to display the relevant content, scientific name: cascading style sheet, also equivalent to the decoration of the house, see what style you want, pastoral, Chinese, Mediterranean, in short, CSS can do

  3. The BehaviorLayer

    The behavior layer represents the interaction between the web content and the user. Simply put, the user operates the web page, and the web gives the user feedback. This is the domain dominated by JavaScript and DOM

7. Functions and advantages and disadvantages of iframe

Iframe is also called an embedded framework. An embedded framework is similar to a framed web page in that it can embed the frame and content of a web page into an existing web page.

Advantages:

  • Can be used to handle slow loading content, such as ads

Disadvantages:

  • Iframe blocks the Onload event on the main page
  • Iframe and the home page share the connection pool, and browsers have restrictions on connections to the same domain, so parallel page loading can be affected. You can solve this problem by dynamically adding a SRC attribute to an ifame using JS, or by blocking the Onload event on the main page
  • It produces a lot of pages and is not easy to manage
  • The browser’s back button doesn’t work
  • Not recognized by some search engines

8. Img on title and Alt

  • Alt: the full namealternateIf the image cannot be displayed, the browser will display the content specified by Alt
  • Title: Displays the contents of title when the mouse moves over the element

The difference between:

The title is typically displayed when the mouse is slid over an element, while Alt is an attribute specific to the IMG tag, which is an equivalent description of the image’s content and is used when the image cannot be loaded, so the user can also see some information about what is missing, which is relatively friendly.

9. Differences between H5 and HTML5

  • H5 is a product term, including the latest HTML5, CSS3, ES6 and other new technologies to create applications
  • HTML5 is a technical term for the fifth generation of HTML

10. What are inline elements and block-level elements? What’s the difference? How to convert?

Common block-level elements: P, div, form, ul, Li, OL, table, H1, H2, H3, H4, H5, H6, DL, DT, DD

Common row-level elements: SPAN, A, img, button, input, SELECT

Block-level elements:

  • Always start on a new line, which means that each block-level element has an exclusive row, arranged from top to bottom by default
  • Width missing is 100% of its container unless a width is set
  • Height, line height, and margins and margins are all configurable
  • Block-level elements can hold other row-level and block-level elements

Inline elements:

  • And other elements are displayed on a single line
  • Height, line height, and margins and margins can be set
  • The width is the width of the text or image and cannot be changed
  • Line-level elements can only hold text or other inline elements

The caveats to using inline elements are:

  • The inline element sets the widthwidthinvalid
  • Inline element SettingsheightInvalid, but it can passline-heightTo set the
  • Set up themarginOnly left and right work, not up and down
  • Set up thepaddingOnly left and right work, not up and down

You can switch between inline and block-level elements using the display attribute (see values 2, 3, and 4) :

11. What is the function of label? How does it work?

The Label element does not present any special effects to the user, but it improves usability for mouse users by triggering the control when we click text within the Label element. That is, when the user selects the TAB, the browser automatically shifts focus to the form control associated with the TAB. The most common place to use label is the gender TAB in a form, which automatically focuses bound form controls when clicking on text.

<form>
     <label for="male">male</label>
     <input type="radio" name="sex" id="male">
     <label for="female">female</label>
     <input type="radio" name="sex" id="female">
</form>
Copy the code

12. Understanding of Web standards and W3C

Web standards can be simply divided into structure, presentation, and behavior. The structure is composed of various HTML tags. Simply put, the body tags are written for the structure of the page. Presentation refers to CSS cascading style sheets, which make our page structure tags more aesthetically pleasing. Behavior refers to the interaction between the page and the user, which is mainly composed of JS

W3C (Full name: World Wide Web Consortium) is a non-profit organization that develops various standards, including HTML, CSS, ECMAScript and so on. The development of Web standards has many advantages, such as:

  • Unified development process, unified use of standardized development tools (VSCode, WebStorm, Sublime), easy collaboration
  • The cost of learning is reduced. You only need to learn the standards, otherwise you need to learn the standards of various browser vendors
  • Cross-platform, easy to migrate to different devices
  • Reduce code maintenance costs

13. What is a Quirks pattern? What is the difference between it and Standards?

If a page has a DTD, that means it has a better CSS layout, and if it doesn’t, it has a compatible layout, which is called Quirks, sometimes called Quirks, Quirks, Quirks.

Differences: There are three differences in layout, style analysis and script execution. Here are some common differences:

  • The box modelIn the W3C standard, setting the width and height of an element refers to the width and height of the element’s content, whereas in Quirks mode, IE width and height also includes the padding and border
  • Sets the width and height of the elements in the row: Setting width and height for inline elements does not work in Standards mode, but does in Quriks mode
  • Set horizontal center with margin: 0 autoIn Standards mode, set margin: 0 auto; It is possible to center elements horizontally, but not in Quriks mode
  • Set percentage height: In Standards mode, the height of an element is determined by the content it contains. If the parent element does not set the percentage height, the percentage height of the child element is invalid

14. Know what microformats are? Talking about understanding, should microformats be considered in front end builds?

Microformats are a set of simple, open data formats based on existing and widely adopted standards.

Specifically, semantics are embedded in HTML to facilitate separate development, and some simple conventions are developed to take into account the human-machine readability of HTML documents, which is equivalent to semantic annotations on web pages.

Using microformat Web pages, add some attributes to some tags in HTML documents, these attributes annotate the semantic structure of information, help to process HTML documents software, better understand HTML documents. When crawling Web content, the semantics of content blocks can be more accurately identified, and microformats can be SEO optimized for websites.

15. Why do HTML5 only need to write<! DOCTYPE html>?

Why HTML5 only needs one paragraph:

<! DOCTYPEhtml>
Copy the code

HTML4, on the other hand, required long paragraphs

<! DOCTYPEHTML PUBLIC "- / / / / W3C DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">
Copy the code

The main reason is that HTML5 is not based on SGML, so you don’t need to reference DTDS. In HTML4,
declares a reference to DTD, because HTML4 is based on SGML. DTDS prescribe rules for markup languages so that browsers can render content correctly.

16. What new features did HTML5 add? What elements have been removed?

HTML5 is all about adding graphics, location, storage, multitasking, and more:

  • Semantic tags, such as article, footer, header, nav, etc
  • Video, audio, audio
  • The canvas canvas
  • Form controls, calemdar, Date, time, email
  • geographic
  • Local offline storage and localStorage store data for a long time. Data is not lost after the browser is closed. Data in sessionStorage is automatically deleted after the browser is closed
  • Drag and drop the release

Removed elements:

  • Pure expressive elements:Basefont, font, S, Strike, TT, U, big, center
  • Elements that negatively affect selectiveness:Frame, frameset, noframes

17. How to deal with HTML5 new tag compatibility problem?

There are two main ways:

  1. Enable the tag to be identified: passdocument.createElement(tagName)Method allows the browser to recognize the new tag after the browser supports the new tag. You can also add CSS styles to new tags
  2. With JavaScript: shim framework using HTML5, inheadThe following code is called in the tag:
<! - [if lt IE 9] ><script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script><! [endif]-->Copy the code

18. How to achieve a click event in a certain area of an image

We can use the image hot zone technique:

  1. Insert a picture and set the parameters of the image in<img>Tag to set parametersusemap="#Map"To represent a reference to the image map.
  2. with<map>Tag sets the scope of the image Map and names it Map.
  3. Separately in<area>Mark a number of rectangular areas for the corresponding position and set the link parametershref

Ex. :

<body>
 <img src="./image.jpg" alt="" usemap="#Map" />
 　　<map name="Map" id="Map">
     <area alt="" title="" href="#" shape="poly"
         coords="65,71,98,58,114,90,108,112,79,130,56,116,38,100,41,76,52,53,83,34,110,33,139,46,141,75,145,101,127,115,113,133,85,132,8 2131159117" />
     <area alt="" title="" href="#" shape="poly" coords="28,22,57,20,36,39,27,61" />
 </map>
</body>
Copy the code

19. What is the use of element A other than navigation?

The URL in the href attribute can be any protocol supported by the browser, so the A tag can be used to dial 110 for mobile phones, send text messages 110, email, etc

Of course, the A element is most commonly used as an anchor and for downloading files.

Anchors can be clicked to quickly locate a certain location on a page, and the principle of download is that the browser cannot parse the resource corresponding to the A tag, so the browser will choose to download it.

20. Do you know TDK in SEO?

In SEO, TDK is actually title, description and keywords. Title refers to the title tag, description refers to the description tag, and keywords refer to the keyword tag