介绍 在本实验中,你将学习如何使用各种技术和属性在 HTML 中有效地插入和样式化图片。实验涵盖了基本技能,例如使用源文件和替代文本添加基本图片、设置固定图片尺寸、对齐图片以及创建信息丰富的工具提示。通过逐步的指导,你将获得操作图片元素以增强网页设计和改善用户体验的实践经验。 通过动手实践,你将探索不同的 HTML 属性,如 src、alt、width、height 和 title,以控制图片的展示和可访问性。这些技能对于希望创建视觉吸引力强且响应式网页的 Web 开发人员来说至关重要,能够确保图片的集成和样式化得当。 Skills Graph %%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/MultimediaandGraphicsGroup(["`Multimedia and Graphics`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/MultimediaandGraphicsGroup -.-> html/multimedia("`Multimedia Elements`") html/MultimediaandGraphicsGroup -.-> html/img_maps("`Image Maps`") html/MultimediaandGraphicsGroup -.-> html/embed_media("`Embedding External Media`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") subgraph Lab Skills html/basic_elems -.-> lab-452362{{"`在 HTML 中插入和样式化图片`"}} html/para_br -.-> lab-452362{{"`在 HTML 中插入和样式化图片`"}} html/layout -.-> lab-452362{{"`在 HTML 中插入和样式化图片`"}} html/multimedia -.-> lab-452362{{"`在 HTML 中插入和样式化图片`"}} html/img_maps -.-> lab-452362{{"`在 HTML 中插入和样式化图片`"}} html/embed_media -.-> lab-452362{{"`在 HTML 中插入和样式化图片`"}} html/inter_elems -.-> lab-452362{{"`在 HTML 中插入和样式化图片`"}} html/custom_attr -.-> lab-452362{{"`在 HTML 中插入和样式化图片`"}} end
使用 src 和 alt 属性添加基本图片 在这一步中,你将学习如何使用 <img> 标签及其基本属性向 HTML 页面添加基本图片。图片是网页设计的重要组成部分,能够使网页更具视觉吸引力和信息量。 首先,让我们创建一个 HTML 文件来进行操作。打开 WebIDE,在 ~/project 目录下创建一个名为 images.html 的新文件。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>My First Images</title> </head> <body> <!-- 我们将在这里添加图片 --> </body> </html> <img> 标签是一个自闭合标签,用于在 HTML 文档中嵌入图片。它有两个关键属性: src(source):指定图片文件的路径 alt(alternative text):提供图片的文本描述 让我们向 HTML 文件中添加一张图片: <body> <img src="https://file.labex.io/static/images/labex-logo-dark.png" alt="LabEx Logo" /> </body> src 属性指向图片的 URL,而 alt 属性提供了以下功能: 如果图片加载失败,则会显示该描述 帮助屏幕阅读器为视障用户描述图片 通过为搜索引擎提供上下文来提升 SEO 保存文件并在网页浏览器中打开以查看图片。 注意:了解更多关于如何在 WebIDE 中预览 HTML 文件的信息。
使用 Width 和 Height 设置固定图片尺寸 在这一步中,你将学习如何使用 HTML 中的 width 和 height 属性来控制图片的大小。这些属性允许你指定图片的精确尺寸,从而有助于改善页面布局和加载性能。 打开你在上一步中创建的 images.html 文件。我们将修改现有的图片并添加更多图片,以演示不同的尺寸设置技术。 HTML 提供了两个属性来设置图片尺寸: width:以像素为单位设置图片宽度 height:以像素为单位设置图片高度 让我们更新之前的图片并添加一些新的示例: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Image Dimensions</title> </head> <body> <!-- 原始图片,带有固定尺寸 --> <img src="https://file.labex.io/static/images/labex-logo-dark.png" alt="LabEx Logo" width="200" height="100" /> <!-- 另一个图片,带有不同尺寸 --> <img src="https://file.labex.io/static/images/labex-logo-dark.png" alt="LabEx Logo" width="300" height="150" /> <!-- 仅指定宽度的图片 --> <img src="https://file.labex.io/static/images/labex-logo-dark.png" alt="LabEx Logo" width="250" /> </body> </html> 关于图片尺寸的关键点: 尺寸以像素为单位指定 你可以设置宽度、高度或两者 如果仅指定一个尺寸,图片会按比例缩放 设置尺寸有助于防止图片加载时页面布局发生偏移 在网页浏览器中查看示例输出,将显示三个不同尺寸的图片。
使用已弃用的 Align 属性对齐图片 在这一步中,你将学习如何使用 HTML 中已弃用的 align 属性来定位图片。虽然现代网页设计使用 CSS 进行布局,但了解这种历史性的图片对齐方法仍然很重要。 打开之前步骤中的 images.html 文件,并修改它以演示不同的图片对齐方式: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Image Alignment</title> </head> <body> <p> <!-- 左对齐图片 --> <img src="https://file.labex.io/static/images/labex-logo-dark.png" alt="LabEx Logo" align="left" width="150" height="75" /> 这段文本将围绕左对齐的图片流动。 </p> <p> <!-- 右对齐图片 --> <img src="https://file.labex.io/static/images/labex-logo-dark.png" alt="LabEx Logo" align="right" width="150" height="75" /> 这段文本将围绕右对齐的图片流动。 </p> <p> <!-- 居中对齐图片 --> <img src="https://file.labex.io/static/images/labex-logo-dark.png" alt="LabEx Logo" align="middle" width="150" height="75" /> 这段文本与图片的中间对齐。 </p> </body> </html> align 属性支持三个主要值: left:将图片左对齐,文本围绕其流动 right:将图片右对齐,文本围绕其流动 middle:将图片与文本基线垂直对齐 重要说明: align 属性在 HTML5 中已被弃用 现代网页设计使用 CSS 的 float 或 flexbox 进行布局 保留此属性是为了历史理解 示例输出将显示图片在段落中的不同位置。 注意:Labby 对话框可能会遮挡右对齐的图片。
使用 Title 属性添加工具提示信息 在这一步中,你将学习如何使用 title 属性为图片添加工具提示信息。工具提示在用户将鼠标悬停在元素上时提供额外的上下文或描述。 打开之前步骤中的 images.html 文件,并修改它以演示工具提示的用法: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Image Tooltips</title> </head> <body> <!-- 带有简单工具提示的图片 --> <img src="https://file.labex.io/static/images/labex-logo-dark.png" alt="LabEx Logo" width="200" height="100" title="Official LabEx Logo" /> <!-- 带有更详细工具提示的图片 --> <img src="https://file.labex.io/static/images/labex-logo-dark.png" alt="LabEx Logo" width="200" height="100" title="LabEx Logo: Learn coding through hands-on labs" /> <!-- 多个带有不同工具提示的图片 --> <div> <img src="https://file.labex.io/static/images/labex-logo-dark.png" alt="Programming Logo" width="150" height="75" title="Web Development" /> <img src="https://file.labex.io/static/images/labex-logo-dark.png" alt="Cloud Logo" width="150" height="75" title="Cloud Computing" /> </div> </body> </html> 关于 title 属性的关键点: 在悬停在图片上时提供额外信息 适用于图片、文本和大多数 HTML 元素 通过提供上下文帮助改善用户体验 当鼠标悬停在元素上时,会显示在一个小弹出框中 当你在网页浏览器中悬停在这些图片上时,你将看到工具提示文本出现。
总结 在本实验中,参与者通过掌握图片嵌入和样式化的关键技术,学习了如何在 HTML 中有效地处理图片。实验涵盖了基本技能,例如使用 <img> 标签及其关键属性(如 src 和 alt)添加图片,以确保图片的正确显示和可访问性。学习者探索了通过 width 和 height 属性控制图片尺寸的方法,理解了这些设置如何影响页面布局和性能。 实践练习引导学生掌握了各种图片操作技术,包括设置固定图片尺寸、使用 title 属性添加工具提示信息,以及尝试不同的图片对齐策略。通过动手操作 HTML 图片元素,参与者获得了创建视觉吸引力强且响应式网页设计的宝贵经验。