Introduction to the

Received bytedance intern offer summary

Feedback to share a wave of their own knowledge summary

Readers are expected to build their own knowledge tree (mind map)

Lazy: Refer to my own summary mind map: click here

Bonus: Frequent interview question accumulation documentation. From (senior students, Niuke.com and other platforms)

I developed my blog address: zxinc520.com

Github address: link address

Job interviews are easy if you know them all.

1. What are the three layers of a browser page

  • The structure layer
    • HTML
    • Build file structure
  • The presentation layer
    • css
    • Set the document rendering effect
  • Behavior layer
    • JS and DOM scripts
    • Implement the behavior of the document

2, semantic | about HTML semantics

2.1. What is semantic?

Semantic HTML5 refers to the rational use of semantic tags to create a page structure, such as header,footer and nav. The function of the tag can be intuitively known from the tag, rather than abusing div.

2.2. The advantages of semantics are as follows

  1. The code structure is clear, easy to read, easy to develop and maintain
  2. Improved user experience, clear page structure when style loading fails
  3. Facilitate parsing by other devices (such as screen readers) to render web pages semantically.
  4. Good for search engine optimization (SEO), search engine crawlers will give different weights according to different tags

2.3 What are the commonly used semantic labels

article | aside | nav | section | header | footer

3. HTML5 element classification

  1. Structural element
    • Section: In web page applications, this element can also be used for section statements.
    • Header: The header on the page theme, as distinguished from the head element;
    • Footer: the bottom of a page (footer);
    • Nav: the element used for menu navigation, link navigation, short for Navigator;
    • Article: Used to represent the subject part of an article, usually an area in which text is concentrated;
  2. Level block element
    • Aside: For notes, tips, sidebars, abstracts, interspersed quotes, etc.
    • Figure: an element that combines and displays multiple elements, usually in combination with figcaption;
    • Code: indicates a block of code;
    • Dialog: Used to express a conversation between people. This element also includes the dt and DD elements, which are often used together. Dt is used to represent the speaker, and DD is used to represent the speaker’s content.
  3. Inline semantic elements
    • Meter: indicates a specific range of values, which can be used for wages, quantities, percentages, etc.
    • Time: indicates the time value.
    • Progress: used to represent the progress bar, which can be controlled by Max, min, step and other attributes to complete the presentation and monitoring of progress;
    • Video: Video element, used to support and implement video (including video streaming) file directly play, support buffer preload and a variety of video media formats;
    • Audio: Audio element, used to support and implement audio (audio stream) files directly playback, support buffer preload and a variety of audio media formats;
  4. Interactive elements
    • Details: Used to indicate a specific piece of content, but the content may not be displayed by default until you interact with Legend by some means (e.g., clicking).
    • Datagrid: used to control client data and display, which can be updated by dynamic scripts;
    • Menu: Mainly used for interactive menus.
    • Command: Used to process command buttons.

4. Common empty elements

Meaning: content without element content tag [also called self-closing element]

Common empty elements:

<meta> <br> <hr> <input> <img> <link>

5, forms, enhance | new input types and properties

5.1. New types

  • Color: Control used to specify a color
  • Number: a control for entering floating point numbers
  • Tel: control for entering telephone numbers; A newline is automatically removed from the input value, but no additional syntax is performed. Properties such as Pattern and MaxLength can be used to constrain the values entered by the control. When appropriate, you can apply :valid and :invalid CSS pseudo-classes.
  • Email: Field used to edit E-mail. Use: VALID and :invalid CSS pseudo-classes when appropriate.
  • Url: The field used to edit the URL
  • Range: used to enter imprecise values
  • Search: A single-line text field for entering a search string. A newline is automatically removed from the input value.
  • Time dependent
    • Date: control used to enter a date (year, month, day, not including time)
    • Time: Used to enter the time control without time zone
    • Datatime deprecated: Control for entering dates and times (hours, minutes, seconds, based on a fraction of the UTC time zone). This feature has been removed from the WHATWG HTML.
    • Datetime-local: indicates the date and time control, excluding the time zone
    • Month: a control for entering the month without the time zone
    • Week: Enter a date consisting of a week and a year, excluding hours

5.2. New Properties

  • placeholder

  • The required mandatory

  • The list attribute specifies the datalist of the input field. Datalist is alist of options for the input field

  • Pattern defines a regular

  • The Autofocus attribute specifies that the domain automatically gets focus when the page loads.

  • Readonly This field is read-only and cannot be modified

  • The autocomplete property specifies that the form or input field should have auto-complete functionality.

  • min/max / step

    • The min, Max, and step attributes are used to specify restrictions (constraints) for input types that contain numbers or dates.

      The Max property specifies the maximum value allowed for the input field.

      The min attribute specifies the minimum value allowed for the input field.

      The step attribute specifies the legal number interval for the input field (if step=”3″, the legal number is -3,0,3,6, etc.).

6. Learn about SVG

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional Vector Graphics.

Keywords: [Based on XML] [Vector] [image format]

Features:

  • vector
    • I can zoom in and out
    • Does not damage the sharpness and detail of the image
    • Sharp edges, suitable for any resolution
  • Text independence Text independence from image
  • Small files download fast
  • Color control

6.1. What are the advantages of SVG and HTML5 canvas? Which one is more promising?

Canvas uses JavaScript programs to draw (dynamically generated), SVG uses XML document descriptions to draw. From this point of view, SVG is better suited for dynamic interaction, and SVG drawings are easy to edit, simply adding or removing elements. SVG is also vector-based, so it can handle size changes very well. Canvas is a bitmap-based image, which cannot be changed in size and can only be displayed in scale. Therefore, Canvas is more suitable for realizing things similar to Flash (of course, Canvas still has some imperfections compared with Flash). On the last point, which of the two is more promising: From the above, we can see that the two have different uses, and as a developer, you should understand the specific requirements of the application and choose the right technology to implement it.

