HTML超文本标记语言

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。

HTML初识

学习目标

网页基本概念

网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.html 后缀结尾的文件，因此将其俗称为 HTML 文件。

从图中可以看到，网页主要由文字、图像和超链接等元素构成。当然，除了这些元素外，网页中还可以包含音频、视频以及Flash等。接下来查看一下网页的源代码。在浏览器的菜单栏中选择【查看】→【源文件】选项，弹出的窗口中便会显示当前网页的源代码，具体内容如图所示。

HTML介绍

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。

1980年，蒂姆·伯纳斯-李提出并创建HTML的原型系统。

1989年，伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统HTML。

1995年11月24日，HTML 2.0发布。

1997年1月14日，HTML 3.2作为W3C推荐标准发布。

1997年12月18日，HTML 4.0作为W3C推荐标准发布。

1999年12月24日，HTML 4.01作为W3C推荐标准发布。

2001年5月31日，XHTML 1.1作为W3C推荐标准发布。

2014年10月28日，HTML 5作为W3C推荐标准发布。

W3C介绍

万维网联盟（W3C）由蒂姆·伯纳斯-李于1994年10月离开欧洲核子研究中心（CERN）后成立，在欧盟委员会和国防高等研究计划署（DARPA）的支持下成立于麻省理工学院MIT计算机科学与人工智能实验室（MIT／LCS），该组织试图透过W3C制定的新标准来促进业界成员间的兼容性和协议。不兼容的HTML版本由不同的供应商提供，导致网页显示方式不一致。联盟试图让所有的供应商实施一套由联盟选择的核心原则和组件。

为解决网络应用中不同平台、技术和开发者带来的不兼容问题，保障网络信息流通得顺利完整，万维网联盟制定了一系列标准并督促网络应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。W3C也制定了包括XML和CSS等的众多影响深远的标准规范。

浏览器概述

常用浏览器

浏览器是网页显示、运行的平台。常用的浏览器有谷歌（Chrome）、IE（Edge）、火狐（Firefox）、Safari和Opera等。

浏览器内核

浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器	内核
IE	Trident
Firefox	Gecko
Chrome	Blink
Safari	Webkit
opera	Presto

国内一般浏览器都会采用 Trident/Blink 内核，也就是双核浏览器，兼容模式用的是IE内核，急速模式用的是谷歌内核，如 360、UC、QQ、搜狗等。

使用HTML编写第一个网页

新建文件文件名为index.html，使用VSCode编辑器打开开始编写第一个网页。

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8"/>
      <title>第一个网页</title>
</head>
<body>
    hello world
</body>
</html>

课程总结

HTML语法

学习目标

HTML基础语法

HTML 标签是由尖括号包围的关键词，例如 <html>。
HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。
有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。
开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8"/>
      <title>第一个网页</title>
</head>
<body>
    <p>今天阳光明媚</p>
</body>
</html>

元素也可以有属性（Attribute）属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，class 是属性名称，sun是属性的值。class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。

<!DOCTYPE html>
<html>
<head>
      <meta charset="UTF-8"/>
      <title>第一个网页</title>
</head>
<body>
    <p class="sun">今天阳光明媚</p>
</body>
</html>

属性应该包含：

在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
属性的名称，并接上一个等号。
由引号所包围的属性值。

HTML标签关系

包含关系，也叫父子关系。

<head>
      <meta charset="UTF-8"/>
      <title>第一个网页</title>
</head>

并列关系，也叫兄弟关系。

<head></head>
<body></body>

HTML页面结构介绍

我们还是以第一个网页为例子，详细的讲解每个标签的作用。

<!DOCTYPE html>
<html>
    <head>
          <meta charset="UTF-8"/>
          <title>第一个网页</title>
    </head>
    <body>
        hello world
    </body>
</html>

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

标签名	定义	说明
`<!DOCTYPE html>`	文档类型	浏览器解析页面的方式。
`<html></html>`	HTML标签	页面中最大的标签，我们称为根标签。
`<head></head>`	头部标签	定义文档的头部，它是所有头部元素的容器。
`<meta charset="UTF-8"/>`	编码标签	告诉浏览器用那种编码解析页面。
`<title></title>`	标题标签	网页的标题。
`<body></body>`	身体标签	网页主要内容的容器。

课程总结

HTML基础标签

学习目标

文档类型解释

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

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

严格模式和混杂模式

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

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

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

我们写好一份HTML文档，这时候全是代码，用户看不懂，是不是得用浏览器里的引擎给翻译一下？用户才看得到界面。关键是HTML有好多个版本，浏览器怎么知道按哪个版本解释？DTD文档模型就可以告知浏览器按照什么版本去解析HTML页面。

常见的DOCTYPE声明

HTML5:

<!DOCTYPE html>

HTML 4.01 Strict: 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素，不允许框架集(Framesets)。

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

HTML 4.01 Transitional: 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素，不允许框架集(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">

DTD：Document Type Definition，中文翻译为：文档类型定义。DTD可定义合法的XML文档构建模块。它使用一系列合法的元素来定义文档的结构。因为早期的版本基于SGML，所以需要套用SGML的解析规则。DTD的作用在于定义SGML文档的文档类型以便于浏览器解析。随着技术的进步，现在HTML5 不基于 SGML，所以也就不需要引用 DTD了。

head标签

Head标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

应该把 <head> 标签放在文档的开始处，紧跟在<html>后面，并处于<body>标签之前。文档的头部经常会包含一些 <meta> 标签，用来告诉浏览器关于文档的附加信息。

lang 语言种类

用来定义当前文档显示的语言。

en定义语言为英语
zh-CN定义语言为中文

字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

<!DOCTYPE html>
<html>
    <head>
          <meta charset="UTF-8"/>
          <title>第一个网页</title>
    </head>
    <body>
        hello world
    </body>
</html>

charset 常用的值有：GB2312 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符。假如你将字符集设置为 ISO-8859-1（拉丁字母表的字符集），那么页面将出现乱码。

**注意：**上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 "UTF-8"，不要写成 "utf8" 或 "UTF8"。

title标签

可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。
<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title，不是说其它的不加，而是title一定要加。
title写和你网页相关的关键词有利于SEO优化。

<!DOCTYPE html>
<html>
    <head>
          <meta charset="UTF-8"/>
          <title>第一个网页</title>
    </head>
    <body>
        hello world
    </body>
</html>

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

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

HTML注释

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

<!DOCTYPE html>
<html>
    <head>
          <meta charset="UTF-8"/>
          <title>第一个网页</title>
    </head>
    <body>
        <!--注释的代码-->
        hello world
    </body>
</html>

HTML超文本标记语言-初识、语法、基础标签

HTML超文本标记语言

HTML初识

学习目标

网页基本概念

HTML介绍

W3C介绍

浏览器概述

常用浏览器

浏览器内核

使用HTML编写第一个网页

课程总结

HTML语法

学习目标

HTML基础语法

HTML标签关系

HTML页面结构介绍

课程总结

HTML基础标签

学习目标

文档类型解释

严格模式和混杂模式

常见的DOCTYPE声明

head标签

lang 语言种类

字符集

title标签

HTML注释

课程总结