Web前端开发现状及基础内容_web开发进展怎么写的

主要内容

1、Web前端现状

2、IDE介绍

3、Webstorm使用

4、HTML介绍

学习目标

Web前端现状

市场缺口

前端程序员缺口非常大，因为它正式成为一个岗位才几年，国内最早出现前端招聘岗位在2012年左右，在此之前，前端工作基本上都是由服务端工程师包办的，或者是由设计师来产出HTML页面。随着现代互联网应用的火爆，前端难度加大，导致后台程序员不能完全搞定，所以企业们急切需要真正懂前端技术的“前端人员”。

发展前景

近十年以来，IT行业发展火热，衍生了很多新职业，例如UI设计师、开发工程师、软件测试工程师等等，在众多备受瞩目的新生职业中，Web前端工程师是其中的一员。

Web前端在IT行业真正受到重视大概也就六七年的时间。随着互联网的迅猛发展，各种互联网项目也不断兴起，对用户体验提出了更高的要求，前端开发也由此逐渐成为了重要的研发角色。从2012年至今，“Web前端工程师”的需求持续走高，薪酬也是水涨船高，所以，有不少人立志要成为前端开发工程师，但同时又担心Web前端开发到底还能热多久。

“女怕嫁错郎，男怕入错行”，今天，就让我这位资深的Web前端的“程序猿”来给大家分析一下Web前端开发在2019年的发展前景和就业形势吧。

在了解Web前端的发展前景和就业形势前，我们还是来了解一下什么是Web前端和学习Web前端应该掌握哪些知识吧！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PvlqJFD7-1631930828652)(010100-前端开发现状及基础内容.assets/clip_image002.jpg)]

什么是web前端

Web前端是互联网时代软件产品研发中不可缺少的角色。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都属于前端工程师的专业领域。

从狭义上讲，Web前端就是使用HTML、CSS、JavaScript等专业技能和工具将产品的UI设计稿实现成网站产品，涵盖用户PC端、移动端等网页，处理视觉和交互问题。

在Web前端这个岗位兴起之前，html+css的工作是被视觉人员所承担的，而js这部分则是由后端完成的。随着智能手机和移动互联网的普及，PC端、手机端等五花八门的应用占领着每个人的手机，随之而来各种定制化的UI风格让兼容问题变得越来越头疼。因此，有企业开始把html+css+js这部分工作独立出来，由一个新的岗位来处理，成为了一个处理视觉和交互的综合岗位，这才有了Web前端这个岗位的出现。

因此，Web前端开发行业是伴随Web兴起而细分出来的行业。实际上，Web前端是最接近产品和设计的工程师，起到衔接产品和技术的作用，它存在在互联网的每个角落，我们使用的微信里面的各种功能、小程序等都离不开web前端技术。

做一名web前端工程师需要哪些知识

与其他计算机主流技术所不同的是，Web前端所包含的知识模块很多，就目前而言，HTML、CSS、JS、DOM是目前前端技术最为基础也是最为主要的四大模块，但会随着实际需求而有所改变。

一名优秀的Web前端工程师，需要JavaScript语言基础扎实，具有良好的规范开发习惯；熟悉常用的设计模式，熟练使用Vue、Angular技术栈开发；能够熟练使用angular、vue、echarts、jquery、react等框架进行传统开发；要熟悉MVVM、MVC开发模式；熟悉前端工程化、自动化技术，可以根据需求配置Gulp文件及更改Webpack配置文件；熟练使用git版本管理工具。

此外，还要熟悉HTML5、CSS3的新特性，了解不同浏览器之间的差异，制作出的页面能够有很好的兼容性。

Web发展得很快，几乎每天都在变化！如果没有快速学习的能力，就跟不上 Web发展的步伐。作为前端工程师仅仅依靠今天的知识是无法适应未来的，必须不断提升自己，不断学习新技术、新模式。因此，不仅作为新人小白要努力学习，提高自己；就连已经入职三五的前端开发工程师，也需要不断学习，了解前端技术的变化，提高自己的技术技能。

web前端的前景和就业形势

