A label

It’s very common, but many people don’t use it

attribute

  • Href (Hyper Reference) : A hyperlink to a web page (not just a web page, but also an email, phone, or file)
  • Target: determines the window in which to open the hyperlinked web page. For details, see later
  • download
  • Rel =noopener: To prevent a bug

Note: to open a web page in vscode, use http-server-c-1. Remember to add the path after the url

role

  • Go to external Interface
  • Jump to internal anchor point
  • Jump to email or phone

The href value of a

  • google.com

    google.com

    //google.com It’s usually this one
  • Absolute path /a/b/c; Relative path A /b/c index.html; ./index.html
  • -Leonard: Well, I’m not sure if I have a mailto tel phone number.
  • id

Note:

  • In HTTP, the root directory in the absolute path is not the root directory in the file, but where the service is started, and that’s the root directory, and in our demo, the demo file price is the root directory, right
  • The code behind JavaScript in the pseudo-protocol can be executed, and the colon and semicolon cannot be forgotten; When we need an A tag, but don’t want it to do anything (don’t want it to refresh the page, when we write something in it, it looks like nothing happened, but the page refreshes) and leave the code empty
  • When adding an ID to a tag (e.g<h1 ID = XXX > My country </h1>, at this momenthref="#xxx", click it to go directly to my home country), you can jump to the make tabs

The target value of A

The built-in name

  • _blank opens the link on a new page
  • _top opens the link in the top-level window
  • _parent opens the link in the upper-level window
  • _self opens the link on the current page

For example, I wrote an IFrame window XXX in the A.html file, wrote an IFrame window YYy in the B.html file, referenced XXX in the B.HTML file, and then referenced YYy in the C.HTML file. When I use the A tag in A.HTML, href=_top, then the link opens in the window built in C.HTML, the top window. When href=_parent, the link opens at yyy

Programmer naming

  • The name of the window
  • The name of the iframe

The code to introduce iframe

<div>
    <iframe src="a-target-iframe.html" frameborder="0"></ifrarme>
</div>
Copy the code

Note:

  • For the first programmer name, for example when target=” XXX “, if there is a window named XXX, open the link in that window, if there is no window, create a window named XXX and open it. In particular, if links in multiple A tabs point to the XXX window, these links will all open in the same window named XXX
  • For the second, say you have two iframe Windows XXX and YYY, you can open links in different Windows by calling both names

Table label

  • thead
  • tbody
  • tfoot
    <table>
        <thead>
            <tr><th></th></tr>/*tr refers to the row of the table, th refers to the head of the table */</thead>
        <tbody>
            <tr><td>data</td></tr>/*tr refers to the table rows, TD refers to the table data */</tbody>
        <tfoot></tfoot>
    </table>
Copy the code

Note: Table is mainly used for these three kinds of labels, the head and tail can not be. It doesn’t have to be in that order but HTML is so powerful that it will write it for you when you forget to write it, and it will adjust it for you when you don’t write it in that order.

Related styles

  • table – layout
  • table-collapse
  • table-spacing

Table collapse:collapse; table collapse:collapse; table collapse:collapse; table-spacing:0px;

Img tags

  • What it does: Makes a get request to display an image – the web page makes a request to access the HTML, and the HTML makes a get request to access the image
  • Properties: Alt/height/width/SRC
  • Time: onload/onerror
  • Max-width :100%;
  • Replaceable element: added later

note

  • Alt, if the photo access fails, use the word after Alt to alert the user
  • Height and width are attributes in themselves, not CSS styles. When the height is given, the other one will be adaptive, usually not given at the same time, otherwise it will be deformed
  • SRC Image address
  • Onload monitors whether the image is successfully fetched, if it is successful, onload, otherwise onError, so you can save the image when it fails, see the following code
    <img id = "xxx" src = "images.png" alt = "Dog">
    <scrip>XXX. Onload = function(){console.log(" load successfully "); } xxx.onerror = function(){sole.log(); xxx.src = "404.png"; }</scrip>
Copy the code

feeling

HTML tags have many functions, some special points can only be more memory, more use.