vs怎么把文字超链接_怎么拥有自己设计的简单个人网站(超细节)

大家好,大家应该知道我喜欢折腾一下有意思的东西。因为探索的过程是十分有趣的,而兴趣又是最好的老师。我很享受这种感觉,啊~好舒服~

7c657d376ca2dc2fa8f619aa716c0411.png

很久之前呢,我也想自己做一个网页,并不是要实现什么很强的功能,而是感觉好玩,有意思。折腾了很久的时间,包括在刚开始的时候在“七牛云”平台捣鼓。因为本人是机械专业,对于计算机技术,有交集的也就是机械控制方面的单片机编码,PLC和机床指令这些,更何况当时还是很年轻,所以啥也没整出来。

这几年慢慢的接触到了计算机技术,接着呢用某东会员联名卡在知乎书库里自己看了看网页的相关技术,还有就是自己查阅的资料。最后我给设计了一个超级简单的静态网页,挂在了网上。

大神勿笑,我是纯小白

网页效果图是这样的:

455454f00d138414357858147c1c20b1.png
效果图
简介代码测试​milutext.github.io
e2528bc315d888773aa029e42d66cb80.png

这里里面包括了以下6个知识点(很简单,我是小白都会了):

  1. 网页的名称显示
  2. 网页的标题显示
  3. 网页内容的居左、中、右
  4. 网页文字的删除线
  5. 超链接
  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

例:<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
改后缀就可以

写在文末:有些东西不你不要怕自己学不会,可能你就是缺少了去学的勇气。

很喜欢《琅琊榜》里梅长苏的一句话:“有些事,你不去做‘怎么知道你不行呢?”

1a1068caf1fdf548041218d332037d21.png
迷路的麋鹿:怎么将设计好的网页发布到网上​zhuanlan.zhihu.com
8c49da261ac9cfa1979c7b4fa879b4f2.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值