2020-09-19

5个小时带你走进HTML

什么是HTML？
互联网的三大基石
HTML超文本标记语言
http超文本传输协议
URL统一资源定位符
那HTML是用来做什么的呢？
超文本链接语言，是用来做静态网页的，也是做动态网页的基础，作用的话就是做个标记，用来让浏览器解析，最后显示出页面。

接下来的5个小时就跟我一起学习吧！

一、Web前端现状

1.1市场缺口

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

1.2发展前景

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

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

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

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

1.2.1什么是web前端

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.3谁和前端人员打交道

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

1.4常用网站

w3cschool、w3c菜鸟、百度

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

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

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

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

二、IDE介绍

2.1IDE介绍

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

编码工具：

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

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

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

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

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

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

2.2浏览器介绍

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

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

推荐使用的浏览器：

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

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

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

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

2.3调试工具

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

三、Webstorm使用

3.1安装

3.2常规操作

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

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

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

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

3.3常规配置

1、如何更改主体

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

2、如何更改字体大小

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

3、如何设置代码自动换行

file-settings-editor->general-> “use soft wraps in editor” 打上钩，代码就自动换行了。

四、HTML介绍

4.1什么是HTML

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

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

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

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

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

4.3什么是元素

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

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

HTML 元素:

4.4web浏览器

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

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

4.5HTML版本

4.6HTML属性

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

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

4.7HTML注释

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

语法：

4.8HTML基本结构

4.8.1doctype的作用

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

4.8.2删除<!DOCTYPE>会发生什么

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

4.8.3严格模式和混杂模式

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

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

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

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

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

4.8.4常见的DOCTYPE声明

HTML5

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

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

HTML 4.01 Frameset

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

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

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

XHTML 1.0 Frameset

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

4.8.4HTML标签

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

4.8.5head标签

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

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

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

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

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

4.8.5title标签

1.可定义文档的标题。

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

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

4.

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

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

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

4.8.6meta标签

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

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

常见的meta有：

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

description(网站内容描述) description用来告诉搜索引擎你的网站主要内容。 author作者 标注网页的作者 4.9标签相互嵌套

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

4.10语义化标签

4.10.1什么是HTML语义化标签

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

一行文字

一行文字

一行文字

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

4.10.2语义化标签的优势

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

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

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

点击下链接可以获得对应的学习视频和源码

链接: https://pan.baidu.com/s/1XDk2FQ_TobVkOZRN2sQ_6Q
提取码: evy4