深入浅出学习前端开发(入门篇)

作者: 筑梦师Winston | 来源:发表于2018-04-10 17:20 被阅读643次

前言

这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程.

个人学习方法分享
 整体学习路线分享
 全栈开发自学笔记已开源

本文阅读建议
1.一定要辩证的看待本文.
2.准备进行系统的前端学习.
3.本人学习前端的路线可能偏向全栈方向(不是纯前端)
4.本文只阐述学习路线和学习当中的重点问题.需要读者自己使用百度进行拓展学习.
5.觉得哪里不妥请在评论留下建议~
6.觉得还行的话就点个小心心鼓励下我吧~

目录
1.HTML & CSS
2.HTML5 & CSS3
3.JavaScript & jQuery
4.PHP & MySQL & Apache

HTML & CSS

学习前端网页开发,第一个重点当然是HTML & CSS.
在这里首先说一下,前端涉及面之广,涉及知识之多最好先通过学习路线大致了解一下,做好准备.这是需要一定时间成本学习的.

HTML基础

HTML简史
HTML规范

CSS基础

什么是CSS?
为什么需要CSS?
CSS基本语法:

格式、选择器、属性

HTML应用

注释
meta标签
结构/格式
标签

结构标签
<html> <head> <body> <title> <h1~h6> <div> <span> <br> <hr> <p> <pre> <blockquote>
其中div、span标签在以后会重点使用.
文字标签
<i> <u> <sub> <sup> <s> <em> <strong> <b> <del> <font>
列表标签
<ul> <li>
<ol> <li>
<dl> <dt> /<dd>
表格标签
<table> <tr> <tr> <th> <caption> <thead> <tbody> <tfoot>
表单标签
<form> <input> <select> <option> <textarea> <button>
链接标签
<a> <link>
图像标签
<img>

特殊字符
"空格","<",">","&"," " ","'","©","®"

CSS应用

内联&外联
选择器

基础选择器

标签选择器、类选择器、id选择器、通配符选择器.

关系选择器

子代选择器S1>S2、后代选择器 S1 S2、相邻选择器 S1+S2、兄弟选择器 S1~S2.

属性选择器

给定[attr]、给定属性名&值[attr="val"]、完全包含值[attr~="val"]、部分包含值[attr*="val"]、给定字符开头[attr^="val"]、给定字符结尾[attr$="val"]

伪类选择器

link、visited、hover、active.特定,有很多建议查文档.

伪元素选择器

after、before等建议查文档.

选择器组合

行内样式
CSS特性

层叠性、继承性、优先性.

属性

颜色属性、文字属性、盒子属性、布局属性

盒子属性和布局属性为重点
我个人单独抽出时间对display、position、float、以及flex布局进行了嵌套对比,请自行使用抽样考察体会其不同情况下的效果.

列表和表格样式

总结

在阅读完第一本Head First HTML&CSS书以后,你会对HTML网页有一个大致了解,可以通过实践实现一个简单的静态网页.
请重点学习Div和Span 以及float、其display的不同属性和定位position不同情况下的嵌套,达到实现各种不同的静态页面布局.

HTML5 & CSS3

HTML5应用

结构变化
结构化标签(语义标签)
多媒体标签
input新增类型&属性

CSS3应用

盒子新特性

盒子阴影、圆角边框、图像边框、背景图高级特性、渐变背景

多栏布局
弹性布局
2D变换
3D变换
过渡效果
动画效果
光标设置
缩放
文本溢出
CSS初始化
CSS精灵技术
盒子模型

因为目前正在进行这方面的学习,所以在兼容性这方面目前并不会提及,在日后学习中,我会更新并总结,目前只提及其知识点.

总结

在进行了HTML5以及CSS3的学习完以后,你应该进行阶段总结,应该可以体会到,HTML5是用来给网页定型定框架,CSS3则是美化网页显示,但是如果你想实现绚丽的交互效果,就需要进行JavaScript的学习,在<<HeadFirst HTML5 Programming>>一书的后半部分,已经提及基础的JavaScript.
如果你暂时不想学习JavaScript交互,可以跟我一样先进行PHP和MySQL的学习.

JavaScript & jQuery

众所周知,HTML5与CSS3做的都是静态网页,而绚丽丰富交互效果是需要用到JavaScript.

JavaScript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

目前没有进行系统的学习,日后更新所属知识点

jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

目前没有进行系统的学习,日后更新所属知识点

总结

