There are some tags in HTML, seemingly simple, but actually there are a lot of details need to pay attention to in the usage, such as A, IMG, table and so on. This article makes a brief comb on the usage of these tags.

First, a label

The A tag can create hyperlinks to other web pages, files, locations within the same page, E-mail addresses, or any other URL. In short, it is used to jump to the page.

It has some very important properties.

The href attribute

Href is the most important attribute of the A tag. It is used to specify the link or target to jump to

• It could be an address
  • baidu.com
  • baidu.com
  • //baidu.com (this is no protocol, it will inherit the current page protocol)
• It could be a path
  • Absolute path, such as/a/b/c.html
  • Relative path, asd.html,./d.html
• Pseudo agreement
  • javascript:code;(Click to execute:The following code)
  • javascript:;(Click and do not do any action, used to achieve similar weird demand)
  • mailto:[email protected](Send mail to this address)
  • tel:13612345678(When accessed on a mobile phone, you can dial the number directly)
• The ID of an element
  • Written as#xxx, it will jump to the location of the element with the ID in the page
• A null value
  • Clicking will refresh the current page, not without action

Target attribute

The target attribute has some specific values, which have the following meanings

value	meaning
_self	Default value to open the page in the current window
_blank	Open the page in a new window or TAB
_parent	Opens a page in a parent window, usually relative to<iframe>From the window
_top	The window opens at the top level, regardless of how many layers are nested<iframe>
Other window or iframe name values	Open in the appropriate window

The download properties

Download is a Boolean property that downloads the target page, but not all browsers support it, especially mobile browsers.

Img tag

The img tag makes a get request to display an image. It has attributes like Alt, SRC, height, width, and so on.

• The Alt attribute is used to display alternative text when the image fails to load. It is usually written to describe the image so that readers can understand the content
• SRC is the address of the image resource
• Width and height are used to set the width and height of the image. You only need to specify one of the values, and the other value is automatically adapted to the ratio of the original visual width and height of the image

Most of the time we want the image to fit the width of the phone without dragging it back and forth, which means we want the image to be responsive, just use CSS to set the image style to max-width: 100%.

In addition, there are two other important events associated with the IMG tag, the onLoad event and the onError event, which indicate the image loading success and loading failure.

Table tag

The table tag is used to create a table. Its usage is very complicated, and there are many child tags associated with it

Table label	Primary sublabel	Secondary sublabel	Tertiary sublabel
table	thead	tr	Th (table header data), TD (common data)
	tbody	tr	Th, td
	tfoot	tr	Th, td

Here is an example to illustrate its use

<table>
    <thead>
      <tr>
        <th></th>
        <th>Xiao Ming</th>
        <th>xiaohua</th>
        <th>Small fang</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Chinese language and literature</th>
        <td>85</td>
        <td>93</td>
        <td>77</td>
      </tr>
      <tr>
        <th>mathematics</th>
        <td>95</td>
        <td>90</td>
        <td>88</td>
      </tr>
      <tr>
        <th>English</th>
        <td>95</td>
        <td>93</td>
        <td>97</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Total score</th>
        <td>275</td>
        <td>276</td>
        <td>262</td>
      </tr>
    </tfoot>
  </table>
Copy the code

The effect is as follows:

Enclose each data with CSS:Finding gaps between each cell, change the CSS of the table tag

table{
  border-collapse: collapse;
  border-spacing: 0;
}
Copy the code

Results: