5个小时带你走进HTML

时间：2023-08-29 20:42:01 | 来源：网站运营

时间：2023-08-29 20:42:01 来源：网站运营

5个小时带你走进HTML：

什么是HTML？

互联网的三大基石
HTML超文本标记语言
http超文本传输协议
URL统一资源定位符

那HTML是用来做什么的呢？

超文本链接语言，是用来做静态网页的，也是做动态网页的基础，作用的话就是做个标记，用来让浏览器解析，最后显示出页面。

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

学习目标

节数	知识点	要求
第一节	Web前端现状	了解
第二节	IDE介绍	了解
第三节	Webstrom使用	掌握
第四节	HTML介绍	熟悉

一、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常规操作

1. 创建项目

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

1. 创建文件

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

1. 重命名

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

1. 删除文件

右击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 标签是由尖括号包围的关键词，比如 <html>
• 封闭类型标记（也叫双标记），必须成对出现,如<p></p>
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签
• 非封闭类型标记，也叫作空标记，或者单标记，如<br/>

4.3什么是元素

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

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

HTML 元素:

4.4web浏览器

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

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

4.5HTML版本

4.6HTML属性

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

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

4.7HTML注释

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

语法：

<!-- 注释的文本内容 -->

4.8HTML基本结构

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>标题</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>标题</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>标题</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>标题</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>标题</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>标题</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>标题</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>标题</title></head><body></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>标题</title></head><body></body></html>

4.8.1doctype的作用

DOCTYPE是document type (文档类型) 的缩写。<!DOCTYPE >声明位于文档的最前面，处于标签之前，它不是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

<!DOCTYPE html>

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">

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">

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">

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">

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">

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">

4.8.4HTML标签

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

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

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

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

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

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

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

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

4.8.5head标签

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

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

<title>、<meta>、<link>、<style>、 <script>。

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

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

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

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

4.8.5title标签

1.可定义文档的标题。

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

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

4.<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title，不是说其它的不加，而是title一定要加。

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

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

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

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

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

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

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

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用来告诉搜索引擎你网页的关键字是什么。

<meta name="keywords" content="web前端,尚学堂培训">

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

<meta name="description" content="杭州尚学堂,web前端培训">

author作者 标注网页的作者

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

4.9标签相互嵌套

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

4.10语义化标签

4.10.1什么是HTML语义化标签

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

<p>一行文字</p><span>一行文字</span>

<p>一行文字</p><span>一行文字</span>

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

4.10.2语义化标签的优势

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

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

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

1. 作业

安装webstorm、熟练使用快捷键