整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

web前端工程师学习路线指南

web前端工程师学习路线指南

着一条乡间小路,走着走着,分叉越来越多,选择也越来越多,迷路成为了必然。

对于编程初学者来说,甚至“这条路”在哪都找不到。

今天,W3Cschool新手村村长将扮演指路人的角色,讲解如何零基础入门前端,学习前端,不再迷茫。

1.入门

有人说:只要有恒心,铁杵磨成针。这不对,学习重在兴趣,而不在恒心。当你通宵达旦的玩游戏,捧着自己喜爱的名著谈天说地时,不是因为有恒心,而是因为兴趣。只有不感兴趣的东西,才需要恒心的妥协。

所以请抛弃恒心,拥抱兴趣。

一个好的启蒙老师,不需要教会你任何本领,却能培养你对一件事的兴趣和良好的学习习惯。

对于广大的前端学员来说,了解这个领域和培养学习兴趣尤为重要,这意味着你能在前端这条路走多远。

怎么培养兴趣?

  1. 成就感;
  2. 即学即用;

那么,《Head First HTML与CSS》就成了最适合零基础的前端学习书籍。


从书的封面就可以看出,这是一本“重视大脑的学习指南”,看完本书,你对什么是HTML、CSS就有了大概的一个了解,并且可以编写一些简单的页面了。

这本书有如下的几个特点:

  • 任务型教学,先发布一个任务,再教你如何完成它;
  • 插画多,图文结合,虽然有700多的页数,但一小时翻50页完全不是问题,你可以像看小说一样,看它。
  • 没有难懂的专业名词,一旦出现,就会花一整页,甚至多页来解释它;
  • 它能传递给你学习的方法,避免以后走弯路;

这本书是入门的绝佳读物,但不是必须,你也可以跳过它,但村长认为还是读读它。

2.HTML&CSS

如果你看完了《Head First HTML与CSS》,其实你已经学会了这两个前端的基础知识。你只需要丰富一下“词汇量”,让自己能做出任何的网页就可以了。

什么是HTML和CSS?

一个画家要画一只乌龟,得先画出轮廓,再完善细节,最后涂上颜色,HTML和CSS干的也是这么一件事。

因为HTML和CSS非常简单,村长并不是很建议初学者看视频,如果你觉得学习有困难,可直接看《Head Frist HTML与CSS》即可。简单的事,不要花太长的时间。

丰富自己的词汇量,最简单快捷的方式,是直接阅读W3Cschool的html和css文档。

当然,你还需要了解一下他们的最新版本,html5和css3.

学完html和css,你就可以独立制作任何的网页了,没错!在本地写个淘宝出来,完全不是问题。

如果你想巩固下学习成果,可以拿个实战项目,练习一下.

3.JavaScript

与html和css不同,JavaScript是门真正的编程语言,所以学起来难度就大。

什么是JavaScript?

还是刚才画家画乌龟的那个例子,这个画家人们都叫他“神笔马良”,他画了只乌龟,并且给它涂上了颜色。

这时候,马良将这只乌龟“拉”了出来,成为了一只真正的乌龟,它能走路,也能吃东西。

再举个简单的例子,有时候登录网站时,它会提示:

这个就是使用JavaScript写的,html和css是不能动的,只有JavaScript可以。

JavaScript作为一门编程语言,非常强大,它有很多事可以做,除了运用到前端领域,它还可以做游戏、应用等等,用途很广泛。

由于JavaScript有些难度,如果你习惯了学习html和css的方式,可以直

如果你喜欢看书,那么推荐看《JavaScript高级程序设计》,这是一本对初学者很友好的书。


有些程序员会推荐《JavaScript权威指南》,俗称犀牛书,村长并不推荐。因为它属于中级读物,对初学者不友好,但作为经典的JavaScript书籍,还是值得考虑的。

如果以上学习方式,你都不喜欢,或者太难理解JavaScript了,也可以观看视频学习。

当你将HTML、CSS、JavaScript(前端三驾马车)学完后,那么恭喜你,你已经完成了前端学习的课程。

理论上,你已经能胜任前端的工作了!

4.前端框架

实际上,如果你只掌握了三驾马车,那么没有公司会愿意要你,因为实际上你的工作效率会极低。当然,仅仅是效率上的问题,而不是做不出来。

接下来,学习前端框架迫在眉睫。

什么是前端框架?

如果只会html、css和javascript,写一个网站时,你需要一行代码,一行代码的写,假如写几个简单的页面,自然不在话下。

可是如果让你写个像淘宝的网站呢?也许这个量是几十万行以上的代码。

