0x00 Web开发学习路线

本篇文章将随着我个人知识的更新而更新~

前端学习路线

前端基础

1.HTML

HTML语言是用来编写网页骨架的一种语言。

HTML是文本标记语言,门槛比较低,但知识点杂。

学习HTML的主要目标是:

  1. 理解HTML的语法和编写规则,对网页是如何形成的有大致的了解
  2. 掌握常见的标签,手敲感受
  3. 掌握表单及表单验证

学习HTML的目的是学会开发网页,而不是记住所有标签名、属性名等

建议过一遍知识点(可以找线上教程),然后掌握重点即可。

表单验证课程:BV16K4y1Z7Gb

HTML标签参考手册:w3school

2.CSS

CSS是用来设置HTML元素样式的一种语言

个人在写网页时的感受是 HTML的标签中虽然设置了宽、高、颜色等属性来调整元素的样式,但是我一般不会用,而是只用HTML标签来搭建网站的架子,具体的元素样式都由CSS来设置

CSS中的内容相比HTML更加得杂且多

学习CSS的主要目标是:

  1. 了解CSS语言的语法规则,掌握常见的选择器
  2. 学会使用CSS来进行网页的页面布局!

CSS中关于样式的具体设置不是记忆的重点,比如说CSS可以调整字体的大小、颜色、粗细等等,只需要简单的了解一下,在真正要用的时候再去搜索具体该怎么用就好了。

CSS比较全面的基础教程:BV1Bx411u7cS

CSS3进阶教程,侧重于实践,需要一定的基础:BV1et411q74F

CSS参考手册:w3school

3.JavaScript

JavaScript 和HTML、CSS不同,是一种编程语言,是浏览器端的脚本语言。

用HTML和CSS写出来的网站是“静态”的,利用 JavaScript可以实现一些动态效果。

JS 快速入门时学习的主要目标

  1. 掌握基础语法(变量声明、基本数据类型、流程控制语法等)
  2. 了解 JS 中 函数、对象的用法
  3. 学习 Web API (即DOM 和 BOM)

JS 相比HTML、CSS难很多,相比其它编程语言则属于易学难精的类型 ,即便是初学者(比如我)在没有完全理解掌握这门语言的情况下就已经可以用它来做项目了。

入门时的重点是学习HTML DOM,学完就能做出很多页面上的动态效果

PS:如果完全没有学过其它编程语言建议还是先过一遍语法

JS 视频教程,讲得很细而且有很多小案例,适合入门: BV1Sy4y1C7ha

ES6电子书教程:Es6入门教程

4.实践

在掌握HTML + CSS + JS 后 就已经能实现非常多的页面了

毕竟早年没那么多框架和技术的时候,程序员就是用这几门语言来开发网页的~

我自己收集了一些纯前端的小案例:纯前端项目

最新版本

HTML的最新版本为 HTML5,新增了绘图标签<canvas>、音频播放标签audio等新标签,该网站可以测试浏览器对HTML5的支持情况:

在这里插入图片描述

CSS的最新版本为CSS3,包含了很多较为重要且实用的样式,各个浏览器对其的支持度已经比较好了。

JS的历史:

  • JS目前共有 ES1~ES6 共计六个大版本

  • ES1、ES2、ES3分别于1997、1998、1999年发布

  • ES3是JavaScript第一个在业界被广泛支持的版本,入门所学的语法知识就是ES3中的内容

  • ES4 对ES3 的改动过于激烈,因此没有被通过

  • ES5 中新增了 use strict、Array对象和Object对象的一些方法 等等

  • ES6 中新增了let、const等关键字,Class,迭代器,Map、Set 以及大量的API等等等。ES6 继承了曾经的ES4 中的许多内容,且向下版本兼容。

ES6目前只被部分支持

Can I Use网站可以查询某个HTML5标签、某个CSS3样式甚至某个JS语法在浏览器中的支持情况。如:

在这里插入图片描述

绿色表示支持,红色表示不支持。表格第一行为是各个浏览器的名称,后面的每一行对应浏览器的一个版本,越下面的为越新的版本。上图表面怪异盒模型在所有的较新版本浏览器中都已经被支持了。

HTML、CSS、JS 新版本中的很多特性都已经被浏览器接纳、使用。

但其中的很多内容在B站的课程上没有被提到过,可能是开发时使用的较少?

所以我对这些新版本的态度是不全学,而是遇到了再去查即可

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值