1.1 Do you understand HTML semantics?

A: All the code I write is HTML semantic code. My understanding of HTML semantics simply means using the right tags to do the right things, such as paragraphs with p tags and headings with H1 ~ H6 tags. The use of appropriate semantic HTML tags, so that the page has good semantics and structure, so that both human and machine can quickly understand the content of the web page.

Development path: the table tag on the back end – > the artists use div+ CSS layout – > the professional front end will use the correct tag for page development

1.2 Why use HTML semantic tags?

  • Do the right thing with the right label
  • Page content structure
  • Web pages can be read without CSS
  • Convenient browser, search engine parsing, conducive to SEO

2. What does meta Viewport do? (How to write the page on the phone without zooming.)

A: Mobile terminal adaptation, so that the normal display of the page in the PC segment to different sizes of the mobile terminal can also be normal display of the page according to the size of the screen.

<meta name="viewport" content="width=device-width, user-scalable=no,  initial-scale=1, maximum-scale=1, minimum-scale=1">
Copy the code

3. What is H5?

A: H5 is supposed to be a collection of front-end technologies, and when we talk about H5, it’s actually a solution. A solution for a cool looking mobile site. The solution includes HTML5’s new audio tags, canvas, drag features, local storage, Websocket communication, as well as the box model, absolute positioning, and all the basics of the front end.

  • Websocket communication: the biggest feature is that the server can take the initiative to push messages to the client, the client can also take the initiative to send messages to the server.

4. Clear the float:

4.1 When the parent element is not given height, the inner element is not floating and the parent element becomes a line when floating.

4.2 Solution

4.2.1. Extra tag method (add a new tag after the last float tag and set clear: both;)

    .clear{
        clear:both;
    }
Copy the code

4.2.2. Parent add Overflow attribute (Parent add Overflow :hidden) (not recommended)

You can clear floats by triggering the BFC

    .fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }
Copy the code

Advantages: Simple code

Disadvantages: When the content is increased, it is easy to cause the content will not be wrapped, so that the content is hidden, unable to show the element to overflow

4.2.3. Clear float with After pseudo-element (recommended)

.clearfix:after{/* The pseudo-element is the normal browser clearing float method for inline elements */ content: ""; display: block; height: 0; clear:both; // Hide elements, but use the undefined position in the web page: hidden; } .clearfix{ *zoom: 1; /* The float clearing method * is implemented only in Internet Explorer 6-INTERNET Explorer 7, and not in other browsers */}Copy the code

Advantages: it conforms to the closed floating idea, and the semantic structure is correct

Disadvantages: IE6-7 does not support pseudo-elements: after, which use Zoom :1 to trigger hasLayout.

4.2.4 Clear floats with before and after double pseudo-elements

     .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
Copy the code

Advantages: Simpler code

Cons: Trigger hasLayout with Zoom :1.

Clearfix :after{content: "; display: block; /* or table*/ clear: both; } .clearfix{ zoom: 1; /* IE compatible */}Copy the code

5. Which HTML5 tags have you used?

Header \main\footer\artticle;

② Function related: Canvas \ Video \audio

First get the Canvas, then get the 2D context of the canvas, then set the color of the brush, then set the brush range. I’ve drawn the range in green.

video