一、初识HTML

二、开发准备工作

三、HTML的常用标签

学习前端的day.1

1.1HTML简介

1.2HTML历史

1.3HTML特点

2.1环境的安装和配置

2.1.1开发环境

2.1.2运行环境

2.2浏览器的历史

2.3几款主要的浏览器

2.4W3C简介（万维网联盟）

2.5HTML语法

2.6网页分类

3.1第一个HTML程序

2.4.1 W3C的由来

2.4.2 W3C的贡献

初级前端学习总共分为四部分html、css、js和jQuary

HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元素。 HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。

HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。需要说明的是 HTML 不是编程语言，而是一种描述性的语言，用于描述超文本中内容的显示方式。

HTML 的前身是 SGML 语言，SGML 的前身是 GML 语言。 HTML于1990年出现，web之父 Tim Berners-Lee 发布了《HTML标签》的论文，借用SGML的标记语法。IETF（互联网工程任务组）推出HTML2.0，并且在逐步的完善过程，随着发展，W3C 组织代替IETF组织成为了新的 HTML标准，后续HTML有了迅速的发展。至1999年，HTML4.01标准的发布，成为了HTML发展非常重要的一个里程碑，在web中大量使用，沿用至今。

此后，W3C组织发布XHTML1.0，期望以XML的标准来约束HTML更加的规范，对HTML进行了语法非常严格的规范，但是又没有增加新的标签或者特性。在某种程度上来说，这是好事，规范了HTML语法的标准。但是，接下来，W3C非常大胆的推出了它的XHTML2.0，并且不向前兼容，以至于甚至不兼容HTML。这就是web的大灾难了。

2004年，以Opera公司的Lan Hickson发起了在HTML上的扩展和web应用适配的活动，被W3C拒绝。于是Opera、Apple、Mozilla自发组织WAHTWG组织，开始就HTML的新标准进行自行维护，并依托于web forms2.0和web app 1.0标准，开始研发HTML5的语法标准。反观W3C在XHTML的道路上坎坷不断，终于在2010年前后，W3C颁布发表停止了XHTML2的继续维护。开始以WAHTWG的研究为基础，开发研发 HTML 5语法标准。发展至今，HTML 5已经被大部分浏览器兼容，并且大量应用于web网站中。以下就是HTML的发展历程：

简单灵活

可扩展

平台无关性

正常的windows10家庭中文版就可以作为基础环境

HTML作为web开发的基石，一直以简单著称，所以开发HTML只需要简单的记事本工具即可，如： Notepad++、VSCode等等，当然主流的编程IDE绝大多数都是支持HTML的开发的，如：eclipse、 IntelliJ IDEA、pycharm等，当然也有专门前端开发的IDE--WebStorm、Hbuilder等，在开发的前期建议使用记事本工具，以便于练习代码的手感，等基础功打好之后，就可以使用这些IDE开发，提高开发的效率了。

HTML是web页面的基石，所以运行环境就是主流的浏览器。建议使用Google公司的Chrome浏览器，或者Firefox、Edge都可以。

20世纪中后期，互联网已经初具雏形。到20世纪90年代，全球进入互联网时代，浏览器成为人们获取互联网信息不可或缺的工具。经过数十年发展，浏览器技术已愈发成熟，产品也呈现出多样化态势，主流的产品包括了微软公司的Internet Explorer、苹果公司的Safari、Mozilla开源社区的Firefox、Opera公司开发的Opera浏览器以及Google公司推出的Chrome浏览器等。

浏览器的历史要追溯到1990年，那时的浏览器只能显示纯文本。1993年，伊利诺斯州立大学的超级计算应用国家中心发布了第一个支持图形渲染的浏览器—— Mosaic，从那之后，互联网开始呈爆炸性的趋势增长，Mosaic浏览器的诞生为图形化的网页设计奠定了基础。

1994年，Netscape公司发布了Navigator浏览器。该浏览器继承了Mosaic建立起来的商业模式，即在网上免费发布产品，以建立广泛的用户基础。Navigator迅速取代了Mosaic，成为了用户的首选。

