【前端三件套-HTML】图片，音频，视频，表格案例

最新推荐文章于 2023-04-11 23:32:33 发布

Aic山鱼

最新推荐文章于 2023-04-11 23:32:33 发布

阅读量255

点赞数 2

分类专栏：前端基础专栏文章标签： 1024程序员节

本文链接：https://blog.csdn.net/zhaochen1127/article/details/127489355

版权

前端基础专栏专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.图片格式

jpeg（jpg）

支持的颜色比较丰富
不支持透明效果
不支持动图
一般用来显示照片

gif

支持的颜色比较单一
支持简单透明
支持动图

png

支持的颜色丰富
支持复杂透明
不支持动图
专为网页而生

webp

这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
具备其他图片格式的所有优点，而且文件还特别的小
缺点：兼容性不好

内联格式

内联框架iframe，用于向当前页面中引入一个其他页面，

src指定要引入的网页的路径
frameborder指定内联框架的边框

<iframe
  src="https://www.qq.com"
  width="800"
  height="600"
  frameborder="0"
></iframe>

2.音频

audio 标签用来向页面中引入一个外部的音频文件

音频文件引入时，默认情况下不允许用户自己控制播放停止

属性：

controls：是否允许用户控制播放

autoplay：音频文件是否自动播放

如果设置了autoplay，则音乐打开页面时会自动播放

但是目前来讲大部分浏览器不会打开对音乐进行播放

loop音乐是否循环播放

<audio src="./source/audio.mp3" controls autoplay loop></audio>

source

除了通过src属性来指定外部文件的路径以外，还可以通过<source>元素来指定文件的路径

<audio controls autoplay loop>
  对不起，您的浏览器不支持播放音频！请升级浏览器！
  <source src="./source/audio.mp3" />
  <source src="./source/audio.ogg" />
</audio>

embed

IE8 下不支持audio元素，但是可以使用 <embed> 元素在文档中的指定位置嵌入外部内容。

这个内容是由外部应用程序或其他互动内容的来源提供的，如浏览器插件。

<embed src="./source/audio.mp3" />

2.视频

使用video标签来向网页中引入一个视频，使用方式和audio基本上是一样的

3.综合使用案例(table)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <h1>青春不常在</h1>
        <table width="500">
            <!-- 第一行性别 -->
            <tr>
                <td>
                    姓名
                </td>
                <td>
                    <input type="text">
                </td>
            </tr>
            <!-- 第二行生日 -->
            <tr>
                <td>性别：</td>
                <td>
                    <label><input type="radio" name="gender"> <img src="imagesss/men.png" alt=""> 男</label>
                    <label><input type="radio" name="gender"> <img src="imagesss/women.jpg" alt=""> 女</label>
                </td>
            </tr>
            <!-- 第三行所在地区 -->
            <tr>
            <td>生日：</td>
            <td><select>
                <option>--清选择年份--</option>
                <option>2001</option>
                <option>2002</option>
                <option>2003</option>
                <option>2004</option>
                <option>2005</option>
                <option>2006</option>
            </select>
            <select>
            <option>--请选择月份--</option>
            <option>一月</option>
            <option>二月</option>
            <option>三月</option>
            <option>四月</option>
            <option>五月</option>
            <option>六月</option>
            </select>
            <select>
            <option>--请选择日--</option>
            <option>一号</option>
            <option>二号</option>
            <option>三号</option>
            <option>四号</option>
            <option>五号</option>
            <option>号</option>
            </select>
            </td>
            </tr>
            <!-- 第四行 -->
            <tr>
                <td>
                    所在地区
                </td>
                <td>
                    <select>
                        <option>北京</option>
                        <option>上海</option>
                        <option>南京</option>
                        <option>河北</option>
                        <option>河南</option>
                        <option>西藏</option>
                    </select>
                </td>
            </tr>
            <tr>
                    <td>
                        婚姻状况
                    </td>
                    <td>
                        <label><input type="radio" name="som">离异</label>
                        <label><input type="radio" name="som">已婚</label>
                        <label><input type="radio" name="som">未婚</label>
                    </td>
                </tr>
                <tr>
                    <td>学历</td>
                    <td><select>
                        <option>小学</option>
                        <option>中学</option>
                        <option>大学</option>
                        <option>研究生</option>
                        <option>博士</option>
                    </select></td>
                </tr>
                <tr>
                    <td>中意的类型</td>
                    <td><input type="checkbox">可爱
                    <label><input type="checkbox">性感</label>
                    <input type="checkbox">清纯
                    <input type="checkbox">动人
                    </td>
                </tr>
                <tr>
                    <td>
                        自我介绍：
                    </td>
                    <td>
                        <textarea cols="100" rows="15"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>

写在最后

点赞👍：您的赞赏是我前进的动力！
收藏⭐：您的支持我是创作的源泉！
评论✍：您的建议是我改进的良药！
山鱼🦈的个人社区:欢迎大家加—— 山鱼社区

Aic山鱼

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端三件套-HTML】图片，音频，视频，表格案例

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
复制链接

扫一扫