使用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>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/indulgexiaomei/article/details/108987737

智能推荐

【ci框架】CI框架支持$_GET两种方法_ci框架 获取get参数-程序员宅基地

文章浏览阅读6k次。首先ci框架在2.0以后就支持GET了,所以使用毫无压力!1.使用get传递参数的方法:CI会自动将超过URI的两部分作为参数传给方法。可以去看手册:CI框架中文手册如下:phpddt.com/index.php/Phpddt/func/a/b那么控制器中的方法php代码如下:phpclass Phpddt extends CI_Controller {_ci框架 获取get参数

BFS广度优先搜索算法//宽度优先搜索算法_bfs判断是否处于同一层-程序员宅基地

文章浏览阅读665次。BFS宽度优先搜索算法,又称广度优先搜索,是最简便的图的搜索算法之一,这一算法也是很多重要的图的算法的原型。Dijkstra单源最短路径算法和Prim最小生成树算法都采用了和宽度优先搜索类似的思想。其别名又叫BFS,属于一种盲目搜寻法,目的是系统地展开并检查图中的所有节点,以找寻结果。换句话说,它并不考虑结果的可能位置,彻底地搜索整张图,直到找到结果为止。核心思想是:从初始结点开始,应用算符生成第一层结点,检查目标结点是否在这些后继结点中,若没有,再用产生式规则将所有第一层的结点逐一扩展,得到第二层_bfs判断是否处于同一层

Android自定义View系列之可伸缩的TextView_textellipsizespanutil()' has private access in 'co-程序员宅基地

文章浏览阅读1.2w次,点赞4次,收藏15次。在写博客之前,告诉大家一个消息,我开通了自己的微信公众账号,如果你喜欢我的文章,希望关注我的微信公众号,我会定期与大家分享最新的博客文章,以及移动互联网最新动态。 我的微信公众号:yuanzeyao_android 二维码: 经常访问我博客的同学应该注意到了我的博客大部分是关于分析Android系统原理的,很少涉及应用层的知识,但是想要开发一个用户欢迎的App,没有一个炫酷的UI肯定是不行的,_textellipsizespanutil()' has private access in 'com.shoptemai.utils.textell

Oracle安装配置手册-程序员宅基地

文章浏览阅读108次。关键字:oracle linux 安装 一、前期准备 *FTP客户端软件 *Xmanager *pl/sql dev *11G数据库安装程序,适用于Linux 64位,数据库版本11.2。 二、创建用户组、用户 1)添加用户组: groupadd oinstall groupadd dba 2)添加用户: useradd –g oinstall –G dba –d /ho..._2.为用户oracle指定家目录为/opt/ftp

Android逆向之旅---解析编译之后的AndroidManifest文件格式_编译androidmanifest-程序员宅基地

文章浏览阅读231次。Android逆向之旅---解析编译之后的AndroidManifest文件格式_编译androidmanifest

几种扫描shader效果_scan field shader.-程序员宅基地

文章浏览阅读987次。https://github.com/alpacasking/ScanLine/blob/master/my_demo.gifhttps://github.com/AsehesL/ScanEffect_scan field shader.

随便推点

JS中的静态属性及实例属性_js中构造函数的静态属性-程序员宅基地

文章浏览阅读2.2k次,点赞3次,收藏2次。在回忆怎么判断一个对象是一个数组的方法时,想到了Array.isArray()这个方法,突然有点不理解,这是什么意思,isArray()怎么可以通过Array直接调用,这样的情况很多,比如Object上的方法。看了几篇文章,简单理解是:JS中有“静态属性”和实例属性。function Person(name) {this.name = name}Person.setName = (name..._js中构造函数的静态属性

【Bug】os.environ[‘CUDA_VISIBLE_DEVICES‘]=‘0’指定GPU无法生效解决方案_os.environ['cuda_visible_devices'] = '0-程序员宅基地

文章浏览阅读6.3k次,点赞4次,收藏6次。在利用下面的语句指定GPU为仅为"1",但是用nvidia-smi查看GPU使用时,仍默认为"0"import ioimport osimport timeimport jsonimport cv2import numpy as npfrom flask import Flask, jsonify, requestfrom *** import **** # torch等,举个例子os.environ['CUDA_VISIBLE_DEVICES'] = '1'解决方案:将上述语句放_os.environ['cuda_visible_devices'] = '0

SpringBoot使用@Valid注解校验参数无效_springboot @valid注解不生效-程序员宅基地

文章浏览阅读6.3k次,点赞8次,收藏14次。SpringBoot项目结合Validator进行参数的校验,发现使用@Valid注解无效。@Valid和@RequestBody百度之后,有的说是注解@Valid和@RequestBody一起使用时候,@Valid注解必须在@RequestBody注解之前使用。如下:改成上面之后, 再次测试,发现还是没有校验参数。缺少hibernate的Validator依赖然后继续百度,看到有的文章中引入了javax.validation同时,也引入了hibernate-validator依赖,于是_springboot @valid注解不生效

HDU 1863 畅通工程 prim算法 最小生成树_学习是唯一赶超资本家的的最短路径-程序员宅基地

文章浏览阅读427次。原题: http://acm.hdu.edu.cn/showproblem.php?pid=1863由于只给了一部分路,所以有的地方可能不能连通,我们只需要判断在所有点都被标记完之前是否存在未被标记的点到原点的距离为INF就可以了。参考代码如下:#include"cstdio"#include"iostream"#include"string.h"#define INF 0x7f7f7f7f_学习是唯一赶超资本家的的最短路径

Multisim 中的-Error: Unable to converge during transient analysis. Consider increasing the ABSTOL, VNT-程序员宅基地

文章浏览阅读1.3w次,点赞3次,收藏3次。这种错误的原因通过那个收敛助手是不饿能通过的出现这种结果的原因是没有给定参考点 所以,我们只需要在其中加入地就可以了加入地之后便可以正常运行了..._error: unable to converge during transient analysis. consider increasing the

设计模式(创建型)之工厂方法模式(Factory Method Pattern)_工厂方法(factory method)-程序员宅基地

文章浏览阅读3.4k次。前面介绍了简单工厂模式,在最后代码示例部分展示的程序猿技能工厂类时提到了一个严重的问题。当FactoryCreater中需要引入新对象时需要修改源代码,这违背了“开放封闭原则”,使得具体产品与工厂类之间的耦合度高,严重影响了系统的灵活性和扩展性。_工厂方法(factory method)

推荐文章

热门文章

相关标签