web前端从零开始学习（html5) 三

最新推荐文章于 2022-08-27 10:39:15 发布

小丑尽欢

最新推荐文章于 2022-08-27 10:39:15 发布

阅读量125

点赞数 1

分类专栏： web前端文章标签： html5

本文链接：https://blog.csdn.net/weixin_43799332/article/details/112784213

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

终身学习
学习视频：b站千峰教育web前端教程
一.图片的使用
1.建立目录003图片的使用
2.搜集图片放入新建目录imgages
3.建立index.html
4.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片的使用</title>
		<img src="imags/1.jpg"width="100px">
		<img src="imags/2.jpg"width="100px">
		<img src="imags/3.jpg"width="100px">
		<img src="imags/4.jpg"width="100px">
		<img src="imags/1.jpg"width="100%">
		<img src="imags/2.jpg"width="100%">
		<img src="imags/3.jpg"width="100%">
		<img src="imags/4.jpg"width="100%">
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

二.图片的获取

三.补充知识
1.建立目录004补充知识
2.index.html
3.

ul type="disc">
			<li>海底捞上市了！</li>
			<li>我又吃上市了一个？！</li>
			<li>再去吃一顿庆祝一下。</li>
		</ul>

		<ul type="circle">
			<li>海底捞上市了！</li>
			<li>我又吃上市了一个？！</li>
			<li>再去吃一顿庆祝一下。</li>
		</ul>

		<ul type="square">
			<li>海底捞上市了！</li>
			<li>我又吃上市了一个？！</li>
			<li>再去吃一顿庆祝一下。</li>
		</ul>

结果：在这里插入图片描述
知识点：
代码：

<ol type="1">
			<li>北冥有鱼</li>
			<li>其名为鲲</li>
			<li>鲲之大</li>
			<li>一锅炖不下</li>
		</ol>

		<ol type="a">
			<li>北冥有鱼</li>
			<li>其名为鲲</li>
			<li>鲲之大</li>
			<li>一锅炖不下</li>
		</ol>
		<ol type="A">
			<li>北冥有鱼</li>
			<li>其名为鲲</li>
			<li>鲲之大</li>
			<li>一锅炖不下</li>
		</ol>
		<ol type="i">
			<li>北冥有鱼</li>
			<li>其名为鲲</li>
			<li>鲲之大</li>
			<li>一锅炖不下</li>
		</ol>
		<ol type="I">
			<li>北冥有鱼</li>
			<li>其名为鲲</li>
			<li>鲲之大</li>
			<li>一锅炖不下</li>
		</ol>

结果：
在这里插入图片描述
知识点：type 类型

图片属性

<img src="imgs/2.png" title="鼠标划上去时的提示" alt="图片加载失败后的文字">

文字：

<del>给文字增加删除线</del>
把文字变成上标，10<sup>2</sup>
<u>给文字加下划线</u>
<center>把文字居中</center>

四.百度云盘目录
1.建立目录005百度云盘
2.建立子目录img,one,two。
3.
one.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/baidu.jpg" >
		<p>
			<a href="../demo.html">
				<img src="../img/return.jpg" height="25px">
			</a>
		</p>
		<p>
			<img src="../img/ai.png" width="60px">
			<img src="../img/doc.png" width="60px">
			<img src="../img/ai.png" width="60px">
			<img src="../img/doc.png" width="60px">
		</p>
	</body>
</html>

demo.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
      <img src="img/baidu.jpg" width="100%">
	  <p>
		  <a href="one/one.html">
			  <img src="img/file.png" width="60px">one
		  </a>
		  <a href="two/two.html">
		  	<img src="img/file.png" width="60px">two
		  </a>
	  </p>
    </body>
</html>

two.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/baidu.jpg" >
		<p>
			<a href="../demo.html">
				<img src="../img/return.jpg" height="25px">
			</a>
		</p>
		<p>
			<a href="three/three.html">
				<img src="../img/file.png" width="60px">three
			</a>
			
			<img src="../img/ai.png" width="60px">
			<img src="../img/doc.png" width="60px">
			<img src="../img/ai.png" width="60px">
			<img src="../img/doc.png" width="60px">
		</p>
	</body>
</html>

知识点：基本没什么知识点，主要是上级目录 ../

小丑尽欢

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端从零开始学习（html5) 三

终身学习学习视频：b站千峰教育web前端教程一.图片的使用1.建立目录003图片的使用2.搜集图片放入新建目录imgages3.建立index.html4.<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图片的使用</title> <img src="imags/1.jpg"width="100px"> <img s
复制链接

扫一扫

专栏目录