7. Browser kernel

7.1. Know the kernel

  • Rendering engine: Does the rendering engine determine how the browser displays the content and formatting of the page
  • JS engine
    • Parse and execute JavaScript to achieve dynamic web pages
    • As engines became more independent, the kernel tended to refer only to the rendering engine

7.2 Kernel used by major browsers

  • Internet Explorer Trident kernel
  • Google Chrome
    • Webkit (previously used)
    • Blink kernel
  • The Opera browser
    • Blink kernel
    • Presto kernel (previously used)
      • Rendering speed has been optimized to the extreme
      • Sacrificing compatibility
  • Firefox
    • Gecko kernel: The code is completely open and highly exploitable
  • Safari browser: Apple WebKit kernel
  • Domestic browser
    • Dual cores (one for compatibility, one for speed)
    • The commonly used
      • Trident + webkit
      • Trident + blink

8. WEB standards and W3C

8.1. Web Standards

It is divided into structure, performance and behavior

What are Web standards?

A set of standards:

  • Structured standard language
  • Performance standard language
  • Standard language of behavior
Why was Web Standards born?

In order to solve the problem of multi-version development caused by different browser versions and software and hardware devices.

8.2, the W3C

W3C standardizes web standards

I. Structural requirements:
  • Benefits of compliance
    • Improve the page capture efficiency of search engines
    • Great for SEO
  • specific
    • Label letters should be lower case
    • Tag should be closed
    • Tags are not allowed to be nested arbitrarily
Ii. Performance and behavior requirements:
  • Benefits of compliance
    • Make it easier for users to read
    • Better communication between web developers
  • specific
    • Use external CSS stylesheets and JS scripts whenever possible: speed up page rendering
    • Use interline style sheets as little as possible on pages: keep structure and presentation separate
    • Attribute names, such as tag ID and class, are explained in context

9, Doctype (DTD)

Function: Declares the type style of a document

Tells the browser which rendering mode to use to parse the page

9.1. Rendering mode

  • Weird mode (compatible mode, promiscuous mode)
    • Serve the old rules
    • Pages are displayed in a loosely backward compatible manner, mimicking the behavior of older browsers in case the site doesn’t work.
  • Standard mode (Strict mode)
    • Serve standard rules
    • Standard mode typography and JS mode are run to the highest standards supported by the browser
  • Approximate standard model
    • It’s basically the standard model
    • Some of them are self-adjustments

Significance: The significance of the existence of strict mode and promiscuous mode is closely related to its origin. If only strict mode exists, then many old websites will be affected, if only promiscuous mode exists, then it will be back to the chaos of the browser wars, each browser has its own parsing mode.

9.2 What are the differences between standard mode and Promiscuous mode?

  • Box model processing differences: The width and height of the standard CSS box model is equal to the height and width of the content area, and does not include inside margins and borders, whereas the width and height of the box model implemented by browsers prior to IE6 included inside margins and borders. Therefore, for IE, the calculation of the width and height of the box model in weird mode and standard mode is different;

  • Vertical alignment of inline elements: Many early browsers aligned images to the bottom border of the box containing them, although the CSS specification required them to be aligned to the baseline of the text in the box. In standard mode, Gecko-based browsers align to the baseline, while in Quirks mode they align to the bottom. The most direct example is the display of images. In standard mode, the image is not aligned with the bottom border of the parent element. If you look closely, you will notice a small gap between the image and the bottom border of the parent element. That’s because in standard mode, images are baseline aligned. Weird mode doesn’t have this problem. Please refer to this article for an in-depth understanding of the relationship between vertical-align and line-height.

9.3 What is the difference between Standard mode and strict mode?

Strict mode has the following limitations:

  • Variables must be declared before being used
  • Function arguments cannot have attributes of the same name; otherwise, an error is reported
  • The with statement cannot be used
  • Cannot assign a value to a read-only attribute, otherwise an error is reported
  • Octal numbers cannot be represented with the prefix 0, otherwise an error is reported
  • You cannot delete attributes that cannot be deleted; otherwise, an error is reported
  • Cannot delete variable delete prop, error will be reported, only delete property delete global[prop]
  • Eval does not introduce variables in its outer scope
  • Eval and arguments cannot be reassigned
  • Arguments do not automatically reflect changes to function arguments
  • Arguments.callee cannot be used
  • Can’t use arguments.caller
  • Disallow this from pointing to a global object
  • You cannot use fn.caller and fn.arguments to get the stack of function calls

10. Meta Tags

The
element provides meta-information about the page, such as descriptions and keywords for search engines and update frequency.

10.1. Four attributes

  • [Key words] http-equiv
    • content-type
      • Defining character encoding
      • Using the charset attribute instead is not recommended
    • Refresh: Specifies that reloads and redirects are performed in seconds
  • Name [Key words]
    • Application-name: indicates the name of an application
    • Keywords: Keywords tell search engines what keywords are on your page
    • Author: Indicates the author name of the current page
    • viewport
      • Set the browser viewport
      • Key keywords
        • Width: indicates the viewport width
        • *-scale (initial-scale) : scale related
        • User-scalable: Whether to scale manually
        • For example: <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ >
  • Description Description is used to tell search engines what your site is about
  • Content: Indicates a specific description and cannot exist independently
  • Charset (HTML5) : UtF-8 is recommended to simplify the processing of characters in files by different scripts

10.2. Functions of META Tags

  1. Search Engine Optimization (SEO)

  2. Define the page usage language

  3. Automatically refreshes and points to a new page

  4. Realize the dynamic effect of web page conversion

  5. Control page caching

  6. Web page rating evaluation

  7. Controls the window displayed on a web page