MindMap Gallery HTML5
HTML5 notes for beginners. Write down some common tags in the form of a mind map for easy search.
Edited at 2020-04-26 11:58:11This 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.
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.
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.
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.
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.
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.
HTML5
<!DOCTYPE>
Define the standards based on which documents are rendered in web pages
<!DOCTYPE html>
<html>root tag</html>
Root tag, all html5 documents start with <html> and end with </html>
<head>Header tag</head>
Header tag, the header of an HTML5 document starts with the <head> tag
<base>base address tag
Used to set the default URL address or target for all links on the page
<base href=" "/>
Specify the URL address. If not, the browser automatically calls the URL of the current HTML5 document.
<base target=" "/>
Set a unified opening method for all hyperlinks
contains elements
<base target="_blank"/>
Specifies that all hyperlinks that do not specify how to open will be opened in a new window
<title>Web page title tag</title>
Tag page title
<mate>metadata tag
Provides metadata of the current HTML document, which can be used to define character sets, keywords, descriptions, authors and other information
<mate charset=" ">
Character set declaration
<mate charset="utf-8">
<mate name=" " content=" "/>
Define keywords, descriptions and other information
<mate name="keywords" content=" "/>
Keyword declaration
<mate name="description" content=" "/>
Page description statement
<style>Style tag</style>
Define various style information such as font style, background color, alignment, etc. for specified areas in the document
<style>Specify the area name {color: color}</style>
<link>Link tag
Links to external resources and the current HTML5 document, only appears in the header tag, usually used to connect external style sheets
<link rel=" " href=" "/>
<script>script tag</script>
This tag is optional, depending on whether you need to reference external script content or write script commands directly in the script tag.
<script src="script file path"></script>
<body>Body tag</body>
The main part of the document starts with <body> and ends with </body>
Documentation specifications
file type
.htm
.html
element tag
single label
<.../>etc.
double label
<...></...>etc.
character entity
Characters that cannot be used directly
output method
character name
&entity name;
numeric code
&#Physical numbers;
image file
JPEG format
GIF format
PNG format
<!--Documentation comments-->
Basic tags
<p>Paragraph tag</p>
Form a new paragraph, with a blank line by default between paragraphs
<hn>Title tag</hn>
where n needs to be replaced with a number to express fonts of different sizes
<hr>horizontal line tag
<br>Newline tag
text format tag
<i>Italic tags</i>
<b>Bold tags</b> <strong>Bold tags</strong>
<sup>Superscript</sup> <sub>Subscript</sub>
<del>Strikethrough</del> <ins>Underline</ins>
<pre>Preformatted tags</pre>
list tag
<ol type="type value">Ordered list tag <li>... <li>... ... </ol>
type value
a
English lowercase letters
A
English capital letters
i
Roman numerals lower case
I
Roman numerals in capital letters
1
Arabic numerals
<ul type="type value">unordered list tag <li>... ... </ul>
type value
disc
solid circle center
circle
hollow circle center
square
square
<dl>Define list label <dt>Term</dt> <dd>Term definition</dd> ... </dl>
<img src="Image file URL"/>Image tag
Used to embed images in web pages
<img src="Image file URL" alt="..." width="" height=""?>
Image tag with effect when image cannot be displayed
hyperlink tag
external link
<a href="URL address">Link text or image</a>
internal link
<a href="#Specify area name">Connect text or image</a>
link tag
<a name="area name">target content</a>
Custom region name
<table>Table tag</table>
Used to define a complete table
<caption>Table title tag</caption>
Add a title to the table, which is centered and aligned at the top of the table by default
<tr>Table row labels</tr>
Used to define a complete row
<td>Cell label</td>
Define a cell in a row
<th>Header tag</th>
Define the first row header, which is bold and centered by default.
<iframe src="child window file">frame tag</iframe>
Define subwindows within the web page frame
container label
<div></div>
Divide an independent area, have an independent ID number, and belong to the block element
<div style="..."></div>
Container tags that specify style requirements
<span></span>
A container for text. It has no specific meaning or style. Only when used with CSS can you set style attributes for the specified text. It is an inline element.
<span style="..."></span>
Container tags that specify style requirements
Document structure tag
<header>Header tag</hearder>
<nav>Navigation tag</nav>
<section>section tag</section>
<article>Article tag</article>
<aside>Sidebar tag</aside>
<footer>Footer tag<footer>
format tag
<mark>mark tag</mark>
Used to highlight text content in a specified area
<progess>Progress Label</progess>
Used to display the progress status of the task. It can be used with JavaScript to display the dynamic effect of the task progress.
<mater>Metric tag</mater>
Used to display scalar measurement results, usually used to display disk usage, voting data statistics, etc.
New API
drag and drop
Implement drag and drop of elements
canvas
Achieve 2D and 3D drawing effects
audio, video
Implement built-in controls to play audio and video
form
Added a series of new input types, such as phone numbers, number ranges, email addresses, etc.
Geolocation
Use a browser to locate geographic location latitude and longitude
web storage
Implement local persistence to store large amounts of data