Wondershare EdrawMind
MindMap Gallery Front-end html mind map
- 20
Front-end html mind map
A must-read for computer science students! The picture below is a simple learning mind map of front-end HTML, sorting out the content related to forms, videos, audios, tables, lists, and basic tags. This picture is designed to help students strengthen their understanding and memory!
Edited at 2019-08-28 13:26:27
- 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.
Front-end html mind map
- 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 (hyper text markup language) hypertext markup language
form form
Used to collect user information and allow users to fill in and select relevant information
Format
<form> All form content must be written in the form tag </form>
Label
input input
Input box
Attributes
type
input type
value
text
Text, plain text input box
<input type="text"/>
password
Password, secret text input box
<input type="password"/>
radio
Radio button input (select one of multiple choices)
<input type="radio" name="xingbie" checked="checked" /> Male <input type="radio" name="xingbie" /> Female
Radio buttons are not mutually exclusive by nature. If you want to be mutually exclusive, they must have the same name attribute, and checked selects the default value.
checkbox
Multi-check box, select multiple from many options
<input type="checkbox" name="aihao" checked="checked"/> Basketball <input type="checkbox" name="aihao"/> Football
Check boxes, preferably have the same name (although they do not need to be mutually exclusive, they must also have the same name), checked selects the default value
button
Click a button (mostly used to launch a script via JavaScript)
<input type="button" value="Click me" />
image
Define the submit button as an image
<input type="image" src="lnj.jpg" />
reset
Define the reset button. The reset button clears all data in the form
<input type="reset" />
This button does not need to write a value and will automatically have the text "Reset" reset only has an effect on form items in the form
submit
Submit button (submit form). The submit button will send the form data to the page specified by the action attribute.
<input type="submit" />
This button does not need to write a value and will automatically have the text "Submit" To submit data to the server through submit, all submitted form items must have the name attribute set. The default clear text transmission (GET) is not safe. You can set the method attribute to POST to change it to non-clear text transmission.
hidden
Define hidden input fields and do not display collected data
<input type="hidden">
color
color picker
<input type="color">
date
date picker
<input type="date">
Used for input fields that should contain an e-mail address. The value of the email field will be automatically verified when the form is submitted.
<input type="email" name="user_email" />
url
An input field that should contain the URL address. Automatic verification
<input type="url" name="user_url" />
number
numerical value
max, min.step maximum, minimum, interval
<input type="number" name="points" min="1" max="10" />
value
Set a default value for the input box, which will be displayed to the user and submitted to the server.
customize
<input type="text" value="123"/>
maxlength
Specifies the maximum length of characters in an input field
Value is a number
<input type="text" name="fullname" maxlength="8" />
label
Define annotations (markers) for input elements without presenting any special effects to the user
Use: associate text and input box, for and id
The "for" attribute binds the label to another element.
Set the value of the "for" attribute to the value of the related element's id attribute.
<label for='account'>Account number:</label> <input type='text' id='account'>
When the user selects the label, the browser automatically shifts focus to the form control related to the label.
for
bind id
datalist
Bind options to the input box
Format
datalist> <option>Optional content</option> </datalist>
use
1. Create an input box 2. Make a datalist list 3. Add an id to the datalist list tag 4. Add a list attribute to the input box and assign the value corresponding to the id of the datalist to the list attribute.
Please enter your car model: <input type="text" list="cars"> <datalist id="cars"> <option>Benz</option> <option>BMW</option> </datalist>
ID
Association list
textarea
Multi-line text box (text field), used to define multi-line text input controls in forms
Attributes
cols
Represents columns "columns" and specifies the visible width within the text area
rows
Represents rows "rows", specifying the number of visible lines in the text area
<textarea cols="30" rows="10">Default</textarea>
You can specify the width and height of the input box through cols and rows By default, the input box can be stretched manually
select
Group label. Used to create a selection list in a form. You can select a certain one with options.
Format
<select> <optgroup label="Beijing"> <option>Haidian District</option> <option>Chaoyang District</option> </optgroup> <optgroup label="Guangzhou City"> <option>Tianhe District</option> </optgroup> <option selected="selected">Guizhou</option> </select>
selected attribute sets default value
The outgroup tag adds groups to the drop-down list
Attributes
action
Defines the action to be performed when the form is submitted. The usual way to submit a form to the server is to use a submit button.
<form action="action_page.php">or <form action="/im/register/" method="post">
If the action attribute is omitted, action will be set to the current page.
method
Specifies the HTTP method (GET or POST) to use when submitting the form
<form action="action_page.php" method="GET">
value
GET
Default, if form submission is passive (such as a search engine query) and does not contain sensitive information. When you use GET, the form data is visible in the page address bar:
GET is best suited for submitting small amounts of data. Browsers will set capacity limits.
POST
If the form is updating data, or contains sensitive information (such as passwords).
POST is more secure because the data submitted in the address bar of the page is invisible.
name attribute
Specify the element name and find the value (value) through the element name (name)
Only form elements that have their name attribute set can pass their values when the form is submitted.
The same name attribute guarantees mutual exclusion and is consistent in single selection and multiple selection.
value attribute
Specifies the default value of the element, can set or return the value of the option, and submits the value to the server
The value attribute must be set in checkbox and radio.
videovideo
Play video
Format
<video src=""> </video>
<video> <source src="" type=""></source> <source src="" type=""></source> </video>
Solve browser adaptation
<video src='' autoplay='autoplay' controls='controls' poster='url.jpg'></video>
Attributes
src
Tell the video tag the video address to be played
autoplay
Tell the video tag whether it needs to automatically play the video
controls
Tell the video tag whether to display the control bar
poster
Tell the video tag to display a placeholder image before the video is played.
loop
Tell the video tag to loop the video. Generally used for advertising videos
preload
Tell the video tag to preload the video, but you need to pay attention to the conflict between preload and autoplay. If the autoplay attribute is set, the preload attribute will be invalid.
muted
Tell the video tag to mute the video
width/height
Exactly the same as in the img tag
audioaudio
Play audio
Similar video
There are 3 attributes that cannot be used, height/width/poster
Other important
details (details) and summary (summary tag)
Use the summary tag to describe summary information, and use the details tag to describe detailed information. By default, it is folded and displayed. If you want to see the details, you must click on it.
<details> <summary>Summary information</summary> Detailed information </details>
marquee('marquee')
Text scrolling, marquee effect
<marquee>Content</marquee>
Attributes
direction
Set scroll direction left/right/up/down
scrollamount
Set the scroll speed, the larger the value, the faster it will be
loop
Set the number of scrolls, the default is -1, which is infinite scrolling
behavior
Set the scrolling type: slide will stop when it reaches the boundary, alternate will bounce when it reaches the boundary.
HTML is only responsible for semantics
b, u, i, s have styles and have strong styling effects. They will generally only be used as CSS hooks in the future.
<strong>,<ins>,<em>,<del>replacement, indicating emphasized content, newly inserted text (Inserted), emphasized content (Emphasized), deleted text (Deleted)
html entities (special characters)
HTML is not sensitive to spaces, indentation, and line breaks. If multiple spaces appear indented or executed at the same time, the page will only parse them as one space. So if you want to output spaces in html, you must use it. One represents a space.
table table
Display data in tabular form
Format
table> caption> xxx </caption> thead> tr> th></th> th></th> /tr> thead> tbody> tr> td></td> td></td> /tr> /tbody> tfoot> tr> td></td> td></td> /tr> /tfoot> /table
Label
table definition table
caption sets the title for the entire table
It must be nested inside the talbe tag to be effective.
thead header
If no css is added to the page, the height setting in the header will be smaller by default.
tbody body
Generally used to store the main data in the page. If not written, it will be added automatically.
tfoot footnote or table note
If no css is added to the page, the height setting in the table header will be smaller by default, which generally does not appear.
th title
Set a title for each column, and the content in the cell will automatically be bold and centered.
tr (table row) defines row
td (table data) defines cells and fills in data
means an empty cell
Attributes
border border width, default 0
width, height width and height
cellspacing: margins
There is a 2 pixel gap between cells by default
cellpadding: padding
By default, cell edges have 1 pixel padding from content.
alignhorizontal alignment
Specifies the alignment of the table relative to surrounding elements
value
center, left, right make the table left/right/center in the browser
Other notes
Setting the align attribute to tr is to align all content in the current line to the left/right/center.
Set the align attribute for td to align all content in the current cell to the left/right/center.
valign vertical alignment
Specifies the alignment of the table relative to surrounding elements. Its values include center, left, and right, similar to align
bgcolorbackground color
Specify the background color of the table. You can also set the background color for tr and td.
other
colspan merges cells horizontally and backwards
colspan="2" spans two columns of cells:
rowspan merges cells vertically and downwards
rowspan="2" spans two rows of cells:
list list
unordered list
Add unordered list semantics to a bunch of content (a whole without sequential order)
Format
ul> li>xxx</li> /ul
Notice
li(list item) list item
Disorder means that there is no order of content for the subject.
ul and li are a whole. It is best to only write the li tag in ul. You can add any tag to the li tag.
application
Navigation bar, product list, etc., news list
ordered list
Add ordered list semantics (an ordered whole) to a bunch of content, similar to an unordered list
Format
ol> li>xxx</li> /ol
definition list
Add list semantics to a bunch of content, list the items in the list through dt, and then describe each item accordingly through dd
Format
dl> dt><dt/> dd></dd> dt><dt/> dd></dd> /dl
Notice
dt (definition title) defines the title dd (definition description) defines description information
application
Related information at the bottom of the website
Whenever you see a bunch of content that is used to describe a certain content, you should think of dl.
Photo-text
dl, dt and dd are a whole, similar to ul and li
basic tags
heading
h1>...<h6
Occupy one line, h1 is the largest, use with caution, usually only one h1
paragraphparagraph
p
exclusive line
horizontal dividing line horizontal rule
hr/
No end tag, only one line, not recommended
Line break
br
No end tag, no new paragraph for line break, and no complete description of the content.
pictureimage
img src='' alt=''
Attributes
src(source) resource
Specifies the URL of the image file
value
url
absolute path
Full path (such as src="http://www.example.com/" or C:/user/dell/test.txt
Poor portability
relative path
The path of the image file relative to the current html file (such as src="/i/image.gif" and ./test.txt)
/: indicates the root directory abc/girl.png ./: indicates the current directory ./abc/girl.png ../: represents the upper level directory (../../upper level)../girl.png
aaa/../bbb/girl.png is sometimes displayed, but there will be many errors. It is recommended not to write like this.
Use relative path, use backslash / in path
alt (alternate) alternative
Only if the image cannot be found in the path specified by src, the text specified by alt will be displayed.
value
texttext
titletitle
Hover text (introducing this image, only displayed when the mouse is moved over the image)
value
text
height,weight height and width
Specify one and automatically adapt to the ratio
value
pxpixelPixel
% percentage (relative to parent element)
Notice
The default is not to occupy a whole line of space
If you want the image to be stretched proportionally, just write the height or width.
hyperlink,anchor
a href=''
Attributes
href (hypertext reference) hypertext pointer
Specifies the URL of the page to which the link points
value
Relative and absolute url paths
target points to
Specifies where the linked document should be opened.
value
_self
By default, jump to the current tab
_blank
The browser always loads the target document in a newly opened, unnamed window.
title
Hover text (introducing this link, only displayed when the mouse is moved over the hyperlink)
Value: text
Notice
Be sure to write text between the a tags,
Use the base tag to set the jump method of the a tag at one time
base target="_blank" /
base must be nested inside the head tag
If the target is specified on the label and the target is also specified in the base, it will be executed as specified on the label.
usage
Fake link (essentially jump to the current page)
a href="#">xxx</a> (return to the top of the page)
a href="javascript:">xxx</a> (will not return to the top of the page)
Jump to the specified location on the current page (anchor link)
a href="#location">Jump to the specified location</a
Add an id attribute to any tag at a specified location on the page For example <p id="location">This is the target</p
download
Base
html tag
Keywords surrounded by angle brackets and appearing in pairs. <body>xxx</body
html document
Used to describe web pages, including html tags and plain text
basic format
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>editable-select</title> /head> body> /body> /html
//The first line of document declaration indicates that this is an html5 web page document //lang:language indicates the language displayed in the current document, en indicates English //head is used to add some configuration information to the website and will not be displayed to users. //meta meta information, charset specifies the character set of the current web page (the specified character set must be consistent with the character set that saves this file) //title is specifically used to specify the title of the website, and this specified title will also be used as the default title for users to save websites in the future, and must be written in the head tag // //body is specifically used to define the content (text/pictures/audio/video) in the HTML document that needs to be displayed to the user. There can only be a pair of body tags in a pair of html tags (an html start tag and an html end tag)/ /
Comment
!--Annotated content--
ctrl /
Cannot be used nested
meta
Meta information
Attributes
name
Specify type
value
keywords
Tell search engines the keywords of the current web page
<meta name="keywords" content="HTML5 technology, Android technology" />
description
Tell search engines the main content of the current web page
<meta name="description" content="HTML5 technology, Android technology research" />
author
Tell the search engine the operation of the current web page, exclusive to install B
<meta name="author" content="Jonathan_Lee" />
robots
Tell search engines the job of the current web page and write the content for web crawlers to read.
<meta name="robots" content="all|none|index|follow|noindex|nofollow" />
http-equiv
Tell the browser how often to automatically refresh the page and point to the new page. It is often used when new and old domain names alternate. When accessing the old domain name, it will automatically jump to the new domain name, or used in some chat rooms that need to be refreshed regularly.
<meta http-equiv="Refresh" content="2; URL=http://www.baidu.com/">
subtopic
some concepts
url (Uniform Resource Locator) Uniform Resource Locator
Format: protocol type://ip address:port number/resource path/resource name
http (htpertext transfer protocol) hypertext transfer protocol
ip address (Internet Protocol Address) protocol address for network interconnection: address
Port: house number
server
No power supply, no shutdown, no access after shutdown
Specially store data, others can access and obtain resources
Browser
Accessing web pages is accomplished by real, physical file transfers
A web page is not a file, but a bunch of files.
The reason why the second access is faster than the first access is that all files have been cached locally during the first access.