HTML
1: Basic cognition
Understanding web pages
1: What is a web page
Text, pictures, audio, video and hyperlinks
2: What is the essence behind the web page
Front end code
3: What is the code transformed into an interface
Browser parsing and rendering
Five browsers
1: Browser
It is the platform for web page display and operation
2: Common browsers (top five)
IE, Firefox, Google, safar, oupeng browser
Google browser has the widest user base
3: Rendering engine (kernel)
The part of the browser that analyzes and renders the code
[the external chain image transfer fails, and the source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-nzuhm3rj-1646570448613) (C: \ users \ Qinghuan \ appdata \ roaming \ typora \ typora user images \ image-20220302195241277. PNG)]
Attention
The speed, performance and effect of parsing the same code are different with different rendering engines
Google browser works well and is recommended.
web Standard
Let different browsers display the effect according to the same standard, and make the display effect unified
Three components of web standards
[the external chain image transfer fails. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-nqz4oyxi-1646570448615) (C: \ users \ Qinghuan \ appdata \ roaming \ typora \ typora user images \ image-20220302195740881. PNG)]
The web standard requires the page to realize the separation of three layers: structure, performance and behavior
Structure: HTML (determines the body)
Performance: CSS (determines the beautiful style)
Behavior: Javascript (determines the dynamic effect of interaction)
HTML first experience
Concept of HTML
HTML: hypertext markup language
The language specially developed for users' web pages mainly describes the text, pictures, audio and video of web pages through HTML tags
Case: text becomes thicker
<strong>I want to get thicker</strong>
Fixed structure of HTML page
Web pages have the same fixed structure as articles, such as whole, head, title and body
The fixed structure of web pages is described by specific HTML tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
</body>
</html>
Basic understanding of VS Code
VS Code shortcut label
1: Quickly generate labels: English + tab
2: Quick save: Ctrl+s
3: Open web page: Alt+b
The open in browser plug-in is installed
4: Auto generate skeleton:+ tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
5: Comments: Ctrl+/
grammatical norm
Structure description
1: The label consists of <, >, / English words and letters, and the English words or letters that wrap the label < > are called the label name
2: Common labels are composed of two parts, which we call double labels. The first part is the start label, the last part is the end label, and the contents are wrapped between the two parts
3: A few labels are composed of one part, which is called single label. They are self-contained and cannot wrap the content
For example: hr,hb tag
Label properties
[the external chain image transfer fails, and the source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-nvuudbuw-1646570448616) (C: \ users \ Qinghuan \ appdata \ roaming \ typora \ typora user images \ image-20220302211411610. PNG)]
1: The properties of the tag are written inside the start tag
2: Multiple attributes exist on the label at the same time
3: Attributes are separated by spaces
4: Tag names and attributes must be separated by spaces
5: There is no order between attributes
Relationship between HTML tags
Parent child relationship (nested relationship)
<head>
<title></title>
</head>
<body>
<p>
</p>
</body>
Brotherhood (juxtaposition)
<head>
</head>
<body>
</body>
2: HTML tag learning
1: Typesetting label
1: Title label h label
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Common text
<h1>1 Level label</h1>
<h2>2 Level label</h2>
<h3>3 Level label</h3>
<h4>4 Level label</h4>
<h5>5 Level label</h5>
<h6>6 Level label</h6>
</body>
</html>
Shortcut keys; ctrl+d, press repeatedly to select the same content, which can be modified in batch
Features: the text is bold, the font decreases in turn, and one line is exclusive
Note: h1 tag is particularly important for web pages. There are specific usage scenarios in the development, such as the title of news and the logo of web pages
2: Paragraph label p label
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=h1, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>Front end development</h1> <p>Front end development is creating WEB Page or APP The process of presenting the front-end interface to the user through HTML，CSS and JavaScript And various derived technologies, frameworks and solutions to realize the user interface interaction of Internet products [1] . </p> <p>Front end development evolved from web page production, and the name has obvious characteristics of the times. In the evolution of the Internet, web page making is Web1.0 As a product of the times, the main contents of early websites were static, mainly pictures and words, and users' behavior of using the website was mainly browsing. With the development and application of Internet technology HTML5,CSS3 Modern web pages are more beautiful, interactive effect is remarkable, and function is more powerful.</p> <p>Front end development follows the development of mobile Internet and brings a large number of high-performance mobile terminal applications. HTML5，Node.js Widely used in various fields UI Frame, JS Class libraries emerge one after another, and the development difficulty is gradually increasing. [1]</p> </body> </html>
Features: there is a gap between paragraphs and one line is exclusive
3: Line feed label br label
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=h1, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Front end development</h1>
<br>
<p>Front end development is creating WEB Page or APP The process of presenting the front-end interface to the user,adopt HTML，CSS and JavaScript And various derived technologies, frameworks and solutions to realize the user interface interaction of Internet products [1] . </p>
<p>Front end development evolved from web page production, and the name has obvious characteristics of the times.<br>In the evolution of the Internet, web page making is Web1.0 As a product of the times, the main contents of early websites were static, mainly pictures and words, and users' behavior of using the website was mainly browsing. With the development and application of Internet technology HTML5,CSS3 Modern web pages are more beautiful, interactive effect is remarkable, and function is more powerful.</p>
<p>Front end development follows the development of mobile Internet and brings a large number of high-performance mobile terminal applications.<br>HTML5，Node.js Widely used in various fields UI Frame, JS Class libraries emerge one after another, and the development difficulty is gradually increasing. [1]</p>
</body>
</html>
Features: single label, allowing text to be forced.
4: Horizontal line label hr label
Features: single label, displaying a horizontal line on the page
2: Text formatting label
Scene: make the text bold, underline, tilt, delete and other effects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<b>Bold</b>
<u>Underline</u>
<i>tilt</i>
<s>Delete line</s>
<hr>
<strong>Bold</strong>
<ins>Underline</ins>
<em>tilt</em>
<del>Delete line</del>
</body>
</html>
[the external chain image transfer fails, and the source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-bj9iymau-1646570448616) (C: \ users \ Qinghuan \ appdata \ roaming \ typora \ typora user images \ image-20220303190618230. PNG)]
Semantics: a context that emphasizes importance
The second group is recommended
Because strong, ins, em and del are more semantically emphasized!
3: Picture label
Features: single label, the display effect needs to set the attribute of the label
<img src="" alt="" title="">
src: the path of the target image (when the web page and the target file are in the same folder, write the name and suffix directly)
alt: replace the text, the text information displayed after the picture fails to load
title: prompt text. When the mouse hovers over the picture, the information will be displayed
Note: the title attribute can be used not only for picture labels, but also for other labels, such as title labels
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beauty son</title>
</head>
<body>
<img src="../img01.jpg" alt="Kimono beauty" title="Nice girl WOW">
<h1 title="This is a h1 label">Title 1</h1>
</body>
</html>
width and height attributes in picture labels
Attribute values: width and height
Note: if only one of width and height is set, the picture will be automatically scaled to the same scale
In actual development, one can be set to avoid image deformation caused by improper setting
4: Path introduction
Absolute path:
The absolute location under the directory can directly reach the target location. Usually, there are paths starting with the drive letter or the web address
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="E:\Java\File\QQLogin\tankLogin.jpg" alt="Tank Battle">
<img src="http://stu.ityxb.com/img/avatar.c5dbec73.png" alt="">
</body>
</html>
Relative path
The process of finding the target file starting from the current file
Classification of relative paths
Same level directory: if the current file and the target file are in the same directory, write the name of the target file directly, or/+ Picture name
Subordinate Directory: target folder / target file name or/ Destination folder / destination file name
Parent directory:... / (return to parent directory) target folder / target file name
5: Audio tag
Scene; Insert audio into the page
<audio src="" controls autoplay></audio>
src: audio path
Controls: displays controls for playback
Autoplay: autoplay (not supported by some browsers)
Loop: loop playback
Note: audio tags only support three formats: MP3, Wav and Ogg
6: Video tag
Scene: inserting a video into a page
<video src="../resources/video/palpitate with excitement.mp4" contrals></video>
src: path of video
Controls: displays controls for playback
Autoplay: autoplay (not supported by some browsers)
Loop: loop playback
muted: Mute
MP4 file format is recommended
7: Link label
Scenario: after clicking, jump from one page to another
Address: a tag, hyperlink, anchor link
<a href="https://www.baidu. COM / "> Click to enter Baidu website</a> <br> <a href="14 Audio tag.html">Click to enter the audio tab</a>
Attribute name: herf
Attribute value: the page to jump to after clicking, external link and internal link
Display features:
-
Default underlined text
-
a label has been clicked, and the default text color is blue
-
a after clicking the tag, the text color is purple (clear the browser record and restore blue)
target attribute
Attribute value: the opening format of the target web page
Value:
_ self: default value, overwrite the original web page
_ blank: jump in a new window
Empty link
<a href="#"> empty link</a>
function
-
Click back to the top
-
The final jump position of the uncertain link in the development is occupied by the empty link
Case realization
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Today's hot word search</h1>
<hr>
<h2>1,Nice music</h2>
<br>
<p>This song is popular in Europe and the United States, with wonderful rhythm and good music <br>It's very popular. Let's listen to it next</p>
<audio src="../resources/audio/music1.mp3" controls autoplay loop>music</audio>
<br>
<h2>2,Nice video</h2>
<p>Good looking videos can also make people feel happy, and the following video is a wonderful film with youth, campus and beauty as elements mv <br>Click the link to enjoy</p>
<video src="../resources/video/palpitate with excitement.mp4" controls autoplay >palpitate with excitement</video>
</body>
</html>
2: List label
Unordered list
Scenario: represent a group of non sequential lists in a web page, such as a news list
Display features: dot marks are displayed in front of each item in the list by default
Label composition:
-
ul: indicates the whole of the unordered list, which is used to wrap li tags
-
li: represents each item in the unordered list, which is used to contain the content of each row
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Fruit list</h1> <ul> <li>Durian</li> <li>Banana</li> <li>a mandarin orange</li> <li>Apple</li> </ul> </body> </html>[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-gxfm2yg7-1646570448618) (C: \ users \ Qinghuan \ appdata \ roaming \ typora \ typora user images \ image-20220304202354676. PNG)]
Note:
-
Only li tags are allowed in ul tags
-
li tags can contain any content
<li><p>I am a p label</p></li>
Ordered list
Scenario: represent a group of sequential lists in a web page, such as a leaderboard
Label composition
- ol represents the whole with sequence table, which is used to wrap the li tag
- li refers to each item in the sequence table, which is used to contain the content of each row
Display characteristics
The serial number ID is displayed in front of each item in the list by default
Attention
Same as unordered label
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Score ranking table</h1>
<ol>
<li>Little sister: 100 points</li>
<li>Handsome boy: 80 points</li>
<li>Cute: 60 points</li>
</ol>
</body>
</html>
[the external chain image transfer fails, and the source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-anbulpew-1646570448619) (C: \ users \ Qinghuan \ appdata \ roaming \ typora \ typora user images \ image-20220304202326122. PNG)]
Custom list
Scenario: a custom list is usually used in the bottom navigation of a web page
Label composition
dl: represents the whole user-defined list and is used to wrap dt/dd tags
dt: represents the theme of the custom list
dd: represents each item of the customized list
Display characteristics
dd displays the indent effect by default
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>Help group Center</dt>
<dd>Account management</dd>
<dd>Shopping Directory</dd>
<dd>Order operation</dd>
</dl>
</body>
</html>
[the external chain image transfer fails, and the source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-nxgdvm7a-1646570448620) (C: \ users \ Qinghuan \ appdata \ roaming \ typora \ typora user images \ image-20220304202246230. PNG)]
Attention
Only indent effects are allowed in dl tags
The dt/dd tag can contain any content
summary
Unordered lists are the most commonly used. Ordered lists are used occasionally, and customized lists are used for navigation at the bottom
3: Table label
Basic label of the form
Scene: neatly display and data in the form of row + column cells in the web page, such as student transcript
Basic label
Table: the whole table, used to contain multiple tr s
tr: each row of the table, used to wrap td
td: table cell, used to contain content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table>
<tr>
<td>full name</td>
<td>achievement</td>
<td>comment</td>
</tr>
<tr>
<td>cute guy</td>
<td>100</td>
<td>My little brother is so handsome</td>
</tr>
<tr>
<td>cute girl</td>
<td>100 branch</td>
<td>Miss, I'm so beautiful</td>
</tr>
<tr>
<td>summary</td>
<td>a perfect match between a man and a girl</td>
<td>Jiacheng</td>
</tr>
</table>
</body>
</html>
[the external chain image transfer fails. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-20wvtsuw-1646570448621) (C: \ users \ Qinghuan \ appdata \ roaming \ typora user images \ image-20220304204214583. PNG)]
Nesting rules for tables
- table>tr>td
Table related properties
Scene: set table related display effect
Common related attributes
Border number border width
Width numeric table width
Height numeric table height
<table border="1" width="300" height="200">
[the external chain image transfer fails, and the source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-qwfu134c-1646570448622) (C: \ users \ Qinghuan \ appdata \ roaming \ typora user images \ image-20220304204554198. PNG)]
Note: CSS settings are recommended for style effects during actual development
Table title and header cell labels
Scenario: represent the overall headline and a column of subheadings in the table
caption: table title, which indicates the overall title of the table. It is displayed at the top of the table by default
th: header cell, which represents a column of subheadings. It is usually used in the first row of the table. By default, the internal text is bold and displayed in the Bureau
<caption>report card</caption>
<tr>
<th>full name</th>
<th>achievement</th>
<th>comment</th>
</tr>
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-xb2vbpbp-1646570448622) (C: \ users \ Qinghuan \ appdata \ roaming \ typora user images \ image-20220305111456389. PNG)]
Note:
- The caption tag is written inside the table tag
- th tag is written inside tr tag (used to replace td tag)
Structure label of the table
Scenario: group the content structure of the table and highlight different parts of the table (head, body and bottom) to make the semantics clearer
Structure label:
thead: table header
tbody: table body
tfoot: bottom of table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="300" height="200" >
<caption>report card</caption>
<thead>
<tr>
<th>full name</th>
<th>achievement</th>
<th>comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>cute guy</td>
<td>100</td>
<td>My little brother is so handsome</td>
</tr>
<tr>
<td>cute girl</td>
<td>100 branch</td>
<td>Miss, I'm so beautiful</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>summary</td>
<td>a perfect match between a man and a girl</td>
<td>Jiacheng</td>
</tr>
</tfoot>
</table>
</body>
</html>
Note:
- Table structure labels are used for package tr labels
- The result label of the table is omitted
merge cell
Scene: multiple cells horizontally or vertically
- Merge steps: specify which cells to merge
- Determine who to keep and who to delete through the top left principle
- Merge one up and down, keep the top, and delete the others
- Merge left and right, keep the leftmost one, and delete the others
Attribute name:
rowspan: number of merged cells, cross row merging, and vertical merging of multiple rows of cells
colspan: cross column consolidation, horizontal consolidation of multi column cells
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="300" height="200" >
<caption>report card</caption>
<thead>
<tr>
<th>full name</th>
<th>achievement</th>
<th>comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>cute guy</td>
<td rowspan="2">100</td>
<td>My little brother is so handsome</td>
</tr>
<tr>
<td>cute girl</td>
<!-- <td>100 branch</td>-->
<td>Miss, I'm so beautiful</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>summary</td>
<td colspan="2">a perfect match between a man and a girl</td>
<!-- <td>Jiacheng</td>-->
</tr>
</tfoot>
</table>
</body>
</html>
Note: only cells in the same label can be merged, not across structure labels (thead,tbody,tfoot)
summary
- Table basic label: Table > tr > td
- Table title and header cell label: Table > caption / TR > th
3: Table structure label: Table > thead > tr > td
4: Tag related attributes: border, width, height
5: Merge cells: rowspan, colspan
4: Form label
Basic introduction to input series labels
Information collected in the form scene, such as: user login page
Tag name: input
- The input tag can show different effects through different values of the type attribute
type attribute value:
Text: text box for entering single line text
Password: password box, used to enter the password
Radio: radio box, used to select one from more than one
checkbox: multi selection box, used to select one from more
File: file selection, used to upload files
Submit: Submit button, used to submit
Reset: reset button, used to reset
Button: normal button. It has no function by default, and then it can be added with js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Nickname?<input type="text" name="nickname" ><br><br>
password:<input type="password" name="password"><br><br>
Gender:<input type="radio">male
<input type="radio">female <br><br>
Hobbies:<input type="checkbox">Knock code
<input type="checkbox">Play games
<input type="checkbox">sleep late<br><br>
<input type="file"><br><br>
<input type="submit">
<input type="reset">
</body>
</html>
1: Textbox textk
Scenario: display the form control for inputting single line text in the web page
Common properties
Placeholder: a placeholder that prompts the user to enter the text of the content
Nickname?<input type="text" name="nickname" placeholder="Enter nickname ">
[the external chain image transfer fails, and the source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-fnbl4mew-1646570448623) (C: \ users \ Qinghuan \ appdata \ roaming \ typora user images \ image-20220305145652012. PNG)]
value attribute: the content entered by the user will be sent to the back-end server after submission
name attribute: the meaning of the current control. After submission, you can tell the backend what the meaning of the data sent in the past is
The format of data received by the backend is: attribute value of name = value
2: Password box password
Common attribute: placeholder
Note: the value of type attribute cannot be misspelled or added with more spaces. Otherwise, it is equivalent to setting the default value status: text text text box
3: radio box
Common attributes:
Name: grouping. Radio boxes with the same name attribute value are a group, and only one of them can be selected at the same time.
check: selected by default
Gender:<input type="radio" name="sex" checked>male
<input type="radio" name="sex">female <br><br>
[the external chain image transfer fails. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-vij7ut3i-1646570448624) (C: \ users \ Qinghuan \ appdata \ roaming \ typora user images \ image-20220305153639037. PNG)]
Attention
- The name attribute has grouping function for radio boxes
- Radio boxes with the same name attribute are a group, and only one of them can be selected at the same time
4: Check box
Common attribute: checked, selected by default
Hobbies:<input type="checkbox" checked>Knock code
<input type="checkbox">Play games
<input type="checkbox">sleep late<br><br>
[the external chain image transfer fails. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-xboqnld5-1646570448625) (C: \ users \ Qinghuan \ appdata \ roaming \ typora user images \ image-20220305154835332. PNG)]
5: File selection file
Common attributes:
Multiple: multiple file selection
<input type="file" multiple><br><br>
[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-fvh0vpip-1646570448625) (C: \ users \ Qinghuan \ appdata \ roaming \ typora user images \ image-20220305160956631. PNG)]
6: Push button
Submit: click the submit button to submit data to the backend server
Reset: click the reset button to restore the default value of the form
Button: normal button. It has no function by default. It can be added with js
<input type="submit"> <input type="reset"> <input type="button" value="Normal button">
[external link image transfer fails, and the source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-z8yfqvn7-1646570448626) (C: \ users \ Qinghuan \ appdata \ roaming \ typora \ typora user images \ image-202203051618476. PNG)]
Note:
-
If the above button functions need to be realized, they need to be used together with the form label
-
The use method of form is to wrap the single label together with the form label
summary
-
Placeholder: placeholder
-
If you need to achieve the effect of single selection, you need to set the same name attribute value
-
The default selection of radio and multiple boxes is checked
-
7: Button label button
Scenario: display the button clicked by the user in the web page
Tag name: button
type attribute value:
Submit: submit
Reset: reset
Button: button, used with js
Note:
- button label is a double label, which is more convenient to wrap other contents, such as text, pictures, etc.
8: Drop down menu select
Scenario: a drop-down menu form control that provides multiple choices in a web page
Label composition:
select tag: the whole of the drop-down menu
option tab: each item in the drop-down menu
Common attributes:
selected: the default selection of the drop-down menu
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> City:<select> <option >Shanghai</option> <option >Guangzhou</option> <option >Shenzhen</option> <option selected>Beijing</option> </select> </body> </html>
[the external chain image transfer fails, and the source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-naakqnuk-1646570448627) (C: \ users \ Qinghuan \ appdata \ roaming \ typora user images \ image-20220305171740857. PNG)]
9: Text field label textarea
Scenario: provide a form control that can input multiple lines of text in a web page
Tag name: textarea
Common attributes:
cols: Specifies the visible width within the text field
rows: Specifies the number of visible lines in the text field
Note:
- The lower right corner can be dragged to change the size
- CSS settings are recommended for style effects in actual development
10: Label label
Scenario: common in the relationship between bound content and form label
label name: label
usage method:
I:
1: Use label tags to wrap content such as text
2: Add the id attribute to the form label
3: Set the corresponding id attribute in the for attribute of the label label
Hobbies: <input type="checkbox" id="one"> <label for="one">Knock code</label> <input type="checkbox" id="tow"> <label for="tow">Stay up late</label>
II:
1: Directly wrap the content such as text and form labels with label labels
2: You need to delete the for attribute of the label label
Hobbies:
<label>
<input type="checkbox">sleep
</label>
<label >
<input type="checkbox">Dry rice
</label>
summary
[the external chain image transfer fails. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-awdg9q1h-1646570448627) (C: \ users \ Qinghuan \ appdata \ roaming \ typora user images \ image-20220306143718136. PNG)]
2: button label
3: select tag
4: textarea text field label
5: Label label
5: Semantic label
1: There are no semantic layout tags, div tags and span tags
Scenario: the actual development of web pages will frequently use div and span, two layout tags without semantics
div tag: only one is displayed in a row
span label: multiple labels can be displayed in a row
<div>I am a div label</div> <div>I am a div label</div> <div>I am a div label</div> <span>I am a span</span> <span>I am a span</span> <span>I am a span</span>
[the external chain image transfer fails, and the source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-r7okwngn-1646570448628) (C: \ users \ Qinghuan \ appdata \ roaming \ typora \ typora user images \ image-20220306144518802. PNG)]
2: Layout tags without semantics
Scenario html5
label:
Header: page header
nav: Web Navigation
footer: bottom of page
aside: Web sidebar
section: Web page block
Article: web article
Note: the above tags have the same display characteristics as div, but have different semantics than Div
6: Character entity
1: Space merging in HTML
Scenario: if multiple spaces appear side by side in html code, line feed and indent, only one space will be parsed in the browser
<p>Don't get so close to me
OK</p>
[the external chain image transfer fails. The source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-kk3xhxfc-1646570448629) (C: \ users \ Qinghuan \ appdata \ roaming \ typora \ typora user images \ image-20220306150400579. PNG)]
2: Common character entities
Scenario: to display special symbol effects in web pages, character entities need to be used instead
Structure: & English;
Common character entities:
Spaces: & nbsp;
Less than sign: & lt;
Greater than sign: & gt;
Special scene
p The label looks like this:<p></p>
Comprehensive case
1: Excellent student information form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="400" height="400">
<!-- Bureau title-->
<caption><h3>Excellent student information form</h3></caption>
<!-- head-->
<thead>
<tr>
<th>Age</th>
<th>full name</th>
<th>Student number</th>
<th>class</th>
</tr>
</thead>
<!-- body-->
<tbody>
<tr>
<td rowspan="2">third year in high school</td>
<td>Zhang San</td>
<td>10</td>
<td>Class two of three years</td>
</tr>
<tr>
<td>Zhao Si</td>
<td>12</td>
<td>Three years and three classes</td>
</tr>
</tbody>
<!-- tail-->
<tfoot>
<tr>
<td>comment</td>
<td colspan="4">You are all excellent</td>
</tr>
</tfoot>
</table>
</body>
</html>
effect:
[the external chain image transfer fails, and the source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-i8ttfdhm-1646570448629) (C: \ users \ Qinghuan \ appdata \ roaming \ typora user images \ image-20220306154212128. PNG)]
2: Member registration form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Youth doesn't often exist. Hurry up and fall in love</h1>
<form action="">
Nickname?<input type="text" placeholder="Please enter a nickname"><br><br>
Gender:<input type="radio" name="gender" checked>male
<input type="radio" name="gender">female
<br><br>
birthday:<input type="date"> <br><br>
city:<select name="" id="">
<option value="">Beijing</option>
<option value="">Shanghai</option>
<option value="">Tianjin</option>
<option value="">Chongqing</option>
</select><br><br>
marital status:<input type="radio" checked>unmarried
<input type="radio" name="marry">married
<input type="radio" name="marry">secrecy
<br><br>
hobby:<input type="checkbox" checked>Dry rice
<input type="checkbox" checked>Bodybuilding
<input type="checkbox" >read
<br><br>
Personal introduction: <br><br>
<textarea name="" id="" cols="50" rows="12"></textarea>
<h2>I promise</h2>
<ul>
<li>Over 18 years old, single</li>
<li>Take a serious attitude</li>
<li>Sincerely looking for the other half</li>
</ul>
<br>
<input type="checkbox">I agree to all the terms
<br><br>
<input type="submit" value="Free ancestral album">
<input type="reset">
</form>
</body>
</html>
effect:
[the external chain image transfer fails, and the source station may have anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-ha2nafy1-1646570448630) (C: \ users \ Qinghuan \ appdata \ roaming \ typora user images \ image-20220306161409761. PNG)]