Front end learning diary day4 - mixed arrangement of pictures and texts

1. Image marking < img / >

Syntax: < img SRC = "image URL" >

    The src attribute is used to specify the path and file name of the image file.

Table 1-1 < img / > tag related attributes
attributeAttribute valuedescribe
srcURLImage path
alttextAlternate text when image cannot be displayed
titletextWhat is displayed when the mouse hovers
widthpixel

Set image width

heightpixelSet image height
bordernumberSets the width of the image border
vspacepixelSets the white space (vertical margin) at the top and bottom of the image
hspacepixelSets the white space (horizontal margin) on the left and right sides of the image
alignleftAlign image to left
rightAlign image right
topThe top of the image is aligned with the first line of text, and the other text is below the image
middleAlign the horizontal center line of the image with the first line of text, with other text below the image
bottomThe bottom of the image is aligned with the first line of text, and the other text is below the image

[demo1-1] image replacement text attribute alt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image marker img of alt attribute</title>
</head>

<body>
	<img src="imgs/2233.jpeg" alt="Bilibili (゜-゜)つロ Cheers!~-bilibili"/>
</body>
</html>

Figure 1-1   alt exercise effect drawing of replacement text attribute of image (image is displayed normally)

  Figure 1-2   alt exercise rendering of image replacement text attribute (change the image path, and the image cannot be displayed normally)

  [demo1-2] mouse over title mark

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image marker img of alt attribute</title>
</head>

<body>
	<img src="imgs/2233.jpeg" alt="Bilibili (゜-゜)つロ Cheers!~-bilibili" title="Bilibili"/>
</body>
</html>

Figure 1-2   Mouse over title mark exercise running effect diagram

  [demo1-3] width attribute and height attribute of the image

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Width, height, and border properties of the image</title>
</head>

<body>
	<img src="imgs/2233.jpeg" alt="Bilibili (゜-゜)つロ Cheers!~-bilibili" border="2"/>
    <img src="imgs/2233.jpeg" alt="Bilibili (゜-゜)つロ Cheers!~-bilibili" width="300"/>
    <img src="imgs/2233.jpeg" alt="Bilibili (゜-゜)つロ Cheers!~-bilibili" width="300" height="470"/>
</body>
</html>

Figure 1-3   Effect drawing of image width, height and border attributes exercise

  [demo1-4] image margin attribute vspace and hspcae, alignment attribute align

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image margin and alignment properties</title>
</head>

<body>
	<img src="imgs/2233.jpeg" alt="Bilibili (゜-゜)つロ Cheers!~-bilibili" border="1" hspace="50" vspace="20" align="left"/>
   	Bili Bili is a well-known video barrage website in China,Here are timely new animation,Active ACG atmosphere,original Up Lord. You can find a lot of joy here.
</body>
</html>

Figure 1-4 operation effect of image margin and alignment attributes

  2. Input of image path

① The image file and html file are located in the same folder: just enter the name of the image, such as < img SRC = "2233. JPEG" >

② The image file is located in the next level folder of the html file: enter the folder name and file name, separated by "/", such as < img SRC = "IMGs / 2233. JPEG" >

③ The image file is located in the upper level folder of html: add ".. /" before the folder name, and ".. /.. /" if it is the upper two levels, and so on, such as < img SRC = ".. / 2233. JPEG" >

3. Special character mark

Table 1-2 common special characters
Special charactersdescribeCharacter code
Space&nbsp;
<less than&lt;
>greater than

&gt;

&and&amp;
RMB

&yen;

©copyright&copy;

Tags: Front-end html

Posted on Sun, 19 Sep 2021 14:49:01 -0400 by pucker22