Preface
HTML, CSS, and JavaScript are the knowledge that must be learned to get started with the front-end, and they are also the most basic knowledge. The article mainly shares notes on front-end basic knowledge (HTML, CSS, JS), learning roadmap, and finally includes front-end basic interview questions .
HTML knowledge points
1. Basic structure of html
- HTML tags are
<>keywords surrounded by . - HTML tags usually appear in pairs, divided into beginning tags and end tags.
- Some tags do not have an end tag and are single tags. Single tags must
/end with . - All the content of the page is in html tags.
- 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 judged through the tag name. The role of semantics is to ensure that the web page
- The structure level is clearer, easier to be indexed by search engines, and easier for screen readers to read the content of the web page.
- The content of a tag is the content inside a pair of tags.
- The content of the tag can be other tags.
2. Label attributes
- class attribute: used to define the class name of the element
- id attribute: used to specify the unique id of the element. The value of this attribute is unique in the entire html document.
- style attribute: used to specify the inline style of the element. Using this attribute will override any global style settings.
- title attribute: additional information used to specify the element
- accesskey attribute: used to specify the shortcut key to activate the element
- tabindex attribute: used to specify the order of elements under the tab key
- dir attribute: used to specify the text direction of the content in the element. There are only two attributes
ltr: orrtl - lang attribute: used to specify the language of the element content
3. Event attributes
-
window window event:
onload, onunload is triggered after the web page is loaded
, and occurs when the user leaves the web page (click to jump, page reload, close the browser window, etc.) -
form form events:
onblur, onchange is triggered when the element loses focus
, onfocus is triggered when the value of the element is changed
, onreset is triggered when the element gains focus
, onselect is triggered when the reset button in the form is clicked
, and the text in the element is Onsubmit is triggered when selected
and triggered when the form is submitted. -
keyboard keyboard event:
onkeydown, onkeypress is triggered when the user presses the key
, and is triggered when the key is pressed after the user presses the key. (This attribute will not take effect for all keys. The ones that do not take effect are: alt, ctrl, shift, esc) -
mouse Mouse events:
onclick, onblclick is triggered when a mouse click occurs on the element
, onmousedown is triggered when the mouse double-click occurs on the element
, onmousemove is triggered when the mouse button is pressed on the element
, onmouseout is triggered when the mouse pointer moves to the element
, onmouseup is triggered when the element pointer moves out of the element
, and is triggered when the mouse button is released on the element. -
Media media event
onabort, triggered onwaiting when exiting
, triggered when the media has stopped playing but intends to continue playing
4. Text labels
- Paragraph tag:
<p></p>, paragraph tag is used to describe a paragraph of text - Title tag:
<hx></hx>The title tag is used to describe a title. There are six levels of title tags in total. - Emphasis tag:
<em></em>, used to emphasize the importance of certain words - More emphasis tag:
<strong></strong>Like<em>the tag, used to emphasize text, but it emphasizes more strongly - Semantic-free tags:
<span></span>, tags have no semantic meaning - Short text quote tag:
<q></q>, short text quote - Long text reference tag:
<blockquote></blockquote>, defines long text reference - Newline tag:
<br/>
5. Multimedia tags
- Link tags:
<a></a> - Image tags:
<img/> - Video tag:
<video></video> - Audio tag:
<audio></audio>
6. List tags
- Unordered list tags: ul, li,
<ul></ul>list defines an unordered list
<li></li>representing each element in the list without - Ordered list: ol,li
- Definition list:
<dl></dl>, definition list is usually used with<dt></dt>and tags<dd></dd>
7. Table labels
- table label
<table></table> - a row of a table
<tr></tr> - table header
<th></th> - Cell
<td></td> - Table merging, within the same row, merge several columns with colspan="2", within the same column, merge several rows with rowspan="3"
8. Form tags
form tag<form>
<form></form>The form can transmit the data entered by the viewer to the server, so that the server-side program can process the data passed by the form.
<form method="传送方式" action="服务器文件">
- action, where the data entered by the viewer is sent
- method, the method of data transmission
Enter tag<input/>
name: Name the text box, used to submit the form and receive data in the background.
value: Set the default value for the text input box.
type: By defining different type types, the functions of input are different.
- text single line text input box
- password password input box (password is displayed as ***)
- radio radio button (checked attribute is used to display the selected state)
- checkbox check box (checked attribute is used to display the checked state)
- file upload file
- button ordinary button
- reset reset button (clicking the button will trigger the reset event of the form)
- submit submit button (click the button to trigger the submit event of the form)
- email is specially used to enter e-mail
- url is specifically used to enter the url
- number is specifically used for number
- range is displayed as a slider for entering values within a certain range
- date selects date and time (also includes: month, week, time, datetime, datetime-local)
- color select color
button button, drop-down selection box<select></select>
<option value="提交值">The options</option>are each option in the drop-down selection box
Text field:<textarea></textarea>
Text fields are used when the user wants to enter a large amount of text. cols, the number of columns of the multi-line input field, rows, the number of rows of the multi-line input field.
9. Other semantic tags
- Box:
<div></div> - Web page header:
<header></header>HTML5 adds new semantic tags to define the header of the web page. It is mainly used for layout and dividing the structure of the page. - Bottom information:
<footer></footer>, HTML5 adds new semantic tags to define the bottom of the web page. It is mainly used for layout and dividing the structure of the page. - Navigation:
<nav></nav>HTML5 adds new semantic tags to define a navigation, which is mainly used for layout and dividing the structure of the page. - Article:
<article></article>, html5 adds new semantic tags to define an article, mainly used for layout and dividing the structure of the page. - Sidebar:
<aside></aside>Semantic tags, defining information outside the subject content, mainly used for layout and dividing the structure of the page. - Time tag:
<time></time>, semantic tag, defining a time
10. Web page structure
<!DOCTYPE html>Define the document type and tell the browser which standard to use to interpret HTML<html></html>Tells the browser that it is an HTML document<body></body>The content between tags is the main content of the web page<head></head>The tag is used to define the head of the document, which is a container for all head elements.<title></title>Element that defines the title of the document<link>Tags link css style files within HTML files<meta>Define the document’s metadata
CSS knowledge points
- CSS weight and introduction method
- Draw triangles with CSS
- Scheme for centering elements horizontally and vertically
- Classification of element types
- Box model and its understanding
- Margin collapse and merging issues
- Floating model and methods to clear floating
- Holy Grail Layout and Double Flying Wing Layout
- Flex layout
- The difference between px, em and rem
- Media inquiries
- HTML5 new features
- Grid layout
- How to solve the spacing between inline elements
- What is the difference between pseudo-class and pseudo-element?
JavaScript knowledge points
- Primitive value and reference value types and their differences
- Common methods to determine data type
- The difference and conversion between array-like and array
- Common APIs for arrays
- The difference between bind, call and apply
- The principle of new
- How to correctly judge this
- Closures and their effects
- Prototypes and prototype chains
- Implementation methods and comparison of inheritance
- Deep copy and shallow copy of objects
- Anti-shake and throttling
- Scope and scope chain, execution context
- Common DOM operation methods
- Ajax request process
- JS garbage collection mechanism
- String, Array and Math methods in JS
- The difference between addEventListener and onClick()
- event delegation
- BOM location object
- The entire process of the browser from inputting the URL to page rendering
- Cross-domain, same-origin strategy and cross-domain implementation methods and principles
- arguments in JavaScript
- EventLoop event loop
- Publish-subscriber pattern and observer implementation
- Function currying and its universal encapsulation
- “"and"=” and the difference between Object.is()
- The concepts and differences between let, const and var
- Symbol concepts and their functions
- Set and Map data structures
- XSS and CSRF attacks
- Browser processes and important threads
- Why is the JS engine single-threaded?
- Why are the GUI rendering thread and the JS engine thread mutually exclusive?
- JS engine thread and event trigger thread, timer trigger thread, asynchronous HTTP request thread
- Common front-end performance optimization
- The difference between defer and async
- The difference between Object.defineProperty and Proxy
- Benefits of Single Page Applications
- Use the IntersectionObserver API to listen for elements appearing in the view
- gitflow workflow
- Server-side rendering vs. browser rendering
- webpack packaging principle
- Differences between CommonJS and ES6 modules
- The difference between arrow functions and non-arrow functions
- Several ways to flatten arrays
- The difference between input change keyup
The space is limited. If you need front-end learning materials, you can [ click here ] to get the full PDF version of "Front-end Basic Knowledge Notes" and "Front-End Basic Interview Questions" for free (including questions and analysis) .
Front-end basic interview questions:
The content of "Basic Front-End Interview Questions" probably includes HTML, CSS, JavaScript, browsers, and performance optimization.