这时为了提高效率,你将别人已经写好的淘宝,拿了过来,放在了自己的网站上,然后稍微修改下代码,让它看起来和老板的预期一样。

于是另外一个淘宝诞生了,你只花了一点点时间就完成了它。

框架,大概就是这么个意思。

框架可以说是一种工具,学起来很简单,就像学习word、excel一样简单,框架是必学项。

框架有很多,我们推荐你学习Bootstrap。

这个框架好用,重要的是简单,适合刚学完基础课程的你。

当学习完Bootstrap后,恭喜你,你可以高效的完成工作,更加符合企业的用人需求了。

前端是一个随时间变化很大的职业,新框架的运用,也成了很多企业用人的硬性要求。

最具代表性的就是三剑客:React.js、Vue.js和Angular。

你不必完全掌握这三个,你可以先学会其中一个,后续根据工作需要,再掌握其余两个,甚至是不学习它们。

5.Git-管理工具

Git对前端写程序没有多大影响,但它同样十分重要。

什么是Git?

这个一个版本控制工具,可以很好的管理代码,并且共享给其他同事。

Git更像是技术界的excel、word,它只是一个工具,方便管理你的代码。一些稍成型的公司,都可能会使用它作为管理工具,

因此,你最好学会它。

5.后记

自此,你已经具备了一个前端工程师的基本素质。前端的学习过程,是一个由“难”逐渐“简单”,再由“简单”变“难”的过程。

前半段是入门的过程

后半段是成为大牛的过程

总之学前端只有八个字:明确方向,兴趣主导!

仅此而已。

一篇介绍了网页的基本结构,那如何编写网页的内容? 前提是要学会HTML标签的用法,本篇主要介绍HTML标签是什么,如何学习,需要大概多长时间学习。

本篇主要基于html5介绍,html5 是最新版的标准,之前的版本可以自己了解下。

HTML 简介

HTML的英文全称是Hyper Text Markup Language,直译为超文本标记语言。它是全球广域网上描述网页内容和外观的标准。HTML包含了一对打开和关闭的标记,在当中包含有属性和值。标记描述了每个在网页上的组件,例如文本段落、表格或图像等。

事实上,HTML是一种因特网上较常见的网页制作标注性语言,而并不能算做一种程序设计语言,因为它缺少程序设计语言所应有的特征。HTML通过IE等浏览器的翻译,将网页中所要呈现的内容、排版展现在用户眼前。

一个html标签基本结构如下:

<标签名称  属性="属性值"></标签名称> 或 <标签名称 属性="属性值"/>

有以下特点:

  1. 由尖括“<”、“>”号包围的标记元素,比如 <html>和</html>就是一对标记。
  2. 通常是成对出现的,比如 <div> 和 </div>,也有单独呈现的标签,如:<img />、<input/>等。
  3. 标签对中的第一个标签是开始标签,第二个标签是结束标签;
  4. 一般成对出现的标签,其内容在两个标签中间,如<h1>标题</h1>。单独呈现的标签,则在标签属性中赋值,如<input type="text" />。
  5. 网页展示的内容需写在<body>标签中。
  6. 标签不区分大小写,建议按规范小写。

HTML标签按功能大体可分以下几种类型:

  1. 构成网页基本架构的标签,比如:<!DOCTYPE>(定义文档类型)、<html>(根标签),<meta>(元信息)、<head> (网页头部区域)、<body> (网页内容区域)。
  2. 用于引入外部资源客户端脚本的标签,比如:<link>(外部资源,css样式文件), <script>(客户端js脚本)。
  3. 用于描述布局的标签,比如: <div>、<ul>(无序列表)、<ol>(有序列表)、<h1>到<h6>(标题1到6)、<table>(表格)、<footer>(页脚)、<header>(页头)等。
  4. 用于描述文本格式的标签,比如:<p> (段落)、<strong>(加粗)、<q>(引用)、<span>等。
  5. 用于引入多媒体资源的标签,比如:<img>、<video>、<audio>等。
  6. 用于制作表单的标签,比如:<form>(表单),<input>(输入框),<textarea>(文本域),<select>(下拉菜单),<radio>(单选项),<checkbox>(多选项)等。
  7. 其它标签(不是很常用的)。

如何学习html的标签用法

没有捷径,需要多看,多练。在这里我不一一介绍每个标签的具体含义及用法,相关语法可以参考以下几个网站:

  1. https://www.w3cschool.cn/html5/
  2. https://developer.mozilla.org/zh-CN/docs/Web/HTML

制定一个学习计划,每天坚持下去

