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

What to do if you forget your Linux/Mac MySQL password

What to do if you forget your Linux/Mac MySQL pas...

Tips for implementing multiple borders in CSS

1. Multiple borders[1] Background: box-shadow, ou...

Summary of ten principles for optimizing basic statements in MySQL

Preface In the application of database, programme...

10 performance configuration items that need to be adjusted after installing MySQL

In this blog, we will discuss ten performance set...

Summary of the Differences between SQL and NoSQL

Main differences: 1. Type SQL databases are prima...

7 native JS error types you should know

Table of contents Overview 1. RangeError 2. Refer...

How to find slow SQL statements in MySQL

How to find slow SQL statements in MySQL? This ma...

Detailed tutorial on installing and configuring MySql5.7 on Ubuntu 20.04

Table of contents 1. Ubuntu source change 2. Inst...

JavaScript anti-shake and throttling explained

Table of contents Stabilization Throttling Summar...

MySQL SQL Optimization Tutorial: IN and RANGE Queries

First, let's talk about the in() query. It is...

How to make your JavaScript functions more elegant

Table of contents Object parameters using destruc...

Introduction to HTML link anchor tags and their role in SEO

The <a> tag is mainly used to define links ...

Customization Method of Linux Peripheral File System

Preface Generally speaking, when we talk about Li...

Vue close browser logout implementation example

Table of contents 1. beforeunload event 2. Unload...

The ultimate solution for writing bash scripts with nodejs

Table of contents Preface zx library $`command` c...