使用HTML制作一个简单的个人主页_简单个人主页-程序员宅基地

技术标签：笔记 html

此网页是我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。
废话不多说，先来看效果
1、首页
在这里插入图片描述
这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。
2、我的相册

这一页主要是对大量图片进行一个排版的练习
3、我的计划

这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习
4、我的家乡
在这里插入图片描述

这一部分是对段落的细节处理、还有文本与图片结合的练习
5、我的故事

这个是对表格进阶版的练习，文字都是随便写的。这边其实还可以处理的更加合理，比如说大三下面那段文字可以从左向右排版，而不只是放在中间，由于时间关系，我就没有实现。

下面是代码

<html>
  <head>
     <title>马哈哈的个人主页</title>  
  </head>
     <body background="HTML\主页背景.jpg" >
        <h1><p align="center"><font color="black" face="楷体">自我介绍</font></p></h1>
        <hr size="3px" color ="red">
		<center>&nbsp&nbsp<a href="马哈哈.html">首页</a>
        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href="我的相册.html">我的相册</a>
	    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href="我的计划.html">我的计划</a>
		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href="我的家乡.html">我的家乡</a>
		&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href="我的故事.html">我的故事</a></center>
        <embed height="50" width="300" src="HTML\初见.mp3" />
		</br>
		</br>
		</br>
		</br>
		<center><font size ="5" face="楷体"  color="white">欢迎来到马哈哈的个人主页！！！</font></br>
		<font size ="5" face="楷体"  color="white">祝你每天都有好心情哦</font></br></center>
	 </body>
</html>

<html>
  <head>
     <title>我的相册</title> 
  </head>
     <body>
       <img src="HTML\m1.JPG" width="200px" height="260px">
	   &nbsp<img src="HTML\m2.JPG" width="200px" height="260px">
	   &nbsp<img src="HTML\m3.JPG" width="200px" height="260px">
	   &nbsp<img src="HTML\m4.JPG" width="200px" height="260px">
	   &nbsp<img src="HTML\m5.JPG" width="200px" height="260px">
	   &nbsp<img src="HTML\m6.JPG" width="200px" height="260px">
	   &nbsp<img src="HTML\m7.JPG" width="200px" height="260px">
	   &nbsp<img src="HTML\m8.JPG" width="220px" height="260px">
	   &nbsp<img src="HTML\m9.JPG" width="280px" height="260px">
	   &nbsp<img src="HTML\m10.JPG" width="270px" height="260px">
	   &nbsp<img src="HTML\m11.JPG" width="200px" height="260px">
	   &nbsp<img src="HTML\m1.JPG" width="200px" height="260px">
	   &nbsp<img src="HTML\m2.JPG" width="200px" height="260px">
	   &nbsp<img src="HTML\m3.JPG" width="200px" height="260px">
	   &nbsp<img src="HTML\m4.JPG" width="200px" height="260px">
	   
     </body>

</html>

<html>
  <head>
   <title>我的计划</title>
  </head>
  <body background="HTML\pink.jpg" <!--bgsound="HTML\天外来物.html"-->>
    <h2><p align="center"><font color="blue" face="黑体">我的计划</font></p></h2>
	<hr size="1px" color="black" widt"500px">
	<h2><font face="楷体" color="red" >大三计划</font></h2>
	<!--有序显示-->
	<ol type="1">
	<li>拿到计算机二级证书</li>
	<li>准备2021年英语六级考试
	<!--表格-->
	<!--每天背30个单词
	 一周至少听两次英语听力
	   后期每天做一篇阅读理解-->
	<table border="1" ><!--border=0或者直接不写border这个属性表格就是没有边框的-->
	<tr>
	  <td bgcolor="red">&nbsp&nbsp</td>
	  <td bgcolor="blue">项目</td>
	</tr>
	
	<tr>
	  <td bgcolor="yellow">第一</td>
	  <td bgcolor="yellow">每天背30个单词</td>
	</tr>
	
	<tr>
	  <td bgcolor="georgian">第二</td>
	  <td bgcolor="green">一周至少听两次英语听力</td>
	</tr>
	
	<tr>
	  <td bgcolor="gray">第三</td>
	  <td bgcolor="gray">> 后期每天做一篇阅读理解</td>
	</tr>
	</table>
	</tr>
	<li>坚持上和讯的课程
	<li>坚持学习编程
	<li>争取大三暑期能够去实习
	</ol>
	
	<h2><font face="楷体" color="red" >大四计划</font></h2> 
	<!--无序显示-->
	<ul>
	<li>找到好工作</li>
	<li>顺利毕业</li>
	<li>来一场毕业旅行</li>
	</ul>
  </body>
