Preface:

At one time, I was confused. I learned HTML and CSS and then JavaScript after choosing the entry front end, but I seemed to encounter some bottlenecks and didn’t know how to continue.

I believe that this is a common problem encountered by many beginners. In this article, THE author would like to share some organized routes to help you learn the front-end partners less detour.

This article will include study notes, road maps and interview materials. If you are still in the early stages of learning, don’t feel too anxious and use this article as a road map to work towards in the coming days.

Basic ability

HTML (5)

1. Basic structure of HTML

  • HTML tags are made up of<>Surround keywords.
  • 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 tag has semantic, can be determined by the tag name of the content of the tag, semantic function is the web page
  • The structure is clearer, easier to be indexed by search engines, easier for screen readers to read the content of web pages.
  • The content of a tag is the content inside a pair of tags.
  • The content of a label can be another label.

2. Label attributes

  • classAttribute: The name of the class used to define the element
  • idAttribute: Used to specify the unique ID of an element whose value is unique throughout the HTML document
  • styleAttribute: Used to specify the inline style of an element, overriding any global styling
  • titleAttributes: Used to specify additional information about an element
  • accesskeyProperty: A shortcut key used to specify the active element
  • tabindexProperty: Used to specify the order of elements under the TAB key
  • dirAttribute: Used to specify the text direction of the content in an elementltrorrtlTwo kinds of
  • langAttribute: Language used to specify the content of an element

3. Event attributes

  • Window events

Onload: triggered after the page has finished loading

Onunload: Occurs when a user leaves a web page (click to jump, page reload, close browser window, etc.)

  • Form events

Onblur: Triggered when an element loses focus

Onchange: Triggered when the value of an element is changed

Onfocus: Fires when the element gains focus

Onreset: Triggered when the reset button in the form is clicked

Onselect: Triggered when the element text is selected

Onsubmit: Triggered when the form is submitted

  • Keyboard: indicates keyboard events

Onkeydown: Triggered when the user presses a key

Onkeypress: Triggered when the user presses the key. This property does not apply to all keystrokes, except Alt, CTRL, Shift, and ESC

  • Mouse events

Onclick: Triggered when a mouse click occurs on an element

Onblclick: Triggered when a double mouse click occurs on an element

Onmousedown: Triggered when the mouse button is pressed on the element

Onmousemove: Triggered when the mouse pointer moves over an element

Onmouseout: Triggered when the element pointer moves out of an element

Onmouseup: Triggered when the mouse button is released on the element. Media Events

Onabort: Triggered when exiting

Onwaiting: Triggered when media has stopped playing but intends to continue

4. Text labels

  • Paragraph tags<p></p>Paragraph tags describe a paragraph of text
  • The title tag<hx></hx>A heading tag is used to describe a heading. There are six levels of heading tags.<h1></h1>Tags usually appear only once per page
  • Emphasis statement tag,<em></em>Used to emphasize the importance of certain words
  • More emphasis on labels,<strong></strong> 和 <em>Tags are used to emphasize text, but to a greater degree
  • No semantic label<span></span>Tags have no semantics
  • Short text reference tag<q></q>Short text quotes
  • Long text reference tag<blockquote></blockquote>, define a long text reference
  • Wrap the label<br/>

5. Multimedia labels

  • Link tags,<a></a>
  • Image tags,<img/>
  • Video tags,<video></video>
  • Audio tags,<audio></audio>

A list of 6.

  • Unordered list tagul,li.<ul></ul>A list defines an unordered list,<li></li>Represents that every element in the list is not needed
  • An ordered listol,li
  • Define a list<dl></dl>, define lists generally and<dt></dt> 和 <dd></dd>Tags are used together

Form 7.

  • Table label<table></table>
  • A row in a table<tr></tr>
  • The header of a table<th></th>
  • The cell<td></td>
  • Table merge, merge several columns in the same rowcolspan="2"Merge several rows in the same columnrowspan="3"

8. Form labels

9. Other semantic labels

10. Web structure

11. Module division

12. The advantages of HTML5

13. HTML5 deprecation

14. New elements for HTML5

15. HTML5 form-related elements and attributes

CSS (3)

