Detailed graphic explanation of three methods of adding images to HTML pages-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Detailed graphic explanation of three methods of adding images to HTML pages

yulia

Oct 08, 2018 am 10:24 AM

When laying out a page, it is often necessary to insert pictures into the page. Do you know how to add pictures in HTML? This article will introduce to you three methods of inserting pictures into HTML pages. Friends who are interested can refer to it. I hope it will be helpful to you.

Method 1. Use the img tag in HTML to add images

The simplest and most commonly used is to use the img tag directly, and you can set the size of the image as needed. The code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
  <img  src="/static/imghwm/default1.png"  data-src="img/picture1.jpg"  class="lazy"  /    style="max-width:90%" height="180px" alt="Detailed graphic explanation of three methods of adding images to HTML pages" >
 </body>
</html>

Rendering:

Detailed graphic explanation of three methods of adding images to HTML pages

Method 2. Use JavaScript to create an img element to import the image

First create an img element, then set the path of the img element, the length and width of the image, and finally insert it into the page. The code is as follows:

<script type="text/javascript">
  var Image1 = document.createElement("img");    
  Image1.src = "img/picture1.jpg";      
  Image1.width = 300;    
  Image1.height = 180;    
  document.body.appendChild(Image1); 
 </script>

Method 3. Use innerHTML in JavaScript Dynamically insert images

Still use the method in JavaScript. The essence is similar to method 2, but the writing method is different. Create an img element and then add it to the HTML page. The code is as follows:

<script type="text/javascript">
  document.body.innerHTML = &#39;<img  src="/static/imghwm/default1.png"  data-src="img/picture1.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="Detailed graphic explanation of three methods of adding images to HTML pages" >&#39;;
</script>

Picture The effect is the same as method one.

The above introduces three methods of adding pictures to HTML pages. Generally, we will directly use the img tag to add pictures, but sometimes JavaScript will be used to dynamically insert pictures. The specific method to choose depends on the needs of the project. Newbies can try it themselves, I hope it can help you!

The above is the detailed content of Detailed graphic explanation of three methods of adding images to HTML pages. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

See all articles