Community
Learn
Tools Library
AI Tools
Leisure
search
English
search
logo
  • Sign In
  • Sign Up
Password reset successful

Follow the proiects vou are interested in andi aet the latestnews about them taster

HTML image

HTML Image


1001.jpg

#<img> ; ->image image


【Required attribute】

【1】src: address

【 2] alt: image alternative text for crawling by the exploration engine

[Optional attribute]

[1] height: image height

[2] width: image Width

【3】ismap: Define the image as a server-side image mapping


<img> is an empty tag, meaning that it only contains attribute and no closing tag.

To display an image on the page, you need to use the source attribute (src). src refers to "source". The value of the source attribute is the URL address of the image.

The syntax for defining images is:

<img src="//m.sbmmt.com/global/code/url" alt="some_text">


The alt attribute is used to define a string of prepared replaceable text for the image.

The value of the replacement text attribute is user-defined.

<img src="//m.sbmmt.com/global/code/../style/images/boat.gif" alt="Big Boat">

The image cannot be loaded in the browser At the same time, the replacement text attribute tells the reader the information they are missing. At this point, the browser will display this alternative text instead of the image.


#The height (height) and width (width) properties are used to set the height and width of the image.

The default unit of the attribute value is pixels:

<img src="//m.sbmmt.com/global/code/../style/images/pulpit.jpg" alt="Pulpit rock" width="300" height="200">

Tip: It is a good practice to specify the height and width of the image. If an image has a specified height and width, the specified dimensions will be retained when the page loads. If the size of the image is not specified, the overall layout of the HTML page may be destroyed when the page is loaded.

Example

Add a background image: 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body background="http://pic.58pic.com/58pic/15/97/99/27W58PICZS7_1024.jpg">
<h3>图像背景</h3>
<p>gif 和 jpg 文件均可用作 HTML 背景。</p>
<p>如果图像小于页面，图像会进行重复。</p>
</body>
</html>

Set the height and width of the image: 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body >
<img src="http://www.w3school.com.cn/i/eg_cute.gif" width="50" height="50">
<br />
<img src="http://www.w3school.com.cn/i/eg_cute.gif" width="100" height="100">
<br />
<img src="http://www.w3school.com.cn/i/eg_cute.gif" width="150" height="150">
</body>
</html>


Continuing Learning
new file
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body > <p>创建图片链接: <a href="//m.sbmmt.com"> <img src="http://www.runoob.com/try/demo_source/smiley.gif" alt="HTML 教程" width="32" height="32"> </a> </p> </body> </html>
Reset Code
Automatic operation
submit
logo
Preview Clear
Previous section
Next Section
Tutorial List
get help
  • Course Recommendations
  • Courseware download
¥ 99 HTML+CSS Quick Start
Free html/css quick start
Free HTML+CSS+JavaScript front-end development quick start with zero foundation
Free Quick introduction to HTML+css
Free ECMAScript new features in-depth video tutorial
Free Detailed video tutorial on Ajax principles
Free React basics in-depth video tutorial
Free React routing in-depth video tutorial
Free React Native basics video tutorial
Free PHP Fun Breakthrough Class
Free Ajax message board, waterfall flow video tutorial
Free AJAX cross-domain solution: JSONP video tutorial
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
496444
Let's briefly talk about starting a business in PHP Quick introduction to web front-end development Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum] Login verification and classic message board Computer network knowledge collection Quick Start Node.JS Full Version The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original] Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)