MindMap Gallery Front-end HTMLl MDN document learning outline
This is an outline that I studied on MDN and compiled based on my understanding. The content is comprehensive, including basic concepts, basic structure, text layout, word processing, hyperlinks, embedded multimedia, etc. It is for students’ study reference only.
Edited at 2019-09-01 09:54:48This 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.
HTML
basic concept
markup language
html5
xml
basic component
element
regular elements
Label (case insensitive)
start tag
end tag
content
Attributes
effect
Attributes contain additional information about the element that does not appear in the actual content
Classification
According to value type
value attribute
What must be included
1. There is a space between the element and the attribute (if there are one or more existing attributes, there is a space between the previous attribute.) 2. The attribute is followed by an "=" symbol. 3. There is an attribute value, enclosed by a pair of quotation marks " ".
e.g.
Example
Boolean properties
Contents included (compared to regular)
1. Same as above 2. There can only be attribute values with the same attribute name. 3. Attribute values are usually omitted
e.g.
Example
According to semantics
Semantic elements
Such as <p>, <h1>, etc.
no semantic elements
<span>......</span>, <div>......</div>, <i></> (semantic in H5), <b></>
According to format
block-level elements
e.g.
<div>
inline elements
e.g.
<span>
<a>
According to scope
global properties
element properties
According to inheritance
Inherited properties
non-inherited properties
(HTML5) Data attributes - custom data
e.g.
empty element
start tag
e.g.
<img src="">
Nested elements
e.g.
<p>My cat has a<strong>temper</strong>:)</p>
Special character input (escape characters)
Comment
<!-- Comment content --> Note
Custom icon
Basic architecture
Web page structure
<!DOCTYPE html>
Declare document type
<html>......</html>
root element
<head>......</head>
All content that is included in the HTML page but does not want to be displayed in the HTML
<meta>
metadata
<meta charset="utf-8">
<meta name="" content="">
name specifies the type of meta element; indicates what type of information is included
content specifies the actual metadata content
e.g.
<meta http-equiv="" content='5';url=http://">
<title>......</title>
Web page title
<body>......</body>
Contains all content, text, images, audio, games, etc. displayed on the page
Leave blank
Focus on readability and aesthetics
Document structure
<header> Header <nav> navigation bar <main> main content <article>, <section> and other contents <aside> sidebar, often nested in <main> <footer> footer
newline
<br>
divider
<hr>
Typesetting
title
<h1>......</h1>
A total of six levels of titles
paragraph
<p>......</p>
<p> tags cannot contain block elements
list
disorder
<ul>...<li>...</li>...</ul>
Attributes
type
orderly
<ol>...<li>...</li>...</ol>
Attributes
type
value
definition list
Format
List nesting
Optimize structure
Best Practices
Purpose
word processing
decorate
superscript and subscript
Superscript: <sup></sup> Subscript: <sub></sub>
strikethrough
<del>...</>
emphasize
Semantic
no semantics
the difference
斜体、加粗、变小、下划线
效果: 语义: <em> 斜体 着重点和重读点 <i> 斜体 原:无 现:技术术语、外文短语或是小说中人物的思想活动等 <strong> 粗体 重要性 <b> 粗体 无(推荐在css中使用加粗) <small> 字体变小 版权、声明之类的小字内容 <big> 字体变大 无 <mark> 高亮 上下文相关性 <>
<em>和<i>、<strong>和<b>、<u>等区别?
Insert wire
<ins>...</>
Center text
<center></> Not recommended
abbreviation
<abbr title="">...acronym...</abbr>
e.g.
Quote
effect reference
<cite>...</>
semantic reference
block quote
<blockquote cite="">...Citation content...</blockquote>
Visual references
Inline quotes
<q cite="">...Citation content...<q>
Mark contact details
<address>......</address>
Mark programming code
preformatted
<pre>...</>
Mark date and time
Function: Make the computer recognize the date and time
<time datetime="">Date time</time>
Element datetime basic format
Hyperlink
URL (Uniform Resource Locator Uniform Resource Locator)
Point to current directory
Point to subdirectory
Point to parent directory
"../../folder/folder/file"
Absolute URLs and relative URLs
Use relative links whenever possible
reason
<a href="">...text, images, etc...</a>
Common properties
title prompt when mouse hovers
target=""
Linked document fragments
method
Return to the top of the same document
The link can be directly #
Links to different documents
to the linked document
Assign id attribute
eg: <h2 id="mark">title</2>
Tag names are custom but consistent
to the document being manipulated
Use the hash symbol # to point to it
eg: <a href="Linked document.html# tag">......</a>
Link to the same document
It is also completed using the id tag and # tag.
Download link
method
Just add the download link directly
Add the download attribute to provide a default save file name
Email address
How to directly click on the link to open the email client and send it
mailto:link
Additional information (subject, cc, body)
Embed multimedia
picture
General pictures
<img>
Attributes
(Required attribute) src="path"
(Description displayed when the image cannot be loaded normally) alt="image description"
(Mouseover description) title=""
(size)width="" height=""
How to match pictures and texts
<figure>Picture</figure> and <figcaption>Text</figcaption>
CSS
method
Vector pictures
concept
SVG
How to add to web page
<img>
Example
Cross-browser support
in html
srcset attribute
in CSS
Example
Introduce SVG code (SVG inline)
Example
Advantages and Disadvantages
Embed using <iframe>
Example
shortcoming
Adaptive images
Resolution switching
Different sizes
srcset, sizes
Example
parse
Same size, different resolution
srcset, x syntax
Example
focus switch
<picture...</picture>
Example
Reasons why CSS and JavaScript cannot be used
Debugging method
Chrome's own developer tools - responsive design view
new image format
Use <picture>...</> to reject unsupported types
Example
video
Single format addition
<video>...</video>
Attributes
src=""
controls
content between tags
Provide access processing that does not support the <video> tag
Multiple format support
<video>...<source>...<source>...</video>
Example
Other properties
<width>, <height>, <autoplay>, <loop>, <muted>, <poster>, <preload>
Audio
Single format addition
<audio>...<audio>
Same as <video>
Multiple format support
Same as <video>
Other properties
No <width>, <height>, <poster> attributes
subtitle text
<track> tag link WebVTT format text
Other embedding technologies
<iframe>...</iframe>
Attributes
allowfullscreen, frameborder, src, width, height, sandbox
content between tags
Same as above
<embed> and <object>
Universal embedding tool for embedding multiple types of external content, including JAVA applets and plug-in technologies such as Flash and PDF
Make a table
fundamental element
<table>...</> table root element
<caption>...</> title, placed under <table>
<th>...</> header table header
Attributes
colspan="number of columns" merge columns
rowspan="number of rows" merge rows
<td>...</> cell table data
Attribute (same as <th>)
<tr>...</> row table row
<col> and <colgroup> column group operations
Example
Semantic structuring
element
<thead>...</> header
<tbody>...</> Text
<tfoot>...</> Footer
effect
Example
Several ideas for drawing different tables
Basic type
multi-column type
Other types: consistent ideas, reference exercises (planetary table)
Table nesting
Improving accessibility for people with visual and hearing impairments
Add attribute scope in <th>
scope="col" or scope="row" indicates columns or rows
scope="colgroup" or scope="rowgroup" is used in multi-level headers
id and headers mark everything
<th>Add unique id
<td>Add headers containing all IDs of the slave, separated by spaces
Combining CSS to create table styles
Make a form
concept
interactive tools
design
See the website for design concepts
fundamental element
<form>...</> form root element
Attributes
action
method
<label>...</> text label
Attributes
for="ID"
Widget linking <label> and id=ID
effect
Generally do not use multiple tags and multiple identical IDs at the same time
Reason: Screen readers get confused
<input> Interaction means
Attributes
type=""
Single line text box
text
attribute multiple
password
search
tel
URL
Selected items
Single choice
radio
Multiple options
checkbox
button
button
other
number
range
time picker
color
file selector
Hide content
image button
value="Enter default value and submit return value"
placeholder="The underlying secret word is used to prompt content"
readonly read only
name="data block name" (the data block is associated with the server)
list="LIST"
<textarea>...</> multi-line text box
Attributes
cols
rows
wrap?
Note: Only text content is accepted, any content put in will be pure text content
<select>...</> selection box
radio select box
<select></> and <option></>
<select></> and <optgroup></> and <option></>
Multiple choice selection box
attributemultiple
<datalist>...</> Alternatives
<datalist>...<option></>,,,</>; <input> add list attribute
Compatibility fallback
Example
<button>...</> button
Attributes
type=""
submit submit
reset reset
button customization
Progress bars and instrument bars
<fieldset>...</> and <legend>...</> generalizers?
effect
Example
Common properties
Custom controls
CSS beautify the form
Compatibility list
Advanced form design
Send form data?
HTML send form
<form>attribute
action="URL" defines where to send data
method defines the sending method
GET method
effect?
POST method
the difference
Retrieve data on the server side
Send File
enctype attribute
Send a form using JavaScript
Form data validation
Built-in form data validation
required attribute
Regular expression verification
pattern attribute
Custom error message
JavaScript validation form
Compatibility with older browser issues
debug
Online Tools W3C
Quoting CSS and JavaScript
CSS
Method: <link>
Attributes
rel="stylesheet" indicates the style sheet of the document
href="" contains the path to the style sheet file
href:Hypertext Reference (hypertext reference), used to establish the relationship between this tag and external resources src:Source (source), used to replace this element
Note: often placed at the head of the document
JavaScript
Method: <script>......</script>
Attributes
src=""
Note: It is not necessary to place it at the head of the document. It is better to place it at the end of the document (before </body>).