First, a label

Properties:

1. href(Short for Hyper Reference hyperlink)

The url

<a href="https://google.com">Google</a> <! -- Plain link HTTPS protocol -->
<a href="http://google.com">Google</a> <! -- Plain link HTTP protocol -->
<a href="google.com">Google</a> <! -- No agreement -->'(recommended writing method, into the browser auto-complete)Copy the code

The path

<a href="/a/b/c/.html" target="_blank">Link to c under directory B under directory A under directory A under the root of this project. HTML</a><! The first/of the http-enabled link represents the root of the entire project file, not the server root.
<a href="index.html" target="_blank">Link to index.html in the same directory as this page</a>
Copy the code

Pseudo agreement

<a href="javascript:alert("hello world!" );" >JavaScript pseudo agreement</a>  <! Click to execute the JS code. Here:; Cannot save -- -- >
<a href="javascript:;">To view</a>  <! -- Do nothing -->
Copy the code

id

<a href="#bottom">Click where I scroll to the element with id bottom</a>
Copy the code

mail

<a href="mailto:[email protected]">Click on me to email</a> <! -- Click the program that will open the email and fill in the email address -->
Copy the code

The phone

<a href="tel:18888888888">I'll call 18888888888</a>  <! -- Open the phone terminal directly open the call interface and automatically fill in the phone number -->
Copy the code

2.target

<a href="//google.com" target="_blank">Google</a>  <! Open a new blank page ->Copy the code
<a href="//google.com" target="_self">Google</a>  <! -- Open _self as default --> 
Copy the code
<a href="//google.com" target="_top">Google</a>  <! --> < span style = "max-width: 100%; clear: both;  
Copy the code
<a href="//google.com" target="_parent">Google</a>  <! Select * from parent page where iframe is used ->Copy the code
<a href="//google.com" target="Name value of iframe">Google</a>  <! Open this link in the specified iframe window ->Copy the code
<a href="//google.com" target="xxx">Google</a>  <! -- Open Baidu in a new page with the window.name attribute as XXX. If there is XXX, open it in XXX.Copy the code

Table label

  • Table Common attributes of table labels are as follows:

    • The default two-line border is px, usually 1px
    • Width Indicates the width of the table, in units of px
    • Height Indicates the height of the table in px
    • Align The alignment of the table in the browser
    • Cellspacing The spacing unit px between cells

  • Thead header

  • The tbody form body

  • The common attributes of tr table rows are as follows

    • Height height
    • Align sets the horizontal alignment of text for each cell in the current line
    • Valign sets the vertical alignment of text for each cell in the current line

  • Th column or row header

  • The common attributes of TD column data are as follows

    • width
    • height
    • Align Sets the horizontal alignment of text in the cell left left center right right
    • Valign sets the vertical alignment of text in a cell: top, center, middle, bottom, bottom
    • Note: Setting the width of the current cell affects the entire column, and setting the height of the current cell affects the entire row

  • Tfoot footer

Table structures can only have thead, tBody (you must have tbody or the browser will fill it up for you), and tfoot in the middle. Nothing else is allowed, and td cells can be placed anywhere

Example:

    <table width="500" height="400" align="center" border="1">
      <tbody>
        <tr height="100">
          <td><b>The class</b></td>
          <td><b>The name</b></td>
          <td>results</td>
          <td>ranking</td>
        </tr>
        <tr>
          <td>181</td>
          <td width="200" height="100">xiaohua</td>
          <td>255</td>
          <td>1</td>
        </tr>
        <tr>
          <td>181</td>
          <td>kuo</td>
          <td>250</td>
          <td>2</td>
        </tr>
        <tr>
          <td>182</td>
          <td>A small party</td>
          <td>249</td>
          <td>3</td>
        </tr>
        <tr>
          <td>182</td>
          <td>Xiao zhang,</td>
          <td>230</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
Copy the code
  • Common CSS properties
  1. table-layout
table-layout: auto; /* Most browsers use automatic table layout algorithms for table layout. The width of tables and cells depends on what they contain. * /
Copy the code
table-layout: fixed; /* Table and column widths are set by the width of the table. The width of a column is determined only by the first row of the column. In the current column, the row following the row of the cell does not affect the entire column width. * /
Copy the code
  1. border-collapse
border-collapse:collapse; /* Table border merge is not set */ by default
Copy the code
  1. border-spacing
border-spacing:0;  /* The spacing between table cells is usually set to 0 */
Copy the code

Img image tag

role: Issue a get request to display an image

attribute:

  1. Alt description of failed image loading
  2. Height The height, width and height of the image is set to only one value and the other value will be proportional to the zoom setting is likely to distort
  3. Width Indicates the width of the image
  4. SRC The path to the image can also be a link to the image

Two important events:

  1. Onload is triggered when the image is successfully loaded
  2. Onerror is raised when an image fails to load

Reactive CSS styles:

max-width:100%;   /* All screens are available */
Copy the code

4. Form label

Function:

  • Make a GET or POST request and refresh the page

Properties:

  • Action Specifies the address from which the request is sent
  • Method Method of sending a request Get POST
  • Autocomplete on off prompts for input based on the name value of the input field in the form
  • The target tag is the same as the A tag to indicate the page location to jump to

Important Events:

  • Onsubmit: Triggered when the form button is submitted

The difference between a button and an input button

<button type="submit"><span>send</span></button>  <! A form must have a button whose type is submit -->
Copy the code
<input type="submit">  <! -- Input button -->
Copy the code
  • Buttons can be nested with other tags, but input cannot

5. Input tag

Function:

  • Let the user enter content

Properties:

1. Type Indicates the class attribute value
  • buttonbutton
  • checkbox Multiple checkboxes multiple checkboxes in a group need the same name value
  • radioCheck boxes in a check box group need the same name value
  • submitButton that triggers the submit event function
  • fileMultiple allows multiple files to be uploaded
  • numberEnter the Numbers
  • passwordThe entered password is not visible
  • textThe input text
  • telEnter the phone
  • emaliEnter your email
  • hiddenInvisible input fields are generally used when JS submits data that does not require user input
  • searchA single-line text area used to search for strings
  • colorChoose a color
2. Other attributes
  • nameAll inputs in a form form must have this attribute to facilitate data transfer
  • autofocusAutomatic focusing
  • checkedBy default, it is used for drop – down boxes or radio and multiple selections
  • disabledDo not click
  • placeholderA placeholder
  • value 值
  • patternSpecifies the mode to use to validate input fields. Regular expressions and so on
  • maxlengthSpecifies the maximum length of an input field, in characters.
  • required HTML5If the built-in validator does not input content, it will prompt you to input content before submitting
3. Important events
  • onchangeTriggered when the input capacity changes
  • onfocusFocus time trigger
  • onblurTriggered when you lose focus

Textarea text field tag

  • By default, the user can zoom in and out. The resize property in the CSS can be set to an unscalable property. Cols Number of columns Rows Number of rows
 <textarea style="resize: none;" name="" id="" cols="30" rows="10"></textarea>
Copy the code

Select the option TAB

        <select name="sport" id="sport">
            <optgroup label="First term">    <! -- Option group -->
                <option value="Basketball">basketball</option>  <! - options - >
            </optgroup>
            <optgroup label="Item two">
                <option value="Football">football</option>
            </optgroup>
            <optgroup label="Item Three">
                <option value="Volleyball">volleyball</option>
            </optgroup>
        </select>
Copy the code