要求,每天花费3到5个小时学习,至少1到2周掌握常用的html标签含义及用法,可以按照上面介绍的标签进行分类学习,感谢关注,祝你学习愉快。

 HTML是最流行的Web前端开发技术之一,它是一种用于创建网页和 Web 应用程序的标记语言。HTML与CSS和JavaScript结合使用以创建有吸引力且响应迅速的前端网页。

  HTML 提供了几个不同的元素,如 <head>、<body>、<p>、<img>、<a> 等,它们充当网站的构建块,浏览器使用这些 HTML 元素来解释和表示网页上的内容。

  HTML 概述

  HTML(超文本标记语言)是Web浏览器理解并用于呈现网页的语言。在不同元素的帮助下,HTML 决定了网页的外观和显示内容。超文本标记语言 (HTML) 是一种用于创建独立于平台的超文本文档的简单标记语言。

  HTML 文档是具有通用语义的 SGML(标准通用标记语言)文档,可用于表示来自各种学科的数据。HTML 标记可用于创建超文本邮件、文档、新闻和超媒体;选项菜单;数据库查询结果;带有内嵌图形的简单结构化文档;和现有数据集的超文本视图。

  HTML 语言的主要用途

  轻松浏览互联网

  超文本允许你访问 Internet 上的不同页面,尤其是在你没有记住所有 URL 的情况下。你只需单击链接或在地址字段中输入 URL 即可浏览互联网。超文本对于引导用户浏览你的网站并充当网关至关重要,以便他们知道存在不同的页面并可以在它们之间导航。如果不使用超文本,用户很难检测到网站上是否还有其他网页。

  尖端功能

  HTML 支持 Polyfill 功能,它是一种允许你在 HTML 中本地使用不同技术的代码。你可以使用此功能复制未来的API,同时为过时版本的浏览器提供回退功能;你可以自定义polyfill库以满足你的特定要求并执行其他人从未做过的事情。HTML 的这些尖端特性是HTML有如此多用途的原因。

  

  创建 Web 文档

  网页只是一个Web文档,你可以在其中编写你希望用户看到的材料,然后将其包装在指示机器如何格式化整个内容的代码中。这会告诉你的浏览器标题、正文和元数据中的文本,它带有标签,因此计算机知道如何处理你提供的信息。

  数据输入

  你拥有执行任何数据输入任务所需的所有 API。作为开发人员,你只需在相关字段中添加标签,例如文本和数据格式,你甚至可以提供屏幕键盘和验证,确保为用户提供流畅和愉快的体验。

  游戏开发

  游戏开发是 HTML 的重要用途之一。尽管不再支持Flash,但HTML仍可用于创建基于浏览器的游戏。你使用的API不必完全实现,但可以使用最必要的组件,同时去掉了其余的功能,带来了更轻松的体验。由于HTML5的进步,HTML正迅速成为最流行的游戏编程语言之一。

  离线存储

  如果你的一些用户不在线怎么办?在最新版本的HTML中找到的应用程序缓存方法的帮助下,你仍然可以使你的应用程序运行。应用程序缓存负责各种离线功能,包括各种组件,包括需要更新的API调用。通过清单文件,你可以控制浏览器对其离线使用的操作,甚至它使用的资源。

  原生API使用

  API代表“应用程序编程接口”,这是两个不同应用程序相互通信的一种方式。通过使用API,HTML包括地理定位、事件管理、拖放和更多功能,HTML编程现在比以往任何时候都更强大。开发人员还可以使用具有异步特性的现代在线应用程序。

  在客户端存储东西

  IndexDB和Localstorage 使在客户端存储文件更简单、更高效,这些都有自己的一套强大的功能。

  Localstorage支持setItem、getItem 和removeItem方法,以及基于字符串的哈希表存储。IndexDB带有更多的存储空间,你可以在用户许可的情况下增加。

  

  方便使用的

  与其他编程语言不同,HTML以用户友好而闻名,即使对于初学者也是如此,所以,这也是HTML的主要用途之一。HTML中有语义组件来描述它们所具有的内容类型,例如,页眉、页脚、主要、摘要和时间等HTML常用标签是自描述的。

  可访问的富Internet应用程序

  HTML5语义标签的使用使网站搜索引擎和屏幕阅读器友好,如果正确使用语义标签,视障人士可以使用屏幕阅读器从网页中获取信息。

  结论

  在这篇博客中,我们讲述了HTML的所有重要用途,它通常是Web开发人员学习的第一语言,所以,如果你想学习Web编程并且害怕学习HTML的难度,你不必担心,HTML非常容易学习。