学习Web前端的就业面很广，选择的岗位有：前端开发工程师、资深前端开发工程师、网站重构工程师、前端架构师等等。

虽然近两年大数据、人工智能等很火，但Web前端开发依然是十分热门的，特别是随着谷歌、YouTube、FireFox等大型企业纷纷将视线转向HTML5，前端开发已经进入HTML5时代，所以，Web前端在今后十年仍有很大的发展空间。

据统计，我国HTML5前端工程师人员的缺口将达到10多万，因此，Web前端工程师是一个非常有“钱”途的职业，并且薪酬会根据技能的深入而有不同程度的增长，其中北京、上海、广州、深圳等地前端工程师的薪资待遇更是一路飙升。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1BJ4B7lv-1631930828655)(010100-前端开发现状及基础内容.assets/clip_image003.png)]

所以总的来说， web前端在目前和未来都是稀缺的，是一个有“钱”途的职业。

谁和前端人员打交道

产品经理把用户可能的需求提出来，和前端还有后端交涉，这个东西如何实现。确定可行后，由设计设计出UI图，前端把它做出来，第一步可能是静态的，纯html css，然后我们再用angularjs、js实现一些业务方面的功能，最后和后台的接口进行联调，一般会是这么一个过程。那运营呢？有时候会需要你配合他们的营销方案对产品做一些调整，比如圣诞节到了，它要求你对公司的官网加一些雪花的特效。这也是需要你配合的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N1Nm3Um4-1631930828659)(010100-前端开发现状及基础内容.assets/clip_image006.jpg)]

常用网站

w3cschool、w3c菜鸟、百度

前端全套教程

这个里面是前端全套教程，你们有时间要多去学习，里面推荐几个人，阮一峰，有句话叫阮一峰出品，必属精品，他是学金融的，现在在IT方面这么有成就，转行过来的同学是不是更有信心了？

IDEA介绍

IDEA介绍

我们都知道网上的页面是编程人员写出来的，用什么写的呢？用编码工具或IDE集成开发环境。

编码工具：

辅助程序员编写源代码的工具，它类似word，我们写文档会打开word文档来编写。

写代码也一样，需要借助工具来开发。

常见的编码工具有记事本、sublime Text、notepad++、VSCode、HBuilder等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yWHdaF0W-1631930828665)(010100-前端开发现状及基础内容.assets/clip_image018.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2qv8Jqls-1631930828666)(010100-前端开发现状及基础内容.assets/clip_image020.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtNoooqh-1631930828667)(010100-前端开发现状及基础内容.assets/clip_image022.jpg)]

这里我们是不推荐使用Dreamweaver，它更多的是针对前端设计人员来用，而不是我们编程人员。

其它语言的常见IDE有：eclipse、visio studio等。

浏览器介绍

前面讲了IDE用来编码，写好的代码如何展示？通过浏览器来展示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CzdloFUo-1631930828668)(010100-前端开发现状及基础内容.assets/clip_image024.jpg)]

以上这些，都不要再使用，身为前端，要不论是学习还是工作都应该使用更符合业W3C规范的浏览器。

推荐使用的浏览器：

前两者都非常的优秀，它们比其它浏览器优先之处在于

1.速度快，不是指打开的速度，而是指解析页面CSS、JS的速度

2.支持更多新的功能，比如最新的标准html5、css3的一些新功能

3.插件化开发，chrome和firefox提示了应用商店，你可以安装自己喜欢的插件，定制自己的浏览器

调试工具

chrome自带的开发者工具、firebug、IE有HttpWatch

Webstorm使用

