web Front End Learning Notes 02-HTML Overview and Basic Knowledge 2

Continue with the previous article web Front End Learning Notes 01-HTML Overview and Basic Knowledge 1

5. Common HTML Tags

2. Common line-level labels (in-line elements, not exclusive lines)
2.1 Semantic row-level labels (with default styles)

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]

Keyword Interpretation
src Picture address (network or local resource)
alt Substitute text for picture loading failure (must exist)
title Tips for hovering over pictures
width Picture width (normally set width only, height will automatically scale to original scale)
height Picture Height

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 Labels

2.2-1 <span></span>Semantic-free row-level tags often work with CSS to set parts of the text

3. Common Entity Characters
Show results Keyword Interpretation
&nbsp; Spaces
> &gt; Greater than sign
< &lt; Less than sign
& &amp; And sign
" &quot; Double Quotes
' &apos; Single quotation mark
&cent; Decicent
£ &pound; Pound pound
¥ &yen; element
&euro; euro Euro
§ &sect; Subsection
© &copy; copyright
® &reg; Registered trademark
&trade; trademark
× &times; Multiplication sign
÷ &divide; Division sign

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.

4.2 Drop-down Option Box Label <select><option></option></select>

Drop-down option boxes must be used with options

4.3 Text field labels <textarea></textarea>are generally used for entering long paragraph text

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:&gt;  Less than:&lt;   Copyright:&copy;  Spaces&nbsp-->
    1&gt;2 <br>
    1&lt;2 <br>
    &copy;
<!--------------------------------------------------->
    <!--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>

Tags: Attribute less network

Posted on Thu, 11 Jun 2020 12:35:49 -0400 by jayR