大家好,大家应该知道我喜欢折腾一下有意思的东西。因为探索的过程是十分有趣的,而兴趣又是最好的老师。我很享受这种感觉,啊~好舒服~
![7c657d376ca2dc2fa8f619aa716c0411.png](https://i-blog.csdnimg.cn/blog_migrate/44df75d5a2d53f808e57aeb7ac7736c1.png)
很久之前呢,我也想自己做一个网页,并不是要实现什么很强的功能,而是感觉好玩,有意思。折腾了很久的时间,包括在刚开始的时候在“七牛云”平台捣鼓。因为本人是机械专业,对于计算机技术,有交集的也就是机械控制方面的单片机编码,PLC和机床指令这些,更何况当时还是很年轻,所以啥也没整出来。
这几年慢慢的接触到了计算机技术,接着呢用某东会员联名卡在知乎书库里自己看了看网页的相关技术,还有就是自己查阅的资料。最后我给设计了一个超级简单的静态网页,挂在了网上。
大神勿笑,我是纯小白
网页效果图是这样的:
![455454f00d138414357858147c1c20b1.png](https://i-blog.csdnimg.cn/blog_migrate/c56217b3f7c70b59de3c26f703fcbbe4.jpeg)
![e2528bc315d888773aa029e42d66cb80.png](https://i-blog.csdnimg.cn/blog_migrate/146603e63e54a49808981fc39bc100a1.jpeg)
这里里面包括了以下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.网页名称的显示------>指的是网页打开后下面图片显示的
![124c92e338647325fe541608c079c115.png](https://i-blog.csdnimg.cn/blog_migrate/b024bb805b6eda1a3fdafae404680450.png)
例:<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>
编写软件:记事本、浏览器
![6a789c149b751783ad21c4a97cd8eec5.png](https://i-blog.csdnimg.cn/blog_migrate/42a48818d952d57eb4f8960ba07cc3e4.png)
写在文末:有些东西不你不要怕自己学不会,可能你就是缺少了去学的勇气。
很喜欢《琅琊榜》里梅长苏的一句话:“有些事,你不去做‘怎么知道你不行呢?”
![1a1068caf1fdf548041218d332037d21.png](https://i-blog.csdnimg.cn/blog_migrate/606819076910189988923b989dde5cf3.png)
![8c49da261ac9cfa1979c7b4fa879b4f2.png](https://i-blog.csdnimg.cn/blog_migrate/8976fea7a17295c01ca30b6fc9a5603c.png)