HTML+CSS基础——基础标签（图像标签（img、src、alt））

最新推荐文章于 2024-07-05 23:24:20 发布

张謹礧

最新推荐文章于 2024-07-05 23:24:20 发布

阅读量1.5k

点赞数 29

分类专栏： HTML+CSS基础——标签文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_66547608/article/details/135288261

版权

HTML+CSS基础——标签专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<html>
  <head>
	<title>Images</title>
  </head>
  <body>
	<h1>
	  <img src="images/1.jpeg"
		alt="From A to Zucchini"
		width="150" height="100"/>
	</h1>
	<figure>
	  <img src="images/2.jpeg"
		alt="Chocolate Islands"
		title="Chocolate Islands Individual Cakes"
		width="100" height="150"/>
	  <p>
		<figcaption>
			This recipe for individual chocolate cakes is so simple and so delectable!
		</figcaption>
	  </p>
	</figure>
	<h4>More Recipes:</h4>
	<p>
	  <img src="images/3.jpg"
		alt="Lemon Posset"
		title="Lemon Posset Dessert"
		width="100" height="150"/>
	  <img src="images/4.jpg"
		alt="Roasted Brussel Sprouts"
		title="Roasted Brussel Sprouts Side Dish"
		width="200" height="100"/>
	  <img src="images/5.jpg"
		alt="Zucchini Cake"
		title="Zucchini Cake no Frosting"
		width="100" height="150"/>
	</p>
  </body>
</html>

这是一个简单的HTML页面，其中包含了一些图片。图片的源文件存储在images文件夹中。

第一张图片的路径是"images/1.jpeg"。它的替代文本是"From A to Zucchini"，宽度是150像素，高度是100像素。
第二张图片是一个figure元素内的图片，路径是"images/2.jpeg"。它的替代文本是"Chocolate Islands"，标题是"Chocolate Islands Individual Cakes"，宽度是100像素，高度是150像素。图像下方存在一个figcaption元素，其中包含了一段描述性文本。
页面中还有三张图片，它们分别是"images/3.jpg"、“images/4.jpg"和"images/5.jpg”。这些图片都具有替代文本和标题，并分别设置了宽度和高度。

解析上述HTML代码时，可以将其分为以下几个部分：

head 部分：

<title>Images</title>

此处定义了文档的标题为 “Images”。

body 部分：

<h1>
  <img src="images/1.jpeg" alt="From A to Zucchini" width="150" height="100"/>
</h1>

在 body 部分的开头，我们看到一个 h1 标题元素。在 h1 元素内部，有一个 img 元素用于嵌入第一张图片，其中 src 属性指定图片的路径为 “images/1.jpeg”，alt 属性设置了图片的替代文本为 “From A to Zucchini”，width 和 height 属性定义了图片的显示尺寸。

figure 部分：

<figure>
  <img src="images/2.jpeg" alt="Chocolate Islands" title="Chocolate Islands Individual Cakes" width="100" height="150"/>
  <p>
    <figcaption>
        This recipe for individual chocolate cakes is so simple and so delectable!
    </figcaption>
  </p>
</figure>

在 figure 元素内部，有另一张图片，它的属性和第一张图片类似。figure 元素常用于包围一个图片及其标题等相关内容。在 figure 元素之后的段落部分，包含了一个 figcaption 元素，用于为图片添加描述文本。

更多菜谱部分：

<h4>More Recipes:</h4>
<p>
  <img src="images/3.jpg" alt="Lemon Posset" title="Lemon Posset Dessert" width="100" height="150"/>
  <img src="images/4.jpg" alt="Roasted Brussel Sprouts" title="Roasted Brussel Sprouts Side Dish" width="200" height="100"/>
  <img src="images/5.jpg" alt="Zucchini Cake" title="Zucchini Cake no Frosting" width="100" height="150"/>
</p>

在这部分代码中，使用 h4 标题元素标示了 “More Recipes:”，随后是一个 p 段落元素，其中嵌入了三张图片。每个图片使用 img 元素，其中的属性依次指定了图片的路径、替代文本、标题和尺寸。

整个 HTML 文件以 <html> 标签开始，以 </html> 结束，包含了 head 和 body 部分。这个页面的主要目的似乎是展示食谱，并嵌入了一些图片以及相应的描述性文本。

html标签是整个文档的根元素，它包含了 head 和 body 元素。
head 元素包含了一些关于文档的元数据，例如文档标题，字符集标记等。
title 元素定义浏览器标题栏中显示的文本。
body 元素包含了实际的页面内容，例如图片、文本、链接等。
h1 标签用于指定一级标题，其中包含了一个 img 元素表示第一张图片。img 元素用于在页面中嵌入图片。它的属性包括 src（图片文件路径）、alt（当无法加载图片时显示的替代文本）、width（图片宽度）和 height（图片高度）等。
figure 元素定义了一个图形（图表、照片等）及其标题。它包含了一个 img 元素，其 src 和 alt 属性与前面的图片类似，还定义了一个 title 属性（当鼠标指针覆盖在图片上时显示的文本）。另外，figure 还包含了一个 figcaption 元素，用于为图形添加描述性文本。
h4 标签用于指定四级标题，表示更多的菜谱，其包含了一段简短的文本。
p 标签定义了一个段落，其中包含了三个 img 元素，用于展示更多的图片。这些图片具有与前面所述 img 元素相同的属性。
figcaption 元素用于为其所属 figure 元素提供标题或图像的解释说明。它可以是富文本，允许包含其他 HTML 标签。
alt 属性是一个很重要的用于可访问性的属性，它提供了图片的替代文本。如果图片无法加载时，这个属性的值会代替图片显示，同时也可以被屏幕阅读器用来读出图片的内容。alt 属性的内容应该简洁、清晰地描述图片，且不应该包含任何格式化或 HTML 标签。
width 和 height 属性用于指定图片在网页上的显示大小。缩放图片非常不好，因为它会影响图片的清晰度，所以应该在 Photoshop 或其他图片编辑器中将图像进行裁剪和缩放，以确保其大小与页面布局相匹配。
src 属性指定了图片文件的路径和名称。如果你的图片在本地文件系统上，它的路径应该是相对于 HTML 文件的，以确保在传输该文件时可以正确地引用到它的位置。如果图片是从互联网上引用的，它的路径应该是完整的 URL。

张謹礧

关注

29
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS基础——基础标签（图像标签（img、src、alt））

这是一个简单的HTML页面，其中包含了一些图片。图片的源文件存储在images文件夹中。第一张图片的路径是"images/1.jpeg"。它的替代文本是"From A to Zucchini"，宽度是150像素，高度是100像素。第二张图片是一个figure元素内的图片，路径是"images/2.jpeg"。它的替代文本是"Chocolate Islands"，标题是"Chocolate Islands Individual Cakes"，宽度是100像素，高度是150像素。图像下方存在一个figca
复制链接

扫一扫