“This article has participated in the good article call order activity, click to see: back end big front double track submission, 20,000 yuan prize pool for you to challenge!”

1. The semantic HTML

Meaning: Based on the structure of the content (semantic content), choosing the right tags (semantic code) makes it easier for developers to read and write more elegant code while allowing browsers and machines to parse well. Note:

  • Use semantically free div and span tags as little as possible;
  • When the semantics are not obvious, when both div and P can be used, try to use P, because p has up and down spacing by default, which is advantageous to compatible with special terminals.
  • Instead of using pure style labels such as B, font, u, etc., use CSS Settings instead.
  • Text that needs to be emphasized can be included in the strong or em tag (the browser’s default styles are not used if you can specify them with CSS). The strong default style is bold (don’t use b) and the EM is italic (don’t use I).
  • When using a table, use caption for the title, thead for the header, tbody for the body, and tfoot for the tail. table
  • Headers should be separated from normal cells. Use th for header and TD for cell.
  • The field should be wrapped in a fieldSet tag, and the legend tag should explain the purpose of the form.
  • The explanatory text for each input label needs to use the label label, and the explanatory text is associated with the corresponding input by setting the ID attribute for the input and for= SOMeld in the able label.

2. The canvas

Commonly used API:

  • FillRect (x,y,width,height) Solid rectangle
  • StrokeRect (x,y,width,height) hollow rectangle
  • fillText( “Hello world” , 200 , 200 ); Solid words
  • StrokeText (“Hello world”, 200, 300

The new label is compatible with earlier versions

  • Previous versions of IE9 created a new HTML5 tag with createElement
  • The introduction of html5shiv. Js

3. What’s the difference between SVG and Canvas?

  • H5 provides a new drawing method for Canvas; SVG has been around for more than a decade
  • Canvas is a bitmap based on pixels. If you zoom in or out, it will be distorted. SVG is based on graphics, using HTML tags to draw shapes, zoom in and out without distortion
  • Canvas needs to be drawn in JS; SVG is drawn in HTML
  • Canvas supports more colors than SVG
  • Canvas cannot modify or operate the image that has been drawn; SVG can take labels and manipulate them

4. What are the new features of HTML5?

  • HTML5 is all about the addition of graphics, location, storage, multitasking, etc.
  • Drag and Drop API
  • Semantic better content label (header, nav, footer, value, the article, section)
  • Audio and Video API(Audio, Video)
  • The Canvas (Canvas) API
  • Geographical Geolocation API
  • Local offline storage localStorage stores data for a long time without data loss after the browser is closed.
  • The data in sessionStorage is automatically deleted after the browser is closed
  • Form controls, Calendar, date, time, email, URL, and search

5. How to deal with browser compatibility issues with new HTML5 tags?

IE8/IE7/IE6 supports tags generated by the Document.CreateElement method. You can take advantage of this feature to make these browsers support the new HTML5 tags. The best way to do this is to go directly to the mature frameworks, most commonly the HTML5SHIm framework

Talk about the title and Alt attributes

  • Both properties are displayed when the mouse slides over the element
  • Alt is a characteristic attribute of IMG. It is an equivalent description of the content of an image and an alternative text if the image is not displayed properly.
  • The title attribute can be used on all tags except base, basefont, head, HTML, meta, param, script, and title, and is a kind of comment on the DOM element

7. What are the global attributes of HTML

  • Class: Sets the class identity for the element
  • Data -* : Adds custom attributes to the element
  • Draggable: Sets whether the element can be dragged
  • Id: Element ID, unique within the document
  • Lang: The language of the element content
  • Style: Inline CSS style
  • Title: suggested information about the element

8. How many ways to center an element horizontally or vertically?

Horizontal center

  • For inline elements: text-align: center;
  • For block-level elements whose width is determined:

(1) Width and margin implementation. margin: 0 auto;

Margin-left: -width/2; margin-left: -width/2

  • For block-level elements of unknown width

(1) The table tag is horizontally centered with margin, left and right auto. Use the table TAB (or directly set the block-level element to display:table) and add left and right margin to auto for the TAB.

(2) Inline-block implements the horizontal center method. Display: inline-block and text-align:center Implements horizontal center.

(3) Absolute positioning + Transform, translateX can move 50% of its elements.

(4) Flex layout uses text -content: Center

Vertical center

  1. Use line-height to implement the center, this method is suitable for plain text classes
  2. The relative positioning of the parent container is set, the absolute positioning of the child is set, and the adaptive centering of the label is realized by margin
  3. Flexible layout Flex: parent Settings display: flex; Sub-level set margin to auto to achieve adaptive center
  4. The parent sets the relative positioning, and the child sets the absolute positioning, and the displacement transform is implemented
  5. Table layout. The parent is converted to table form and the child is vertical-align. (Note: vertical-align: middle is used only if the elements are inline and the display value is table-cell).

9. Advantages of floating layout? What are the disadvantages? What are the ways to clear a float?

Floating layout Overview: When an element floats, it can move left or right until its outer edge touches the border of the box or another floating element that contains it. Elements float away from the normal flow of the document, so the boxes in the normal flow of the document behave as if the floating element did not exist.

advantages

The advantage of doing this is that it is very good to make the text around the picture when the text is mixed. When an element floats, it has some of the properties of a block-level element, such as width and height. However, there are some differences between float and inline-block. For horizontal ordering, float can set the direction while inline-block is fixed. Another problem is that inline-blocks sometimes have white space when used

disadvantages

The most obvious disadvantage is that once the floating element is out of the document flow, it cannot hold up the parent element, causing it to collapse in height.

Clearing float mode

  • Add extra labels
<div style="clear:both"></div>Copy the code
  • Parent adds overflow property, or sets height
<div class="parent" style="overflow:hidden"> </div> </div>Copy the code
  • Create pseudo class selector to clear float
Parent :after{/* set the content of the child element to be null */ content: "; /* set add children to block level elements */ display: block; /* Set the height of the child element to 0 */ height: 0; */ limit: hidden; /* limit: hidden; /* Set clear: both */ clear: both; } <div class="parent"> <div class="f"></div> </div>Copy the code

10. What happens when I use display:inline-block? The solution?

Problem: Putting two display: inline-block elements together creates a blank space.

When an element is formatted as an in-line element, the whitespace between the elements (Spaces, carriage returns, line feeds, etc.) will be processed by the browser. According to the CSS white-space attribute (default: normal), the carriage returns in the original HTML code will be converted to a whitespace. When the font is not zero, the whitespaces take up some width, so there are gaps between elements of the inline-block.

The solution

(1) Put the end of a child element tag on the same line as the start of the next tag or put all child tags on the same line

(2) Set font-size: 0 for the parent element and reset the correct font-size for the child element

(3) Set float:left for the child element

11. How to layout the Holy Grail CSS

The Layout of the Grail is shown here:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .header, .footer { height: 40px; width: 100%; background: red; } .container { display: flex; } .middle { flex: 1; background: yellow; } .left { width: 200px; background: pink; } .right { background: aqua; width: 300px; } </style> </head> <body> <div class="header"> </div> <div class="container"> <div class="left" </div> <div class="right"> </div> <div class="footer"> </div> </body> </ HTML >Copy the code

12. What is BFC?

W3C defines BFC as follows: Floating and absolutely locatable elements, block-level containers that aren’t block-level boxes (” unavailable “blocks, tablecells, and table-captions), and block-level boxes that don’t have “visiable” overflow values, Both create a new BFC (Block Fromatting Context) for their content.

13. Trigger conditions

For an HTML element to create a BFC, one or more of the following conditions must be met:

  • The root element ()
  • Floating elements (elements whose float is not None)
  • Absolute positioning element (element position is absolute or fixed)
  • Inline block elements (elements with inline-block display)
  • Table cell (the display of the element is table-cell, which is the default value for HTML table cells)
  • Table title (display table caption, HTML table title default)
  • Anonymous table cell elements (the display of the element is table, table-row, table-row-group, table-headergroup, and table-footer-group (respectively are HTML) Default properties for table, Row, tbody, thead, tfoot) or inline-table)
  • Block elements whose overflow value is not visible – elastic elements (display is a direct child of a Flex or inline-Flex element)
  • Grid elements (display is a direct child of a Grid or inline-Grid element), and so on.

14.BFC rendering rules

  1. BFC vertical margins overlap
  2. The region of the BFC does not overlap with the box of the floating element
  3. The BFC is a separate container; the elements on the outside do not affect the elements on the inside
  4. The float element is also used to calculate the BFC height

Draw a dialog box

Results the following

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style =" max-width: 100%; clear: both; position: relative; margin-top: 50px; margin-left: 50px; padding-left: 20px; width: 300px; line-height: 2; background: lightblue; color: #fff; } .dialog::before { content: ''; position: absolute; border: 8px solid; border-color: transparent lightblue transparent transparent; left: -16px; top: 8px; < span style =" box-sizing: border-box! Important; word-wrap: break-word! Important;" </div> </body> </html>Copy the code

< div style = “margin-top: 0px; margin-bottom: 0px; margin-bottom: 0px;

  • Officially enroll large
  • One plus one minus

Q: Why does this happen? BFC, elements will be arranged up and down in BFC, and the vertical distance will be determined by margin, and overlap will occur. Specifically, BFC is an independent isolated container in the page. Inner child elements do not affect outer elements. The source.

17. Describe the position attribute you know. What are the characteristics of it?

  • Static: There is no special positioning and the object follows the normal document flow. The top, right, bottom, left properties are not applied.
  • Relative: Objects follow the normal document flow, but are offset within the normal document flow by the properties top, right, bottom, left, etc. The cascade is defined by the Z-index attribute.
  • Absolute: The object is removed from the normal document flow, using the top, right, bottom, left properties for absolute location. The cascade is defined by the Z-index attribute.
  • Fixed: The object is positioned outside the normal flow of the document using the properties top, right, bottom, left, etc., with the window as the reference point. The object does not scroll when the scroll bar appears. The cascade is defined by the Z-index attribute.
  • Sticky: It is similar to relative and fixed, which applies relative before scrolling to the threshold of viewport and fixed layout after scrolling to the threshold, determined by top

18. How can CSS draw a square half the width of the parent element?

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style>.outer {width: 400px; height: 600px; background: red; } .inner { width: 50%; padding-bottom: 50%; background: blue; } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>Copy the code

19. What are the weights and priorities of the CSS?

The weight

Starting at 0, an inline style +1000, an ID selector +100, an attribute selector, class or pseudo-class +10, an element selector, or pseudo-element +1, and wildcard +0

priority

The same weight is written in the back to override the previous use! Word-wrap: break-word! Important! Important! When important, it has a higher priority

20. What are CSS animations?

The animation, Transition, transform, and translate properties need to be clear:

  • Animation: Used to set the animation properties. It is a short term property that contains 6 properties
  • Transition: Used to style elements. It has a similar effect to animation, but the details are quite different
  • Transform: Used to rotate, scale, move, or tilt an element without having to do with the style animation
  • Translate: Translate is just a property value of transform, that is, the move, in addition to scale and so on

The articles

  • Js interview questions: 30 JS interview questions to help me sprint “20K”, rustling!
  • Vue Interview questions: Answer these VUE interview questions correctly, am I a qualified intermediate front-end development engineer?