</html>

<html>
  <head>
     <title>马哈哈的家乡</title>  
  </head>
     <body background="HTML\纯蓝.jpg">
        <h1><p align="center"><font color="gray" face="楷体">大美青海</font></p></h1>
		<h4>青海湖</h4>
		<p>青海湖，藏语名为“措温布”（意为“青色的海”）。
		位于青藏高原东北部、青海省境内，中国最大的内陆湖、咸水湖。
		由祁连山脉的大通山、日月山与青海南山之间的断层陷落形成。</p>
		<p>2012年7月30日，青海省气象科学研究所最新的遥感监测结果显示，青海湖面积持续8年增大。
		2014年10月20日9时50分，青海湖海心山北侧出现“龙吸水”壮观场景。</p>
		<h4>形成演变</h4>
		<h5>&nbsp&nbsp<font face="楷书" color="gray">形成原因</font></h5>
		<p>青海湖的构造断陷湖，湖盆边缘多以断裂与周围山相接。距今20～200万年前成湖初期，形成初期原是一个大淡水湖泊，与黄河水系相通，那时气候温和多雨，湖水通过东南部的倒淌河泄入黄河，是一个外流湖。至13万年前，由于新构造运动，周围山地强烈隆起，
		从上新世末，湖东部的日月山、野牛山迅速上升隆起，使原来注入黄河的倒淌河被堵塞，迫使它由东向西流入青海湖，出现了尕海、耳海，后又分离出海晏湖、沙岛湖等子湖。</p>
		<h5>&nbsp&nbsp<font face="楷书" color="gray">境域变化</font></h5>
		<p>由于外泄通道堵塞，青海湖遂演变成了闭塞湖。加上气候变干，青海湖也由淡水湖逐渐变成咸水湖。北魏时青海湖的周长号称千里，唐代为400公里，清乾隆时减为350公里。在布哈河三角洲前缘约20公里处有古湖堤遗址；距湖东岸25公里处的察汉城（建于汉代），原在湖滨。东西两边已分别退缩25公里和20公里，水位下降约100米。青海湖呈椭圆形，周长300余公里。</p>
		&nbsp<img src="HTML\青海湖1.jpg" width="300px" height="260px" alt="青海湖二郎剑景区">
	    &nbsp<img src="HTML\青海湖2.jpg" width="300px" height="260px" alt="青海湖">
	    &nbsp<img src="HTML\青海湖3.jpg" width="300px" height="260px" alt="青海湖与天空">
	    &nbsp<img src="HTML\青海湖4.jpeg" width="300px" height="260px" alt="油菜花">
		<h4>茶卡盐湖</h4>
		<p>在苍茫雄浑的中国西北大地上，在面积约为20万平方公里的柴达木盆地中，有一种独具特色的自然景观，那就是神秘而美丽的高原盐湖。这些盐湖星罗棋布在高原之上，有的与雪山为邻，把绵延的山峦和皑皑的白雪倒映湖中；有的静卧在荒漠里，四周围绕着白色的盐带，宛若戴上银白色的项圈。
		其中，最让人神往的就是隐匿在祁连山和昆仑山之间的茶卡盐湖了。高浓度的卤水造就了茶卡盐湖水天一色的纯净之美，许多目睹过它美丽容颜的人们都将它称作“蓝色的海洋”。远望积盐似雪，近看白云倒影，如镜面一般的湖面折射着蔚蓝色的天空和雪白的云朵，美得令人窒息。</p>
        <center>&nbsp<img src="HTML\c3.jpg" width="300px" height="260px">
		&nbsp&nbsp&nbsp<img src="HTML\c4.jpg" width="300px" height="260px">
		&nbsp&nbsp&nbsp<img src="HTML\c5.jpg" width="300px" height="260px"></center>
	   <h4>中国的天空之镜</h4>
	   <p>汽车飞奔在辽阔的315国道上，公路两旁是一望无际的茫茫草原，草原的远方是蔚蓝色的湖水，在绿草盈盈的原野上散发出神秘的幽蓝色光芒。湖滨的地势平坦开阔，草丛中的格桑花正开得热烈，深深浅浅的紫、浓淡不一的粉，如繁星般点缀着整片草原。汽车飞驰，一处处藏民的帐篷飞快地从眼前掠过，当天边的雪山逐渐清晰起来时，我们忍不住惊呼起来：“终于到了，
	   茶卡盐湖！”海拔3100多米的茶卡盐湖是一座天然结晶盐湖，坐落在青海湖的西南方向、海西蒙古族藏族自治州乌兰县茶卡镇附近，被誉为柴达木东大门，历史上曾是商贾、游客进疆入藏的必经之地。
		“茶卡”在藏语中意为盐池，也就是青盐的海。茶卡盐湖与塔尔寺、青海湖、孟达天池齐名，被称作“青海四大景”。茶卡盐湖是柴达木盆地四大盐湖中最小的一个，东西长15.8公里，南北长9.2公里，呈椭圆形。盐湖的总面积大约有105平方公里，相当于10个杭州西湖大小。在这里，天是湖的一部分，湖是天的补充，似真似幻，远处水与天已没有明显的界限。</p>
	    &nbsp&nbsp&nbsp<img src="HTML\c1.jpg" width="300px" height="260px">
		&nbsp&nbsp&nbsp<img src="HTML\c2.jpg" width="300px" height="260px">
	 </body>
