从零认识网页中的图片插入

第六章 图像与多媒体文件

6.1 网页插入图片的基础与进阶

6.1.1 图片的插入及路径选择

一、插入图片的基本语法

<img src="cat.jpg" alt="一只可爱的猫">

• <img>标签：专用来插入图片
• src属性：图片文件位置（路径）
• alt属性：图片无法显示时，用来解释图片内容

二、图片路径怎么写？

• 绝对路径：写完整的网址
  如：src="https://img.example.com/cat.jpg"
• 相对路径：和你的网页文件在同一个文件夹
  如：src="cat.jpg"
  如果图片在“images”文件夹里：src="images/cat.jpg"

三、图片格式及选择

• 常见格式：jpg、png、gif、svg
• 区别：jpg压缩小、png支持透明、gif可动图、svg适合矢量图

6.1.2 图片的属性与美化

一、图片尺寸调整

<img src="cat.jpg" alt="小猫" width="200" height="150">

• width、height：设置图片宽高（像素px）

二、图片说明与提示

• alt：加载失败时显示
• title：鼠标悬停时显示

<img src="cat.jpg" alt="小猫" title="这是小花猫">

三、图片边框与圆角

用CSS美化：

<img src="cat.jpg" style="border:2px solid #6699ff; border-radius:20px;">

• border：边框宽度和颜色
• border-radius：圆角，数值越大越圆

四、图片阴影和特效

<img src="cat.jpg" style="box-shadow:2px 2px 10px #888;">

• box-shadow：给图片加阴影

6.1.3 图片的排列与位置控制

一、让图片居中

<div style="text-align:center;">
  <img src="cat.jpg">
</div>

或用CSS：

<img src="cat.jpg" style="display:block; margin:auto;">

二、图片与文字混排（头像+用户名）

<img src="avatar.jpg" style="vertical-align:middle; width:40px;">
<span>小明</span>

• vertical-align:middle让图片和文字垂直居中排放

三、让图片左浮动/右浮动

<img src="cat.jpg" style="float:left; margin-right:20px;">
<p>这是一段介绍文字。</p>

• 图片浮到左边，文字环绕在右边

四、图片边距（margin）

<img src="cat.jpg" style="margin:10px 20px 10px 20px;">

• 四个值分别是上右下左边距

6.1.4 图片透明度与鼠标特效

一、让图片半透明

<img src="cat.jpg" style="opacity:0.5;">

• opacity范围0~1，越小越透明

二、鼠标悬停变透明

<img src="cat.jpg" style="transition:opacity 0.5s;" onmouseover="this.style.opacity=0.5" onmouseout="this.style.opacity=1">

• 鼠标放上去变透明，移开恢复

6.1.5 图片的热点区域（Image Map）

一、热点图片概念

• 在一张图片上划分不同的可点击区域，点击跳转不同页面

二、代码示例（中国地图热点导航）

<img src="china-map.jpg" usemap="#chinamap" alt="中国地图">
<map name="chinamap">
  <area shape="rect" coords="50,50,150,150" href="beijing.html" alt="北京">
  <area shape="circle" coords="300,120,40" href="shanghai.html" alt="上海">
  <area shape="poly" coords="400,160,420,180,410,200,390,180" href="guangzhou.html" alt="广州">
</map>

• shape：区域形状（rect矩形、circle圆形、poly多边形）
• coords：坐标（像素点，具体怎么填可以用PS、在线工具辅助）
• href：点击后跳转链接

6.2 网页上的滚动文字效果

6.2.1 用<marquee>标签实现滚动文字（入门法）

<marquee direction="left" scrollamount="6">欢迎访问我的主页！</marquee>

• 文字会从右往左滚动
• direction：滚动方向（left/right/up/down）
• scrollamount：速度（越大越快）

6.2.2 用CSS动画实现滚动文字（推荐标准法）

