HTML image img tag_Powernode Java Academy

HTML image img tag_Powernode Java Academy

summary

Project
description
format
<img src="...">
Support
H2+ / e2+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+
tag omission
Start tag: required, end tag: none

illustrate

img is the abbreviation of Image. The src attribute is used to specify the path to the image.

In HTML4.01, in order to cooperate with various browsers that cannot display images and audio reading browsers, the alt attribute in the <img> tag must be set. HTML5 becomes optional.

Although the height and width attributes are not required, if these two attributes are set, the image can be opened faster and certain display bugs can be avoided when displaying the image.

property

【Important attributes】

property
significance
src = url
H2+/e2+/N2+. The path to the image. Required attribute.
alt = alt
H2+/e2+/N2+. Description of the image. When some browsers cannot display images, you can see the description of the image on the web page. It is a required attribute in HTML4.01.
height = n
H3+/e2+/N2+. Set the image height.
width = n
H3+/e2+/N2+. Set the image width.

【characteristic】

property
significance
align = align
H2-H4T/e2+/N2+. Specifies where the image will be displayed. Setting align="right" and align="left" will allow the text to appear on the left or right side of the image. To cancel this effect use <br clear=all>.
border = n
H3-H4T/e2+/N2+. Specifies the thickness of the border around the image. When an image is contained in <a href="...">～</a> tags, a border line will be automatically generated. To cancel it, set border=0.
galleryimg = bool
e6+. When the mouse is placed on an image larger than 200×200, the toolbar will not be displayed. It can also be specified globally in <meta> .
hspace = n
H3-H4T/e2+/N2+. Sets the horizontal margin around the image.
longdesc = url
H4. When the image description is too long to be fully displayed in the title attribute, use this attribute to point to the URL of a document containing the image description.
lowsrc = url
e4+/N2+. If an image is large, it may take some time to display in the browser. When the image is still being transmitted over the network, you can use the lowsrc attribute to specify a thumbnail so that it is displayed on the browser first. The thumbnail will be automatically replaced after the original image is transmitted.
suppress = suppress
N4+. suppress means to suppress. The default value is false . If set to true , during image transmission, the small icon that should be displayed at the image position will be replaced by ToolTip (prompt box).
vspace = n
H3-H4T/e2+/N2+. Sets the vertical margin around the image.
name = name
H4/e4+/N3+. Specify a name.

【Clickable field related attributes】

property
significance
ismap
H2+/e2+/N2+. Specifies that the image is a server-side image map.
usemap = usemap
H3+/e2+/N2+. Specifies that the image is a client-side image map. Please refer to <map>.

【Video related attributes】

property
significance
Controls
e2-e3. Displays playback controls below the video. Deprecated in IE4.0.
dynsrc = url
e2+. Specify the video file (*.avi). Because there are already <embed> and <object> tags, this attribute is basically not used by anyone.
loop = n
e2+. Set the number of times to play. When loop= infinite , the playback will loop infinitely.
start = start
e2+. When set to fileopen , the video will be played as soon as the web page is opened. When set to mouseover , the video will start playing when the mouse is placed on it.

【Data binding related properties】

property
significance
datafld = datafld
e4+. Specifies the column name of the data source when binding data.
datasrc = datasrc
e4+. Specifies the ID of the data source when binding data.

【General properties】

property
mean
class = class
H4+/e3+/N4+. Specify the class.
id = id
H4+/e3+/N4+. Specify an ID.
style = style
H4+/e3+/N4+. Specify the style.
title = title
H4+/e4+/N6+. Specify a title.
dir = dir
H4+/e5+/N6+. Specifies the direction in which text is displayed.
lang = lang
H4+/e4+/N6+. Specify the language.
accesskey = key
H5+. Assign shortcut keys.
tabindex = n
H5+. Specifies the order in which the TAB key moves through controls.
contenteditable = bool
H5+/e55+. Makes the element editable.
contextmenu = id
H5+. Specify contextmenu.
draggable = bool
H5+. Draggable.
dropzone = value
H5+. Drag and drop.
hidden
H5+. Hide the element.
spellcheck = bool
H5+. Check your spelling.
IE Extended Properties
You can specify IE extended attributes.

Example

HTML Code

<img src="image/kanami.jpg" alt="Example image" width=100 height=100>

<<:  Introduction to the process of building your own FTP and SFTP servers

>>:  MySql fuzzy query json keyword retrieval solution example

Recommend

Solution to Linux CentOS 6.5 ifconfig cannot query IP

Recently, some friends said that after installing...

How to quickly install RabbitMQ in Docker

1. Get the image #Specify the version that includ...

Detailed graphic tutorial on how to enable remote secure access with Docker

1. Edit the docker.service file vi /usr/lib/syste...

Detailed explanation of the use of MySQL comparison operator regular expression matching REGEXP

1. Initialize data DROP TABLE IF EXISTS `test_01`...

Tutorial on how to deploy LNMP and enable HTTPS service

What is LNMP: Linux+Nginx+Mysql+(php-fpm,php-mysq...

MySQL 8.0.14 installation and configuration method graphic tutorial

This article records the installation and configu...

Design a data collector with vue

Table of contents Scenario Core Issues Status mon...

Tutorial on installing MYSQL5.7 from OEL7.6 source code

First, download the installation package from the...

Docker-compose creates a bridge, adds a subnet, and deletes a network card

1. Create a docker network card [root@i ~]# brctl...

In-depth explanation of Set and WeakSet collections in ES6

Table of contents Set is a special collection who...

One command lets you understand the common parameters of the read command in the shell

We know that there are two ways to receive incomi...

JS implements circular progress bar drag and slide

This article example shares the specific code of ...

Color hexadecimal color code table display and hexadecimal value comparison display for easy search

Hexadecimal code table of various colors [Part 1] ...

How to embed flash video format (flv, swf) files in html files

Flash file formats: .FLV and .SWF There are two ex...

Three BOM objects in JavaScript

Table of contents 1. Location Object 1. URL 2. Pr...