2021 Front-End Interview Questions - HTML

Now, the major companies are in full swing. A s we all know, the significance of spring recruitment for graduates of major universities is extraordinary, for students who want to enter large Internet companies such as Tencent, Ali, spring recruitment is a valuable opportunity. T he entry threshold of the major Internet companies is still quite high, after all, treatment and opportunities are also the best. Judging by boss's direct recruitment information, this salary is really exciting.

So what's going to be covered in a typical front-end interview, W3Cschool has compiled a list of HTML questions common in front-end interviews.

1. What form elements have been added to HTML5?

HTML5 has added form elements such as: datalist, keygen, output;

< a list of options for > elements that specify the input field.

< keygen > element serves to provide a reliable way to authenticate users.

< output > elements are used for different types of output, such as computational or script output.

For more information, check out the HTML5 form elements.

2. What's the difference between XHTML and HTML?

XHTML is the specification of XML rewriting HTML, which is more stringent than HTML, as follows:

All tags in XHTML must have a corresponding end label.

The names of elements and properties of all labels in XHTML must be lowercase.

All XML tags must be reasonably nested.

All properties must be enclosed in quotation “”

All < and & symbols are encoded.

Do not use "--" in comment content.

The picture must use captions.

3, HTML5 why only need to write <! DOCTYPE HTML>？

Doctype in HTML 4.01 needs to reference DTD because HTML 4.01 is based on SGML. H TML 5 is not based on SGML, so you don't need to reference DTD, but you do need doctype to regulate browser behavior. A mong them, SGML is the standard universal markup language, simply speaking, is older than HTML, XML standards, both of which were developed by SGML. BUT, HTML5 is not.

4. What's the difference between id and class?

The id property is a unique identifier used to specify a document; T he class property is used to specify one or more class names for HTML elements; CSS and JavaScript can use class names to perform certain tasks for elements with specified class names.

5. What's the difference between Canvas and SVG?

SVG is a language that uses XML to describe 2D graphics, based on XML, which means that we can attach a JavaScript event processor to an element, and if the properties of the SVG object change, the browser can automatically reproduce the graphic.

Canvas draws 2D graphics through JavaScript. It is rendered pixel by pixel, and once the drawing is drawn, if its position changes, the entire scene needs to be redrawn, including any objects that have been or have been overwritten.

The difference between SVG and Canvas:

(1) SVG is the language used to describe 2D graphics in XML, and Canvas uses JavaScript to dynamically depict 2D graphics

(2) SVG supports event handlers and Canvas does not

(3) When the properties in the SVG change, the browser can re-render it for vector graphics, while Canvas can't, more suitable for video games, etc.

(4) Canvas can draw pixels well, save the results as .png or .gif, and can be used as an API container.

(5) Canvas depends on the resolution. S VG is not about resolution.

(6) SVG has better text rendering, while Canvas does not render well, and the SVG in rendering may be slower than Canvas, especially with a large number of DOM applications.

(7) The canvas is better suited for rendering smaller areas. SVG renders larger areas better.

6. What are HTML5 document types and character sets?

HTML5 is encoded using UTF-8.

7. What new APIs are available in html5 standards?

Media API

Text Track API

Application Cache API

User Interaction

Data Transfer API

Command API

Constraint Validation API

History API

8. What's the difference between title and alt < img >?

alt: specifies the alternate text of the image; title: the text that appears when the mouse is placed on it; alt is a necessary property, title is not necessary.

9, what are the elements in the line? W hat are the block-level elements? What are the empty elements?

行内元素有：<a>,<b>,<span>,<img>,<input>,<select>,<strong>

Block elements are: < div >, < ul >, <ol >, < li >, < dl >, < dt >, <dd >, < p>, < h1> <h6>

Common empty elements: < br>, < hr >, < img >, < input >, <link >, < meta >

10. How to understand semantic labels?

Semantic label is a semantic label that clearly shows us its role and purpose. F or example, an h-series label, you can bold up the text. < strong > tags can be used to distinguish between other words and to emphasize them.

Benefits of semantic labeling:

• Semantic labels are readable, making the document structure clear.
• The browser is easy to read and facilitates SEO optimization.
• When presented on the page, the user experience is good.
• Easy for team development and maintenance.

These are the common HTML interview questions that W3Cschool has compiled for everyone. For more HTML learning, follow W3Cschool.com.

Recommended courses: Little White Front End, Getting Started with HTML-CSS