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

本文介绍如何将图片放置在网页左上角以及设置网站图标的基础知识,适用于初学者。第一部分讲解了图片位置的调整方法,第二部分讨论了自定义网站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>
### 关于 UniApp 框架推荐资源与教程 #### 1. **Uniapp 官方文档** 官方文档是最权威的学习资料之一,涵盖了从基础概念到高级特性的全方位讲解。对于初学者来说,这是了解 UniApp 架构技术细节的最佳起点[^3]。 #### 2. **《Uniapp 从入门到精通:案例分析与最佳实践》** 该文章提供了系统的知识体系,帮助开发者掌握 Uniapp 的基础知识、实际应用以及开发过程中的最佳实践方法。它不仅适合新手快速上手,也能够为有经验的开发者提供深入的技术指导[^1]。 #### 3. **ThorUI-uniapp 开源项目教程** 这是一个专注于 UI 组件库设计实现的教学材料,基于 ThorUI 提供了一系列实用的功能模块。通过学习此开源项目的具体实现方式,可以更好地理解如何高效构建美观且一致的应用界面[^2]。 #### 4. **跨平台开发利器:UniApp 全面解析与实践指南** 这篇文章按照章节形式详细阐述了 UniApp 的各个方面,包括但不限于其工作原理、技术栈介绍、开发环境配置等内容,并附带丰富的实例演示来辅助说明理论知识点。 以下是几个重要的主题摘选: - **核心特性解析**:解释了跨端运行机制、底层架构组成及其主要功能特点。 - **开发实践指南**:给出了具体的页面编写样例代码,展示了不同设备间 API 调用的方法论。 - **性能优化建议**:针对启动时间缩短、图形绘制效率提升等方面提出了可行策略。 ```javascript // 示例代码片段展示条件编译语法 export default { methods: { showPlatform() { console.log(process.env.UNI_PLATFORM); // 输出当前平台名称 #ifdef APP-PLUS console.log('Running on App'); #endif #ifdef H5 console.log('Running on Web'); #endif } } } ``` #### 5. **其他补充资源** 除了上述提到的内容外,还有许多在线课程视频可供选择,比如 Bilibili 上的一些免费系列讲座;另外 GitHub GitCode 平台上也有不少优质的社区贡献作品值得借鉴研究。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值