1. CSS code syntax

  • Cascading Style Sheets (CSS) is used to define how HTML content should be displayed in the browser, such as text size, color, font boldness, etc.
  • CSS code is usually stored in<style></style>tag
  • CSS styles consist of selectors and declarations, which in turn consist of properties and values
  • Selector {property: value}
  • Selectors: Also known as selectors, specify elements in a web page to which style rules should be applied

2. Position the CSS

  • Inline style, not recommended
  • Inline style sheets
  • External style sheets

3. Inheritance of CSS

  • Some styles of CSS are inheritable, and inheritance is a rule that allows styles to be applied not only to a particular HTML tag element, but also to its descendants.
  • Non-inheritable styles:

Display, margin, border, padding, background, height, min-height, max-height, width, min-width, max-width, overflow, Position, left, right, top, bottom, z-index, float, clear

  • Can be followed by:

Font-size: 14px; word-spacing: 14px; word-spacing: 14px; word-spacing: 14px; word-spacing: 14px; word-spacing: 14px; word-spacing: 14px; Font-variant, font-weight, text-decoration, text-transform, direction, visibility, cursor

4. Type of selector

  • Label selector: Modify CSS styles by label name
  • Wildcard selector: Selects all elements on a page
  • Property selector
  • Descendant selector: Selects all elements below a parent element
  • First-level child selector: selects the immediate child element of a parent element. The descendant selector selects all the descendants of the parent element. The first-level child selector selects only the first-level child element and does not look down for the element
  • Id selector: Finds unique tags in a page by ID
  • Class selector: to find the corresponding tag in the page by a specific class (class).classThe name of the
  • Pseudo-class selector:

Hover :hover mouse moves into an element; :before Inserts content before an element; :after Inserts content after an element

  • Group selectors: You can set the same style for multiple different selectors

5. Background styles

  • The background colorbackground-color
  • The background imagebackground-image
background-image:url(bg01.jpg); 
Copy the code
  • Background image locationbackground-position
background-position:10px 100px; // represents the x and y axesCopy the code
  • Background image repetitionbackground-repeat
background-repeat:no-repeat // no-repeat sets the image not to repeat // round automatically scales until it fits and fills the entire container // Space is tiled at the same spacing and fills the entire containerCopy the code
  • Background image locationbackground-attachment
background-attachment// The value of background-attachment can be scroll, fixedCopy the code
  • backgroundabbreviations
background:#ff0000 url(bg01.jpg) no-repeat fixed center
Copy the code

6. Font style

  • Font familyfont-family
font-family:Microsoft Yahei."Black"; 
Copy the code
  • The font size
font-size font-size:12px; 
Copy the code

The default font size for web pages is 16px

  • The font size
font-weight font-weight:400;
Copy the code

Normal (default)

Bold (bold)

Bolder (equivalent to and tags)

Lighter (normal)

100 ~ 900 (400=normal, 700=bold)

  • 【color】

Color :red;

Hex color: #FFFF00;

RGB(255,255,0) color: RGB(255,255,0)

RGBA (red green blue transparency) A is the value of transparency between 0 and 1. Color: rgba (255255,0,0.5)

  • The italic font

font-style font-style:italic

7. Text attributes

  • Line height
line-height line-height:50px;
Copy the code

You can prop up the height of the parent element

  • 【text-align】

Left align left

Center text is centered

Right right aligned

  • The vertical alignment of the height of the text line

The baseline of the default

Sub aligns the text vertically with the subscript, the same effect as the tag

Super vertically aligns the superscript of text to the same effect as the tag

The top object is aligned with the top of its container

The top of the text-top object is aligned with the top of the text on the line

The middle element object is vertically aligned based on the baseline

The bottom of the bottom object is aligned with the bottom of the text on the line

Text-bottom Aligns the bottom of the object with the bottom of the text on the line

  • Text indentation
text-indent text-indent:2em;
Copy the code

Usually used to indent the first line of a paragraph

  • The spacing between lettersletter-spacing
  • Spacing between wordsword-spacing
  • Uppercase of texttext-transform

Each word in the capitalize text begins with a capital letter

Uppercase defines only uppercase letters

Lowercase defines only lowercase letters

  • Text decorationtext-decoration

None of the default

Underline the underline

On the overline crossed

The line – through the midline

  • Word wrapword-wrap
word-wrap: break-word;
Copy the code

8. Basic styles

  • The width of the width
width:200px; 
Copy the code

Defines the width of the element

  • highly