安装

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kUSAzhDX-1631930828674)(010100-前端开发现状及基础内容.assets/clip_image038.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ag7FGkHO-1631930828675)(010100-前端开发现状及基础内容.assets/clip_image040.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ClzNdShS-1631930828675)(010100-前端开发现状及基础内容.assets/clip_image042.jpg)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CtE5Gzbg-1631930828675)(010100-前端开发现状及基础内容.assets/clip_image044.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RGYZDbq1-1631930828676)(010100-前端开发现状及基础内容.assets/clip_image046.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jOMqbOUJ-1631930828676)(010100-前端开发现状及基础内容.assets/clip_image048.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m3OMFVPh-1631930828677)(010100-前端开发现状及基础内容.assets/clip_image050.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZUPdZen-1631930828678)(010100-前端开发现状及基础内容.assets/clip_image052.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9mi1Qgue-1631930828678)(010100-前端开发现状及基础内容.assets/clip_image054.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dY3cUB7-1631930828679)(010100-前端开发现状及基础内容.assets/clip_image056.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aRkQKe09-1631930828679)(010100-前端开发现状及基础内容.assets/clip_image058.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XofDqwzM-1631930828680)(010100-前端开发现状及基础内容.assets/clip_image060.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lq941LRq-1631930828681)(010100-前端开发现状及基础内容.assets/clip_image062.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GCLim035-1631930828682)(010100-前端开发现状及基础内容.assets/clip_image064.jpg)]

常规操作

创建项目

file–>new project–>指定路径–>点击上面的新建按钮创建一个文件夹，然后ok，创建好项目后，项目文件夹中会带有.idea这样一个文件

创建文件

右击项目–>new–>html file–>输入文件名–>下面的下拉框可以选择h5还是h4或是xhtml类型的文档，我们选择h5，也就是默认的。写名字的时候不用加html后缀，webstrom会自动为我们添加

重命名

右击html文件–>refactor–>rename—改好后回车

删除文件

右击html文件–>delete–>ok（或者直接按电脑上的del键，回车）

常规配置

如何更改主题

file->setting->editor->colors Scheme ->General->scheme选择你的主题

如何更改字体大小

file->setting->editor->colors Scheme->Color Scheme Font->Size修改字体大小

如何设置代码自动换行

file-settings-editor->general-> Soft-wrap files：*.md; .txt; .rst; .adoc;.html;.css;.js;

修改快捷键主体

file->settings->keymap

导入主题

file->import settings->导入文件后重启，再去主题设置里面选择刚导入的主题

HTML介绍

什么是HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language

(HTTP,HTTPS,XML)

· HTML 不是一种编程语言，而是一种标记语言

· 标记语言是一套标记标签 (markup tag)

· HTML 使用标记标签来描述网页

· HTML 文档包含了HTML 标签及文本内容

· HTML文档也叫做 web 页面

· 用该语言编写的文件，以 .html或 .htm为后缀

· HTML不区分大小写，建议小写

什么是标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

· HTML 标签是由尖括号包围的关键词，比如

· 封闭类型标记（也叫双标记），必须成对出现,如

· 标签对中的第一个标签是开始标签，第二个标签是结束标签

· 开始和结束标签也被称为开放标签和闭合标签

· 非封闭类型标记，也叫作空标记，或者单标记，如

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zuhacLps-1631930828682)(010100-前端开发现状及基础内容.assets/clip_image066.jpg)]

什么是元素

“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7LE2K2iM-1631930828683)(010100-前端开发现状及基础内容.assets/clip_image068.jpg)]

web浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2cOVxBJ7-1631930828684)(010100-前端开发现状及基础内容.assets/clip_image070.jpg)]

HTML版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bqXjXp3z-1631930828684)(010100-前端开发现状及基础内容.assets/clip_image071.png)]

HTML属性

属性是用来修饰元素的，属性必须位于开始标签里，一个元素的属性可能不止一个，多个属性之间用空格隔开，多个属性之间不区分先后顺序。

每个属性都有值，属性和属性的值之间用等号链接，属性的值包含在引号当中，属性一般以属性名/值对的形式出现。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6dMLBpLx-1631930828685)(010100-前端开发现状及基础内容.assets/clip_image074.jpg)]

HTML注释

为代码添加适当的注释是一种良好的编程习惯，注释只在编辑文本情况下可见，在浏览器展示页面是并不会显示，注释标签不支持任何属性。

语法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oF9rYvS9-1631930828685)(010100-前端开发现状及基础内容.assets/clip_image076.jpg)]

HTML基本结构

