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

太过爱你忘了你带给我的痛 2022-06-18 04:24 229阅读 0赞

## 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>

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

<img src="yangzi.jpg" alt="杨紫" align="left" border="3" hspace="20" >
            <img src="yangzi.jpg" alt="杨紫" align="left" border="3" height="200">

**设置图片超链接**

**设置图像热区链接**

<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.背景音乐\\媒体文件 ###

### 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