HTML basic tutorial image markup

Picture tag

Note: This is a one-sided tag

In the web page, pictures can be seen everywhere

Basically every webpage has pictures

Next, let’s use the <img> tag to add pictures to our own webpages

Syntax format: <img attribute = "value">
Common attributes

Width: Image width
Height: Image height
Border: Picture border thickness.
Src: The path of the picture (relative path)
Align: The horizontal alignment of the picture, values: left, center, right
Hspace: The distance between the picture and the left and right text (horizontal distance)
Vspace: The distance between the picture and the contextual text (vertical distance) ).

Notes

If you want to scale the image proportionally , only need to specify either width or height.
The Align property can only center the text, not the image alone.
Align can achieve the effect of "mixed graphics and text". align = “left | right”
Let’s take a look at an example:

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
 <p>Life was like a box of chocolates, you never know what you're gonna get.（生命就像一盒巧克力，结果往往出人意料。）---《阿甘正传》 
 </p>
 <img src="/upload/course/000/000/009/58117bf7d1215384.jpg" width="200" border="5" align="center">
 </body>
</html>

Note: You can try to enter other attributes to see Effect, if you want to center the image, you can only use CSS. We will introduce it later

Continuing Learning

new file

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <p>Life was like a box of chocolates, you never know what you're gonna get.（生命就像一盒巧克力，结果往往出人意料。）---《阿甘正传》 </p> <img src="/upload/course/000/000/009/58117bf7d1215384.jpg" width="200" border="5" align="center"> </body> </html>

submit Reset Code

Automatic operation

HTML basic tutorial image markup

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]