How to use important and difficult tags in html

The reason for writing this article is that I have been learning front-end knowledge recently, so I have specially sorted out the usage of some key tags to facilitate future review.

1. Usage of a tag

Create a hyperlink to other web pages, files, locations within the same page, email addresses or any other URL. The a tag is a very commonly used tag, but I believe many of its uses are not well understood.

Attribute:

The value of href of a:

can be the URL (preferably written in the form of //google.com) path (/a/b/c, index.html) pseudo-protocol (js code, email, mobile phone number) ID is often used to jump to a certain part of the page

a's target value:

1. Built-in name:

_blank (open a new page) _top (open the top page, need to be used with iframe) _parent (open the page on the upper level) _self (the current page is loaded, this value is the default)

2. The programmer names it himself:

The name of the window (you can specify a name for the window to open it in the specified window) the name of the iframe to open the download of a in the specified iframe

The function is to download the page, which is not commonly used.

2. Usage of img tag

Function: Send a get request and display a picture

Attributes:

alt: Defines the alternate text of the image Description height: the height of the image width: the width of the image src: the URL of the image, this attribute is required for the a1f02c36ba31691bcfe87b2722de723b element.

Responsive writing:

For example, max-width: 100%

Replaceable element:

is a replaceable element. The default value of its display property is inline, but its default resolution is determined by the original width and height of the embedded image, making it behave like an inline-block. You can set the CSS properties of border/border-radius, padding/margin, width, height, etc. for . There is no baseline, which means that when using vertical-align: baseline in an inline formatting context, the bottom of the image will be aligned with the container's text baseline.

3. Usage of table tag

Represents tabular data—that is, information represented by a two-dimensional data table. This is relatively simple

(Learning video sharing: html video tutorial)

The following is the sample code

  <caption>Color names and values</caption>
  <tbody>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsla(180, 90%, 64%, 1)</code></td>
      <td><code>rgba(81, 246, 246, 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsla(38, 90%, 65%, 1)</code></td>
      <td><code>rgba(246, 188, 87, 1)</code></td>
    </tr>
  </tbody>
</table>

Attributes:

align : This enumeration property specifies how tables contained in the document must be aligned. There are the following values: left, the table will be displayed on the left side of the document; center, the table will be displayed in the center of the document; right, the table will be displayed on the right side of the document

border: defines the size of the table border. If set to 0, this means that the frame attribute is set to empty. If set to 1, the table has a 1px border.

**cellpadding:**This attribute defines the space between the content and the border of the table cell.

**cellspacing:**This property (in percentage or pixels) defines the size of the space between two cells

**width:**This property defines the width of the table . The width may be a pixel or a percentage value, and the percentage value of the width will be defined as the width of the table container.

border-collapse: collapse merge borders

border-spacing: 0; The border spacing is set to 0

table { table-layout: auto; border-collapse: collapse; border-spacing: 0; }

4. Other thoughts

These are not difficult, but you have to remember a lot of things and need to be more careful. Keep working hard! ! !

——————Part of the text information comes from MDN and Hungry Man Valley

Related recommendations: html tutorial

The above is the detailed content of How to use important and difficult tags in html. For more information, please follow other related articles on the PHP Chinese website!