怎么拥有自己设计的简单个人网站（超细节）
时间：2022-08-03 11:42:01 | 来源：网站运营
时间：2022-08-03 11:42:01 来源：网站运营
大家好，大家应该知道我喜欢折腾一下有意思的东西。因为探索的过程是十分有趣的，而兴趣又是最好的老师。我很享受这种感觉，啊~好舒服~
啪很久之前呢，我也想自己做一个网页，并不是要实现什么很强的功能，而是感觉好玩，有意思。折腾了很久的时间，包括在刚开始的时候在“七牛云”平台捣鼓。因为本人是机械专业，对于计算机技术，有交集的也就是机械控制方面的单片机编码，PLC和机床指令这些，更何况当时还是很年轻，所以啥也没整出来。
这几年慢慢的接触到了计算机技术，接着呢用某东会员联名卡在本站书库里自己看了看网页的相关技术，还有就是自己查阅的资料。最后我给设计了一个超级简单的静态网页，挂在了网上。
大神勿笑，我是纯小白网页效果图是这样的：
效果图这里里面包括了以下6个知识点（很简单，我是小白都会了）：
- 网页的名称显示
- 网页的标题显示
- 网页内容的居左、中、右
- 网页文字的删除线
- 超链接
- 插入居中图片
代码有点长：
<!DOCTYPE html>
<html>
<head>
<title>简介代码测试</title>
</head>
<body>
<h1>我的测试网页</h1>
<p align="center">Hello 大家好</p>
<p style="text-decoration: line-through;">我是多余的，但是这个也是知识点，需要记下来哦 ^_^</p>
<p align="center">我是麋鹿，这是我的个人网站。</p>
<p>很高兴你来到这里, 你可以在以下的网站找到我</p>
<a href="
https://www.zhihu.com/people/mi-lu-de-mi-lu-77-91" target="_blank">本站</a>
<p align="center">
<img src="
https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1006013113,2872893823&fm=26&gp=0.jpg" />
</p>
</body>
</html>
首先给大家说一下HTML文档的基本的骨架（也就是基本的格式）：
<html>
<head>
<title>网页的名称</title>
</head>
<body>
正文
</body>
</html>
上面的从<html>到</html>之间是代表这是HTML文档，所有的内容都要在其中。
<head>到</head> 放置定义
<title>到</title>标识网页文件的标题
<body>到</body> 其中放置正文
之前6个知识点的讲解：
1.网页名称的显示------>指的是网页打开后下面图片显示的
例：<title>简介代码测试<title>
按照你的需要可以在上面的代码处更改<title><title>之间的内容
2.网页的标题显示例：<h1>我的测试网页</h1>
一般我们在网页能看到的内容都是在<body></body>之中
所以将 <h1>我的测试网页</h1> 放在其中
而h1代表的是一级标题，很多的新手教程都会给大家介绍。当然有h1就会有h2、h3、h4、h5。<>和</>不能忘记。
3.网页内容的居左、中、右例：<p align="center">Hello 大家好</p>
在这其中<p></p>是段落表示，代表中间的"Hello 大家好"自己独占一个段落，与上面的文字保持一定的距离。
前面的<p>里面可以添加对于段落的设置。
align="center"是设置该段落居中对齐
align="left"是居左对齐
align="right"居右对齐
4.网页文字的删除线例：<p style="text-decoration: line-through;">我是多余的，但是这个也是知识点，需要记下来哦 ^_^</p>
在上面的知识点3上面介绍了
前面的<p>里面可以添加对于段落的设置在段落里面的文字中添加一个删除线，使用的命令是
style="text-decoration: line-through;"
5.超链接例：<a href="
https://www.zhihu.com/people/mi-lu-de-mi-lu-77-91" target="_blank">本站</a>
超链接的格式：<a href="
你设置的网页">
超链接文字内容</a>
我们看到上面的还有一个修饰，是 target="_blank"这个修饰的意思是点击后在新的标签页面打开超链接指向的网站。
6.插入居中图片例：<p align="center">
<img src="
https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1006013113,2872893823&fm=26&gp=0.jpg" />
</p>
插入图片的指令是：<img src="
图片地址" />但是这样插入后图片是默认靠左的，我们需要的是居中显示。
我查了很多的资料，很复杂，对我这个新手超级不友好。这时候我灵机一动，能不能把图片放到一个段落中，然后设置段落格式。嘿嘿我真是个小机灵鬼~ 啪
然后就套了一个（把图片放在段落中），指令如下：
<p align="center"><img src="
图片地址" /></p>
编写软件：记事本、浏览器改后缀就可以写在文末：有些东西不你不要怕自己学不会，可能你就是缺少了去学的勇气。
很喜欢《琅琊榜》里梅长苏的一句话：“有些事，你不去做‘怎么知道你不行呢？”
在线咨询