</html>

<html>
  <head>
    <title>关于马哈哈的故事</title>
	<body background="HTML\楼.jpg">
	  <!--<pre><center><h2><font color="maroon" face="宋体"><i>大一  懵懂无知</h2></center></pre>
	  <pre><center><h2><font color="navy" face="宋体"><i>大二  找到方向</h2></center></pre>
	  <pre><center><h2><font color="teal" face="宋体"><i>大三  坚定向前</h2></center></pre>-->
	  <table>
	    <tr>
		   <td><center><h4><font face="楷书" color="red">大一</font></h4></center></td>
		   <td>&nbsp</td>
		   <td><center><h4><font face="楷书" color="red">大二</font></h4></center></td>
		</tr>
		
		<tr>
		   <td>大一上学期的时候，很多同学还处于熟悉周围环境，适应大学生活，
		   忙于各种学生会社联会社团之间，一切觉得新鲜而又充实。</br>
		   确实，刚来大学的我们，压力也不需要那么重，但不是没有方向。依据学校要求不同，大一上学期一般是可以报名英语四级的，
		   如果没有的话，可以考虑先做做四六级的题等下学期再报，当然，如果整个大一都报不了四六级的话，你可以选择报考初级会计，国家计算机二级，这都是在大一可以考虑的，关于需不需要报班，
		   在于自己自学能力如何，自己考虑好以后做决定就行了。</br>
		   </td>
		   <td>&nbsp</td>
		   <td>到了大二，我们基本上已经适应了整个大学的生活，应该说大多数同学
		       已经知道可以考证了，
		   甚至开始为自己量身定制计划。大二的我们，在大一的基础上，
		   如果没有通过四六级和国二，应该继续为此而努力。
		   大二上把绩点刷高，提前修掉大三上的专业课。
		   别虚和学长姐一起上课，他们也什么都不懂。

           多参加模拟法庭。尽量参加理律杯或者贸仲杯。如果你大一考过托福110+肯定没问题的。当然还有各种小比赛。
           比如成才杯金法槌什么的。别因为没准备好就错过。</td>
		</tr>
		
		<tr>
		   <td>&nbsp</td>
		   <td></br></br></br><center><h4><font face="楷书" color="red">大三</font></h4></center></td>
		   <td>&nbsp</td>
		</tr>
		
		<tr>
		   <td>&nbsp</td>
		   <td></br></br>大三上出国交换。尽量是卓越计划吧。
		   这就要求大二上尽量把大三的专业课先上了。
		   虽然说着大四可以补，但实际上没有时间的。</td>
		   <td>&nbsp</td>
		</tr>
	  </table>
	</body>
  </head>
