网站建设学习（三）——HTML图片、音频、视频标签

最新推荐文章于 2024-08-03 22:21:30 发布

QJM1995

最新推荐文章于 2024-08-03 22:21:30 发布

阅读量768

点赞数

文章标签： html 教程标签网站

本文链接：https://blog.csdn.net/QJM1995/article/details/86387972

版权

上一篇介绍了表格以及超链接的使用，这一篇主要介绍如何在网页中嵌入图片、音频、视频资源，在运行代码之前请在D盘放置三个文件1.png，1.mp3，1.mp4，否则代码无法执行。

<!--html： hyper text markup language 超文本标记语言

    超级文本：可以对文本进行设计，布局，装饰等等操作
    标记：标签的各种布局，可以进行文本设计，标签包括开始与结束
-->


<!--开始设计一个HTML页面-->

<html>
<!--  标签html：内部包含整个HTML页面，所有的设计均在当前的html标签内部进行-->
    <head>
    <!--整个文件的头部，里面包括一些属性供浏览器识别解析，对用户不可见-->

        <title>标题</title>
        <!--标签title，说明整个页面的标题，最终显示在浏览器加载页面的标签页-->

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <!--告诉浏览器以utf-8的码表进行解码，防止中文乱码，meta标签是无标签体标签，结束在开始标签后加反斜杠，即空标签-->

        <meta name="keywords" content="html,展示"/>
        <!--展示此网页的关键词，供搜索引擎使用，以“,”分开，其中关键词个数为权重，越多权重越低，一般为3到5个-->

        <meta name="description" content="html编程学习"/>
        <!--网页描述，展示在搜索引擎的网页的索引页面-->
    </head>


    <body>
    <!--整个文件的体，设计元素在这个部分中，最终展示给用户-->

    <!--图片，音频，视频标签，主要为嵌入资源的标签，但是要想获得演示结果还需要在对应目录下放置对应名称的文件-->
        <figure>
            <figcaption>媒体组的名字</figcaption>
            <p>这是一张图片</p>
            <img src="D:/1.png"  usemap="#map" width="400px" height="400px" alt="无图片资源" title="png图片"/>
        </figure>      
        <map name="map" id="map">
            <area shape="rect" coords="0,0,100,100" href="http://www.baidu.com" target="_blank" alt="百度"/>
            <area shape="circle" coords="50,50,100" href="http://www.baidu.com" target="_blank" alt="百度"/>
        </map>
        <!--figure标签规定了一个独立的流内容，即内部的信息与图片相关可以是介绍等，figcaption为figure命名，若仅引用图片则这一标签可以忽略-->
        <!--src属性放的是图片位置，usemap类似于锚点定位map热点，根据浏览器不同会识别id或者name，所以热点map里两个属性全写上-->
        <!--width设定图片宽度，height设定图片高度，alt是当文件资源不存在时所显示的文字提示，title设定鼠标放置图片上时的文字提示-->
        <!--map指的是地图，area指定的热点区域，就是在图片中画出固定范围，这个范围有着固定的操作，以id或name作为标识-->
        <!--shape设定区域的形状，coords圆形设定原点和半径，方形设定对角线的坐标，href指点击此区域时的跳转链接，target指跳转是在本页面还是新页面显示，alt同上-->

        <audio src="D:/1.wav">不支持音频</audio>
        <audio controls>
            <source src="D:/1.ogg" type="audio/ogg"/>
            <source src="D:/1.mp3" type="audio/mpeg"/>
                不支持音频
        </audio>
        <!--audio标签引入音频，source标签定义文件源，即存在多个不同格式的相同文件，浏览器会选择其支持的文件,否则显示不支持--><br/>

        <video controls>
            <source src="D:/1.mp4" type="video/mp4"/>
            <source src="D:/1.ogg" type="video/ogg"/>
                不支持视频
        </video>
        <!--视频标签，作用同音频标签-->

    </body>

</html>

网页编程规范参考链接：w3school 在线教程

这其中有不合适或者不正确的地方欢迎指正，我的QQ号码：2867221444（乔金明），谢谢，也可以相互交流下，备注信息随意，只要能看得出是开发者或者学习者即可。

QJM1995

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网站建设学习（三）——HTML图片、音频、视频标签

上一篇介绍了表格以及超链接的使用，这一篇主要介绍如何在网页中嵌入图片、音频、视频资源，在运行代码之前请在D盘放置三个文件1.png，1.mp3，1.mp4，否则代码无法执行。&lt;!--html： hyper text markup language 超文本标记语言超级文本：可以对文本进行设计，布局，装饰等等操作标记：标签的各种布局，可以进行文本设...
复制链接

扫一扫