iframeThe label

  1. Modern front-end development is rarely used.
  2. Effect: Inserts a page in a page.
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
Copy the code
  1. The default height is 50 and width is 100. So it’s also aReplaceable label; The width and height can be changed by adding width and hight attributes to the iframe tag, or by using CSS.
  2. The default attribute frameborder=”0″ does not display the default border.
  3. withaLabel combination

<iframe src="#" name="xxx" frameborder="0" width="100%" height="500px"></iframe> <a href="https://www.baidu.com" Target =" XXX "> Baidu </a> <a href="https://www.qq.com" target=" XXX "> Tencent </a> The target attribute in the a tag must be the same as the name attribute in the iframe tagCopy the code

aThe label

  1. attribute

target

  • _blank: Opens in a new TAB
  • _self: the page where the current TAB is displayed is displayed
  • _parent: The page above the current link
  • _top: Top-level window

download

To allow users to download images or files, you can add a download attribute, but not all browsers support this, especially mobile browsers.

Such as:

At < a href = "https://i.loli.net/2021/06/13/OFfpMbmnHWUYN5d.gif" > download images < / a >Copy the code

You can also specify the name of the downloaded file, for example:

< a href = "https://i.loli.net/2021/06/13/OFfpMbmnHWUYN5d.gif" download = "hi, idiot" > download images < / a >Copy the code

Supplement:

Getting the browser to download the file is decided on two levels

  1. It is determined by the HTTP response: The CONTent-type of the HTTP response is content-type: the application/octet-stream browser receives the request as a download, not as a display on the page.

  2. Add a Download attribute to the A tag: Even though the content-type of the response is not application/octet-stream, you can still force the browser to download it.

herf

  1. The url
    • google.com
    • google.com
    • The browser automatically selects a protocol on google.com
  2. The path
    • Relative paths
    • An absolute path
  3. Pseudo agreement
    • Javascript: code;
    • Mailto: email
    • Tel:
  4. ID
    • Internal anchorherf = "#xxx"

imgThe label

Purpose: Issue a get request to display an image

Common attributes:

  • alt: Description of an image that can be displayed when the image cannot be displayed
  • src
  • height: Width and height write only one item, the other item will adapt according to the width and height ratio
  • width: It is not recommended to write both, the picture will be distorted

JS event

Onload onError Monitors whether the image is loaded successfully

Such as:

html

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

JavaScript

xxx.onload = function () {
    console.log("Loading successful")
}
xxx.onerror = function () {
    console.log("Load failed")}Copy the code

responsive

max-width:100%

tableThe label

Relevant tags

Among them:

  • tr: table row
  • th: header
  • tdContent:
  • <tfoot>: don’t write

The relevant styles

  • table-layout: Cell content width
  • boder-collapse: Spacing between cells
  • boder-spacing: Table line style