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

发布时间：2023年12月29日
<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代码时，可以将其分为以下几个部分：

  1. head 部分：
<title>Images</title>

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

  1. 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?属性定义了图片的显示尺寸。

  1. 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 元素，用于为图片添加描述文本。

  1. 更多菜谱部分：
<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。
文章来源:https://blog.csdn.net/weixin_66547608/article/details/135288261
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章