Summary of HTML interview content

1. What does a Doctype declaration do? What if I dropped the Doctype declaration?

  • <! The DOCTYPE> declaration is at the beginning of the document, before the < HTML > tag. Its main purpose is to tell the browser what document type specification to use to parse the document.

  • Browsers can parse documents in two ways: “strict mode” and “promiscuous mode.”

    • Strict mode: Browsers use the latest standards they support (W3C) to format pages and run JS. If a document contains a strict DOCTYPE declaration, then it is typically rendered in strict mode.

    • Promiscuous mode: Pages are displayed in a loosely Backwards compatible manner, mimicking the behavior of older browsers to prevent the site from working. A DOCTYPE declaration that does not exist or is incorrectly formatted causes the document to be rendered in promiscuous mode.

2. What is W3C? What are the W3C standards?

  • W3C is an acronym for the World Wide Web Consortium.
  • The W3C standards focus on three parts of a web page: structure, presentation, and behavior. Corresponding to the structural standard (XHTML, XML), performance standard language: CSS and behavior standard (DOM, ECMAScript). Most of these standards are drafted and published by the W3C, but some are specified by other standards organizers, such as the ECMAScript standard for the European Computer Manufactures Association.
  • Specific criteria are: tag closure, tag lowercase, no disorderly nesting, use of external chain CSS and JS, structure behavior and presentation separation, and so on.

3. Distinguish BETWEEN XHTML, XML, and HTML?

  • XML
    • XML isExtentsible Markup LanguageExtensible Markup Language. There is no tag set and no grammar rules, but there are syntactic rules, which require each tag to have an end tag, not to contain labels in reverse order, and the sentence composition should meet the requirements of technical specifications.
  • HTML
    • HTML isHypertext Markup LanguageHypertext Markup Language. HTML text is descriptive narrative text composed of HTML commands that can describe text, graphics, animations, sounds, tables, links, and so on. HTML is the common language of the web, a simple, universal full markup language. It allows web producers to create complex pages of text and images that can be viewed by anyone on the web, no matter what type of computer or browser they are using.
  • XHTML
    • XHTML isEXtensible HyperText Markup LanguageExtended hypertext tagging language. XHTML is an updated version of HTML.
    • XHTML is a transitional language to HTML like XML. It’s a little bit more rigorous than HTML. And the basic language is still using HTML tags. Just do away with some of the presentation layer tags, and at the same time require higher standards, such as strict nesting of tags, tag end, tag element names and attribute names case-sensitive, etc. XHTML requires that all tag and attribute names be lowercase.
    • By combining the benefits of HTML and XML, we got XHTML, a markup language that will be useful today and in the future. XHTML can be read by all XML-capable devices. At the same time, XHTML gave us the ability to write well-structured documents before other browsers upgraded to support XML.

For more information: definitions and differences between HTML, XHTML, and XML

4. Why should HTML5 write <! DOCTYPE HTML>?

  • HTML5 is not based on SGML and does not need to reference DTDS, but doesdoctypeTo regulate browser behavior.
  • HTML4.01 is based on SGML, so you need to reference a DTD to tell the browser what type of document the document is using.

DTD:(Document Type Definition), Document Type Definition. The declaration DTD representation reflects what type of markup language is used, so that you can write your own legal code and let the browser display the code correctly.

More: What is a DTD?

5. What are the inline elements? What are block-level elements? What are the void elements? What is the difference between an inline element and a block-level element?

  • The line elements are: A B SPAN IMG input select strong

  • Block level elements are: div ul OL Li DL dt DD H1 h2… p

  • Empty elements are: <br> <hr> <img> <input> <link> <meta> etc.

  • The width and height of elements in a line cannot be set. Block-level elements can be set to a width and height that is exclusive to a row.

6. What are permutation elements and non-permutation elements?

  • Replacement elements refer to the parts used to replace element content that are not directly represented by the content of the document. The most common replacement element is , whose content is displayed instead of an image file outside the document.
  • Nonreplacement elements are elements whose content is presented by the browser based on the content of the element itself in the document. HTML elements are mostly non-replacement elements.

7. Describe the difference between SRC and href.

  • When a SRC resource is requested, the resource it points to is downloaded and applied to the document, such as script, img, iframe, etc.
    • <script src="a.js"></script>When the browser parses this element, it suspends the downloading and processing of other resources until the resource is loaded, compiled, and executedThe same goes for elements like images and frames, similar to embedding a pointed resource within the current tag. This is why you put the JS script at the bottom and not at the head.
  • Used to establish a link between the current element and a document pointing to the resource when requesting an href resource. Commonly used are: link, A.
    • <link href="common.css" rel="stylesheet"/>The browser will recognize the document as a CSS file and it willResources are downloaded in parallel without stopping processing of the current document. That’s why it’s recommendedlinkWay to load CSS instead of using@importThe way.

8. What are the differences between the Alt attribute and the title attribute of the IMG tag?

  • Alt attribute: Used to specify alternative text. Alternative text specified by Alt is displayed when the image cannot be displayed.

  • Title property: This property provides advisory information for the element on which the property is set. When the mouse pointer is over the image, the text will appear later.

9. What are the similarities and differences between strong and EM tags?

  • Strong: Bold indicates the importance of the label. strong
  • Em:italicsTo emphasize a label means to emphasize strongly.em

Describe the difference between progressive enhancement and graceful degradation.

  • Incremental enhancement: Build the page for the lower version browser to ensure the most basic functionality, and then make improvements and additions for the advanced browser to achieve a better user experience.

  • Graceful downgrading: Build full functionality from the start and then make it compatible with older browsers.

Progressive enhancement, first ensuring that the most basic functionality is implemented in older browsers and then compatible with the latest advanced browsers. Graceful downgrading starts with a complex status quo and attempts to reduce parts of the user experience to ensure compatibility with older browsers.

11. Describe some of the key attributes in the <meta Name =” viewPort “> tag

  • Viewport refers to the part of the browser that displays web pages. But viewPort is not limited to the size of the browser’s viewport area. It can be smaller or smaller than the browser’s viewport area.
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the minimum - scale = 1.0, the maxmum - scale = 1.0, user - scalable = no">
Copy the code
// width: Sets the viewport width to a positive integer, or the string 'device-width', indicating the screen width of the device.
// height: Sets the height of the viewport.
// initial-scal: the default scaling scale is one digit, which can be a decimal.
// minimum-scale: The minimum scale that allows the user to scale. It is a number, which can be a decimal.
// maxmum-scale: the maximum scale allowed by the user. It is a number, which can be a decimal.
// user-scalable: Whether to allow users to scale manually, with "no" indicating no and "yes" indicating yes.
Copy the code

For more information, see: Meta tag viewport for an in-depth understanding