HTML基础——图像与多媒体文件（一）

最新推荐文章于 2021-09-12 16:36:29 发布

JEYMING

最新推荐文章于 2021-09-12 16:36:29 发布

阅读量606

点赞数

分类专栏： Web程序设计

本文链接：https://blog.csdn.net/jeyming/article/details/80286274

版权

Web程序设计专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!--
    图像与多媒体文件
        图像、滚动文字、背景音乐等多媒体文件在HTML使用的方法
    2018.01.06
-->
<html>
    <head>
        <meta charset="UTF-8" />
        <title>图像与多媒体文件</title>
        <style type="text/css">
            ul{
                list-style-type:none;
            }
            li{
                float:left;
                padding:0 20px;
            }
        </style>
    </head>
    <body>
        <!--
            6.1 图像
            6.1.1   插入图像
            6.1.2   设置图像的替代文本
                <img src="URL" alt="替代文字" >
                    --src、alt为必选属性，其余为可选属性
                        src，指source，图像的URL值
                        alt，规定图像的替代文字
                    属性名 值                                       说明
                    --------------------------------------------------------------
                    name    text                                    规定图像的名称
                    height  pixels、%                                定义图像的高度
                    width   pixels、%                                定义图像的宽度
                    align   top|middle|bottom|left|center|right     规定如何根据周围文本来排列图像，分水平、垂直两个方向
                    border  pixels                                  定义图像周围的边框
                    hspace  pixels                                  定义图像左侧和右侧的空白
                    vspace  pixels                                  定义图像顶部和底部的空白
                    usemap  URL                                     将图像定义为客户端图像的映射
        -->
        <h3>插入图像</h3>
        <center>
            <h4>网页中插入图像</h4>
            <hr color="#66ff33" width="60%" />
            <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度搜索" title="Baidu" ><br />
            <img src="bd_logo1.png" alt="百度搜索" title="Baidu" >
            <p align="center">验证代替文本</p>
        </center>
        <br />
        <hr width="100%" size="50" color="#000" align="right" noshade />
        <br />
        <!--
            6.1.3   设置图像的高度和宽度
                <img src="URL" alt="" width="value" height="value">
            6.1.4   设置图像的边框
                <img src="URL" alt="" width="value" height="value"  border="value1">
                    value1：为边框线的宽度，用数字表示，单位为像素
        -->
        <h3>图像的高度和宽度、边框</h3>
        <h4 align="center">设置图像宽度、高度及边框</h4>
        <hr color="#6600cc">
        <ul>
            <li><img src="https://www.baidu.com/img/bd_logo1.png" alt="原图"></li>
            <li><img src="https://www.baidu.com/img/bd_logo1.png" alt="宽度为50px，高度为30px，边框为5" width="50px" height="30px" border="5"></li> 
            <li><img src="https://www.baidu.com/img/bd_logo1.png" alt="宽度为50px，高度为30px，边框为10" width="50px" height="30px" border="10"></li> 
        </ul>
    </body>
</html>

JEYMING

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML基础——图像与多媒体文件（一）

&lt;!-- 图像与多媒体文件图像、滚动文字、背景音乐等多媒体文件在HTML使用的方法 2018.01.06--&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;图像与多媒体文件&lt;/title&gt;
复制链接

扫一扫