<div class="scroll-text">欢迎来到我的网站！</div>
<style>
.scroll-text {
  width: 400px; overflow: hidden; white-space: nowrap;
  animation: scroll-left 8s linear infinite;
}
@keyframes scroll-left {
  0%   {transform: translateX(100%);}
  100% {transform: translateX(-100%);}
}
</style>

• animation：动画名、时间、循环
• @keyframes：定义滚动动画

6.2.3 滚动文字样式与高级参数

• 可以设置文字颜色、字体、背景

<marquee style="color:red; font-size:24px; background:yellow;">滚动提示</marquee>

• CSS动画用color、font-size等设置样式

6.3 网页嵌入音频和视频

6.3.1 用<embed>标签插入音视频（传统法）

<embed src="music.mp3" width="400" height="50">
<embed src="video.mp4" width="600" height="400">

• 老式方法，兼容性一般

6.3.2 推荐用<audio>和<video>标签插入多媒体

插入音乐播放器

<audio src="music.mp3" controls></audio>

• controls：显示播放、暂停按钮

插入视频播放器

<video src="movie.mp4" controls width="400" poster="cover.jpg"></video>

• poster：视频未播放时的封面图片

更多属性

• autoplay：自动播放
• loop：循环播放
• muted：静音

网络音视频

<video src="https://www.example.com/video.mp4" controls></video>

6.3.3 嵌入第三方内容

• 比如嵌入地图、调查问卷、其他网页

<iframe src="https://www.baidu.com" width="600" height="300"></iframe>

• <iframe>可以嵌入其他网页内容

6.4 思政案例——中国影响世界的十大杰出发明创造

<!doctype html>
<html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>中国影响世界的十大杰出发明创造</title>
       <style type="text/css">
          #page {margin: 0 auto;text-align: center;}
          .year-mar {width: 1014px;height: 35px;padding: 5px 0;margin: 0 auto;}
          .year-mar img {float: left;}
          .year-mar marquee {color: red;font-size: 18px;position: relative;}
          ul {list-style-type: none;width: 910px;text-align: left;}
          li {display: inline;font-size: 24px;margin: 0 18px;}
          a:visited,a:link,a:active {text-decoration: none;color: #111111;}
          a:hover {text-decoration: none;color: #800080;}
          .main-div {border: 2px solid #FAFAFA;padding: 5px;margin: 0 auto;
             width: 1000px;height: 360px;box-shadow: 0 0 5px gray;}
       </style>
    </head>
    <body>
       <div id="page">
          <div><img src="image-6-4-logo.jpg" alt=""></div>
          <div class="year-mar">
             <marquee width="914px" height="35px;">
                <a href="https://baijiahao.baidu.com/s?id=1687416214243531150&wfr=spider&for=pc" target="_blank"> 中国影响世界的十大杰出发明创造 </a>
             </marquee>
          </div>
          <div class="main-div">
             <ul>
                <li><a href="embed-6-4-1.html" target="embed">汉字激光照排系统</a></li>|
                <li><a href="embed-6-4-2.html" target="embed">人工合成牛胰岛素</a></li>|
                <li><a href="embed-6-4-3.html" target="embed">陆相生油理论</a></li>|
                <li><a href="embed-6-4-4.html" target="embed">网购</a></li>|
                <li><a href="embed-6-4-5.html" target="embed">杂交水稻</a></li>|
                <li><a href="embed-6-4-6.html" target="embed">复方蒿甲醚</a></li>|
                <li><a href="embed-6-4-7.html" target="embed">人字形铁路</a></li>|
                <li><a href="embed-6-4-8.html" target="embed">侯氏制碱法</a></li>|
                <li><a href="embed-6-4-9.html" target="embed">数学机械化方法</a></li>|
                <li><a href="embed-6-4-10.html" target="embed">中国高铁</a></li>
             </ul>
             <embed name="embed" src="embed-6-4-1.html" type="text/html" width="1014px" height="350px">
          </div>
       </div>
    </body>
</html>