上次分享『我的前端学习之路(一)』的文章已经过了半年了,这半年来都没有好好花时间来写文章。期间自己独立完成了两个完整的项目,后面也会分享写这两个项目的一些经验。最近才比较有点时间静下来,前几天刚把自己的个人博客迁到了阿里云上。当然,用了国内的服务器就得好好做个守法的公民,为个人博客网站进行了备案。备案也没有想象中的麻烦,除了需要上传照片。回归正题,上一篇文章,回顾了下,主要是分享了关于前端一些学习的方法,侧重学习资源的获取。这一部分也是比较重要的,作为一个前端开发者,我觉得学习新知识的能力要强,掌握了好的学习方法,不管前端技术更新得如何迅速,也能迎头赶上。掌握了学习的方法,还有一个最重要的部分,就是形成一套属于自己的前端知识体系。

前端的知识回归到本源,就是最通常讲的三部分:HTML、CSS、JavaScript。只有掌握了这最基础的三部分,才能在前端的路上走得更远。下面将列一下每个部分需要掌握的一些要点。

HTML + CSS + JS

HTML

  1. 标签语义

    HTML(Hyper Text Markup Language)作为一种标记语言,通过定义标签来进行标识。HTML中的标签有很多,但是我们通常不会全部用到。这些标签也可以进行分类,其中常用的有表格标签、表单标签、列表标签、链接标签、样式有关的标签等。学习HTML,最主要的就是能弄清楚常用标签的使用场景,并且做到规范使用标签。比如:<p>标签一般都是用来表示文章段落的,用来做其他的用途也不会出错,但是这很容易产生歧义,而且很多标签都有固有的样式属性,这些属性往往跟标签的语义是相对应的。我们完全可以借助样式表,重新定义一个自己的标签样式,但是这是完全没有意义的。既不利于开发维护,同时对搜索引擎很不友好。所以,最基本的就是熟悉常用标签的应用场景,尽可能不去改变标签的固有语义。标签元素根据默认的样式,可以分为行级元素和块级元素,直观上的区别就是行级元素默认会并排一行,直到单行不能装下才换行,而块级元素独占一行。还有注意一些样式声明在行级和块级元素上是无效的。

  2. HTML文档类型声明

    文档类型的声明往往很容易忽略,但是仔细看互联网上的HTML页面。可以发现每个HTML页面第一行都对该HTML页面进行了文档类型声明。在之前的HTML4中,该声明引用了DTD,DTD规定了标记语言的规则,浏览器根据这些规则来正确呈现内容。现在HTML5简化了该声明,只需要记得声明成<!DOCTYPE html>,这样很简洁,而且能兼容版本低的浏览器。该声明就是告诉浏览器按照统一的规范来呈现内容,不声明的话,不同浏览器的渲染方式不同,往往会引出兼容性问题。

  3. HTML元数据

    HTML元数据用来描述页面的相关信息,使用<meta>标签来声明,位于<head>标签内,总是以名称/值的形式来声明。用来告诉浏览器如何渲染该HTML页面,比如使用的字符编码、标题、过期时间等。同时搜索引擎遇到对应的关键字时,会根据关键字对HTML文档进行分类,有利于SEO。

CSS

  1. 定位

    定位就是控制元素在页面显示的位置,默认情况下,浏览器是通过文档流的形式来展示元素的。通过CSS的样式能改变元素的默认定位。如使用positionfloat属性。其中position属性包括了static(默认)、relative(相对)、absolute(绝对)、fixed(固定)四种定位方式,熟悉这几种定位方式十分重要。还有就是float浮动,允许元素脱离文档流来浮动,能够灵活控制元素在页面的显示位置。

  2. 盒模型

    盒模型的概念是以单个元素来讲的,指的是该元素的宽度(width)、高度(height)、内边距(padding)、边框(border)、外边距(margin)。元素的内容位于宽度和高度声明的大小区域内,内边距直接包围内容,能够呈现元素的背景。内边距的边缘是边框,可以定义不同的边框样式。边框外就是外边距,不能显示元素的背景,默认是透明的。理解盒模型,能够帮助计算相邻元素的间隔、控制元素自身大小,从而精确的进行元素布局。

  3. 选择器

    选择器是CSS中一个重要的概念,能够将CSS样式与对应的元素直接关联。主要的选择器包括了:元素选择器、类选择器(.)、ID选择器(#)、属性选择器等。层叠样式表的本质就是允许样式能够进行层级叠加,这里要理解不同选择器的优先级,优先级高的选择器样式声明能够覆盖优先级低的样式声明。

  4. 样式声明

    样式声明是最基础的,CSS中包含的样式属性不计其数,学习的时候没必要将所有的样式都牢记于心。但是需要记住一些常用的样式属性,比如前面提到的跟定位以及盒模型相关的属性等。

JavaScript

  1. 基本语法

    JavaScript可以说是最难的一部分,根据前端提倡的内容、展示、行为分离的原则。JavaScript负责行为这一部分。作为一种编程语言,与学习其他编程语言一样,需要掌握最基本的方法声明、变量声明、对象创建、基本数据类型等这些最基础的知识。

  2. DOM和BOM

    DOM指的是文档对象模型,在JavaScript中对应的对象是document对象。能够熟悉常用的DOM事件,这些事件通常与鼠标或键盘的动作相对应。通过为元素添加对应的事件,能够控制当某一事件触发后将要执行的动作。同时还要清楚DOM事件流的过程,主要包括三个阶段事件捕获、目标阶段、事件冒泡阶段,熟悉事件流的三个阶段能有效控制事件的传播。

    BOM指的是浏览器对象模型,在JavaScript中对应的对象是window对象。通过熟悉BOM,能够帮助获取当前浏览器的窗口大小信息或进行页面重定向等浏览器相关的操作。

  3. jQuery框架

    jQuery框架作为JavaScript最流行的框架,对很多常用的JavaScript操作进行了封装。包括Ajax请求、DOM事件处理、表单处理等,熟悉jQuery能够节省大量的编码工作。建议通过官网来学习jQuery,并且能够进行源码的阅读,看jQuery是如何来实现对应的方法。

总结

前面列出的都是一些相对基础的知识,相当于一个前端基础知识的学习清单,可能有些知识没考虑到的。要打基础的话,我建议选择相关的书籍来学习,相比网上的知识,书籍上的知识会写得更有条理,没有网上那么零碎。当然多看也得多实践,前端的知识实践最容易了。只要有浏览器,打开编辑器就可以实践。