Wondershare EdrawMind
MindMap Gallery Summary notes on getting started with front-end HTML, CSS and JavaScript
- 29
- 1
- 1
Summary notes on getting started with front-end HTML, CSS and JavaScript
This mind map summarizes some basic HTML element tags, layouts, forms, and HTML5 APIs such as WebSockets, Fetch API, etc. CSS mainly summarizes selectors. JavaScript mainly includes functions and arrow functions, this keyword, and Promise asynchronous objects. In addition, there is AJAX, jQuery and jQuery AJAX, JSONP and more. The annotations in the map have many related detailed instructions and sample codes, among which the back-end test code uses PHP. Hope this helps everyone!
Edited at 2022-10-20 13:13:51
- bacteria
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
- Plant asexual reproduction
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
- Reproductive development of animals
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
Summary notes on getting started with front-end HTML, CSS and JavaScript
- bacteria
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
- Plant asexual reproduction
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
- Reproductive development of animals
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.
- Recommended to you
- Outline
HTML
Introduction
concept
markup language
Is a set of markup tags
Hypertext Markup Language
HTML
Hyper Text Markup Language
HTML markup tags are often called HTML tags
About XHTML
Extensible Hypertext Markup Language
is HTML written in XML format
is a stricter and purer version of HTML
use
HTML
Used to display data, with the focus being on the appearance of the data
Use markup tags to describe web pages
Tags are predefined
self-descriptive
HTML documents and web pages
HTML document describing web page
HTML documents contain HTML tags and plain text
HTML documents are also known as web pages
web browser
Read HTML documents and display them as web pages
HTML tags are not displayed, instead tags are used to explain the content of the page
refer to
About URL
composition
[Protocol:][//][username:password@][computer hostname.subdomain name][:port number][/directory path][/filename][?query string][#fragment identifier]
URL encoding
Some special characters or characters outside the ASCII character set must be encoded using the sequence "% plus two hexadecimal digits"
Use " " to replace spaces
refer to
example:
development environment
Visual Studio Code
plug-in
shortcut key
Quick input
Node.js
Package manager
npm
Order
source
Install
Bag
yarn
use
http-server
use
Google Chrome
plug-in
JSONView
Vue.js devtools
PowerShell
basic grammar
Basic components of HTML documents
example:
<!DOCTYPE html> <!--Define this document to be an html type document. is an instruction that instructs the web browser as to which version of HTML the page should be written in (here is the declaration of HTML 5) --> <html lang="zh-CN"> <!--html root element tag, usually also sets the lang attribute--> <head> <!--Header information tag--> <meta charset="UTF-8"> <!--UTF-8 character encoding--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Set the viewport width, etc., mainly used for mobile terminals--> <title>Hello, document title. </title> <!--Document title--> </head> <body> <!--Body information tag, the information in the body tag will be displayed on the page--> <h1>Hello, title. </h1> <p>Hello, paragraph. </p> </body> </html>
element
HTML elements consist of a "start tag" and an "end tag" and the text content/element content between them. Tags are not case-sensitive.
HTML tag reference manual
Comment format
General comments
<!--Comments-->
Conditional comments
example:
Attributes
HTML elements can have attributes
Attributes provide more information about HTML elements
example:
Link
<a href="http://www.w3school.com.cn">This is a link</a>
Properties applicable to general elements
example:
title
Label
<h1> ~ <h6>
Font size from large to small
horizontal line
<hr />
example:
illustrate
By default, HTML will automatically add an extra blank line before and after block-level elements, such as headings and paragraphs.
paragraph
Label
<p>
newline
<br />
example:
format
example:
text formatting
"computer output"
Quote
Extended description
style
Used to change the style of HTML elements
Usage
inline styles
Set the style attribute of an element
Can be any CSS property
Each style attribute consists of name:value pairs, separated by ;
example:
background color
Background image
Fonts, colors and sizes
text alignment
Link text decoration
internal style sheet
Generally, the internal style sheet is defined through the <style> tag in the head section.
example:
external style sheet
Style sheet (css file)
Reference the external style sheet through the <link> tag in the head section
example:
color
Setting method Example:
Link
HTML uses a hyperlink to connect to another document on the web
Label
<a>
example:
Basic example
index.html
helloAnchor.html
Pagination
image
Label
<img>
example:
sheet
Label
<table>
example:
Basic form:
Table with header and footer:
Element properties:
Responsive form:
list
Label
unordered list
Starts with <ul> tag, each list item starts with <li> tag
ordered list
Starts with <ol> tag. Each list item starts with a <li> tag
list of definitions
Starts with <dl> tag. Each list item starts with a <dt> tag, and the definition of a list item starts with a <dd> tag
example:
Basic example
vertical navigation bar
horizontal navigation bar
piece
block level element
Block-level elements usually start (and end) with a newline when displayed by the browser.
Example: <h1>, <p>, <ul>, <table>
About the <div> element
Defines a division or section in the document (division/section), has no specific meaning
Inline element (inline element)
Example: <b>, <td>, <a>, <img>
About the <span> element
Define span, which is used to combine inline elements in the document and has no specific meaning.
example:
kind
Classify HTML (set classes), allowing us to define CSS styles for an element's class
Set via the element's class attribute
example:
ID
The element's id attribute specifies the unique ID of the HTML element
id names are case sensitive
The main purpose
The id attribute is used to point to a specific style declaration in the stylesheet
example:
JavaScript can also use it to access and manipulate elements with specific IDs
example:
frame
By using frames, you can display more than one page in the same browser window. Each HTML document is called a frame, and each frame is independent of other frames.
Label
<frameset>
frame(set)
Cannot be used together with the <body> tag
example:
<noframes> tag
Defines alternative content when the browser does not support it
Include the <body> tag within the tag
iframe
Label
<iframe>
Define inline frames (child windows)
example:
client script
Directly defined in some attributes of the element
example:
Label
<script> tag
Generally, client-side script (JavaScript) is defined through the <script> tag in the head section.
How to define script content
You can also include script statements in element content
example:
You can also point to an external script file through the src attribute
example:
Other properties
async and defer
example:
crossorigin and referrerpolicy
<noscript> tag
Defines alternative content that will be displayed to users who have scripting disabled in their browser or whose browser does not support scripting
application
Utilize the cross-domain capabilities of this tag to implement JSONP (JSON with Padding)
illustrate
example:
Cross-domain implementation of <script> tag
html
demo_jsonp.php
jQuery AJAX implementation of cross-domain
html
head
Label
<head>
Is a container for all header elements
element
<title>
Define the title of the document
<base>
Specify a default address or default target for all links on the page
<meta>
Provide metadata about HTML documents
<link>
Define relationships between documents and external resources
<style>
Used to define style information for HTML documents
<script>
Used to define client scripts
layout
HTML layout using tables
example:
HTML layout using <div> elements
example:
Website layout using HTML5
element
Illustration
example:
Responsive design
RWD
Refers to Responsive Web Design (Responsive Web Design)
Ability to deliver web pages in variable sizes
Required for tablet and mobile devices
method
a. Use float style
example:
b. Utilize the Bootstrap CSS framework
example:
Emoticons
Emojis are like images or icons, they are letters (characters) from the UTF-8 (Unicode) character set
Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers)
example:
form
use
Used to collect different types of user input
Label
<form>
Define HTML form
Main attributes
action
Define the action to be performed when the form is submitted
method
get or post
target
Specifies where to display the response after submitting the form
example:
autocomplete
Specifies whether the form should turn on autocomplete
novalidate
Boolean attribute, which when set specifies that form data should not be verified when submitting
enctype
Specifies how form data should be encoded before sending to the server
accept-charset
Specifies the character encoding list used when submitting the form. Use spaces to separate multiple character encodings.
example:
element
<input>
Define input fields
Main attributes
type
value
text
Define a single-line input field for text entry
password
Define password field
radio
Define radio button input
checkbox
Define checkbox
submit
Define the button used to submit the form to the form-handler
button
Define button
HTML5 new input type
name
The key name that defines the query character string parameter key-value pair
value
Defines the initial value of the element input field, and the value of the query character string parameter key-value pair
HTML5 new attributes
example:
basic type
HTML5 type
HTML5 new attributes
<select>
Define drop-down list
The <option> element defines the option to be selected
example:
<textarea>
Define multi-line input fields (text fields)
example:
<button>
Define clickable buttons
example:
HTML5 form elements
<datalist>
Specifies a predefined list of options for the <input> element
The value of the list attribute of the <input> element must reference the value of the id attribute of the <datalist> element
example:
<keygen>
<output>
<fieldset>
Package part of the form content to generate a set of related form fields
The <legend> element defines the title for the <fieldset> element.
example:
media
multimedia
Different browsers handle support for sound effects, animations, and videos in different ways. Some elements can be processed inline, while others require additional plugins
object
Plug-ins are computer programs that extend the standard functionality of browsers.
Label
<object> element
Define embedded objects in HTML documents
<embed> element
Define embedded objects in HTML documents
example:
Audio
Play method
Using the <embed> element
Using the <object> element
Using the HTML5 <audio> element
Use hyperlinks
example:
video
Play method
Using the <embed> element
Using the <object> element
Using the HTML5 <video> element
Use hyperlinks
example:
graphics
HTML5 Canvas canvas
HTML5's canvas element uses JavaScript to draw images on web pages
Label
<canvas>
example:
fill color
fill gradient
draw image
Draw graphics
HTML5SVG
SVG stands for Scalable Vector Graphics
Label
<svg>
example:
Compare
HTML5 API
About HTML 5
Geolocation
example:
Element drag and drop
example:
local storage
illustrate
Object to store data
window.localStorage
Store data without expiration date
window.sessionStorage
Store data for a session (data is lost when the browser tab is closed)
example:
Fetch API
illustrate
grammar
Promise<Response> fetch(input[, init]);
example:
html
Web Workers
illustrate
example:
Server-Sent event
illustrate
example:
WebSockets
illustrate
object
WebSockets
example:
html
server
CSS
Introduction
illustrate
CSS stands for Cascading Style Sheets (Cascading Style Sheets)
CSS is a language for describing the styles of HTML documents
CSS describes how HTML elements should be displayed
refer to
basic grammar
Rule-set
composition
Illustration
Selector
The selector points to the HTML element you need to style
declaration block
Declaration blocks are enclosed in curly braces
A declaration block contains one or more declarations separated by semicolons
Each declaration contains a CSS property name and a value, separated by a colon
Selector
Used to "find" (or select) the HTML element to style
Classification
simple selector
Select elements based on name, id, class
Classification
element selector
Select HTML elements based on their names
example:
id selector
Using the id attribute of an HTML element to select a specific element
example:
class selector
Select HTML elements with a specific class attribute
example:
Universal selector
* The asterisk selects all HTML elements on the page
example:
Selector grouping
Separate each selector with a comma
example:
Combinator selector
Select elements based on specific relationships between them
Classification
Descendant selector (space)
Matches all elements that are descendants of the specified element
example:
Child selector (>)
Matches all elements that are children of the specified element
example:
neighbor sibling selector ( )
Matches all elements that are adjacent (immediately following) siblings of the specified element
example:
Universal sibling selector (~)
Matches all elements that are siblings of the specified element
example:
attribute selector
Select elements based on attributes or attribute values
Classification
Pseudo class selector
Select elements based on a specific state
grammar
selector:pseudo-class
example:
Pseudo element selector
Select a portion of an element and style it
grammar
selector::pseudo-element
example:
JavaScript
JavaScript
Introduction
accomplish
ECMAScript, the core of JavaScript, describes the syntax and basic objects of the language
DOM describes the methods and interfaces for processing web content
BOM describes the methods and interfaces for interacting with the browser
refer to
basic grammar
variable
statement, definition
var
example:
let
Compared to var, you can declare variables with block scope
example:
const
Define a constant (reference to a value)
example:
Scope
global scope
example:
function scope
example:
block scope
example:
About redeclaring variables
var
example:
let
example:
object
illustrate
Objects are also variables, containers of named values.
Object properties
The attributes in the object are written in the form of name:value pairs, and each attribute is separated by a , sign.
example:
Object methods
Methods are functions stored as properties
example:
function
Functions are defined using the function keyword
Followed by the function name, (formal parameter list), {function body}
example:
self-calling function
After the declaration, make a call immediately
Format:
(Function definition (actual parameter list));
example:
closure
meaning
Refers to a function that has access to the parent scope, even after the parent function is closed
Purpose
Implement local scope (private) of global variables
principle
Functions have access to the scope "above" them
accomplish
It is an application of self-calling function
(1) The function body first initializes the "private" variables
(2) Return a related function function
example:
String template
Template literals use backticks (``) instead of quotes ("" or '') to define strings
example:
number
method
toFixed(~)
Returns a string value containing a number with the specified number of decimal places
example:
cycle
For loop
For/In loop
For Of loop
Array.forEach()
While loop
regular expression
Format
/pattern/modifiers;
example:
abnormal
Format
this keyword
the this keyword refers to the object it belongs to
It has different values depending on where it is used
Use alone
The owner is the global object, and this points to the global object [object Window]
In strict mode, this also points to the global object [object Window]
in function
The owner of a function is bound to this by default. Whoever calls this function, this points to (that is, the object that calls the function)
In strict mode, default binding is not allowed. this is undefined
In HTML event handler
this points to the HTML element that fired this event
in object method
this is an object instance (the object instance is the "owner/caller" of the function)
in arrow function
There is no binding to this, generally pointing to the object of the context
example:
Change the this (caller object) in the function to point to
call(~), apply(~) methods
example:
arrow function
definition
example:
illustrate
example:
kind
definition
example:
inherit
example:
Getter and Setter
example:
Static method
example:
asynchronous
Promise
JavaScript Promise objects contain producing code and calls to consuming code
grammar
example:
async, await
example:
HTML DOM
event listener
Add to
element.addEventListener(event, function, useCapture);
Remove
element.removeEventListener(event, myFunction);
example:
Browser BOM
Timing event
example:
Cookies
example:
AJAX
Introduction
what is
AJAX = Asynchronous JavaScript And XML
Combined
The browser's built-in XMLHttpRequest object (requests data from a web server)
JavaScript and HTML DOM (display or use data)
work process
basic grammar
XMLHttpRequest object
method
new XMLHttpRequest()
Create a new XMLHttpRequest object
open(method, url, async, user, psw)
Specify request
setRequestHeader(header, value)
Add label/value pairs to headers to be sent
send(body)
Send request to server
getAllResponseHeaders()
Return header information
getResponseHeader()
Return specific header information
abort()
Cancel current request
Attributes
onreadystatechange
Define the function that is called when the readyState property changes
readyState
Status of XMLHttpRequest
status
Returns the status number of the request
statusText
Return status text
responseText
Return response data as a string
responseXML
Return response data as XML data
example:
PHP interactive
example:
php get text from array
html
gethint.php file
php get text from database
html
getcustomer.php
sql
jQuery
Introduction
what is
jQuery is a JavaScript library
jQuery greatly simplifies JavaScript programming
Contains the following features
HTML element selection and operation
CSS operations
HTML event functions
HTML DOM traversal and modification
JavaScript effects and animations
AJAX
Utilities
Install, add
download:
add to page
example:
basic grammar
Select
jQuery syntax is programmed for the selection of HTML elements and can perform certain operations on the elements
Format
$(selector).action()
$ sign or jQuery definition jQuery
Symbol conflict resolution
Selectors "find" HTML elements
jQuery's action() performs operations on elements
Documentation ready
$(document).ready(function(){ // jQuery functions go here });
example:
jQuery AJAX
ajax(~) method
This method is the underlying AJAX implementation of jQuery
grammar
$.ajax(settings)
get(~) and post(~) methods
Request data from the server via HTTP GET or POST requests
get(~) method
grammar
$.get(url, data, success(responseText, statusText, xhr), dataType)
post(~) method
grammar
$.post(url, data, success(responseText, statusText, xhr), dataType)
example:
html
load(~) method
Load data from the server and put the returned data into the selected element
grammar:
$(selector).load(url, data, function(responseText, statusText, xhr));
example:
Basic example
html
URL with jQuery selector
XML
Introduction
concept
Extensible Markup Language
extensible markup language
use
XML
Used to transmit and store data, the focus is the content of the data
HTML
Used to display data, with the focus being on the appearance of the data
Label is not predefined
self-descriptive
It is inaction, there is no action
grammar
basic grammar
XML documents form a tree structure that starts at the "root" and expands to "leaves"
Examples and explanations:
<?xml version="1.0" encoding="utf-8"?> <!--Line 1 is an XML declaration, defining the XML version and file character encoding (Note: XML declaration is not an XML element)--> <!--XML element consists of "start tag" and "end tag" and the text content/element content between them. Tags are case-sensitive--> <!--The next line is the root element of the document (there must be a root element)--> <root> <!--There are child elements inside the root element (can be nested) --> <!--Elements can have attributes (name/value pairs), and the attribute value must be enclosed in single/double quotes; attributes are specified in the opening tag--> <!--If the attribute value itself contains double quotes, surround it with single quotes --> <child data='A' name='b"cd"e'> <subchild>a1</subchild> </child> <child data="B"> <subchild>b2</subchild> </child> <child /> <!--An empty tag with no content that is closed in the opening tag--> </root>
other instructions
entity reference
That is, the escape character of XML
Illegal XML characters must be replaced with entity references
Entity composition: & name;
Numeric entity name: #xhexadecimal number, #decimal number
example:
<
<
>
>
&
&
'
'
"
"
space
\r
Unparsed Character Data
Text data that should not be parsed by an XML parser
Format:
Starts with "<![CDATA["
Ended by "]]>"
example:
<![CDATA[text]]>
Spaces in text content
In XML, whitespace is preserved
HTML will trim (merge) multiple consecutive space characters into one
Comment format
<!--Comments-->
element
An XML element refers to the portion starting from (and including) the start tag up to (and including) the end tag
name
Can contain letters, numbers and other characters
Cannot start with a number or punctuation mark
Cannot start with the characters 'xml' (or XML, Xml)
cannot contain spaces
Avoid the ":" character. The colon will be converted to a namespace for use
The data itself should be stored as elements, and metadata (data about the data) should be stored as attributes
Namespaces
Used to resolve naming conflicts that occur when two different documents use the same element name.
XML Namespace (xmlns) attribute
Placed in the opening tag of an element
Format:
xmlns:namespace-prefix="namespaceURI"
If ":namespace-prefix" is omitted, the default namespace is used.
Element tags using the default namespace do not need to be preceded by a namespace prefix.
example:
verify
concept
XML with correct syntax is called "well-formed" XML
XML that passes DTD validation is "valid" XML
DOCTYPE statement
Inside the document
Format
<!DOCTYPE root element [element declaration]>
example:
test.xml
outside document
Format
<!DOCTYPE root element SYSTEM "file name">
example:
test.xml
test.dtd
JSON
Introduction
concept
JavaScript Object Notation
Is a syntax for storing and exchanging data
is text written using JavaScript object notation
use
Used to transfer and store data
self-descriptive
grammar
basic grammar
Can form tree structure
Curly braces contain objects
Square brackets contain arrays
Data is in name/value pairs
name
Requires double quotes (string)
followed by colon and value
value
type of data
String (enclosed in double quotes)
number
Object (JSON Object)
array
Boolean
null
Each data is separated by commas
example:
{ "department": "dev", "employees": [ { "firstName": "Bill", "age": 18 }, { "firstName": "Steve", "age": 19 } ] }
JavaScript operations
Transform data
JavaScript object converted to JSON
Use the JSON.stringify(~) function
Convert JSON to JavaScript object
Use the JSON.parse(~) function
example: