1. Differences between HTML, XML and XHTML

  • HTMLHypertext Markup language (HYPERtext Markup Language) is a looser and less strict syntaxWebLanguage;
  • XML: Extensible markup language, mainly used to store data and structures, extensible;
  • XHTML: Extensible hypertext Markup Language, based onXML, the role andHTMLSimilar, but with more strict syntax.

2. Inline elements and block-level elements

Inline elements

  • Inline elements:a.b.span.img.input.select.strongAnd so on;
  • Characteristics of inline elements:
    • Setting width and height is invalid
    • For margin, only the left and right direction is valid, but the upper and lower direction is invalid. The padding Settings are valid for both top, bottom, left, and right, which means more padding
    • Line breaks are not automatic

Block-level elements

  • Block-level elementsdiv.nav.aside.header.footer.ul.li.dl.dt.dd.h1-5.pAnd so on;
  • Characteristics of block-level elements:
    • Ability to recognize width and height
    • Margin, padding, top, bottom, left, and right are both valid
    • You can wrap it
    • Multiple block element labels are written together in a top-down arrangement by default

The display attribute implements inline block-level element conversions

  • display:inline: Convert to inline element (default attribute)
  • display:block: Converts to block elements
  • display:inline-block: converts to inline block elements

3. Difference between SRC and href

  • src(source): is the location pointing to external resources, is the introduction of external resources; In the requestsrcA resource downloads and empowers the resource it points to into a document, for examplejsThe script,imgPictures andframeAnd other elements.
  • Ref (hypertext reference): used to establish a connection between the current element and the document, used inlinkandaAnd so on.

The difference between:

  • SRC: When the browser parses this element, it suspends the downloading and processing of other resources until the resource is loaded, compiled, and executed.
  • Href: recognizes the document as a CSS file and downloads but does not block processing of the current file

4. What is the difference between the title attribute and the Alt attribute on the tag

  • altThe purpose is to give text description when the picture does not display properly. The length must be less than 100 Characters or the user must ensure that the replacement text is as short as possible.
  • titleProperty provides advisory information for the element on which the property is set. usetitleAttributes provide additional information that is not essential.

5. It features

5.1 Semantic Labels

Semantic labels allow labels to have their own meanings, which are easy to read and conducive to team development. Good for search engine optimization (SEO).

  • headerThe header usually includes the site logo, main navigation, site-wide links, and a search box.
  • nav: Tag navigation, used only for important link groups in the document.
  • article: Defines external content that is independent of the rest of the document.
  • section: Defines sections in a document. Such as a chapter, header, footer, or other part of a document.
  • aside: sidebar that defines the content beyond the content it is in. A sidebar, a set of links to an article, an advertisement, a friendship link, a list of related products, etc.
  • footer: footer, the footer of the entire page only if the parent is body.

5.2 Canvas drawing and SVG Drawing

Canvas and SVG are visualization technologies supported by HTML5 and used for drawing graphics.

  • Canvas: is a Canvas that must be drawn using JS scripts
  • SVG: Vector graphics, drawn in XML format

The difference between:

  • Different format:CanvasDrawing pictures depend on resolution, reduce distortion;SVGDrawing is a vector map, zoom in without distortion
  • The event processing:Canvas[Fixed] Graphics drawn on canvas do not support event handlingSVGEach graphed element is a separate DOM node that can be easily bound to events or modified

Learn echarts, an open source visual chart library based on JavaScript: Apache Echarts

5.3 Local storage for HTML5

HTML5 Web storage has two storage modes: sessionStorage and localStorage.

  • sessionStorageIt is used to store data in a session locally and is destroyed when the session ends.
  • localStorageLocal storage for persistence, where data never expires unless the user actively deletes it;
  • cookieIs stored on the user’s local terminal (Client Side), usually encrypted.

See cookies and Sessions, localStorage and sessionStorage for more details

6. Determine whether the element enters the viewport

There are three ways to determine whether an element is in the viewport:

1. el.offsetTop - document.documentElement.scrollTop <= viewPortHeight
2. el.getBoundingClientRect().top <= viewPortHeight
3. intersectionRatio > 0 && intersectionRatio <= 1
Copy the code

Depending on whether the element intersects with the viewport, you can perform operations such as top suction, bottom suction, exposure reporting, list loading more, picture lazy loading, etc. The first two need to listen for scroll events. In order to prevent frequent triggering, anti-shake processing is needed. Read more about optimizing image loading using IntersectionObserver