关于html怎么插图。

在HTML中,插入图片和视频非常简单,以下是详细的步骤和技术教程:

html怎么插图

(图片来源网络,侵删)

插入图片

1、使用<img>标签插入图片

在HTML中,我们可以使用<img>标签来插入图片。<img>标签有以下几个属性:

src:指定图片的路径,可以是相对路径或绝对路径。

alt:指定图片无法显示时的替代文本。

widthheight:指定图片的宽度和高度,可以省略,默认为原始大小。

title:指定鼠标悬停在图片上时显示的提示信息。

示例代码:

<img src="example.jpg" alt="示例图片" width="300" height="200">

2、使用CSS样式调整图片

除了基本的<img>标签属性外,我们还可以使用CSS样式来调整图片的外观,我们可以设置图片的边框、边距、背景等。

示例代码:

<!DOCTYPE html>
<html>
<head>
<style>
  img {
    border: 2px solid black;
    margin: 10px;
    backgroundcolor: lightgray;
  }
</style>
</head>
<body>
<img src="example.jpg" alt="示例图片" width="300" height="200">
</body>
</html>

插入视频

1、使用<video>标签插入视频

在HTML中,我们可以使用<video>标签来插入视频。<video>标签有以下属性:

src:指定视频文件的路径,可以是相对路径或绝对路径。

controls:添加播放、暂停等控制按钮。

widthheight:指定视频播放器的宽度和高度,可以省略,默认为原始大小。

poster:指定视频播放器的封面图片,当视频未播放时显示该图片。

preload:指定页面加载时是否预加载视频,可选值有none(不预加载)、metadata(仅预加载元数据)和auto(自动判断)。

loop:指定视频是否循环播放,可选值有true(循环播放)和false(不循环播放)。

muted:指定视频是否静音播放,可选值有true(静音)和false(非静音)。

autoplay:指定视频是否自动播放,可选值有true(自动播放)和false(不自动播放)。

objectfit:指定视频如何适应播放器容器,可选值有contain(保持宽高比缩放至完全覆盖容器)、cover(保持宽高比缩放至完全覆盖容器,但保证视频主体完整显示)和fill(拉伸视频以填充整个容器)。

crossorigin:指定跨域资源共享策略,可选值有anonymous(匿名访问)和usecredentials(携带凭据访问)。

示例代码:

<video src="example.mp4" controls width="300" height="200">
  <source src="example.ogg" type="video/ogg">
  <source src="example.webm" type="video/webm">
  您的浏览器不支持HTML5视频。
</video>

2、使用JavaScript控制视频播放

除了基本的<video>标签属性外,我们还可以使用JavaScript来控制视频的播放,我们可以监听视频的播放、暂停等事件,并执行相应的操作。

示例代码:

<!DOCTYPE html>
<html>
<head>
<script>
  function playVideo() {
    document.getElementById("myVideo").play();
  }
</script>
</head>
<body>
<video id="myVideo" src="example.mp4" controls width="300" height="200">
  <source src="example.ogg" type="video/ogg">
  <source src="example.webm" type="video/webm">
  您的浏览器不支持HTML5视频。
</video>
<button onclick="playVideo()">播放视频</button> <button onclick="pauseVideo()">暂停视频</button> <button onclick="stopVideo()">停止视频</button>
<script>
  function pauseVideo() {
    document.getElementById("myVideo").pause();
  }
  function stopVideo() {
    document.getElementById("myVideo").pause(); // 暂停后立即停止播放,避免自动播放下一个视频片段的问题。
    document.getElementById("myVideo").currentTime = 0; // 将播放位置重置为开头。
  }
</script>
</body>
</html>

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/440746.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
夏雨夏雨订阅用户
上一篇 2024年6月24日 09:50
下一篇 2024年6月24日 09:51

相关推荐

  • 聊聊网站建站公司销售收入预测表。

    在当今的信息化社会,网站建站公司的销售收入预测表是一个重要的工具,它可以帮助企业预测未来的收入情况,从而做出更好的经营决策,本文将详细介绍如何制作一个网站建站公司的销售收入预测表。 我们需要明确预测的…

    2024年6月14日
    00
  • 网站建设中机房服务器的稳定最关键。

    互联网在中国已有超过20年的发展历史,现在,我国网民规模达7.10亿,普及率达到51.7%。绝大部分企业商家,乃至个人都逐渐意识到网站的重要性,纷纷搭建属于自己的网店商城、企业/个人网站。但是,他们往往只注重网…

    2022年7月3日
    098
  • 两点提高电商网站的交互性。

    电子商务网站建设比其他类型的网站建设更具互动性。这里从两个方面来讨论如何提高电子商务网站的互动性。 让顾客知道所付价格的细节。 就是在设计产品页面的时候,要详细列出产品价格,送货邮费等等。委婉地让用户…

    2022年9月10日
    0226
  • 点击软件真的那么神奇吗。

    点击软件真的有那么神奇吗?外链作弊被打击后,点击一下子跳进了seo的视线?从最开始的互点群,各大站长自行点击到现在点击软件的盛行。很多站长越来越了解点击。那么点击软件真的这么厉害吗? 那么,在了解点击软…

    2022年9月10日
    056
  • 企业网站建设需要准备哪些资料。

    企业网站分为两部分:需要准备的材料,以企业官网定制为例。 一、网站备案材料 网站备案材料包括以下几种: 1 .域名实名制认证,认证到法人名称或公司名称 2。空间主机的FTP(备案时需要验证) 3。企业营业执照复印件拍…

    2022年9月10日
    071
  • 分享正确的SEO优化可以吸引更多的自然流量到您的网站。

    SEO可以帮助每一位企业所有者,正确的SEO优化可以吸引更多的自然流量到您的网站。更多自然流量可以提高您的转化率并建立声誉。    有效的SEO优化可能是每个企业网络营销策略的重要组成部分。如果您热衷于解决SE…

    2022年12月6日
    00
  • 网站优化收录不稳定的因素有哪些。

    最近很多的人咨询网站优化收录不稳定的因素有哪些?那么,下面就由小编为大家介绍一下。 第一、文章内容质量低 首先讲到的还是原创,因为我大量的文章是通过采集获得的,虽然博客运气较好,权重还是有些,快照保持每…

    2022年10月30日
    019
  • 教你python数组的大小。

    在Python科学计算和数据分析中,NumPy库是一个非常重要的工具,它提供了高效的多维数组对象以及用于处理这些数组的工具,理解NumPy数组的大小和形状对于高效地使用这个库至关重要,以下是关于NumPy数组大小的详细介…

    2024年7月29日
    01

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息