</html>

本文链接：https://blog.csdn.net/indulgexiaomei/article/details/108987737

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

生活垃圾数据集（YOLO版）_垃圾回收数据集-程序员宅基地

文章浏览阅读1.6k次，点赞5次，收藏20次。【有害垃圾】：电池（1 号、2 号、5 号）、过期药品或内包装等；【可回收垃圾】：易拉罐、小号矿泉水瓶；【厨余垃圾】：小土豆、切过的白萝卜、胡萝卜，尺寸为电池大小；【其他垃圾】：瓷片、鹅卵石（小土豆大小）、砖块等。文件结构|----classes.txt # 标签种类|----data-txt\ # 数据集文件集合|----images\ # 数据集图片|----labels\ # yolo标签。_垃圾回收数据集

天气系统3------微服务_cityid=101280803-程序员宅基地

文章浏览阅读272次。之前写到通过封装的API 已经可以做到使用redis进行缓存天气信息但是这一操作每次都由客户使用时才进行更新不友好所以应该自己实现半小时的定时存入redis 使用quartz框架首先添加依赖build.gradle中// Quartz compile('org.springframework.boot:spring-boot-starter-quartz'..._cityid=101280803

python wxpython 不同Frame 之间的参数传递_wxpython frame.bind-程序员宅基地

文章浏览阅读1.8k次，点赞2次，收藏8次。对于使用触发事件来反应的按钮传递参数如下：可以通过lambda对function的参数传递：t.Bind(wx.EVT_BUTTON, lambda x, textctrl=t: self.input_fun(event=x, textctrl=textctrl))前提需要self.input_fun(self,event,t):传入参数而同时两个Frame之间的参数传..._wxpython frame.bind

cocos小游戏开发总结-程序员宅基地

文章浏览阅读1.9k次。最近接到一个任务要开发消消乐小游戏，当然首先就想到乐cocosCreator来作为开发工具。开发本身倒没有多少难点。消消乐的开发官网发行的书上有专门讲到。下面主要总结一下开发中遇到的问题以及解决方法屏幕适配由于设计尺寸是750*1336，如果适应高度，则在iphonX下，内容会超出屏幕宽度。按宽适应，iphon4下内容会超出屏幕高度。所以就需要根据屏幕比例来动态设置适配策略。 onLoad..._750*1336

ssm435银行贷款管理系统+vue_vue3重构信贷管理系统-程序员宅基地

文章浏览阅读745次，点赞21次，收藏21次。web项目的框架，通常更简单的数据源。21世纪的今天，随着社会的不断发展与进步，人们对于信息科学化的认识，已由低层次向高层次发展，由原来的感性认识向理性认识提高，管理工作的重要性已逐渐被人们所认识，科学化的管理，使信息存储达到准确、快速、完善，并能提高工作管理效率，促进其发展。论文主要是对银行贷款管理系统进行了介绍，包括研究的现状，还有涉及的开发背景，然后还对系统的设计目标进行了论述，还有系统的需求，以及整个的设计方案，对系统的设计以及实现，也都论述的比较细致，最后对银行贷款管理系统进行了一些具体测试。_vue3重构信贷管理系统

乌龟棋题解-程序员宅基地

