前端web开发——有梦想就看过来！！

最新推荐文章于 2024-07-24 10:40:52 发布

Devin Dever

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量2.6k

点赞数 26

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/super_CSDNer/article/details/101153458

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

史上最详细web前端开发入门指南一——有梦想就来看看吧！

最近几天，本博主迷恋上了前端开发，本着一颗探索的精神开始了。在学习的过程中呢。遇到了许多困难，也收获了许多，在此写一篇博客记录自己的学习过程。同时也为广大想学习前端技术的指引方向，少走弯路。（唉，前段时间搞acm竞赛，搞得头皮发麻，怀疑人生，休息下不想搞了。）
前端开发设计的知识很多，但是这篇博客我只讲述入门，毕竟本博也才刚刚入门前端。如果你对前端开发也很有兴趣，希望我们可以互相关注，共同学习，我还会继续更新博客的，这才是一呢！！！

对于web前端的理解：

首先web前端是什么？
解答：个人认为前端就是网站前台部分，是运行在pc端，展现给用户浏览的网页。是看得见却没有任何实体作用的装饰。
与web前端相对应关联的就是web程序。web程序呢就是一种可以通过web访问的应用程序。具有可移植性，不像普遍的桌面程序一样。需要在每一台电脑上安装并使用，web程序是部署在服务端的。而我们就是客户端，我们要做的就是进入浏览器输入网址，进入那个服务器，使用里面的web程序，这是很方便的，我们不需要关心程序的细节，我们只需要注意如何进去。（下面我会为你具体解释）

web程序的运行原理
在这里插入图片描述

web开发准备工作

学习相关编程技术——开发web程序

(1)主要是有标记语言html 层叠样式表css 脚本js（javascript）
这里建议去w3school官网学习或者电子书
(2)学习各式各样框架例如javaweb的SSH框架，。以及 bootstrap框架
(3)掌握数据库的使用（这个不一定需要，如果不涉及数据处理废话噗噗）
掌握相关服务器部署——web程序的过程（本博客重点讲述）
(1)购买云服务器可以去腾讯云官网购买。。10块钱吧，挺便宜的。
这里来解释一下，*云服务是个啥玩意？*首先云服务器就是一台电脑，这个电脑呢，是你在代理商那里买的，你可以在那里部署web程序。方便别人可以访问。

以下是链接腾讯云
建议买学生套餐，本博主就是买的学生套餐
腾讯云学生套餐
说明一下，学生套餐好像不能买香港的服务器，只能买大陆的，唉，那就大陆的吧，下面会说明。
说明：香港的服务器的域名不需要备案。大陆的需要备案。
这里解释一下ip 域名以及备案的概念，，个人理解啊。
ip地址就是进入电脑的网络地址，每一台服务器都有地址，都是可以互相连通的。这就是为啥叫做互联网！
域名，你大概能够看到了，ip地址这么奇怪，一串数字这么难记，要是能够按照我的意愿更改就好了，于是就产生了域名这一说。域名就是网站ip的另一种表示方法。但是域名是需要和ip地址绑定在一起的。这就需要解析，国家的审核，毕竟网络是需要监管的呀。

具体操作如下：
1.购买完以后进入自己的操作台就可以看见自己买的服务器了。

***说明：***这里的密码是默认的，账户一般是root。你可以重新设置你的密码。

(2)购买域名。腾讯云可以购买域名。本博主购买的是.club的域名，不贵。抵了券大概9元，唉，心酸。买完以后，需要做的就是域名解析。
这里推荐一下别人的文档，我就是学习别人的。
域名解析

(3)搭建网站开发面板
这里有许多方法，我用的是宝塔面板，链接如下：
方法一：
下载宝塔面板
选择 linux类型。
简单解释一下宝塔面板是啥
就是让你的服务器（说是你的电脑但是你却摸不着）可视化。能够看得见

点击登录，使用账号密码登录，。进入界面后，会黑屏一下。

然后呢。将安装宝塔面板链接粘贴到上面。它会自动安装，等待一下就好了。

安装结束的界面。（有点久）

这里的网址以及系统给定你的账号密码记住一下，（建议复制到记事本里，会经常用到）
进入浏览器输入那个宝塔的网址，你就入了你的服务器的操作界面。
接下来就是把你的web程序部署上去。重中之重。
(4).部署web程序

添加站点。站点的路径最好暂时填你的服务器ip（注意是外网）地址

(域名需要备案，大概20天左右)因为你输入ip地址时，浏览器会进入你的服务器系统默认的html文档（就是网页）会提示你站点创建成功。
注意是这个目录

然后你需要在49.232.152.219文件（就是你创建一个站点，对应得会在你的服务器内创建一个新的文件夹，里面可以存放你的网站代码）里上传你的html代码，然后就可以在任何一台电脑输入你的ip地址进入属于你自己的第一个网站啦！！！！！

last：附上本博主第一次开发的网页：有点简陋，但是我会坚持继续学习！！！

本博主的第一个网页

==附上我的代码==


<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:500px;
    width:100px;
    float:left;
    padding:5px;	      
}
#section {
    width:320px;
    float:left;
    padding:10px;	 	 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;	 	 
}
</style>
</head>

<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright ? W3Schools.com
<br>
这是我的第一个网站呢？   为刘琴做的呀！！！
</div>

</body>
</html>

我的博客到此结束，前端的学习之路任重而道远！！谢谢！！！

Devin Dever

关注

26
点赞
踩
106

收藏

觉得还不错? 一键收藏
打赏
15
评论
前端web开发——有梦想就看过来！！

史上最详细web前端开发入门指南一——有梦想就来看看吧！最近几天，本博主迷恋上了前端开发，本着一颗探索的精神开始了。在学习的过程中呢。遇到了许多困难，也收获了许多，在此写一篇博客记录自己的学习过程。同时也为广大想学习前端技术的指引方向，少走弯路。（唉，前段时间搞acm竞赛，搞得头皮发麻，怀疑人生，休息下不想搞了。）前端开发设计的知识很多，但是这篇博客我只讲述入门，毕竟本博也才刚刚入门前端。如...
复制链接

扫一扫