前端基础学习小结

学习感悟

最近这段时间,走马观花的看了一些关于前端技术的教程,总算大致明白了前端技术的基本原理和开发流程。学习的原因很简单,第一是好奇,第二是在互联网多媒体不断发展的现在前端技术实在是用途太广泛了,一点都是知道的话,都不好意思说自己的是码代码的。

我想对于像我这样,刚开始一无所知的人来说,面对一门新的技术,最想知道的应该是:它的是做什么用的(它有什么作用),然后就是:它是怎么用的(怎么使用它),最后才是那些具体的知识点。忽略前面两点而直接开讲的,套用现在比较流行的话说,就是耍流氓。现在我来整理和总结前面七零八落的知识,我希望记录的不仅仅是一些干活,还能够有自己对这些东西系统的立体的认识和理解。

前端技术是什么

前端技术准确的定义我现在还没有搞懂,但是按我的理解通来讲,前端技术用来开发web应用的,使用它能够通过浏览器与用户进行各种交互操作,能够通过网络和后端服务器进行数据交互。

基本组成

很多人都知道,前端技术最基本的三个组成部分:

  • HTML
  • CSS
  • JavaScript

HTML确定网页的框架
哪些内容是标题,哪里是正文,哪些是表格,有多少段落等等,这些都是有HTML控制。

CSS为网页各部分制定样式
网页中每个部分的位置、颜色、字体样式等等这些由CSS来设置。

JavaScript控制网页中的各种行为操作
当网页响应各种事件,需要和用户进行各种交互时,需要样式需要动态改变时,则需要JavaScript来操作

当然随着前端技术的发展,又有许多新的技术的加入。

如何使用

前端技术就是用来开发web应用的,通俗点讲的就是做网页。那是如何用这些东西来做出一个web应用呢?一个最最简单的web工程文件结构如下图:

proj_file

  • index.html是的网站的主页

    http服务器会将根目录下的index.html作为整个网页入口页面。Html文件都是由许多Html标签组成,而Html标签有可能会带一些有属性和值。

    一个最简单的html文件的结果如下:

    html_frame

    “<!DOCTYPE html>” 声明文档为html文档,然后下面是html标签,html标签将包裹整个页面,是最外层的标签。html标签里面由head标签和body两部份组成。head标签中主要是一些页面的声明,如title标签申明页面标题。body标签中便是页面所有内容,一般来说一个页面内容如上图所示可以分三个层次,由上到下依次是header、content、footer。这其中header和footer都有专业的标签,表示页头和页脚;而中间content页面主体部分没有单独的标签,它是由一个div容器包裹来构建的。

    熟悉html常用的标签非常重要,但是也不需要全部死记,w3c有专门的教学网站能够提供各种类型的标签的查询:http://www.w3school.com.cn/

  • CSS文件夹就是存放CSS样式等文件的地方

    页面要使用外部的CSS文件是需要在html文件中申明其引用的CSS文件的位置的。如:
    html_CSS

    如上图,在html页面中引用了一个叫reset.css的CSS文件。通常由于浏览器显示的区别,在写自己的样式前,都先要将样式重置一下,重置的代码可以在网上搜到(实际上这里的我这里reset.css就是器重置样式的作用的)。

    css文件写法如下图所示:

    CSS_file

    总的来说就用各种方法来选择,找到你要设置的html中的元素,然后用在后面跟着大括号,在其中设置其各种属性。如果不熟悉或者忘记了选择方法和属性同样可以在w3school网站上查询。

    html和CSS联系的比较紧密,二者结合可以是实现各种页面样式。在页面布局中比较重要的是 盒子模型,它体现一个页面块对象在其外层对象中的相对位置;另外一个比较重要的是 页面定位的方法

  • js文件夹是存放JavaScript脚本的地方

    js代码相对比较独立,目前接触的也比较少,没有什么感触

  • res文件夹是保存其他资源的文件夹,如图片

目前,我能理解的水平也只能到这里了,后续学习再来更新。

Compartir