首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端笔记0001:从今天开始学前端,前端的主要构成

学习是人类进步的阶梯,有的时候为了获得更好的生活,我们要不断的学习。

互联网这些年发展的尤其快,有很多人对于亲手缔造一个属于自的网站或者属于自己的app非常感兴趣,但是没有什么途径去学习,上网一搜一大片的教程又让人挑花了眼。

信息大爆炸给人们带来了众多的学习资源,但往往铺天盖地的学习资源又让很多怀抱着学习梦想的人无所适从,看到一个行业竟然要学那么多技术,顿感力不从心,没有一个系统的学习路线很容易让一个满怀希望的人失去信心。

其实我是一个小白前端,这几天一直很焦虑,家里的事儿,工作的事儿,技术的事儿搞得我有些焦头烂额,为了平复一下内心,所以想写一写文字,平静一下内心。

接下来我会跟大家分享一下前端的一些内容,大神就请绕道走吧,谢谢。

什么是前端?为了给大家一个直观的印象(不要抠字眼啊),我就这么说了:你看到的电脑网页,手机浏览的页面等等,呈现在你面前让你能看到的页面就是前端开发出来的。

那么前端究竟做了什么呢?就是整体的页面结构,包括标题啊,头像啊什么的在页面的位置,某个地方有个按钮啊,评论啊等等,那么页面上你看到的信息呢?有一些写死的信息是前端直接写在代码里的,而另一些则需要后台通过接口传递给你。(这些后面会说到)

今天我们说基础的前端构成。

你所有看到的页面基本上包含三种文件类型:HTML,CSS,JS。

网上开发工具有很多,比如sublime,hbuilder,webstrom等等,今天我就用hbuilder来给大家演示一下:

第一步:下载安装开发工具(直接网上搜就可以)

第二步:新建一个项目

新建web项目

填写你的项目名称及选择存储位置

点击浏览选择你项目存储位置,为了方便存在桌面上

这样,在左侧就能看到你的项目了

你的项目构成

index.html就是你的网页主体,现在只有主要结构,但是没有内容,在电脑上打开,是个空白页面

页面上这样的结构叫做双标签,还有一种结构叫单标签,尖括号内的英文单词代表着不同的含义,比如:代表着头,代表着身体,也是你页面上所有展示内容的地方。

接下来我们为项目起个名字,并在页面上放一些东西:

先安装一个Chrome浏览器,在代码里写上这些内容,然后点击红框

这就是我们刚才在代码里写的东西在电脑上的样子

很丑对吧?比如说盖房子,我们现在是毛坯房,接下来装修一下:

点击css右键新建一个css文件

起一个index名,为了方便对应

接下来将我们新建的css文件引入到我们的html文件中

用一个

单标签引入,href后边是我们的css文件位置

link标签一般写在双标签之间

为我们的网页内容写一些样式,让他们好看一点:

*{}代表着整体属性,在{}写的样式在整个页面都会生效,我们在里边的内容的含义是让整个页面上下左右没有空隙,(这些样式以后会说是什么意思)

其中*和header,我们称之为选择器,*代表着全局,header是我们在index.html中写的标签名(就是尖括号中间的英文单词),依靠这些选择器,我们可以定位到我们要修改样式的位置

在这个例子中我们修改了标签的样式,根据英文单词的意思可以看出,我们设置宽度为整个页面的100%,高度是50px,这个px我们可以这么理解:现实生活中我们说的单位是米啊,厘米啊什么的,但在显示屏上我们我们说的单位就是px(像素),当然还有其他的,我们目前先说这一种。行高50px,字体大小20px,字体颜色白色(可以写英文单词white),背景色如图所示,text-align代表的是文字内容如何在header这个容器里展示,我们选择了center表示居中显示,接下来让我们看一下效果:

是不是稍微好看了一点?其他部分也可以通过css来改变它的样子。

如果有人闲着没事儿想学学,请回复我,那我明天继续跟大家分享一下js的用途。

刚开始会像这样有点啰嗦,过一段时间等大家都大致了解了,我们的速度会快上很多,就这样吧。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180310A0HJ8T00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券