html图片、背景音乐、滚动文字

最新推荐文章于 2021-06-04 15:47:52 发布

雾幻

最新推荐文章于 2021-06-04 15:47:52 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html

本文链接：https://blog.youkuaiyun.com/lb812913059/article/details/68070615

html 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了HTML中图像的各种属性及其使用方法，包括对齐方式、边距、边框等，同时涵盖了图像的超链接及热区链接设置，以及如何在网页中加入背景音乐和媒体文件等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html+css网站开发兵书——html部分

3.图像的各个属性

相对文字的对齐方式

<img src="图像文件的地址" align="相对文字的对齐方式">

top      图像顶部和同行的最高部分对齐（可能是文本的顶部，也可以是图像的顶部）
texttop     图像顶部和同行中最高的文本顶部对齐   常用于netscape   

middle   图像中部和同行的中部对齐（通常是文本的基线，并不是实际的行的中部）
absmiddle   图像中部和同行中最大项的中部对齐   常用于netscape

bottom   图像的底部和同行文本的底部对齐
absbottom   图像底部和同行中最低项对齐   常用于netscape 
baseline        图像底部和文本的基线对齐     常用于netscape

left     图像和左边界对齐（文本环绕图像）
right    图像和右边界对齐（文本环绕图像）
-------------------------------------------------------------------------------------
例题：
<font size="4" color="blue">故宫博物院</font>
    <img src="tupian.jpg" alt="" align="bottom" width="80">
    <img src="tupian.jpg" alt="" align="absmiddle" width="80">
    <img src="tupian.jpg" alt="" align="texttop" width="80">
    <hr size="2">
    左对齐效果：<br><br>
    <img src="tupian.jpg" alt="" align="left" width="150">
    北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。北京故宫以三大殿为中心，占地面积72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。<br>
    右对齐效果：<br><br>
    <img src="tupian.jpg" alt="" align="right" width="150">
    北京故宫于明成祖永乐四年（1406年）开始建设，以南京故宫为蓝本营建，到永乐十八年（1420年）建成。它是一座长方形城池，南北长961米，东西宽753米，四面围有高10米的城墙，城外有宽52米的护城河。紫禁城内的建筑分为外朝和内廷两部分。外朝的中心为太和殿、中和殿、保和殿，统称三大殿，是国家举行大典礼的地方。内廷的中心是乾清宫、交泰殿、坤宁宫，统称后三宫，是皇帝和皇后居住的正宫。[1] <br>
    <div style="height: 500px;"></div>

图像的页边距（水平边距）、垂直边距、边框

<!-- hspace 图片页边距(水平间距)  vspace 图片垂直间距  border 图片边框-->
        <img src="yangzi.jpg" alt="杨紫" align="left" border="3" hspace="20" >
        <img src="yangzi.jpg" alt="杨紫" align="left" border="3" height="200">

设置图片超链接

<a href="http://www.hao123.com" target="_blank">
    <img src="yangzi.jpg" alt="beautiful girl！" align="left" height= ="500" hspace="20" border="5" usemap="kk">
</a>

设置图像热区链接

<img src="yangzi.jpg" usemap="123">
        <map name="123">
            <area shape="热区形状" coords="热区坐标" href="链接地址" alt="">
        </map>

矩形区域rect：left  top  right  bottom                【从左开始顺时针方向，每个位置固定，不可替换】
圆形区域circle：center-x、center-y、tadius(半径)
链接地址可以为当前页面：#xxxx  或者 http
----------------------------------------------------------------------------------------------
<img src="yangzi.jpg" usemap="123">
        <map name="123">
            <area shape="rect" coords="100,100,200,200" href="http://www.baidu.com" alt="">
        </map>

<img src="yangzi.jpg" usemap="123">
        <map name="123">
            <area shape="circle" coords="150,150,100" href="http://www.baidu.com" alt="">
        </map>

4.背景音乐\媒体文件

<embed src="music.mp3" loop=“-1” autostart="True" width="0" height="0" ></embed>

<embed src="a.avi" width=300 height=250 autostart=True loop=2></embed>
<embed src="stiletto.swf" width=500><embed>

自动播放   autostart=True/False
hidden=True/False    是否隐藏媒体播放的面板

5.滚动文字

P100页

<marquee behavior="alternate" bgcolor="#788F07" >滚动文字2</marquee>

scroll 循环滚动，默认效果             
slide  只进行一次的滚动
alternate  来回交替进行滚动

<marquee  direction="down">滚动文字3</marquee>
 direction=down/up

 文字循环：loop=3
 滚动速度：scrollamount=20
 滚动延迟：scrolldelay
 滚动面积背景： width=背景宽度 height=背景高度

 设置文字与文字之间的空白空间：hspace   vspace