html怎么插图

在HTML中，插入图片和视频非常简单，以下是详细的步骤和技术教程：,1、使用
<img>标签插入图片,在HTML中，我们可以使用
<img>标签来插入图片。
<img>标签有以下几个属性：,src：指定图片的路径，可以是相对路径或绝对路径。,alt：指定图片无法显示时的替代文本。,width和
height：指定图片的宽度和高度，可以省略，默认为原始大小。,title：指定鼠标悬停在图片上时显示的提示信息。,示例代码：,2、使用CSS样式调整图片,除了基本的
<img>标签属性外，我们还可以使用CSS样式来调整图片的外观，我们可以设置图片的边框、边距、背景等。,示例代码：,1、使用
<video>标签插入视频,在HTML中，我们可以使用
<video>标签来插入视频。
<video>标签有以下属性：,src：指定视频文件的路径，可以是相对路径或绝对路径。,controls：添加播放、暂停等控制按钮。,width和
height：指定视频播放器的宽度和高度，可以省略，默认为原始大小。,poster：指定视频播放器的封面图片，当视频未播放时显示该图片。,preload：指定页面加载时是否预加载视频，可选值有
none（不预加载）、
metadata（仅预加载元数据）和
auto（自动判断）。,loop：指定视频是否循环播放，可选值有
true（循环播放）和
false（不循环播放）。,muted：指定视频是否静音播放，可选值有
true（静音）和
false（非静音）。,autoplay：指定视频是否自动播放，可选值有
true（自动播放）和
false（不自动播放）。,objectfit：指定视频如何适应播放器容器，可选值有
contain（保持宽高比缩放至完全覆盖容器）、
cover（保持宽高比缩放至完全覆盖容器，但保证视频主体完整显示）和
fill（拉伸视频以填充整个容器）。,crossorigin：指定跨域资源共享策略，可选值有
anonymous（匿名访问）和
usecredentials（携带凭据访问）。,示例代码：,2、使用JavaScript控制视频播放,除了基本的
<video>标签属性外，我们还可以使用JavaScript来控制视频的播放，我们可以监听视频的播放、暂停等事件，并执行相应的操作。,示例代码：,
,<img src=”example.jpg” alt=”示例图片” width=”300″ height=”200″>,<!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>,<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>,<!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>,

html怎么插图

相关推荐

热门文章