A, labels,

1. Basic labels

H Title label: Level 1:<h1>Level 1 label</h1>Level 2:<h2>The secondary label</h2>P Paragraph tag:<p>Paragraph 1</p>Hr horizontal line label:<hr>Br Newline tag:<br>
Copy the code

The effect

Level 1 label

The secondary label

Paragraph 1


2. Font style tags

Strong bold:<strong>Bold font</strong>Em in italics:<em>italics</em>Sup superscript:<sup>Superscript font</sup>Sub indices:<sub>The subscript font</sub>Del deletes:<del>delete</del>Ins insert:<ins>insert</ins>
Copy the code

The effect

Bold italic superscript font subscript font Delete Insert

3. Link labels

<a href="url" target="_blank">The link text</a>Href, target, open your own page, open a new tag, open a link. Can the text be an image or an HTML elementCopy the code

The effect

Click me to jump to Baidu

4. The anchor tag

Anchor tag<a id="top">At the top of the</a>
<a id="down">At the bottom of the</a>Jump to tag<a href="#top">Back to the top</a>
<a href="Link tag.html# down">jump</a>
Copy the code

Effect:

Go back to the top of the page to a specific location on the page

5. Image labels

<img src="E:/HTML/resources/image/1.jpg" alt="Ghost Wallpaper" title="Hover text">
<img src=".. /resources/image/1.jpg" alt="Ghost Wallpaper" title="Hover text">SRC: picture address Absolute address relative address.. Alt: image name title: Hover textCopy the code

The effect

6. Video and audio labels

<video src="" controls autoplay></video>
<audio src="" controls autoplay></audio>SRC: address controls: autoplay: autoplayCopy the code

Second, the form

Table: table border: border row: tr TH: table header column: TD COLSPAN: cross column RowSPAN<table border="1px" >
    <tr>
        <th colspan="3" >Across the column</th>
    </tr>
    <tr>
        <td rowspan="2" >An inter-bank</td>
        <td>1-1</td>
        <td>1 to 2</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
</table>
Copy the code

The effect

Across the column
An inter-bank 1-1 1 to 2
2-1 2-2

List three,

Ordered list: OL Li: list item Unordered list: UL Li: list item User-defined list: DL DT: list name dd: list contentCopy the code

The effect

  1. Java
  2. Python
  3. The front end
  • Java
  • Python
  • The front end
A list of names
List Contents 1
Listing 2
A list of names
List Contents 1
Listing 2

Four, forms,

Form action: position of submission of the form Method: submission method get: information about submission can be seen in the URL Post: Can transfer a large file input box input type: text/password the password input type text/radio radio multi-select checkbox/drop-down select button/image/submit/reset value: Default value maxLength: the longest character size: the text box length Readonly: read-only disabled: hidden: hidden placeholder: prompt required: not empty Determine pattern: Regular expression https://www.jb51.net/tools/regexsc.htmCopy the code

Example 1

<form action="First%20webpage.html" method="get">
    <! Input type="text"-->
    <p>Name:<input type="text" name="username" value="Please enter user name" maxlength="5" size="15" required></p>

    <! Input type="password"-->
    <p>Password:<input type="password" name="password"  placeholder="Please enter your password" pattern="(? = ^. ({8} $)? =.*\d)(? =.*\W+)(? =.*[A-Z])(? =.*[a-z])(? ! .*\n).*$"></p>

    <! Input type="radio" value: indicates the value name: indicates the group -->
    <p>Gender:<input type="radio" value="boy" name="sex" checked>male<input type="radio" value="girl" name="sex">female</p>

    <! Input type="checkbox" -->
    <p>Hobbies:<input type="checkbox" value="sleep" name="hobby" checked>Go to bed<input type="checkbox" value="game" name="hobby">The game<input type="checkbox" value="chat" name="hobby">chat</p>

    <! Submit button input type="button" submit button input type="button"
    <p>Button:<input type="button" name="btn1" value="Click submit">
        <input type="image" src=".. /resources/image/1.jpg" width="100px">
    </p>
    <! Select -->
    <p>The drop-down box:<select name="List name" id="">
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </p>
</form>
Copy the code

Example 2

<! -- Text field textarea-->
<p>Other:<textarea name="textarea" id="" cols="30" rows="10">Please enter the content</textarea>
</p>
<! Input type="file" name="files"-->
<p>Uploading files:<input type="file" name="files">
    <input type="button" name="upload" value="Upload">
</p>
<! -- Email validation -->
<p>Email address:<input type="email" name="email">
</p>
<! --URL-->
<p>URL:<input type="URL" name="URL">
</p>
<! -- Figure: -->
<p>The Numbers:<input type="number" name="num" max="100" min="0" step="10">
</p>
<! - the slider - >
<p>The slider:<input type="range" name="range" max="100"min="0" step="1">
</p>
<! -- Search box -->
<p>Search:<input type="search" name="search">
</p>
<! -- Enhance mouse usability
<p>
    <label for="mark">Click on the</label>
    <input type="text" id="mark">
</p>
<! - a regular expression pattern -- -- > https://www.jb51.net/tools/regexsc.htm
<p>Custom mailbox:<input type="text" name="mail"pattern="/ ^ ([a - z0-9 _ \. -] +) @ ([\ \. Da - z -] +) \. ([a-z \.] {2, 6}) $/ / ^] [a-z \ d + (. \ [a-z \] d +) * @ ([\ da z] (- [\ da - z])?) + (\. {1, 2} [a-z] +) + $/ or \ w + / - +. (\ w +) * @ \ w + ([-] \ w +) * \ \ w + ([-] \ w +) *">
</p>
Copy the code

Five, the framework

Iframe: inline frame SRC: address frameborder: whether to display a border

<iframe src="https://wwww.baidu.com/" frameborder="0" ></iframe>Display target link page:<iframe src="" name="name" frameborder="0" width="100px" height="100px" </iframe>
<a href="First%20webpage.html" target="name">Click the jump</a>
Copy the code