文章浏览阅读774次。题目描述原题目戳这里小明过生日的时候，爸爸送给他一副乌龟棋当作礼物。乌龟棋的棋盘是一行 NNN 个格子，每个格子上一个分数（非负整数）。棋盘第 111 格是唯一的起点，第 NNN 格是终点，游戏要求玩家控制一个乌龟棋子从起点出发走到终点。乌龟棋中 MMM 张爬行卡片，分成 444 种不同的类型（ MMM 张卡片中不一定包含所有 444 种类型的卡片，见样例），每种类型的卡片上分别标有 1,2,3,41, 2, 3, 41,2,3,4 四个数字之一，表示使用这种卡片后，乌龟棋子将向前爬行相应的格子数

随便推点

python内存泄露的原因_Python服务端内存泄露的处理过程-程序员宅基地

文章浏览阅读1.5k次。吐槽内存泄露 ? 内存暴涨 ? OOM ?首先提一下我自己曾经历过多次内存泄露，到底有几次？我自己心里悲伤的回想了下，造成线上影响的内存泄露事件有将近5次了，没上线就查出内存暴涨次数可能更多。这次不是最惨，相信也不会是最后的内存的泄露。有人说，内存泄露对于程序员来说，是个好事，也是个坏事。怎么说？好事在于，技术又有所长进，经验有所心得…. 毕竟不是所有程序员都写过OOM的服务…. 坏事..._python内存泄露

Sensor (draft)_draft sensor-程序员宅基地

文章浏览阅读747次。1.sensor typeTYPE_ACCELEROMETER=1 TYPE_MAGNETIC_FIELD=2 (what's value mean at x and z axis)TYPE_ORIENTATION=3TYPE_GYROSCOPE=4 TYPE_LIGHT=5(in )TYPE_PRESSURE=6TYPE_TEMPERATURE=7TYPE_PRO_draft sensor

【刘庆源码共享】稀疏线性系统求解算法MGMRES(m) 之矩阵类定义三(C++)_gmres不构造矩阵-程序员宅基地

三分钟带你看完HTML5增强的【iframe元素】_iframe allow-top-navigation-程序员宅基地

文章浏览阅读1.7w次，点赞6次，收藏20次。HTML不再推荐页面中使用框架集，因此HTML5删除了<frameset>、<frame>和<noframes>这三个元素。不过HTML5还保留了<iframe>元素，该元素可以在普通的HTML页面中使用，生成一个行内框架，可以直接放在HTML页面的任意位置。除了指定id、class和style之外，还可以指定如下属性：src 指定一个UR..._iframe allow-top-navigation

Java之 Spring Cloud 微服务的链路追踪 Sleuth 和 Zipkin（第三个阶段）【三】【SpringBoot项目实现商品服务器端是调用】-程序员宅基地

文章浏览阅读785次，点赞29次，收藏12次。Zipkin 是 Twitter 的一个开源项目，它基于 Google Dapper 实现，它致力于收集服务的定时数据，以解决微服务架构中的延迟问题，包括数据的收集、存储、查找和展现。我们可以使用它来收集各个服务器上请求链路的跟踪数据，并通过它提供的 REST API 接口来辅助我们查询跟踪数据以实现对分布式系统的监控程序，从而及时地发现系统中出现的延迟升高问题并找出系统性能瓶颈的根源。除了面向开发的 API 接口之外，它也提供了方便的 UI 组件来帮助我们直观的搜索跟踪信息和分析请求链路明细，

烁博科技|浅谈视频安全监控行业发展_2018年8月由于某知名视频监控厂商多款摄像机存在安全漏洞-程序员宅基地

文章浏览阅读358次。“随着天网工程的建设，中国已经建成世界上规模最大的视频监控网，摄像头总数超过2000万个，成为世界上最安全的国家。视频图像及配套数据已经应用在反恐维稳、治安防控、侦查破案、交通行政管理、服务民生等各行业各领域。烁博科技视频安全核心能力：精准智能数据采集能力：在建设之初即以应用需求为导向，开展点位选择、设备选型等布建工作，实现前端采集设备的精细化部署。随需而动的AI数据挖掘能力:让AI所需要的算力、算法、数据、服务都在应用需求的牵引下实现合理的调度，实现解析能力的最大化。完善的数据治理能力：面_2018年8月由于某知名视频监控厂商多款摄像机存在安全漏洞