2.1-1 Link a Label <a href="Link Address">Link Text </a>You can jump pages or local files
[Note] Path problems when accessing local files (relative paths are recommended for development)
Relative path:. /Current directory.../Superior directory
Absolute path: C:\Program Files...
[a Label Properties]
Keyword Interpretation href Link Address, Required Properties target Jump mode, default current window open, _Blank (new window opens)2.1-2 Image Label <img src=">
[img tag properties]
2.1-3 Text Labels
Label Interpretation <b></b> Bold <strong></strong> Bold (emphasizing, mostly for site optimization) <i></i> Italic <em></em> Italic (emphasized, used for site optimization) 2.2 Semantic Row-Level Labels2.2-1 <span></span>Semantic-free row-level tags often work with CSS to set parts of the text
4. Form Label <form></form>
[Form Label <form>Common Properties]
Keyword Interpretation action Data Submission Address (required) method Data submission, usually post (required)Value get (default) (parameter is passed by url, parameter is visible, unsafe, parameter size is limited, size varies depending on browser)
Value post (parameter is passed through requst body, parameter is not visible, parameter size is unlimited) enctype This property is required when a file is uploaded in a form and the value "multipart/form-data" is used for file transcoding Controls in form: [ <input> , <select><option></option></select> ,<textarea></textarea>]
4.1 Enter label <input>single label
(Common input Properties)
Keyword Interpretation type Define different types of form controls (password boxes, radio boxes, etc.) (must have) name The name of the form item as the key to the data (must have) value Value entered disabled Disable Properties readonly read-only checked Selection box specifies the default selection placeholder Tips(Common values for the above type attribute:)
Attribute Value Interpretation Attribute Value Interpretation text Plain text input box password Password Input Box radio radio button checked Checkboxes submit Submit Button value Settings Button Displays Content file File Upload Checkbox reset Reset Button value Settings Button Display Content hidden Hide domains, no information needed to be viewed and filled in by users[Note] The name attribute value must be the same in a set of single/multiple check boxes. Setting the value value for single/multiple check boxes makes it easy to submit data
[Note] Hidden fields are generally used to collect and send information so that programs can process form information.When a user submits form information, the information in the hidden domain is also submitted.Simply understood as extracting information that cannot be displayed in the form.
Drop-down option boxes must be used with options
Code Samples
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Common HTML Row-level labels/Entity Characters/form</title> </head> <body> <!--Link Label--> <a href="http://www.baidu.com">Open Baidu on the current page</a> <a href="http://www.baidu.com" target="_blank">Open Baidu in a new page</a> <!--Relative Path to Path Problem./current directory ../Superior directory Absolute path E:\yyrdata\html\HTMLLearing --> <a href="./BlockTag.html">Jump to Local File 2</a> <!--Image label sheet label does not need to be closed--> <img src="http://pic132.nipic.com/file/20170609/24964229_151939693036_2.jpg" width="120px" alt="Picture loading failed" title="*Cartoon*Pig"> <img src="./image/01.jpg" width="100px" alt="Picture loading failed"> <!--Text Label--> <!--Bold b strong(Has Emphasis),Italic i em(Has Emphasis)--> <br> <b>When the wind of memory blows, endless waves ripple out, and thoughts are quiet and silent.</b><br> <i>Let the flowers of thoughts slightly fragrant at the fingertips, the heart, quiet and soft beyond description</i><br> <strong>A soul in gentle and gentle, tells deep and shallow beauty.</strong><br> <em>When the wind of memory blows, endless waves ripple out, and thoughts are quiet and silent.</em><br> <br> <!--span Semantic-free row-level labels often work together CSS To set parts of the text--> When<span style="color:red">memory</span>When the wind blows, endless waves ripple out, and thoughts are quiet and silent. <br> <!--Entity Characters--> 1>2 <br> <!--Greater than:> Less than:< Copyright:© Spaces --> 1>2 <br> 1<2 <br> © <!---------------------------------------------------> <!--form--> <br><br> <hr> form <br><br> <form action="" method="post" enctype="multipart/form-data"> <!--Form control: must have name Attributes as keys to data--> <!--Plain text input box--> <!--Read-only: readonly--> User name:<input type="text" name="username" readonly><br> <!--Password Input Box--> <!--Tips: placeolder--> Password:<input type="password" name="password" placeholder="Please enter an 8-digit password"><br> <!--single/Multiple check boxes A set of single/Checkbox name Property values must be set the same value Value facilitates data submission--> Gender:<input type="radio" name="sex" value="1" checked>male <input type="radio" name="sex" value="0">female <br> Hobbies:<br> <input type="checkbox" name="like[]" value="l">Basketball <br> <input type="checkbox" name="like[]" value="z">Football <br> <input type="checkbox" name="like[]" value="p">Volleyball <br> <input type="checkbox" name="like[]" value="g">Rugby <br> <!--Drop-down box--> <br> <select name="xueli" id=""> <option value="0">Primary school</option> <option value="0">Initial Study</option> <option value="0">Higher Education</option> <option value="0">Undergraduate</option> <option value="0">Graduate student</option> </select> <br> <!--File Upload--> Please select a file:<input type="file" name="file"> <br> <!--Text Fields--> Please enter a personal profile:<br> <textarea name="selftext" id="" cols="30" rows="10">300 Within Word</textarea> <!--Button--> <!--Submit button value Set what the button displays--> <input type="submit" value="Preservation"> <!--Seems to work button control--> <button>Submit</button> <!--Reset--> <!--Disable properties: disabled--> <input type="reset" value="Reset" disabled> <br> </form> </body> </html>