HTML插图指南：学会html插图的基本方法_网络推广

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

（图片来源网络，侵删）

如何插入和调整图片在HTML中？

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

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

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

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

width和height：指定图片的宽度和高度，可以省略，默认为原始大小。

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>

如何插入和控制视频在HTML中？

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（携带凭据访问）。

示例代码：

<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>