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

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

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

对于web前端的理解:

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

web程序的运行原理
前端web开发——有梦想就看过来!!_第1张图片

web开发准备工作

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

    (1)主要是有标记语言html 层叠样式表css 脚本js(javascript)
    这里建议去w3school官网学习或者电子书
    (2)学习各式各样框架 例如javaweb的SSH框架,。以及 bootstrap框架
    (3)掌握数据库的使用(这个不一定需要,如果不涉及数据处理 废话 噗噗)

  2. 掌握相关服务器部署——web程序的过程(本博客重点讲述)
    (1)购买云服务器 可以去腾讯云官网购买。。10块钱吧,挺便宜的。
    这里来解释一下,*云服务是个啥玩意?*首先云服务器就是一台电脑,这个电脑呢,是你在代理商那里买的,你可以在那里部署web程序。方便别人可以访问。
    前端web开发——有梦想就看过来!!_第2张图片
    以下是链接腾讯云
    建议买学生套餐,本博主就是买的学生套餐
    腾讯云学生套餐
    说明一下,学生套餐好像不能买香港的服务器,只能买大陆的,唉,那就大陆的吧,下面会说明。
    说明:香港的服务器的域名不需要备案。大陆的需要备案。
    这里解释一下ip 域名 以及备案的概念,,个人理解啊。
    ip地址 就是进入电脑的网络地址,每一台服务器都有地址,都是可以互相连通的。这就是为啥叫做互联网!
    域名, 你大概能够看到了,ip地址这么奇怪,一串数字这么难记,要是能够按照我的意愿更改就好了,于是就产生了域名这一说。域名就是网站ip的另一种表示方法。但是域名是需要和ip地址绑定在一起的。这就需要解析,国家的审核,毕竟网络是需要监管的呀。

    具体操作如下:
    1.购买完以后进入自己的操作台就可以看见自己买的服务器了。
    前端web开发——有梦想就看过来!!_第3张图片
    ***说明:***这里的密码是默认的,账户一般是root。你可以重新设置你的密码。

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

    (3)搭建网站开发面板
    这里有许多方法,我用的是宝塔面板,链接如下:
    方法一:
    下载宝塔面板
    选择 linux类型。
    简单解释一下宝塔面板是啥
    就是让你的服务器(说是你的电脑但是你却摸不着)可视化。能够看得见
    前端web开发——有梦想就看过来!!_第4张图片
    点击登录,使用账号密码登录,。进入界面后,会黑屏一下。
    前端web开发——有梦想就看过来!!_第5张图片
    然后呢。将安装宝塔面板链接粘贴到上面。它会自动安装,等待一下就好了。
    前端web开发——有梦想就看过来!!_第6张图片
    安装结束的界面。(有点久)
    前端web开发——有梦想就看过来!!_第7张图片

    这里的网址以及系统给定你的账号密码记住一下,(建议复制到记事本里,会经常用到)
    进入浏览器输入那个宝塔的网址,你就入了你的服务器的操作界面。
    接下来就是把你的web程序部署上去。重中之重
    (4).部署web程序
    前端web开发——有梦想就看过来!!_第8张图片
    添加站点。站点的路径最好暂时填你的服务器ip(注意是外网)地址
    前端web开发——有梦想就看过来!!_第9张图片
    (域名需要备案,大概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>
我的博客到此结束,前端的学习之路任重而道远!!谢谢!!!

你可能感兴趣的:(前端)