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

How to install Linux online software gcc online

Linux online installation related commands: yum i...

CSS sets the list style and creates the navigation menu implementation code

1. Set the list symbol list-style-type: attribute...

Docker nginx + https subdomain configuration detailed tutorial

Today I happened to be helping a friend move his ...

JavaScript to implement the most complete code analysis of a simple shopping cart (ES6 object-oriented)

This article shares the specific code of JavaScri...

Ideas and codes for implementing iframe to intercept part of the website content

Copy code The code is as follows: <div style=&...

Implementation steps for installing RocketMQ in docker

Table of contents 1. Retrieve the image 2. Create...

Img semi-transparent processing Img plus semi-transparent background implementation ideas and code

Copy code The code is as follows: <!DOCTYPE ht...

Detailed explanation of Linux redirection usage

I believe that everyone needs to copy and paste d...

A brief discussion on DDL and DML in MySQL

Table of contents Preface 1. DDL 1.1 Database Ope...

Solve the problems that need to be paid attention to when configuring Tomcat's maxPostSize attribute

need: In the near future, we will implement the l...

A practical tutorial on how to quickly insert tens of millions of records into MySQL

1. Create a database 2. Create a table 1. Create ...

Use Docker to run multiple PHP versions on the server

PHP7 has been out for quite some time, and it is ...

Graphical explanation of the solutions for front-end processing of small icons

Preface Before starting this article, let’s do a ...

Solve the problem of case sensitivity of Linux+Apache server URL

I encountered a problem today. When entering the ...

MySQL 5.5.27 winx64 installation and configuration method graphic tutorial

1. Installation Package MYSQL service download ad...