angularwebstorm不提示ngfor_【web前端HTML零基础入门】01HTML初始webstorm的安装与设置...

HTML初始

主要内容

1. Web前端现状
2. IDE介绍
3. Webstorm使用
4. HTML介绍

学习目标

一.Web前端现状

1.1市场缺口

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

1.2发展前景

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

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

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

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

1.2.1什么是web前端

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

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

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

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

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

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

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

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

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

1.2.3web前端的前景和就业形势

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

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

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

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

1.3谁和前端人员打交道

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

1.4常用网站

w3cschool、w3c菜鸟、百度

前端大牛的博客 http://caibaojian.com/some-fe

这个里面收集了许多前端大牛博客的地址&＃xff0c;你们有时间要多去学习&＃xff0c;里面推荐几个人&＃xff0c;阮一峰&＃xff0c;有句话叫阮一峰出品&＃xff0c;必属精品&＃xff0c;他是学金融的&＃xff0c;现在在IT方面这么有成就&＃xff0c;转行过来的同学是不是更有信心了&＃xff1f;

张鑫旭&＃xff0c;它博客里面会把一些技术讲的非常细&＃xff0c;腾讯的前端。

李松峰&＃xff0c;大名鼎鼎&＃xff0c;你们学到第二阶段会学习Javascript&＃xff0c;而Javascript非常权威的书箱是《Javascript高级程序设计》&＃xff0c;就是他翻译的。

二.IDE介绍

2.1IDE介绍

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

编码工具&＃xff1a;

辅助程序员编写源代码的工具&＃xff0c;它类似word&＃xff0c;我们写文档会打开word文档来编写。写代码也一样&＃xff0c;需要借助工具来开发。常见的编码工具有记事本、sublime Text、notepad&＃43;&＃43;

集成开发环境&＃xff08;IDE&＃xff0c;Integrated Development Environment &＃xff09;&＃xff1a;

是用于提供程序开发环境的应用程序&＃xff0c;一般包括代码编辑器、编译器、调试器和图形用户界面等工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套&＃xff08;组&＃xff09;都可以叫集成开发环境。如微软的Visual Studio系列&＃xff0c;Borland的C&＃43;&＃43; Builder、Delphi系列等。该程序可以独立运行&＃xff0c;也可以和其它程序并用。IDE多被用于开发HTML应用软件。例如&＃xff0c;许多人在设计网站时使用IDE&＃xff08;如webstorm、DreamWeaver等&＃xff09;&＃xff0c;因为很多项任务会自动生成。

这里我们是不推荐使用Dreamweaver&＃xff0c;它更多的是针对前端设计人员来用&＃xff0c;而不是我们编程人员。其它语言的常见IDE有&＃xff1a;eclipse、visio studio、Visual Studio Code等。

2.2浏览器介绍

前面讲了IDE用来编码&＃xff0c;写好的代码如何展示&＃xff1f;通过浏览器来展示。

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

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

1.速度快&＃xff0c;不是指打开的速度&＃xff0c;而是指解析页面CSS、JS的速度

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

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

2.3调试工具

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

三.Webstorm使用

参考视频

具体步骤

3.1安装

3.2常规操作

参考视频

1.创建项目

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

2.创建文件

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

3.重命名

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

4.删除文件

右击html文件-->delete-->ok&＃xff08;或者直接按电脑上的del键&＃xff0c;回车&＃xff09;

3.3常规配置

1. 如何更改主体

file->setting->editor->colors&fonts->scheme选择你的主题

1. 如何更改字体大小

file->setting->editor->colors&fonts->only前面的对勾去掉->size修改字体大小

1. 如何设置代码自动换行

file-settings-editor->general-> "use soft wraps in editor" 打上钩&＃xff0c;代码就自动换行了。

Webstorm快捷键

四、HTML介绍

4.1什么是HTML

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

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

• HTML 不是一种编程语言&＃xff0c;而是一种标记语言
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页
• HTML 文档包含了HTML 标签及文本内容
• HTML文档也叫做 web 页面
• 用该语言编写的文件&＃xff0c;以 .html或 .htm为后缀
• HTML不区分大小写&＃xff0c;建议小写

4.2什么是标签

• HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
• HTML 标签是由尖括号包围的关键词&＃xff0c;比如
• 封闭类型标记&＃xff08;也叫双标记&＃xff09;&＃xff0c;必须成对出现,如

• 标签对中的第一个标签是开始标签&＃xff0c;第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签
• 非封闭类型标记&＃xff0c;也叫作空标记&＃xff0c;或者单标记&＃xff0c;如
  

4.3什么是元素

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

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

HTML 元素:

4.4web浏览器

Web浏览器&＃xff08;如谷歌浏览器&＃xff0c;Internet Explorer&＃xff0c;Firefox&＃xff0c;Safari&＃xff09;是用于读取HTML文件&＃xff0c;并将其作为网页显示。

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

4.5HTML版本

4.6HTML属性

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

每个属性都有值&＃xff0c;属性和属性的值之间用等号链接&＃xff0c;属性的值包含在引号当中&＃xff0c;属性总是以名称/值对的形式出现。

4.7HTML注释

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

语法&＃xff1a;

4.8HTML基本结构

4.8.1doctype的作用

DOCTYPE是document type (文档类型) 的缩写。声明位于文档的最前面&＃xff0c;处于标签之前&＃xff0c;它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

4.8.2删除会发生什么

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

4.8.3严格模式和混杂模式

严格模式和混杂模式都是浏览器的呈现模式&＃xff0c;浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD&＃xff08;文件类型定义&＃xff09;有关。

严格模式&＃xff1a;又称标准模式&＃xff0c;是指浏览器按照W3C标准来解析代码&＃xff0c;呈现页面

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

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

DTD文档模型&＃61;DOCTYPE&＃61;DOCTYPE文档声明

4.8.4常见的DOCTYPE声明

HTML5

HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性&＃xff0c;但不包括展示性的和弃用的元素&＃xff08;比如 font&＃xff09;。不允许框架集&＃xff08;Framesets&＃xff09;。

HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性&＃xff0c;包括展示性的和弃用的元素&＃xff08;比如 font&＃xff09;。不允许框架集&＃xff08;Framesets&＃xff09;。

HTML 4.01 Frameset

该 DTD 等同于 HTML 4.01 Transitional&＃xff0c;但允许框架集内容。

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

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

XHTML 1.0 Frameset

该 DTD 等同于 XHTML 1.0 Transitional&＃xff0c;但允许框架集内容。

4.8.4HTML标签

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

4.8.5head标签

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

下面这些标签可用在 head 部分&＃xff1a;

...

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

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

4.8.6meta标签

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

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

常见的meta有&＃xff1a;

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

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

author作者 标注网页的作者

图片标签

4.9标签相互嵌套

标签之间可以相互嵌套&＃xff0c;但要注意嵌套顺序

4.10语义化标签

4.10.1什么是HTML语义化标签

语义化的标签&＃xff0c;旨在让标签有自己的含义。

如上代码&＃xff0c;p 标签与 span 标签都区别之一就是&＃xff0c;p 标签的含义是&＃xff1a;段落。而 span 标签责没有独特的含义。

4.10.2语义化标签的优势

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

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

3、有利于搜索引擎优化&＃xff08;SEO&＃xff09;。

作业

安装webstorm、熟练使用快捷键