MindMap Gallery HTML framework overview
HTML learning framework organizes the contents of basic tags, text, lists, tables, pictures, hyperlinks, forms, and frames. Welcome to exchange.
Edited at 2023-03-03 21:47:02This 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
1.Basic tags
1.1. Document declaration: <!DOCTYPE html>
1.2.<html></html>
1.3.<head></head>
1.3.1.<title></title>Web page title
1.3.2.<meta> tells search engine spiders what this page does
Attribute 1: name
name="keywords" content=""
name="description" content=""
Attribute 2: http-equiv
charset="utf-8" substitution to prevent garbled characters
http-equiv="refresh" content="6;url=http://www.baidu.com"
1.4.<body></body>
1.5. Comments
<!--content-->
2.Text
2.1 Introduction
2.1.1 Page elements
Text; pictures; hyperlinks; audio and video
2.1.2 The difference between static pages and dynamic pages
Whether to interact with the server data
2.2HTML text
2.2.1 Title tag
<h1></h1>~<h6></h6>
2.2.2 Paragraph tags
<p></p>Divide text into paragraphs with gaps
<br/>Wrap text without gaps
2.2.3 Text labels
Bold: strong (more), b
Italics: em (more), i, cite
Superscript: sup
Subscript: sub
2.2.4 Horizontal line label
<hr/>
2.2.5div tag
Function: Divide the structure to control the overall style of a certain block with CSS
2.2.6 Self-closing labels
<meta/>,<link/>,<br/>,<hr/>,<img/>,<input/>
2.2.7 Block elements and inline elements
block element
h1~h6;p;div;hr;ol;ul
Features: Occupies a line exclusively, excluding other elements; the element can accommodate other block elements and inline elements.
inline elements
strong;em;a;span
Features: Can travel with other inline elements; other inline elements can be accommodated inside the element, but block elements cannot be accommodated
2.2.8 Special symbols (search directly if needed)
Space, one Chinese character is approximately equal to 3 spaces
" ""
3. List
3.1 Ordered list
<ol><li>List item 1</li></ol>
3.2 Unordered list
<ul><li>List item 1</li></ul>
4.Table
4.1 Basic structure
table: table, tr: row, td: cell, caption: table title, th: table header, thead, tbody, tfoot: table semantics. <table><caption>Table title</caption> <thead><tr><th>Header cell 1</th></tr></thead> <tbody><tr><td>Cell 1 </td></tr></tbody> <tfoot><tr><td>Cell 1</td></tr></tfoot> </table>
4.2 Merge rows: rowspan
<td rowspan="Number of rows spanned"></td>
4.3 Merge columns: colspan
<td colspan="Number of columns to span"></td>
5.Pictures
5.1src attribute (required)
<img src="Picture path, try to use relative paths" alt="When the picture is not displayed, prompt this text" title="When the mouse moves over the picture, the prompt text in the title will be displayed" />
5.2alt attribute (required)
5.3title attribute
5.4 Picture format
5.4.1 Bitmap (mostly used)
1.jpg: Display colorful and high-quality pictures. Transparency is not supported.
2.png: Display colorful and high-quality pictures. It is a lossless format that can be compressed losslessly to ensure page opening speed. It is not suitable for storing colorful pictures.
3.gif: animated picture. Pictures are the worst.
5.4.2 Vector graphics
1. Not suitable for displaying colorful pictures.
2. Composition unit: It is a "mathematical vector"
3. Not affected by resolution, there will be no distortion when the picture is enlarged
6.Hyperlinks
6.1a tag
6.1.1href link address
Can be linked externally/internally (relatively). <a href="Link address">Text or image</a>
6.1.2target attribute
_blank: Open the link in a new window. <a href="" target="_blank"></a>
6.2 Anchor links
href with # id: <a href="#article, pick any English name"></a> <div id="article"></div>
7. Form
7.1 Form tags
form,input,textarea,select,option
7.2form tag
7.2.1<form>Various form tags</form>
7.2.2 Properties
name is easy to distinguish: <form name="myForm"></form>
method specifies which http submission method to use for form data. Post is generally used for better security: <form method="post"></form>
action specifies the address to which form data is submitted for processing: <form action="index.php"></form>
target specifies how to open the window, usually _blank: <form target="_blank"></form>
7.3input tag
text box
7.3.1 Single-line text box
<input type="text" />
Attributes
The value is displayed in the value text box: <input type="text" value="helicopter"/>
The maximum number of characters that can be entered in the maxlength text box: <input type="text" maxlength="5"/>
7.3.2 Password text box
<input type="password" />
Attributes
value
<input type="password" size="15" maxlength="10" />
size
maxlength
7.3.7 Multi-line text box
<textarea rows="Number of rows" cols="Number of columns" value="Value (usually no need to set display text)">Default content</textarea>
7.3.3 Radio button
<input type="radio" name="Group name" value="Value" />
Attributes
name(required)
<input type="radio" name="gender" value="Male" />Male <input type="radio" name="gender" value="female" />Female
value(required)
checked was selected
<input type="radio" name="gender" value="Male" checked />Male
7.3.4 Checkbox
<input type="checkbox" name="Group name" value="Value" />
Attributes
name(required)
<input type="checkbox" name="fruit" value="Apple"/>Apple <input type="checkbox" name="fruit" value="banana"/>banana
value(required)
checked was selected
<input type="checkbox" name="fruit" value="banana"/>banana
7.3.5 Button
7.3.5.1 Ordinary buttons (cooperate with js to perform various operations)
<input type="button" value="Value (text on the button)" />
7.3.5.2 Submit button (submit data to the server)
<input type="submit" value="Value (text on button)" />
7.3.5.3 Reset button (clears the content entered by the user in the form)
<input type="reset" value="Value (text on button)" />
7.3.5.4Button label (not easy to use)
7.3.6 File upload
<input type="file" />
7.3.8 Drop-down list
<select> <option>Option content 1</option> </select>
select attribute
multiple can select multiple items: <select multiple> </select>
size displays several list items, the value is an integer >= 4: <select size="5"></select>
option attribute
Whether selected is selected: <option selected>jQuery</option>
value option value, operated with JavaScript and the server
8.Framework
8.1 Inline frame (embedding another web page on the current page)
<iframe src="Link address" width="Number" height="Number"></iframe>