Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the front-end interview questions about HTML". The explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the front-end interview questions about HTML"?

1. What is HTML?

HTML:HyperText Markup Language Hypertext markup language

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

HTML is a basic WEB web design language, and XHTML is a markup language based on XML.

3. Briefly describe your understanding of the semantics of HTML?

The semantics of html makes the content of the page structured, the structure clearer, and makes it easy to parse browsers and search engines.

4. What are the three layers of a browser page, what are they, and what is their function?

Browser page composition: structure layer, presentation layer, behavior layer

They are: HTML, CSS, JavaScript

Function: HTML to achieve the page structure, CSS to complete the page performance and style, JavaScript to achieve some client functions and business.

Front-end learning circle: 767273102, from the most basic HTML+CSS+JavaScript. JQuery,Ajax,node,angular has sorted out the actual combat data of the mobile HTML5 project.

5.Doctype function? How to distinguish between strict mode and hybrid mode?

(1) function: used to tell the browser's parser what document standard to use to parse the document.

(2) distinction: if an HTML document contains a fully formed DOCTYPE, it is generally rendered in standard mode. DOCTYPE does not exist or is not properly formatted, which can cause the document to be rendered in mixed mode.

What is the 6.Quirks mode? What's the difference between it and Standards mode?

Difference:

In general, there are three differences in layout, style parsing, and script execution.

Box model: in the W3C standard, if you set the width and height of an element, it refers to the width and height of the content of the element, while in Quirks mode, the width and height of IE also include padding and border.

Set the height and width of inline elements: in Standards mode, setting wdith and height to inline elements such as others will not take effect, but in quirks mode, it will.

Use margin:0 auto to center horizontally: use margin:0 auto to center elements horizontally in standards mode, but fail in quirks mode.

7. What's the difference between using link and @ import when importing styles into a page?

(1) different functions: link belongs to the XHTML tag. Besides loading CSS, it can also be used to define RSS, rel connection attributes and other functions.

@ import is provided by CSS and can only be used to load CSS

(2) loading is different: when the page is loaded, the link will be loaded at the same time, while the CSS referenced by @ import will wait until the page is loaded.

(3) compatibility is different: import is proposed by CSS2.1 and can only be recognized above IE5, while link is a XHTML tag and there is no compatibility problem.

8. What are the picture formats that you know will be used to make a web page?

Webp:WebP format, a picture format developed by google to speed up the loading of pictures.

And can save a lot of server bandwidth resources and data space. Well-known websites such as Facebook Ebay have begun testing and using the WebP format.

Apng: is the bitmap animation extension of PNG, which can achieve the dynamic picture effect of png format, and is expected to replace GIF as the next generation dynamic map standard.

9. Text tag 1. Special character 1. Represents a space 2.

Indicates a > 4. ©means copyright 5. ¥2. Text style 1.: bold 2.: italic 3.: underline 4.: delete line 5.: superscript 6.: subscript 10. What is an anchor point is a mark on a web page that you can jump to via a hyperlink. 1. Define anchor point 1. Use the name attribute of the a tag to define anchor point 2. Use the id attribute of any tag to define anchor point 2. What are the advantages of 11.div+css layouts that link to anchor points on other pages of this page?

(1) it is more convenient to change the version as long as you change the css file.

(2) the page loading speed is faster, the structure is clear, and the page display is simple.

Performance is separated from structure.

(3) easy to optimize (seo) search engines are more friendly and easily ranked at the top.

twelve。 What are the elements in the line? What are the block-level elements? What are the void elements?

First of all: the CSS specification stipulates that every element has a display attribute, which determines the type of the element, and each element has a default display value, such as the default display value of div is "block", it is a "block level" element; the default display attribute value of span is "inline", which is an "inline" element.

(1) the elements in the line are: a b span img input select

(2) Block-level elements are: div p ul ol li dl dt dd h2-h7

(3) Common empty elements: br- line wrap, hr- horizontal split line

What are the shortcomings of 13.iframe?

1.iframe blocks the Onload event of the main page and affects the parallel loading of the page.

two。 The search program of the search engine can not interpret this kind of page, which is not good for SEO.

Improvement: add the src attribute value to iframe dynamically through javascript, so you can get around the above two problems.

What is the purpose of 14.Label? How does it work?

The label tag defines the relationship between form controls, and when the user selects the tag, the browser automatically shifts its focus to the form control associated with the tag.

15. Several methods of hiding elements

(1) display:none

(2) visibility:hidden

(3) opacity:0

(4) position:absolute; left:-10000px

16. Briefly describe the difference between src and href.

Src is used to replace the current element, and href is used to establish a relationship between the current document and the referenced resource.

17. Do not use border to draw high 1px lines, and maintain the same effect in standard mode and weird mode of different browsers.

18. How to add a hyperlink to a background picture. Banner-a {width:100%; height: 8remt; display: inline-block;} 19. What are the ways to clear floats?

The first kind: clear:both

Add an empty clear div to the parent element (at the same level as the child of the float), and then add the attribute value clear:both; to the class to clear the float.

The second kind: overflow:hidden

Adding overflow: hidden; to the style of the parent element can also clear the float, as shown in the css code, but this method is not recommended. Overflow: hidden; also means to hide the excess, but it will still bring trouble to the page if it is not handled well.

Third: clearfix (recommended)

1. Add clear-fix to the parent set element class name

two。 Write pseudo-class style

.clear-fix::after {content: ""; display: block; clear:both } style plan thank you for reading, the above is the content of "what are the front-end interview questions about HTML". After the study of this article, I believe you have a deeper understanding of what the front-end interview questions about HTML have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.