HTML Commonly Used Tags1. href $\color{green}{A}$ : Because

The Usage of 'a' Tag

1. href

(1) Linking to relative URLs

<a href= "//google.com">Go To Google</a>

$\color{red}{Q}$ : Why use '//google.com' as a lnk instead of 'www.google.com' and 'www.google.com'?
$\color{green}{A}$ : Because '//' can automatically recognize the proticol no matter when the website using the 'https' or 'http' protocol.

(2) Jump to one point of the same html page

  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p id="xxx">6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <a href= "#xxx">Go To 6</a>

You can locate one point in the same html page by using a id tag in the href.

(3) Linking to email or telephone

<a href="mailto:librayuyue@163.com">Send Email to Me</a>
<a href="tel:2032123212" target="_self">Send Message to Me</a>

2. target

(1) "_self" is a default value of target, it will open the new page based on current page.
(2) "_blank" usually a ne tab
(3) "_parent" the parent browsing context of the current one. If no parent, behaves as _self.
(4) "_top" the topmost browsing context(the "highest" context that's an ancestor of the current one.) if no ancestors, behaves as _self.

3. download

MDN Quote: "Prompts the user to save the linekd URL instead of nabigating to it. Can be used with or without a value."

4. rel = noopener

Not important

The Usage of 'img' Tag

  <img id=xxx src="dog.png" alt="one dog">

(1) The 'src' attribute is required. It contains the path to the image you want to embed.
(2) 'alt' attribute holds a text description of the image. When the image failed to load, the alt text will be displayed.
(3) 'max-width: 100%;' it sets the maxium width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.

The Usage of 'table' Tag

<table>
    <thead>
      <tr>
        <th>English</th>
        <th>Translate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Hyper</td>
        <td>超级</td>
      </tr>
      <tr>
        <td>Target</td>
        <td>目标</td>
      </tr>
      <tr>
        <td>Reference</td>
        <td>引用 </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>空</td>
        <td>空</td>
      </tr>
    </tfoot>
  </table>

'table' contains 'thead', 'tbody' and 'tfoot'. These three tags can change the order but the browser will consistently display them in the default order.

Other Thoughts

The Use of javascript:; （pseudo code）

 <p><a href="javascript: alert(1);">javascript pseudo protocols.</a></p>
 <p><a href="javascript:;">click</a></p>

When click the second link, the page will not refreshed and there is no new record in the network tab. But the click effect is still work.

The difference between 'input' and 'button'

you can not put any other thing inside the input tag, while you can put something like 'strong','em' or even 'img' tag inside a button tag.

http-server -c -1

As a professional front-end programmer, you are prohibited to open a html page by going to the work folder and double click the specific file with '.html' extension directly.

 <p><a href="/a/b/c/c.html">c.html</a></p>

If you have a link to 'c.html', when you click it, you will see a page below:

file not found

This is because you open the 'c.html' file locally, but it failed to read the absolute path, so the 'c.html' file can't be displayed.