Summary of html image, video, audio and hyperlink tags

Web application course html picture, video audio and hyperlink tag summary

Directory

• Web application course html picture, video audio and hyperlink tag summary
• • Image tag
  • • Supported formats:
    • Image loading error occurs
    • some other properties
  • Video audio tag
  • • tag
    • tag
  • hyperlink tag
  • Related problem solutions
  • • 1. [Web Application Course Summary of HTML Basic Tags and Text Tags](https://www.acwing.com/solution/content/201345/)
    • 2. [Web Application Course Forms, Lists, Tables, Semantic Tags, Summary of Special Symbol Tags](https://www.acwing.com/file_system/file/content/whole/index/content/9913246/)

Image tag

The element is an empty element in HTML, used to insert images (Image) into web pages.

The element is used to display images in web pages. It is a self-closing tag without a closing tag. Images can be embedded into HTML documents by specifying the image’s URL (src attribute).

Example:

<img src="path/to/image.jpg" alt="Description of the image">

In the above example, the src attribute of the element specifies the URL of the image file, and the alt attribute gives a description or alternative to the image. text. Alternative text will be displayed to the user if the image fails to load or be read by a screen reader.

Note that to ensure web page accessibility, you should always provide a meaningful alternative text (via the alt attribute) for the element, so that even if the image fails to load or Invisible to some users, it can also convey the information of the image.

To summarize, the element is used to insert images into HTML documents. It is a self-closing tag that specifies the URL of the image through the src attribute and provides the image’s alternative text through the alt attribute.

Supported formats:

An image loading error occurred

If an error occurs while loading or rendering an image, and at least one onerror event handler is set to handle the error event, the set event handler will be called. Such errors can occur in a variety of different situations, including:

• The attribute value of the src attribute is empty ("") or null.
• The URL of the src attribute is exactly the same as the URL of the page the user is browsing.
• The image is corrupted for some reason and won’t load.
• The image’s metadata is corrupted, its resolution/width and height cannot be retrieved, and there is no width/height specified in the element’s attributes.
• The format used by this image is not yet supported by the user agent.

Some other attributes

In addition to the src and alt attributes, the tag supports several other attributes that can be used to control the display and behavior of the image. Here are some commonly used tag attributes:

• width and height: Specify the width and height of the image in pixels. Example:

<img src="image.jpg" width="300" height="200" alt="Image">

• title: Specifies the title of the image, which is displayed when the user hovers the mouse over the image. Example:

<img src="image.jpg" alt="Image" title="This is an image">

• loading: Specifies how the image is loaded. Can be set to "eager" (immediate loading), "lazy" (lazy loading) or "auto" (automatically determined by the browser, Defaults). Example:

<img src="image.jpg" alt="Image" loading="lazy">

• decoding: Specifies how the image is decoded. Can be set to "sync" (synchronous decoding) or "async" (asynchronous decoding, default). Example:

<img src="image.jpg" alt="Image" decoding="async">

• sizes and srcset: used for responsive image display. The sizes attribute specifies the display size of the image under different viewport sizes, and the srcset attribute specifies image sources of different resolutions or sizes. Example:

<img src="image.jpg" alt="Image" sizes="(max-width: 600px) 100vw, 50vw" srcset="image.jpg 800w, image-2x.jpg 1600w">

• usemap: Define an image map (image map), used to map a certain area of the image to a link or other operation. Example:

<img src="image.jpg" alt="Image" usemap="#map">

Then define the

These are some common attributes of the tag that can be used as needed to achieve more precise image control and interaction.

The element is a tag in HTML used to embed audio content. It allows playing audio files in web pages, providing a straightforward way to add audio content and control audio playback.

Here’s an example of a simple element:

<audio src="audio.mp3" controls></audio>

In the above example, the element specifies the URL of the audio file, in this case “audio.mp3”, via the src attribute. The controls attribute is used to display the control panel of the audio player, allowing the user to control audio playback, pause, volume, etc.

The element also supports a number of other attributes and tags for more precise control over audio playback and appearance, such as:

• autoplay: Specifies that the audio starts playing automatically after loading. Example:

• loop: Specifies audio loop playback. Example:

• preload: Specifies whether audio is preloaded when the page loads. Can be set to "auto" (default, automatically preloaded), "metadata" (only audio metadata is preloaded), or "none" >(not preloaded). Example:

• controls: Displays the audio player’s control panel. Example:

• : Used to specify multiple audio sources to support different audio formats and browser compatibility. Example:

 <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio tag.
  </audio>

In the above example, two elements are used, each specifying a different audio source and MIME type. If the browser supports one of these formats, the corresponding audio file will be played. If neither is supported, “Your browser does not support the audio tag.” will be displayed.

These are some common attributes and related tags of the element that are used to control audio playback and behavior. By using these properties and tags, you can implement more customized audio players and interactive effects.

It should be noted that to ensure accessibility, the element should be provided with some alternative content, such as adding text or links between the closing tags, So that users who are unable to play audio can understand the audio content and take appropriate action.

The element is a tag in HTML used to embed video content. It allows the playback of video files in web pages, providing a straightforward way to add video content and control video playback.

Here’s an example of a simple element:

<video src="video.mp4" controls></video>

In the above example, the element specifies the URL of the video file, in this case “video.mp4”, via the src attribute. The controls attribute is used to display the control panel of the video player, allowing the user to control the playback, pause, volume, etc. of the video.

The element also supports a number of other attributes and tags for more precise control over the playback and appearance of the video, such as:

• autoplay: Specifies that the video will automatically start playing after loading. Example:

• loop: Specify the video to play in a loop. Example:

• preload: Specifies whether the video is preloaded when the page loads. Can be set to "auto" (default, automatically preloaded), "metadata" (only video metadata is preloaded), or "none" >(not preloaded). Example:

• controls: Displays the video player’s control panel. Example:

• width and height: Specify the width and height of the video in pixels. Example:

• : Used to specify multiple video sources to support different video formats and browser compatibility. Example:

 <video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>

In the example above, two elements are used, each specifying a different video source and MIME type. If the browser supports one of these formats, the corresponding video file will be played. If neither is supported, “Your browser does not support the video tag.” will be displayed.

These are some common attributes and related tags of the element that are used to control the playback and behavior of the video. By using these attributes and tags, you can implement more customized video players and interactive effects.

It’s also important to note that to ensure accessibility, the element should be provided with some alternative content, such as adding text or a link between the closing tags , so that users who are unable to play the video can understand the video content and take appropriate action.

Hyperlink tag

The element is an anchor element in HTML, used to create hyperlinks to link text or images to other web pages, documents, locations, or resources.

The element is typically used to create clickable links that enable users to jump to a target resource or perform a specific action by clicking on the link. It can be contained within text or within other elements such as images.

Here is an example of a element that creates a simple link:

<a href="https://www.example.com">Click here</a>

In the above example, the element specifies the target URL of the link, which is the address of the web page or resource to be redirected to, via the href attribute. Here, the link target is “https://www.example.com ↗”. The link text “Click here” is the clickable part visible to the user.

The element can also contain other attributes and content to enhance the functionality and appearance of the link, such as:

• target attribute: Specifies where the link should be opened. For example, target="_blank" opens the link in a new browser tab or window.
• title attribute: Provides a tooltip text for the link that displays when the mouse hovers over it.
• Content: The element can contain text, images, other HTML elements, or a combination to form complex link structures.

<a href="https://www.example.com" target="_blank" title="Visit Example">Visit Example</a>

To summarize, the element is used to create hyperlinks that allow users to jump to other web pages, documents, locations, or resources by clicking on the link. It specifies the URL of the link target through the href attribute and can contain other attributes and content to enhance the functionality and appearance of the link.