preface

HTML, CSS, JavaScript is the front-end entry must learn the knowledge, but also the most basic knowledge. This article mainly shares including (HTML, CSS, JS) front-end basic knowledge notes, learning roadmap, and finally attached front-end basic interview questions. HTML knowledge

  1. Basic HTML structure

    HTML tags are keywords surrounded by <>. HTML tags usually come in pairs, at the beginning and end of the tag. Some labels do not have an end tag. They are single labels. Single labels must end with /. All of the content of the page is in the HTML tag. HTML tags are divided into three parts: tag name, tag content, and tag attributes. HTML tags are semantic, and the content of the tag can be determined by the tag name. Semantic functions make the structure of the web page clearer, easier to be included by search engines, and easier to be read by screen readers. The content of a tag is the content inside a pair of tags. The content of a label can be another label.

  2. Tag attributes

    Id: specifies the unique ID of the element whose value is unique throughout the HTML document. Style: specifies the inline style of the element. Using this attribute will override any global style Settings. Tabindex: specifies the order of elements under TAB. Dir: specifies the text direction of the contents of an element. There are only LTR or RTL lang attributes: The language used to specify the content of the element

  3. Event attributes

    Window window events: onLoad, which triggers onunload after a page has loaded, occurs when the user leaves the page (click to jump, reload the page, close the browser window, etc.)

    Form event: Onblur, onchange when the element loses focus, onFocus when the value of the element is changed, onReset when the element gains focus, onSelect when the reset button in the form is clicked, onSubmit when the element text is selected, Triggered when the form is submitted

    Keyboard: onKeyDown: OnKeyPress is triggered when the user presses a key. After the user presses a key, onKeyPress is triggered when the user presses a key. (This property does not apply to all keystrokes, Alt, CTRL, Shift, ESC)

    Mouse events: Onclick, onblclick when a mouse click occurs on an element, onMouseDown when a double mouse click occurs on an element, onMousemove when the mouse button is pressed on an element, onMouseOut when the mouse pointer moves over an element, Onmouseup is triggered when the pointer to an element is moved out of the element and when the mouse button is released on the element.

    Media Media event onabort, which fires onWaiting when exiting, or when the Media has stopped playing but intends to continue

  4. Text labels

    Paragraph tag:

    The paragraph tag is used to describe a paragraph of text. The heading tag is used to describe a heading. The heading tag has six levels of emphasis:Used to emphasize the importance of certain words and to emphasize labels: 和 Tags, like tags, are used to emphasize text, but the degree of emphasis is stronger with some non-semantic tags:Tags are short text reference tags with no semantics:Short text quote long text quote tag:

    , define a long text reference line feed tag:

  5. Multimedia label

    Link tag:Image tag:Video label: Audio label:

  6. A list of tags

    Unordered list tags: UL, LI,

      A list defines an unordered list

    • Represents an ordered list without every element in a list: ol,li defines a list:

      , define lists generally and

      和

      Tag together

    • Table label

      Table label

      Colspan = “2”, rowspan= “3”

    • The form tag

      The form tag

      A form is a form that sends data from visitors to the server so that the server program can process the data from the form.

    Action, where the data is sent to. Value: Sets the default value for the text input field. Type: By defining different types of type, the function of input is different.
    Text single-line text input box password input box (the password is displayed as ***) radio checkbox (checked attribute is used to display the selected status) checkbox (checked attribute is used to display the selected status) file upload file button Reset button (clicking the button triggers the reset event on the form) Submit button (clicking the button, Submit email email url Url number Number range date Select a date and time. Month, week, time, datetime, datetime-local) color Specifies the colorCopy the code

    Button A drop-down selection box

    <option value=" Submit value "> Option </option> is each option in the drop-down selection boxCopy the code

    Text fields:

    Text fields are used when the user wants to type a lot of text. Cols, number of columns in the multi-line input field, rows, number of rows in the multi-line input field.

    9. Other semantic labels

    Box: <div></div> Web header: <header></header> html5 new semantic tag, define the header of the web page, mainly used for layout, split the bottom of the page structure information: <footer></footer>, HTML5 new semantic tag, define the bottom of the page, mainly used for layout, split the page structure navigation: <nav></nav>, HTML5 new semantic tag, define a navigation, mainly used for layout, split the page structure article: <article></article>, HTML5 added semantic tags, define an article, mainly used for layout, separate the structure of the page sidebar: <aside></aside>, semantic tags, define the information outside the topic content, mainly used for layout, separate the structure of the page. Time tag: <time></time>, semantic tag, define a timeCopy the code

    10. Web structure

    <! DOCTYPE HTML > defines the document type, Tell the browser which standard to use to interpret HTML < HTML ></ HTML > tell the browser that it is an HTML document. The content between the <body></body> tags is the main content of the web page. <head></head> tags define the header of the document, It is the container for all header elements. <title></title> The element defines the title of the document. The <link> tag links the CSS style file to the HTML fileCopy the code

    CSS knowledge

    CSS weight and introduction of using CSS to draw triangular elements horizontal vertical centralization scheme element type division box model and its understanding of margin collapse and merge problems float model and clear float method Grail layout and twin wing layout Flex layout PX, EM, REM difference media query HTML5 What's the difference between pseudo-classes and pseudo-elementsCopy the code

    JavaScript knowledge

    Primitive value and reference value types and differences Common methods to judge data types Array and array difference and conversion array common API Bind,call,apply New principle How to correctly judge this closure and its function prototype and prototype chain inheritance implementation and comparison object deep copy and shallow copy Static and throttling scope and scope chain, execution context DOM common manipulation methods Ajax request procedure JS garbage collection mechanism JS String, Array and Math methods addEventListener and onClick() different event delegate The whole process from URL input to page rendering is cross-domain, same-origin policy and cross-domain implementation and principle. The arguments EventLoop in JavaScript is the implementation function of the subscriber pattern and observer Set and Map Data structures XSS and CSRF attacks browser processes and important threads Why is the JS engine single threaded Why GUI rendering thread and JS engine thread are mutually exclusive. JS engine thread and event-triggered thread, timer triggered thread, asynchronous HTTP request thread Common front-end performance optimizations defer and Async differences object.defineProperty vs. Proxy differences Benefits of single page application using IntersectionObsever API listening elements appear in view GitFlow workflow server render and browser render WebPack packaging principle CommonJS and ES6 module difference arrow function and non-arrow function difference Different ways to flatten an array input change keyUpCopy the code

    Space is limited, need front-end learning materials can click the link:Jq.qq.com/?_wv=1027&k…Free access to “front-end basics Notes” and “Front-end basics interview questions” PDF complete version (including questions and analysis).

    Interview questions: **

    Front-end Basics interview questions probably cover HTML, CSS, JavaScript, browsers, and performance optimization