7. 通过<img src="file:///C:/Users/Administrator/Desktop/test.png">在网页中显示一幅图片的弊端是什么?
时间: 2023-07-19 08:55:47 浏览: 39
使用`<img>`标签的`src`属性指向本地文件路径的方式在网页中显示图片的弊端主要有以下几点:
1. 可移植性差:该方式只适用于本地文件路径,网页在不同的设备上打开时,图片可能无法显示。
2. 安全性问题:网页加载本地文件路径的图片可能存在安全风险,恶意的网站可能利用该漏洞进行攻击。
3. 加载速度慢:网页加载本地文件路径的图片需要先将图片从本地读取到内存中,然后再显示出来,这会导致加载速度变慢。
因此,为了提高网页的可移植性和安全性,并且提高图片的加载速度,我们通常建议将图片上传至服务器,并使用`<img>`标签的`src`属性指向服务器上的图片路径。这样可以保证网页的兼容性和安全性,同时也可以提高图片的加载速度。
相关问题
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>美丽GO</title> <h1>美丽GO<h1> <style> .h1{ justify-content: center; } .wrapper { display: flex; justify-content: center; } #left { display: flex; list-style: none; margin: 0; padding: 0; } #left li { display: inline-block; margin-right: 10px; } #content { display: flex; flex-wrap: wrap; justify-content: center; } #content div { flex: 1; margin: 10px; } img { max-width: 100%; } </style> <script src="jquery.min.js"></script> <script> $(function() { // 1. 鼠标经过左侧的小li $("#left li").mouseover(function() { // 2. 得到当前小li 的索引号 var index = $(this).index(); console.log(index); // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了 // $("#content div").eq(index).show(); // 4. 让其余的图片(就是其他的兄弟)隐藏起来 // $("#content div").eq(index).siblings().hide(); // 链式编程; $("#content div").eq(index).show().siblings().hide(); }) }) </script> </head> <body> <div class="wrapper"> <ul id="left"> <li><a href="#">女靴</a></li> <li><a href="#">雪地靴</a></li> <li><a href="#">冬裙</a></li> <li><a href="#">呢大衣</a></li> <li><a href="#">毛衣</a></li> <li><a href="#">棉服</a></li> <li><a href="#">女裤</a></li> <li><a href="#">羽绒服</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">男包</a></li> </ul> <div id="content"> <div> <a href="#"><img src="images/女靴.jpg" /></a> </div> <div> <a href="#"><img src="images/雪地靴.jpg" /></a> </div> <div> <a href="#"><img src="images/冬裙.jpg" /></a> </div> <div> <a href="#"><img src="images/呢大衣.jpg" /></a> </div> <div> <a href="#"><img src="images/毛衣.jpg" /></a> </div> <div> <a href="#"><img src="images/棉服.jpg" /></a> </div> <div> <a href="#"><img src="images/女裤.jpg" /></a> </div> <div> <a href="#"><img src="images/羽绒服.jpg" /></a> </div> <div> <a href="#"><img src="images/牛仔裤.jpg" /></a> </div> <div> <a href="#"><img src="images/男包.jpg" /></a> </div> </div> </div> </body> </html>如何将其代码改成表格形式
可以将代码改成以下表格形式:
```
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>美丽GO</title>
<style>
.h1{ justify-content: center; }
.wrapper { display: flex; justify-content: center; }
#left { display: flex; list-style: none; margin: 0; padding: 0; }
#left li { display: inline-block; margin-right: 10px; }
#content { display: flex; flex-wrap: wrap; justify-content: center; }
#content div { flex: 1; margin: 10px; }
img { max-width: 100%; }
</style>
<script src="jquery.min.js"></script>
<script>
$(function() {
// 1. 鼠标经过左侧的小li
$("#left li").mouseover(function() {
// 2. 得到当前小li 的索引号
var index = $(this).index();
console.log(index);
// 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
// $("#content div").eq(index).show();
// 4. 让其余的图片(就是其他的兄弟)隐藏起来
// $("#content div").eq(index).siblings().hide();
// 链式编程;
$("#content div").eq(index).show().siblings().hide();
})
})
</script>
</head>
<body>
<table>
<tr>
<td>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">男包</a></li>
</ul>
<div id="content">
<div>
<a href="#"><img src="images/女靴.jpg" /></a>
</div>
<div>
<a href="#"><img src="images/雪地靴.jpg" /></a>
</div>
<div>
<a href="#"><img src="images/冬裙.jpg" /></a>
</div>
<div>
<a href="#"><img src="images/呢大衣.jpg" /></a>
</div>
<div>
<a href="#"><img src="images/毛衣.jpg" /></a>
</div>
<div>
<a href="#"><img src="images/棉服.jpg" /></a>
</div>
<div>
<a href="#"><img src="images/女裤.jpg" /></a>
</div>
<div>
<a href="#"><img src="images/羽绒服.jpg" /></a>
</div>
<div>
<a href="#"><img src="images/牛仔裤.jpg" /></a>
</div>
<div>
<a href="#"><img src="images/男包.jpg" /></a>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
```
<body onload="showImg()"> <div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/1.png" alt="图片1" width="500" height="300"/></li> <li><img src="images/2.png" alt="图片2" width="500" height="300"/></li> <li><img src="images/3.png" alt="图片3" width="500" height="300"/></li> <li><img src="images/4.png" alt="图片4" width="500" height="300"/></li> <li><img src="images/5.png" alt="图片5" width="500" height="300"/></li> </ul> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> </body>在此基础上使用jquery的siblings函数完成图片轮播
好的,以下是代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>使用jQuery实现图片轮播</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
/* 样式省略,与原代码一致 */
</style>
<script>
$(function() {
// 获取图片列表
var $list = $(".screen ul li");
// 获取图片数量
var len = $list.length;
// 获取每张图片的宽度
var width = $list.width();
// 设置ul的宽度
$(".screen ul").width(len * width);
// 定时器,控制图片轮播
var timer = null;
var index = 0; // 当前显示的图片下标
// 向左切换图片
$("#left").click(function() {
index--;
if (index < 0) {
index = len - 1;
}
slide();
});
// 向右切换图片
$("#right").click(function() {
index++;
if (index >= len) {
index = 0;
}
slide();
});
// 图片轮播函数
function slide() {
var left = -index * width;
$(".screen ul").stop().animate({left: left}, 500);
$list.eq(index).addClass("active").siblings().removeClass("active");
}
// 开始自动轮播
function start() {
timer = setInterval(function() {
index++;
if (index >= len) {
index = 0;
}
slide();
}, 2000);
}
// 停止自动轮播
function stop() {
clearInterval(timer);
}
// 鼠标移入停止自动轮播,移出开始自动轮播
$(".all").hover(function() {
stop();
}, function() {
start();
});
// 开始自动轮播
start();
});
</script>
</head>
<body onload="showImg()">
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="images/1.png" alt="图片1" width="500" height="300"/></li>
<li><img src="images/2.png" alt="图片2" width="500" height="300"/></li>
<li><img src="images/3.png" alt="图片3" width="500" height="300"/></li>
<li><img src="images/4.png" alt="图片4" width="500" height="300"/></li>
<li><img src="images/5.png" alt="图片5" width="500" height="300"/></li>
</ul>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</body>
</html>
```
在上面的代码中,我们使用了 jQuery 的 `siblings` 函数来切换图片的样式。每次切换图片时,我们都会给当前图片的 `li` 元素添加 `active` 类,并将其兄弟元素的 `active` 类移除,从而实现图片样式的切换。另外,我们还使用了 jQuery 的 `animate` 函数来实现图片的滑动效果。最后,我们通过鼠标移入停止自动轮播,移出开始自动轮播的方式来控制图片轮播的开始和停止。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
請你按照上面要求將這段代碼重新修改,左邊為菜單欄,右邊是表格登記<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常记录</title> <style> .main { display: flex; flex-direction: row; justify-content: space-between; align-items: center; float: right; } .info { display: flex; align-items: center; } .info span { margin-right: 10px; } </style> </head> <body> 首页 登记数据 查询数据 异常记录登记 <form method="post" action="/submit"> <label>确认线别:</label> <input type="text" name="line">
<label>确认日期:</label> <input type="date" name="date">
<label>异常机种:</label> <input type="text" name="model">
<label>异常现象:</label> <textarea name="issue"></textarea>
<label>生产日期:</label> <input type="date" name="prod_date">
<label>生产班别:</label> <input type="text" name="shift">
<label>生产线别:</label> <input type="text" name="prod_line">
<label>责任人:</label> <input type="text" name="responsible">
<input type="submit" value="提交"> </form> 欢迎访问
</body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)