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

  
	
  
  
	

	  
	
	

	  
	  

		

			This recipe for individual chocolate cakes is so simple and so delectable!
		
	  

	
	
More Recipes:
	

	  
	  
	  
	
  

这是一个简单的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 部分：

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

1. body 部分：

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

1. figure 部分：

  
  

    

        This recipe for individual chocolate cakes is so simple and so delectable!
    
  

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

1. 更多菜谱部分：

More Recipes:

  
  
  

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

整个 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。