不过，这种状态没有持续多长时间。不久，微软看到了互联网的潜力，1995年他们开发了 IE(Internet Explorer)浏览器。由于微软将IE与流行的桌面操作系统Windows进行捆绑销售，使得用户无须安装第三方浏览器，即可方便地进行网页浏览。随着Windows操作系统用户数量不断增多，InternetExplorer的用户群开始持续增长，不断蚕食Netscape公司所占有的浏览器市场，第一次浏览器大战以微软的IE浏览器大获全胜，网景公司破产结束。

Netscape随后调整了自身战略，开放其源代码，成立了Mozilla，来应对微软的挑战。此举虽然未能挽回Netscape的市场占有率，但却催生了今天广受欢迎的Firefox浏览器。在Mozilla成立的初期，Mozilla 项目吸引了大量开发者，为之贡献代码和智慧，至2002年，它已发展成一个稳定而强大的互联网套件。 Mozilla 1.0的出现被视为其里程碑；同年，衍生出Phoenix（后改名Firebird，最后又改为Firefox）。之后广为人知的浏览器Firefox 1.0终于在2004年正式发布。

另外，开源浏览器引擎WebKit也被许多浏览器产品所使用。WebKit的前身是KDE项目的HTML渲染引擎（KHTML）和JavaScript执行引擎。苹果公司将WebKit移植到了Mac OS上，并于2003年发布了基于 WebKit的Safari浏览器。Google于2008年推出的Chrome浏览器，也采用了WebKit内核。

谷歌的掀起的第二次浏览器大战，微软的IE浏览器失败，谷歌的Chrome浏览器成为了大赢家。到了 2010年，随着移动互联网的发展，微软也自己放弃了IE浏览器的开发和维护，使用WebKit内核研发了全新一代浏览器Edge浏览器，试图重新打造自己的浏览器市场，但是目前来看，成功的概率不高。

目前浏览器市场份额最高的是谷歌的Chrome浏览器，其次是微软的Edge浏览器、苹果的Safari浏览器和火狐浏览器（Mozilla Firefox）等。

在浏览器的发展历程中，有几个主流浏览器是必定会被写入互联网发展史的。这些浏览器包括：Mosaic浏览器、网景浏览器(Netscape Navigator)、IE浏览器（Internet Explorer）、Opera浏览器、MozillaFirefox浏览器、Chrome等。

万维网（World Wide Web）是作为欧洲核子研究组织的一个项目发展起来的，在那里 Tim BernersLee 开发出万维网的雏形。Tim Berners-Lee - 万维网的发明人 - 目前是万维网联盟的主任。W3C 在 1994 年被创建的目的是，为了完成麻省理工学院（MIT）与欧洲粒子物理研究所（CERN）之间的协同工作，并得到了美国国防部高级研究计划局（DARPA）和欧洲委员会（European Commission）的支持。

万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯·李。

万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。目前，万维网联盟拥有来自全世界40个国家的400多个会员组织，已在全世界16个地区设立了办事处。2006年4月28日,万维网联盟在中国内地设立首个办事处。

W3C为解决 Web 应用中不同平台、技术和开发者带来的不兼容问题，保障 Web 信息的顺利和完整流通，万维网联盟制定了一系列标准并督促 Web 应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。W3C也制定了包括XML和CSS等的众多影响深远的标准规范。但是，W3C 制定的 web 标准似乎并非强制而只是推荐标准。因此部分网站仍然不能完全实现这些标准。特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代码。

W3C 最重要的工作是发展 Web 规范（称为推荐，Recommendations），这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。每项 W3C 推荐的发展是通过由会员和受邀专家组成的工作组来完成的。工作组的经费来自公司和其他组织，并会创建一个工作草案，最后是一份提议推荐。一般来说，为了获得正式的批准，推荐都会被提交给 W3C 会员和主任。

语法结构：HTML标签。

格式：<标签属性="值">内容</标签>

