HTML图片与声音标志使用教程
需积分: 9 167 浏览量
更新于2024-10-02
收藏 663KB DOC 举报
"该文档是关于HTML中图片和声音标志使用的教程，主要涵盖了HTML标准中的<img>和<embed>标签，以及它们的相关属性。通过案例分析和实践练习，帮助学习者掌握如何在网页中插入图片和声音。"
在HTML中，图片的插入通常使用`<img>`标签来实现。`<img>`标签是自闭和的，它的`src`属性用于指定图片的路径和文件名，确保浏览器能正确找到并加载图片。例如，`<img src="0374.jpg">`将插入名为"0374.jpg"的图片。
`align`属性用于设置图片与周围文字的对齐方式，可以取值如`left`、`right`、`middle`等。`border`属性定义图片的边框宽度，`vspace`和`hspace`分别用于设置图片与文字的垂直和水平间距。`width`和`height`属性则用于调整图片的显示尺寸。`alt`属性至关重要，当图片无法加载时，浏览器会显示`alt`属性设定的文字，提供替代信息。
例如，以下代码将插入一个宽度400像素、高度280像素，并且垂直居中的图片：
```html
<img src="0374.jpg" width="400" height="280" align="middle">
```
此外，文档还提到了将图片设为背景的方法，通过`background`属性设置在`<body>`标签中，如`<body background="11.gif" bgproperties="fixed">`，这里的`bgproperties`属性可用来设定背景图片是否固定。
对于声音的插入，HTML5引入了`<audio>`标签，但在早期版本中，可能会使用`<embed>`标签结合`dynsrc`属性来实现。例如：
```html
<img dynsrc="1.wmv" width="">
```
然而，这并不是标准做法，现代网页开发更多使用`<audio>`标签配合`src`属性来插入音频文件。
这个教学项目旨在让学生理解和熟练运用HTML中的图片和声音标记，通过实际操作提升其在网页设计中的应用能力。
计算机科学与技术系理论课教案—《网页设计》
教学项目三 图片与声音标志的使用
【教学内容】
讲解 标准中的图片及声音标志
【教学目的】
使学生掌握图片标志声音标志及相应的属性学会利用标志在网页中插入声音与图
片
【教学重点】
标志的使用
标志的使用
【教学难点】
理解 标志和 标志中属性的意义
【教学方式】
案例分析式、练习式相结合
一、 图片标志的使用
．语法
图片文件路径及名称
与 配合使用的属性：
指定图片所在位置及文件名
设置文字与图片的对齐方式
设定图片外框
设定图片与文字垂直方向间隔
设定图片与文字水平方向音隔
!调整图片宽度
!调整图片高度
!浏览器无法正常显示图片时，显示 ! 指定的文字
例 ：
插入图片，宽度 "##，高度 $#，垂直居中对齐
!
!!图片插入例子%!!
%
&
这是使用 插入的图片%
'"
#()"* !$##!"#
%&
%!
下载后可阅读完整内容，剩余5页未读，立即下载
2022-05-29 上传
2017-12-07 上传
2021-10-08 上传
134 浏览量
2021-12-05 上传
2024-06-26 上传
2021-09-27 上传
2010-04-25 上传
jiewiou3wio
- 粉丝: 1
- 资源: 6
我的内容管理
展开
最新资源
- Angular实现MarcHayek简历展示应用教程
- Crossbow Spot最新更新 - 获取Chrome扩展新闻
- 量子管道网络优化与Python实现
- Debian系统中APT缓存维护工具的使用方法与实践
- Python模块AccessControl的Windows64位安装文件介绍
- 掌握最新*** Fisher资讯，使用Google Chrome扩展
- Ember应用程序开发流程与环境配置指南
- EZPCOpenSDK_v5.1.2_build***版本更新详情
- Postcode-Finder：利用JavaScript和Google Geocode API实现
- AWS商业交易监控器：航线行为分析与营销策略制定
- AccessControl-4.0b6压缩包详细使用教程
- Python编程实践与技巧汇总
- 使用Sikuli和Python打造颜色求解器项目
- .Net基础视频教程：掌握GDI绘图技术
- 深入理解数据结构与JavaScript实践项目
- 双子座在线裁判系统：提高编程竞赛效率
