This article describes the use of common tags in HTML. These include the A tag, IMG tag, table tag, and FROM tag

First, the use of a label

1. The attribute

  • Href: the URL of the page to which the link is directed. It can be used to jump to an email or phone

<a href="https//goole.com">

  • Target: Jumps to the internal anchor point and opens the hyperlink in the specified window.

< a href = "https//goole.com" target = "_blank" > link < / a >

2. The role

1. Href value of a

  • Web site:
 <a href="https//goole.com"></a>
 <a href="http//goole.com"></a>
 <a href="//goole.com"></a>

Copy the code
  • The path
<! The absolute path is the path to the file on the hard disk --> <a href="/a/b/c.html"></a> <! The relative path is the path relative to the current file. --> <a href="c.html"</a> </a>Copy the code
  • Pseudo protocol:
<! -- alert(1) -->
<a href="javascript:alert(1)">Javascript pseudo agreement</a>

<! -- Click on the TAB that will not jump to the page -->
<a href="javascript:;">To view</a>

<! -- the IP address will be followed by #XXX, and will jump to the specified tag -->
<a href="#xxx;">Look at XXX</a>
<p></p>
<p id="xxx"></p>
<p></p>

<! -- Send email: mailto -->
<a href="mailto:[email protected]">Email poly</a>

<! -- Phone number -->
<a href="tel:17722545501">Call Poly</a>
Copy the code

2. The value of a’s target

<! -- Target ="_blank" -->
 <a href="http://baidu.com" target="_blank">baidu</a>
 
<! --target="_self" -->
<a href="http://baidu.com" target="_self">baidu</a>

<! --target="_top" -->
<a href="http://baidu.com" target="_top">baidu</a>

<! --target="_parent" opens in the parent window. -->
<a href="http://baidu.com" target="_parent">baidu</a>
Copy the code

3. Iframe tag embedded window (not recommended)

   <iframe style="border: none; width: 100%; height: 800px;" src=""></iframe>
Copy the code

2, table tag usage

1. Relevant labels

<table>
     <thead>/ / to the head<tr>/ / line<th>English</th>/ / headers<th>translation</th>
         </tr>
     </thead>
     <tbody>/ / body<tr>
             <td>hypper</td>// Data/content<td>super</td>
         </tr>
         <tr>
             <td>target</td> 
             <td>The target</td>
         </tr>

     </tbody>
     <tfoot>/ / the tail<tr>
             <td>empty</td>
         </tr>
     </tfoot>
 </table>
Copy the code

2. Related styles

Table-layout: the CSS property defines the algorithm used to layout the cells, rows, and columns of a table.

table-layout: <! --auto; The width of tables and cells depends on what they contain. -- > <! <style> table {table-layout: auto/fixed; } </style>Copy the code

Border-collapse: The property is used to determine whether the borders of the table are split or merged.

Border-spacing: Property specifies the spacing between adjacent cell borders

       table {
          width: 600px;
           table-layout: auto;
           border-collapse: collapse;
           border-spacing: 0;
       }
Copy the code

3. Img tag

The get function makes a get request to display an image

  • attribute

Alt Indicates the message displayed after the image fails to load

Width Specifies the width of the image. The height is adaptive

Height Specifies the height of the image. The width is adaptive

<img width="400" src="3.jpg" alt="A dog.">
Copy the code
  • The event
<! --onload/onerror<body>
  <img src="3.jpg" alt="lisa" id="xxx">
</body>
<script>
  xxx.onload = function () {
      console.log('Image loaded successfully');

  }
  xxx.nerror = function () {
      console.log('Image load failed');
      xxx.src = '2.png';
}
</script>

</html>
Copy the code
  • responsive
<! --max-width: 100%; < span style> * {margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; } </style>Copy the code

4, from tag

  • role
  • Make a GET or POST request and refresh the page

Action requests the page to the path

Method controls get or POST request pages

<body>
    <form action="/yyy">
         <form action="/yyy" method="POST">
        <input type="submit"></form>
</body>
Copy the code

Autocomplete =”on” The browser can automatically complete based on the values the user previously entered in the form. Target =”_balck” is used to indicate where to display the received response after submitting the form.

    <form action="/yyy" method="POST" autocomplete="on" target="_balck">
        <input name="username" type="text">
        <input type="submit"></form>
Copy the code
  <input type="submit" value="Submit">
 <button type="submit"> < strong > submit < / strong > < / butto >Copy the code