Web课程导学

短命女 2021-09-24 05:36 223阅读 0赞

### 文章目录 ###

*  0x00 文章内容
 *  0x01 学习Web的意义
 *  0x02 Web的学习路径
 *  0x03 学习Web的工具准备
 *  0x04 学习Web的思想准备
 *  0xFF 总结

# 0x00 文章内容 #

1.  学习Web的意义
2.  Web的学习路径
3.  学习Web的工具准备
4.  学习Web的思想准备

# 0x01 学习Web的意义 #

1.  为什么要学习Web知识？

答案有几千种，大学的课程、毕业设计、前端工程师、后端工程师、全栈工程师，几乎跟IT相关的岗位，都需要具备一定的Web基础。Web技术，主要体现在互联网的网页制作上。我们的生活与Web技术息息相关，每天都会打开浏览器来浏览各种各样的内容，包括手机端或者PC端。学习Web技术，一直都没过时，而且，在发展过程中，Web技术的生态更加繁荣，以至于市场上相关岗位的需求也越来越大，就业机会不断增加。

1.  前端工程师的薪水如何？

以前端工程师为例，如果你入门Web后，再经过不断的学习，参与项目的开发，积累一定的经验，具备1-3年的工作经验，可以达到10-20K的薪资；而3-5年的工程师，可以达到15-25K的薪资，甚至是20-40K的薪资。薪资水平并不低，况且近年来在小程序等技术的催生下，前端工程师的薪资水平不断提高。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYW9jazIwMTg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][2020061810030433.png]  
相较于其它开发语言，Web更加容易上手，浅显易懂，不需要很强的逻辑思维，也不需要像应用程序一样接受严格的审查，只要你输入正确的代码，浏览器的网页就会展示你想表达的内容。

即使你不是技术开发人员，也没感兴趣加入此行业，了解Web的相关技术知识，也能够有主语你融入当今时代的“互联网+”的生活。比如：Web技术可以帮助你高效收集干货资料；帮助你正确理解网页异常，如遇到404是什么原因，遇到502是什么情况等等；可以帮助你鉴别钓鱼网站，防止被骗。Web的好处还有很多很多，自己可以去搜查资料了解。

# 0x02 Web的学习路径 #

聊到Web的学习路径，需要从了解Web基础知识讲起，在经过几门课程的学习之后，再深入学习，发展其他方向，具体的学习路径会有所不同。如通用的从Web小白成长为初级前端工程师的学习路径如下：

零基础 => web的概念 => HTML => CSS => JavaScript  
![在这里插入图片描述][20200429175433943.png]  
`Web的概念`：Web是World Wide Web——万维网的简称。它是建立在互联网上，为用户使用浏览器浏览信息的可视化界面。

`HTML`：超文本标记语言能够搭建网页内容。但使用HTML只能搭建毛坯网页。

`CSS`：层叠样式表用来添加网页样式。它能使网页上的字号、字体颜色、背景图像等变得更加美观。使用CSS相当于给网页装修。 就像我们给毛坯房铺地砖、粉刷墙。

`JavaScript`：一种可添加网站交互效果的编程语言。使用它网页就动起来了，就像一套布满智能家具的房子能实现人与家具的互动。JavaScript能使网站拥有更多互动效果。

# 0x03 学习Web的工具准备 #

开始学习Web之前，请先准备以下工具：

1.  一台电脑。笔记本或是台式机均可。
2.  一款编辑器。如同作家写作需要纸笔输出文字一样，学习编程需要编辑器编写代码。初学者可以选择HBuilder、Sublime、Viso Studio Code等编辑器，下载链接如下：

Sublime：[http://www.sublimetext.com/3][http_www.sublimetext.com_3]  
Viso Studio Code： [https://visualstudio.microsoft.com/zh-hans/downloads/][https_visualstudio.microsoft.com_zh-hans_downloads]

Windows操作系统，安装时注意查看电脑的位数。32位的电脑下载32-bitX86的版本；64位的电脑下载64-bit86的版本。如果是Mac系统，则选择Mac版本。

例如：`Sublime`的下载  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYW9jazIwMTg_size_16_color_FFFFFF_t_70 1]  
如何知道电脑的位数呢？

请在桌面点击`计算机`（`我的电脑`/`此电脑`）图标，右键单击`属性`即可看到：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYW9jazIwMTg_size_16_color_FFFFFF_t_70 2]

1.  两款浏览器。编写完代码后，需要把代码在浏览器中运行出来，这个步骤叫做：测试。  
    不同的浏览器会呈现出不同的网页效果，建议初学者下载两款浏览器用于测试。  
    常用的浏览器有：

![编写者][20200429175538464.png]

# 0x04 学习Web的思想准备 #

在开始学习Web之前，你还需要注意几个细节：

使用英文小写命名文件: 很多计算机，特别是 Web 服务器对中文、大小写敏感。我们尽量使用英文小写字母命名文件。

不使用空格分离文件名：因为浏览器、Web服务器、编程语言对“空格”的理解和处理不同，所以为了确保网页链接不被破坏。请在英文输入法下使用横线“-”分离文件名中的英文单词。记住是使用横线，不是下划线。  
`正确示范`：sny-page.html  
`错误示范`：sny\_page.html

如果你想成为更加优秀的Web前端工程师，还应具备UI设计能力和营销策划力。只有这样，你的Web技术才能发挥得淋漓尽致，你制作的网页才会更具吸引力。

# 0xFF 总结 #

提前做好规划：你想做什么样的网页？请先画好草图。即便是专业的研发团队，也是先由美工或是产品经理用原型工具规划好网页布局，再由工程师实现的。比如：你想为你的宠物狗制作一个网页，记录它的成长。建议你从手绘一张草图，考虑网页结构开始。

--------------------

**福利：**  
[邵奈一的技术博客导航][Link 6]  
[邵奈一][Link 1] 原创不易，如转载请标明出处。

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYW9jazIwMTg_size_16_color_FFFFFF_t_70]: /images/20210923/da68e9e925354546a26fdceb10fa7c41.png
[2020061810030433.png]: /images/20210923/a4713de777ab48e3b470d5e398a0eaf8.png
[20200429175433943.png]: /images/20210923/c2646bf5ca1341109cc4a2e991119097.png
[http_www.sublimetext.com_3]: http://www.sublimetext.com/3
[https_visualstudio.microsoft.com_zh-hans_downloads]: https://visualstudio.microsoft.com/zh-hans/downloads/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYW9jazIwMTg_size_16_color_FFFFFF_t_70 1]: /images/20210923/a95efb7ede3a41a693ceaf819e5ceba9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYW9jazIwMTg_size_16_color_FFFFFF_t_70 2]: /images/20210923/2293d81ff5924d3794c2f869d172126b.png
[20200429175538464.png]: /images/20210923/528dfd24b8224446b9f5f2cbb9f3b13c.png
[Link 1]: https://blog.csdn.net/shaock2018
[Link 2]: https://img-blog.csdnimg.cn/20190608000417972.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYW9jazIwMTg=,size_16,color_FFFFFF,t_70
[Link 3]: https://img-blog.csdnimg.cn/20190514084602748.png
[Link 4]: https://weibo.com/5680168183/
[Link 5]: https://www.jianshu.com/u/6f033c6a3b90
[Link 6]: https://blog.csdn.net/shaock2018/article/details/89349249