您的位置：首页 > Web前端

前端学习笔记一：HTML（3）调整插入图片的大小+前两次学习的简单应用

2020-07-02 22:17 113 查看

继续第三篇。
说起来是不是要更得勤快点啊（
这次试试讲两段。

第三个 我管它叫百度图片+一个新的页面跳转方式
代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<a href="test01.html">跳转测试（原地跳转）</a>
<a href="test01.html" target="_blank">跳转测试（新页面跳转）</a>
<img src="./img/4.jpg" width="200px" />
<img src="./img/6.jpg" width="200px" />
<img src="./img/1.jpg" width="200px" />
<img src="img/2.jpg" width="200px" />
<img src="./img/3.jpg" width="200px" />
<img src="./img/5.jpg" width="200px" />
<img src="./img/7.jpg" width="200px" />
<img src="./img/9.PNG" width="200px" />
</body>
</html>

运行结果如下：

就是一群照片按照从左到右的顺序排列，一行塞不下了就自动换到下一行，还有两种链接跳转方法测试。默认情况下图片的排序就是如本例所示。

好像没有新的标签内容（（ ，但是可以看到图片的大小是统一的，高度可能有不同，但是宽度是保持一致的。因为给这些图片都设置了相应的属性，例如这里就是利用width属性设置图片的宽度为200像素（px）。要注意的就是为了避免图片变形，建议调整图片大小的时候只调整宽与高（即height属性）的其中一项大小，或者按照下面会提到的以百分比为单位。

本来还想再讲一些图片各种摆放姿势的示例的，但是有一些已经要用到style属性或者CSS属性表了，就到时候再说吧。~才不是要偷懒之类的~ 不过可以先提一下——图片上也能创建链接，直接怼在a标签内容里就行了，还可以为了方便点击链接为图片加上边框，使用相应的border（单位也是px）属性即可。
示例：

<a href="test01.html" target="_blank">跳转测试（新页面跳转）
<img src="./img/4.jpg" width="200px" />
</a>

然后运行后就能看到这张图片能够点击并进入一个新链接了。

新的网页跳转方法，就是相当于在浏览器的“新标签内打开该链接”功能，只需在a标签里添加目标**“target”属性并设置属性值为_blank**即可，示例上面就有了。

第四段。。太**简单了就不单独放上来了，主要意思就是告诉我们图片的大小调整也能以百分比作为单位。即：

<img src="01.png" width="100%" />

有点短，再加一个好了。我管它叫做百度云，综合运用一下前两次学习的内容。
代码如下：
主界面：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>百度云盘</title>
</head>
<body>
<img src="img/主界面.png" width="100%"/>
<p>
<a href="one/one.html">
<img src="img/文件夹.png" />one
</a>
<a href="two/two.html">
<img src="img/文件夹.png" />two
</a>
</p>
</body>
</html>

第一页（具体指向请看运行结果）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>one</title>
</head>
<body>
<img src="../img/主界面.png" width="100%"/>
<p>
<a href="../">
<img src="img/返回箭头.png"/>
</a>
</p>
<p>
<img src="img/光盘.png" />&nbsp;
<img src="img/文件.png" />&nbsp;
<img src="img/压缩包.png" />&nbsp;
</p>
</body>
</html>

第二页：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<img src="../img/主界面.png" width="100%"/>
<p>
<a href="../">
<img src="../one/img/返回箭头.png" />
</a>
</p>
<p>
<a href="three/three.html">
<img src="../img/文件夹.png" />three &nbsp;
</a>
<img src="img/安卓.png" />&nbsp;
<img src="img/电子书.png" />&nbsp;
<img src="img/文档.png" />&nbsp;
</p>

</body>
</html>

第三页：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<img src="../../img/主界面.png" width="100%"/>
<p>
<a href="../two.html">
<img src="../../one/img/返回箭头.png" />
</a>
</p>
</body>
</html>

运行结果（按顺序依次为主页面，第一~三页）：



就是通过模拟一个文件系统来练习实现网页的跳转，注意图片的文件位置别搞错了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航