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

Causes and solutions for cross-domain issues in Ajax requests

Table of contents 1. How is cross-domain formed? ...

JavaScript to implement dynamic digital clock

This article shares the specific code for impleme...

Detailed explanation of the solution to duplicate insertion of MySQL primary key and unique key

Table of contents Solution: 1. IGNORE 2. REPLACE ...

Implementation of check constraints in MySQL 8.0

Hello everyone, I am Tony, a teacher who only tal...

Working principle and example analysis of Linux NFS mechanism

What is NFS? network file system A method or mech...

Detailed explanation of this pointing problem in JavaScript function

this keyword Which object calls the function, and...

vue-cli introduction and installation

Table of contents 1. Introduction 2. Introduction...

Vue implements book management case

This article example shares the specific code of ...

jQuery framework implements three animation methods of element display and hiding

Table of contents 1. Display and hide by default ...

How to install lua-nginx-module module in Nginx

ngx_lua_module is an nginx http module that embed...

JavaScript error handling try..catch...finally + covers throw+TypeError+RangeError

Table of contents 1. Purpose 2. Grammar 3. Practi...

Vue realizes the function of uploading photos on PC

This article example shares the specific code of ...

Vue Element-ui table realizes tree structure table

This article shares the specific code of Element-...

Example of how to set up a third-level domain name in nginx

Problem Description By configuring nginx, you can...

Users need to know why

When I was in the securities company, because the ...