<!DOCTYPE html>  
<html lang="en">  
  <head>       
    <meta charset="UTF-8"/>       
    <title>标题</title>  
  </head>  
  <body>  
  </body>  
</html>  
1
2
3
4
5
6
7
8
9

doctype的作用

DOCTYPE是document type (文档类型) 的缩写。声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分

删除会发生什么

在W3C标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异。这种渲染方式叫做混杂模式。在W3C标准出来之后，浏览器对页面的渲染有了统一的标准，这种渲染方式叫做标准模式。<!DOCTYPE>不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给了浏览器，有多少种浏览器就有多少种展示方式。因此要提高浏览器兼容性就必须重视<!DOCTYPE>

严格模式和混杂模式

严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关。

严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面

混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。

我们写好一份HTML文档，这时候全是代码，用户看不懂，是不是得用浏览器里的引擎给翻译一下？用户才看得到界面。关键是HTML有好多个版本，浏览器怎么知道按哪个版本解释？你老爸让你去扫地，你老妈让你去洗碗，你是听谁的，都是长辈，这时候如果你们家规定好了，凡事都听你老爸的，这个就很好解决了，去扫地。这个DTD文档模型就是这个意思，管它多少个HTML版本，我规定好我写的这个HTML文档以哪个为准就行，那我就知道我最终页面会被解释成一个什么样子。

​

​ DTD文档模型=DOCTYPE=DOCTYPE文档声明

常见的DOCTYPE声明

HTML5

<!DOCTYPE html>
1

HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1

HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
1

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  
1

XHTML 1.0 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1

XHTML 1.0 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
1

XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">  
1

HTML标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

<html>
  <head>
    <title>我的第一个 HTML 页面</title>
  </head>
  <body>
  </body>
</html>

1
2
3
4
5
6
7
8

head标签

Head标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

     <head lang="en"></head>  
1

​ 下面这些标签可用在 head 部分：

​

​ 应该把 标签放在文档的开始处，紧跟在 后面，并处于 标签之前。

​ 文档的头部经常会包含一些 标签，用来告诉浏览器关于文档的附加信息。

lang是language的意思，lang=”en”属性对每张页面中的主要语言进行声明，en代表了英文，只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容。它还有常见的值是zh-CN，代表了中文。（搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站，这些都是html规范，越规范，越容易被收录）

title标签

1.可定义文档的标题。

2.它显示在浏览器窗口的标题栏或状态栏上。

3.当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。

4.

5.title写和你网页相关的关键词有利于SEO优化

<html>
  <head>
    <title>我会显示在收藏栏里</title>
  </head>
      <body>...</body>
</html>	

1
2
3
4
5
6
7

SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求，从而提高自己网站被搜索引擎平台录取的几率，从而把精准用户带到网站。

​ 网站都有目标群体，通过title、meta标签可以让目标群体通过关键词找到你的网站，所以你定义的关键词决定了会吸引什么样的群体。

meta标签

META标签用来描述一个HTML网页文档的属性，此处的charset=”utf-8”是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式。国外一般会用gbk、gb2312，国内通常使用utf-8。

元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。

常见的meta有：

Keywords(关键字)　keywords用来告诉搜索引擎你网页的关键字是什么。

<meta name="keywords" content="web前端,乐字节">    
1

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。

<meta name="description" content="乐字节,web前端培训">      
1

author作者 标注网页的作者

 <meta  name="author" content="root,root@xxxx.com">    
1

标签相互嵌套

标签之间可以相互嵌套，但要注意嵌套顺序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TjW7X6nn-1631930828687)(010100-前端开发现状及基础内容.assets/clip_image078.jpg)]

语义化标签

什么是HTML语义化标签

语义化的标签，旨在让标签有自己的含义。

<p>一行文字</p>
<span>一行文字</span>
<nav></nav>
<footer></footer>
1
2
3
4

如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签则没有独特的含义。

语义化标签的优势

1、代码结构清晰，方便阅读，有利于团队合作开发。

2、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

3、有利于搜索引擎优化（SEO）。

作业

安装IDE、熟练使用快捷键