height height:300px// The element has no height by default // The height needs to be set // You can leave the height undefined and let the content of the element push the element upCopy the code
  • Mouse style CURSOR
cursor:pointer // Define mouse style //default //pointer small hand shape //move move shapeCopy the code
  • Transparency opacity
opacity:0.3// The transparency value0~1The number between,0Is for transparency,1Represents completely opaque // transparent elements that are invisible but still dominate the document flowCopy the code
  • visibilityvisibility
visibility:hidden; When used in table elements, this value can remove a row or column without affecting the layout of the table.Copy the code
  • Overflow hiddenoverflow

Sets how to display the content of an object when its content exceeds its specified height and width

Visible default, the content won't be clipped, it'll be rendered outside of the element box the hidden content will be clipped and the rest of the content will be invisible the Scroll content will be clipped, but the browser will show a scrollbar to view the rest of the content auto If the content is clipped, The browser displays a scroll bar to view the rest of the contentCopy the code
  • Border coloroutline
Outline :1px solid # CCC; outline:1px solid # CCC; Outline: None Clears bordersCopy the code

9. Style resets

10. Box model style

11. The float float

12. The location of the position

13. Default browser styles

14. Added a selector to CSS3

15. CSS3 added attributes

16. Added morphing animation properties

17. 3D deformation properties

18. Transition properties of CSS3

19. CSS3 animation properties

20. CSS3 new increment column attributes

21. CSS3 added units

22. Elastic box model

JavaScript based article

1. The JavaScript

  • External import js file:
<script src="main.js"></script>
Copy the code
  • keywords

  • Variable names are case-sensitive
  • Naming conventions
  1. JavaScript data types
  • String (String)
  • Number
  • Boolean (Boolean)
  • Undefined (Undefined)
Alert (typeof dada); //undefined // var dada; alert(dada); //undefinedCopy the code

Undefined: indicates that the variable is not defined or only declared with no value

  • The following objects are built into js:

Object is the superclass (base class) of all JS objects, All objects in JS are arrays that inherit from Object objects. Array objects define Array properties and methods. Number Number objects Boolean Objects Boolean value related Error Object handler Error Function Function objects define Function properties and methods Math object Date Date object RegExp Object Regular expression object defines text matching and filtering rules String String object defines String attributes and methods

3. Arithmetic

var y = 3;
Copy the code

4. Force conversion

  • String to numberparseInt() parseFloat() isNaN()
  • Number to stringtoString()

5. Assignment

6. Relational operations

7. Logical operations

8. Triple operation

9. Branch loops

10. switch

11. while

12. do-while

13. for

14. Break and continue

An array of 15.

16. Array methods

17. Two-dimensional arrays

18. The string

Vue framework

The MVC pattern is one of the most mobile software architectures, forcing an application into three parts: Model, View, and Controller.

MVVM mode is to change the Controller of MVC mode into ViewModel. Changes to the View are automatically updated to the ViewModel, and changes to the ViewModel are automatically synchronized to the View.

3. Basic syntax examples:

  • el: Mounts Vue instances to DOM elements, binding HTML elements by ID
  • data: data object, Vue instance data (note: data does not have the same name as methods)
  • methods: event object, which contains the function to be triggered by the event (note: method names do not have the same name as the data in data)
  • computed: Compute attributes
  • watch: the listener
  • directives: User-defined instruction
  • Hook functions (8) : Actions triggered by different life cycles
  • Routing hook functions (3) : Routing components fire in different states
  • components: Component container
  • template: defines a template, which can be a string or a # selector
  • props: Used to receive data from the parent component
  • router: routing
  • store: vuex state

4. Instance properties/methods

5. Life cycle

6. Calculate attributes

7. Array update check

8. Event objects

9. Vue components

10. Route usage

11. Route navigation

12. Set routine by

13. Name the view

Tools 【 Webpack basics 】

1. Features of Webpack

2. Disadvantages of Webpack

3. The installation

4. Basic application of Webpack

5. Getting started with configuration files

The last

Space is limited, the front end of the initial notes, the learning roadmap, and the front end of the test can be [Click here toGet the full PDF (with answer analysis). To learn with more front-end partners, you can also add front-end skirt: [953352883]

2021年 考 题 选 择 题The content outline includesHTML, CSS, JavaScript, jQuery, browser, HTTP, React, applets