Html Image tag :

<img> Tags can insert a picture into a web page , It's a stand-alone label , Its common properties are :

(1)src attribute Define the reference address of the picture

(2)alt attribute Define the text to be displayed when the picture fails to load , Search engines will use this text to include images 、 The screen reading software for the blind will read the text and let the blind recognize the picture , So this property is very important .( Caption of picture )

<img src=”images/pic.jpg” alt=” Product picture ” />

Absolute path and relative path :

External files like inserting pictures on a web page , Need to define the reference address of the file , Referencing external files also includes referencing external style sheets 、javascript wait , Reference address is divided into absolute address and relative address .

Absolute address : Locate the address of the file relative to the location of the disk

Relative address : Locate the address of the referenced file relative to the referenced file itself

Code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Insert a picture into the web page </title>
</head>
<body>
<h1> picture </h1> <h2> Relative paths </h2>
<!-- Web pages and images In the same directory -->
<!-- The complete way of writing is :./images/ I'm a fairy .jpg ./ Represents the current directory , It can be omitted -->
<img src="./images/ I'm a fairy .jpg" alt=" Be an elegant woman " />
<img src="data:images/loading.gif" alt=" Loading " /> <!-- The directory and images In the same directory -->
<!-- The picture doesn't show -->
<img src="../images/ I'm always so charming .jpg" alt=" I'm always so charming " /> <h2> Absolute path , Not recommended </h2>
<!-- The picture doesn't show -->
<img src="C:\Users\Ren\Desktop\img\5.jpg" alt=" There is no love in life " /> </body>
</html>

Page display effect :

Html Image tag 、 Absolute path and relative path : More articles about

  1. HTML Absolute path and relative path of label

    I am here javaweb Write in json Of Demo When I met this problem , Picture one can't be taken out , After a long time of investigation, it was finally solved , So now record . Absolute path : It's easy to understand , If you're a normal project , That's what it really is in your computer ...

  2. html Images 、 Absolute path and relative path , link

    html Images <img> Tags can insert a picture into a web page , It's a stand-alone label , adopt "src" Property defines the address of the picture , adopt "alt" Property to show when the picture fails to load ...

  3. PHP( General label introduction , Tag features , The entity name , Absolute path and relative path )

    h1: Title   h1~h6 The title will get smaller You need to change the number in the label Such as : <h1> This is a title, 123</h1>--- title <h2> This is a title, 123</h2>-- ...

  4. It's not allowed on the mobile page A Long press the label to pop up the path box

    // It's not allowed on the mobile page A Long press the label to pop up the path box     window.onload=function(){        document.documentElement.style.webkitTouchCa ...

  5. qt: Cannot be opened png Images and opencv Loading Chinese path problem ;

    After a personal test , QT( edition : 5.9.4) Provided QImageReader Or functions load Loading local png In the picture , Will prompt failure , Follow the online method , take Qt plugins Under the imageformats copy to e ...

  6. turn .HTML in img Labeled src Solution to attribute absolute path problem , Completely solve !

    HTML in img Labeled src Solution to attribute absolute path problem , Completely solve   demand : Sometimes your own projects img Of src The path needs to use pictures in a local folder , Instead of using the image in the root of the project . scene :eclipse,to ...

  7. XHTML Relative path and absolute path

    File path The file path is the file on the computer ( The server ) Position in , There are two ways to represent a file path : Relative path and absolute path . Path signs : Signs explain / Path signs . Current directory .. Previous Directory "." ...

  8. img Image tags and hyperlink tags a

    Image tag Syntax :<img src="" alt="".../> img attribute :src=""  Display image's URLalt="& ...

  9. html Yes a The use of tags and attributes ,img Attributes and applications of image tags

    The difficulty in today's study is that a The application of tag hyperlinks . Not very skilled , Go home in the evening to knock the code , Give Way a I'm more familiar with the use of hyperlink tags , For the morning img  Property values are understood . I'd like to write down the main points of the day   a Underline the label :a{ ...

Random recommendation

  1. penpyxl basic function demo code

    Openpyxl basic function demo code demo code: #!/usr/bin/env python # -*- coding: utf-8 -*- "&qu ...

  2. utilize GeoWebCache Realization WebGIS Cache optimization for topographic map display

    The copyright of the article is jointly owned by Li Xiaohui and blog park , If reprint, please indicate the source clearly :http://www.cnblogs.com/naaoveGIS/. 1. Preface stay WebGIS in , Image pyramid is a very important concept . stay WebGI ...

  3. stay VS2013 Use in Log4net

    Roughly divided into 3 A step quote Log4net

  4. solve TryUpdateModel The problem that the object is empty

    MVC Medium TryUpdateModel It really brings a lot of convenience to development , But if it's bound to View When there is no value filled in the text control on , Re execution TryUpdateModel The corresponding entity attribute will be empty . If the corresponding field in the database does not allow ...

  5. mysql User permissions

    mysql> show grants for root@'localhost';+-------------------------------------------------------- ...

  6. MVC The addressing of hyperlinks

    Traditional href Directly with the link address URL <a href="@Model.Base.BdtUrl" target="_blank"> home page </a&g ...

  7. jsp Date control My97DatePicker Use

    My97DatePicker Is a very flexible and easy to use date control . Very simple to use . 1. download My97DatePicker The component package  2. take My97DatePicker Put the package in the project WebContent Under the table of contents 3. On the page ...

  8. NYOJ 47 The problem of crossing the river

    Main idea : Prioritize . There are two possible minimums , One is to let the smallest go with the biggest past , And then the youngest comes back , Another way is to pass the smallest one and the second smallest one first , And then the youngest came back , Let the biggest and the second be in the past , And then the second one came back , The second is Xiaohe ...

  9. DataSet Offline dataset instance

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  10. solve NoSuchMethodError with Spring MutableValues Abnormal problems

    When the project starts this afternoon , Encountered an exception , Cause unable to start : [ 221] ERROR - work.web.context.ContextLoader - Context initialization fail ...