在学习了JavaScript和jQuery以后,你已经可以做出拥有丰富的交互效果的网页了,那么如果想使网站发布以及数据存储功能还需要学到下面的知识.

PHP & MySQL & Apache

没有数据库的网站,就没有灵魂.又或者还有一句话:一个应用的核心就是后台.如果想使你的网站拥有灵魂,你就需要进行后端知识的学习.

准备一下,开始后端知识的学习.

如果你想要快速开发的话(纯前端学习),可以直接跳到最后的集成环境安装一栏进行学习.

这里只提及知识点,详细的环境搭建文章链接在本文最后.

PHP

PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。

PHP个人理解就是用来传递数据,修改数据的服务器脚本语言,我们使用PHP语言就是为了实现,网页与数据库的交互.

PHP语言是需要Apache驱动,才能运行.在Apache一栏中会详细解释他们之间的关系.

Apache

Apache是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上，由于其跨平台和安全性被广泛使用，是最流行的Web服务器端软件之一。

不要上来就觉得Apache这个名字,就觉得又是一个知识点,肯定很难的样子,他其实就是一个用来发布网页的软件而已.需要操作的就是配置文件和指令

PHP文件和Apache之间的关系:

打个比方,有些软件可以在windows xp运行,但是在win10上面就不支持.

PHP文件可以使用文本编辑器编写,但是没有服务器环境就无法解析,计算机根本不知道PHP文件是什么,这时Apache就担当了这个角色,提供了对PHP文件的解析支持.

所以这就是对PHP是一门服务器脚本语言最好的理解.
只有在服务器环境下,才能运行PHP文件

MySQL

MySQL是什么,是数据库的一种,数据库有很多种,因为刚刚步入学习,所以暂时不讨论各个数据库之间的区别,后续学习到即会讨论.

MySQL和PHP以及Apache可谓是黄金搭档,因为Apache当中自带了PHP模块,而PHP语言中又有MySQL的预定义函数,可以直接进行MySQL数据库的增删改查操作.

数据库,很简单就是用来存储数据的,在此只作为知识点了解,后面会详细讲到.

MAMP & LAMP & WAMP & PHPStudy

那么如果你是一名纯前端开发者,或者不想要这些琐碎的后端环境配置,你可以百度这些关键词,下载安装集成环境.
其意思分别为

MAMP: Mac +Apache +MySQL +PHP;
LAMP: Linux +Apache +MySQL +PHP;
WAMP: Windows +Apache +MySQL +PHP;
PHPStudy: windows下一个集成环境软件.
每个软件都有安装教程,在此不赘述.

总结

windows下大多都有图形界面,但后端远程服务器,现在多数为Linux系统,因为要为公司减少开发成本,而且Linux系统下,环境配置与软件都较为方便,所以希望读者可以进行Linux系统的学习.

知识拓展

MySQL数据库操作以及各种错误处理.
CMD & Shell 操作指令大全
Git操作指令
Navicat 数据库软件
Linux系统下的环境配置
web服务器软件:Nginx、IIS.
服务器脚本语言:Python、Java.
数据库:NoSQL、Or

这些知识以后逐一开文章说明,在此仅供各位拓展了解.

详细的前端环境配置请看这篇文章:
深入浅出学习前端开发(环境搭建篇);

结束语

如果您对这篇文章有什么意见或者建议,请评论与我讨论.
如果您觉得还不错的话~可以点个喜欢鼓励我哦.
如果您想和我一起学习,请毫不吝啬的私信我吧~
介个是我的个人博客,欢迎参观哦~

网友评论

忠于人品陷于才华败于社会:为什么我听别人说PHP还不如nodejs
忠于人品陷于才华败于社会:@筑梦师Winston 这样的呀
筑梦师Winston:@忠于人品陷于才华败于社会这个不予评论吧，我个人学nodejs确实也是比较简单上手的，但是对于一个刚刚入门的新人来说，我并不会直接推荐学习nodejs，因为你根本不了解LAMP的各个角色，PHP还是最适合新人去了解一个LAMP项目最快方式，PHP简单易上手不无道理，直接上手Nodejs并不适合新人的。推荐学习的路线，并不代表是最好的。
残戈砺风云:php是世界上最好的语言
昊啊昊儿哟:总结的很到位,我正在走向前端开发的路程...谢谢大佬分享的学习方法.

深入浅出学习前端开发(入门篇)

前言

推荐书籍 & 网站推荐