web前端--1.如何将图片放到网站左上角? 2.如何设置网站图标？

本文链接：https://blog.csdn.net/weixin_44773989/article/details/108619993

本文介绍如何将图片放置在网页左上角以及设置网站图标的基础知识，适用于初学者。第一部分讲解了图片位置的调整方法，第二部分讨论了自定义网站Favicon的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一节课：
1.如何将图片放到网站左上角?
2.如何设置网站图标？
在这里插入图片描述


<!DOCTYPE html>  //文档类型说明：HTML5
<html>   //标记HTML文档的开始，language为en或zh-cn,搜索引擎
	<head>  //头元素
		<meta charset="utf-8" />  //元数据，网页的编码方式：utf-8,gb2312,gbk,unicode
		<title>我的网页</title>  //网页标题
	</head>
	<body>          //网页主题
		我的第一个网页！嘿嘿！
		<h1>标题1</h1>
		<h2>shiyuezheng</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>哈喽</h5>
		<!--p标签，
		不能换行，并且只能保留一个空格。
		添加空格：“&nbsp”
		换行： <br />
		 -->
		
		
		<!--格式设置：span; hr标签用来画一条横线-->
		<hr />   //画一条横线
		<p>我的第一个段落，
		用<span style="color: red;">P</span>标签写的哈哈哈好好玩！     //span中间内容是想设置字体颜色的内容
		</p>
		<p>我的第一个段落，<br />    //换行
			用&nbsp;&nbsp;空格      //空格
			换行，
		</p>
		
		<pre>我的第一个段落，保留原格式标签
		</pre>-->
		
		
		
		<hr />
	    <h1><span style="color:red;">web前端开发</span></h1>
	    <hr  />
	    <h3><span style="color:red;">HTML</span></h3>
	    <p>HTML超文本标记语言，构建网页结构</p>
	    <hr />
	    <h3><span style="color:red;">CSS</span></h3>
	    <p>CSS层叠样式表，构建网页样式</p>
	    <hr />
	    <h3><span style="color:red;">javaScript</span></h3>
	    <p>js脚本代码，构建网页行为构建网页行为</p>
	</body>
</html>      //标记HTML文档的结束


Ctrl+?:进行注释，若选中内容再按，则将选中内容注释掉
hr+tab:会自动生成<hr><hr />
br:换行
ol:有序列表
b：加粗
del :删除键
li：列标签（和ol是配对的）
ol:    li*5+tab:会快速出来
			<li>高数</li>
			<li>读写译</li>
			<li>视听说</li>
			<li>大学体育</li>
			<li>C语言基础</li>
h2*5+tab:快速出来
        <h1>标题1</h1>
		<h2>shiyuezheng</h2>
		<h3>标题3</h3>
		<h4>标题4</h4>
		<h5>哈喽</h5>




<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>在河大的一天</title>
		
		//更改网页图标样式
		<link rel="shortcut icon" href="img/rdn_523977a354b3b.jpg"> 
		
  		//百度的：
  		<link rel="icon" href="./mario.ico" type="image/x-icon"> 
  	
		//老师写的：..返回上级目录
		<link rel="shortcut icon" href="../img/mylogo.ico"/>
		
	</head>
	<body>
		<div>
		<h2>在河大的一天</h2>
		<hr width="80%" align="left" />
		<!--宽度：              对齐方式：左对齐-->
		
		//插入图片
		//px是像素，注意中间用等号，src是文件图片的位置
		
		<img src="img/rdn_523977a354b3b.jpg"  align="left" width="200px" alt="网络图片" title="图片示例"  />
		<p>早晨，当第一束阳光从窗外射进我的屋子时，新的一天便开始了，这
		是一个匆忙而愉快的一天，就这样开始了在晨<br />中，我们开始进行太极训练呼吸着新鲜的空气，我新
		的一天开始了！
		</p>
		<br />
		<br />
		<br />
		<ol>
			<li>高数</li>
			<li>读写译</li>
			<li>视听说</li>
			<li>大学体育</li>
			<li>C语言基础</li>
		
		</ol>
		<b>在晚上回去的过程中看到了一些垃圾食品</b>
		<br />
		<del>烤鱿鱼</del>
		<del>烤面筋</del>
		<del>串串香</del>
		<del>香肠</del>
	<p>这就是我在河大的一天，我在这里许下祝福，希望我们的明天会更好！</p>
	<pre>
	☆★☆    ☆★☆   ☆★☆  ☆★☆
	☆  期 ☆☆ 待 ☆☆ 明 ☆☆天☆
	☆★☆■□■☆★◆◇◁♤♤☆□◆
	</pre>
		</div>
	</body>
</html>