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

前言

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

个人学习方法分享 整体学习路线分享

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

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

推荐书籍 & 网站推荐

Head First HTML&CSS Head First HTML5 Programming Head First PHP&MySQL Head First JavaScript Head First jQuery 图解HTTP 选读书籍 CSS世界 (涉及知识点较深) 网站:张鑫旭个人博客(CSS世界作者) 网站:在线文档API查询

这里只列出本人已经读过的书籍,因为这些书籍我本人有体会,可以和大家交流意见,后期我会更新新的书籍.

为什么会推荐HeadFirst系列书籍,这些书真的适合零基础入门阅读,讲的通俗易懂,面面俱到.如果你真的会学习,那么你可以通过这些基础书籍延伸很多知识点.

如果你有心去查这些书评,会发现,一些人对Head First系列书籍褒贬不一,觉得这书很没有,太基础.没错,恰恰就是因为基础,过来人才会觉得这书没什么用,作为一个零基础开始学习的我,我可以保证,这是入门前端最好最快的书籍.

而CSS世界这本书是作者经过十年使用体会提炼而成,我经验目前并不充分,阅读至45页便止步不前,因为涉及深度之深,不是我目前可以驾驭的.

建议大家在看书时,不要一上来就去搜那些难懂的书籍,这样会失去读书的兴趣,从而导致自己看不进去书.


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

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

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


结束语

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MixLab科技+设计实验室

App之底部导航栏的设计

hi,这是系列文章:App之xxx的第2篇,第1篇我总结了App之“文字”的设计技巧。今天来总结下app的底部导航栏的设计。 我为什么写这个系列的文章。因为我正...

40311
来自专栏Coco的专栏

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

2815
来自专栏前端新视界

如何使用 Bootstrap 搭建更合理的 HTML 结构

前言 Bootstrap 的成功不仅在于其简单易用,更在于其样式的规范性以及 HTML 结构的合理性。但是很多人在使用 Bootstrap 时只是依照文档盲目的...

3555
来自专栏HT

快速开发基于 HTML5 网络拓扑图应用

采用 HT 开发网络拓扑图非常容易,例如《入门手册》的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/co...

5878
来自专栏葡萄城控件技术团队

Web程序员们,你准备好迎接HTML5了吗?

HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash、QuickTime、Silverl...

2329
来自专栏HTML5学堂

聊一聊“@font-face”

在@font-face处理兼容中出现了一个#iefix这个东东?到底是神马东西呢? 案例: ? 首先先了解关于@font-face的基本知识 1、@font-...

3095
来自专栏葬爱家族

Android高德之旅(6)

我们看惯了高德地图,似乎已经习惯了它的ui,认为河流就是蓝色的,土地就是灰色的,交通路网就是黄色的。其实这个ui也是可以改的。今天就来使用下自定义地图ui。

1402
来自专栏分布式系统和大数据处理

Web标准中的常见问题

大概在2004年的时候,Web标准的概念藉由一本名为《网站重构》的书开始被国内人所了解。随后的几年中,其更少的代码量、更好的搜索引擎友好性、更好的浏览器兼容性使...

1135
来自专栏程序员的知识天地

2018前端工程师成长路线图

成为前端工程师,第一步应该是学习HTML/CSS/JavaScript,这是基础。

3562
来自专栏花叔的专栏

解读小程序最新开发能力,官方只说了部分

微信7月11日发布了一大堆小程序新特性,而官方发文只提了其中几个点,今天为大家详细解读一下,主要涵盖以下内容:(注.这不是热更新,这是需要更新微信到1.4.0版...

3857

扫码关注云+社区

领取腾讯云代金券