<p></p>是HTML中的段落标签，我们以<p></p>标签作为示例来解答语法结构

标签通常是成对出现的，分为开始标签<p>和结束标签</p>，结束标签只是在开始标签前加一个斜杠“/”。标签可以有属性align，属性必须有值"center"。开始标签与结束标签中包含的内容称之为区域。标签不区分大小写，p和P是相同的。

HTML 使用标签编写网页，网页基本上可以分为 2 类。

静态网页 HTML 静态网页是指在不修改网页源文件的情况下，网页无论在何时何地被浏览，都将显示相同的内容，网页的内容不会发生变化。静态网页文件的扩展名包括 html,htm 等。

动态交互式网页交互式网页是指用户可以提供给网站信息，网站根据用户提交的信息响应用户的要求。如网上注册、论坛、调查等等。在这门课的最后部分我们会体验交互式网页，在第二学期将深入学习。交互式网页文件的扩展名包括 aspx，jsp，php，asp 等。

第一步：创建一个文本文档，命名为xxx.html，名称任意（尽量为英文），但是后缀名必须为.html。

第二步：找到相应的软件打开这个文本文档，在里面编写如下代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>我的第一个网页...</title>
    </head>
    <body>
        这里可以编写网页的内容，是网页内容的主体...
    </body>
</html>

运行代码，选择浏览器运行：

我们在上面的实例中使用了6种基本的标签，有doctype头部标签、meta标签、title标签，还有组成HTML文档结构的标签，HTML文档结构包括三个部分：

HTML标签

html标签表示网页文件的开始,应该把它放在文档的最外层（doctype不算），其他所有的标签都应该放在 <html>和</html>结束标签之间。

HEAD标签

head表示头部标签，head标签中通常放title标签、meta标签、style标签等。所以head标签主要用来放定义页面属性的标签。

HODY标签

body表示主体标签，网页上所有要显示的内容都放在这个标签内。

代码讲解：（只是作为讲解，复制请复制上边实例）

<!DOCTYPE html>  <!-这里是声明html编写网页所使用的版本以及规范->
<html>       <!-表示网页的开始->
        <head>     <!-表示头部的开始->
            <title>HTML 的标签</title> <!-这里写你想的网页标题，例如百度一下，会显示在浏览器的标题栏->
        </head>    <!-表示头部的结束->
        <body>         <!-表示正文部分的开始->
            <!—在这里写注释-->     <!- 注释的格式  ->
                我的第一个网页
        </body>   <!-表示正文部分的结束->
</html>       <!-表示网页的结束->

注：html开始和结束标签可以不写，内容可以运行，但是会出现乱码（非utf-8部分）

META标签

网页的标签中除了包含 title 标签外还包括了 meta 标签， meta 标签提供了关于网页的信息，包括作者、关键字、网页编码、自动刷新等。

<!DOCTYPE html>
<html >
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
                charset="UTF-8"/> ①
            <title>HTML 简介</title>
        </head>
        <body>
            使用 meta 标签确定编码格式。
        </body>
</html>

这是标签，标签中的 charset 表示当前网页的编码格式，值 UTF-8 表示通用字符，也就是说网页中的文字显示为UTF-8中有的字符，这时就要求操作系统中安装 UTF-8字符集，否则就会显示乱码，不过操作系统中一般已经安装了。如果在英文操作系统中浏览了 GB2312 编码的网页就会出现乱码，因为英文操作系统中没有GB2312 字符集。我们在浏览网页时偶尔会遇到网页显示乱码，多数是因为 META标签中的编码设置不正确。现在一般建议都设置为UTF-8这种Unicode编码。常见的编码见下表：

网页的常用编码有 GB2312、UTF-8、BIG5、GBK：

1． GB2312 是简体中文字符集，主要用于中国大陆和新加坡。

2. UTF -8 可以理解为通用字符集。

3． BIG5 是繁体中文字符集，主要在台湾和香港地区使用。

4． GBK 是 GB2312 的后续标准，添加了更多的汉字和特殊符号。