HTML 简介

认识 HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。
- HTML 元素是构建网站的基石；
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。
什么是标记语言（markup language）？
- 由无数个标记（标签、tag) 组成；
- 是对某些内容进行特殊的标记，以供其他解释器识别处理；
- 比如使用 <h2></h2> 标记的文本会被识别为"标题"进行加粗、文字放大显示；
- 由标签和内容组成的称为元素（element）
什么是超文本（HyperText）呢？
- 表示不仅仅可以插入普通的文本（Text），还可以插入图片、音频、视频等内容；
- 还可以表示超链接（HyperLink），从一个网页跳转到另一个网页；
HTML 文件的拓展名是.htm 或 .html
- 因历史遗留问题，Win95/Win98 系统的文件拓展名不能超过 3 字符，所以使用 .htm
- 现在统一使用 .html

HTML 历史

起初的 5 年（1990-1995），HTML 经历了多次的修改和扩充内容，首先是由 CERN 负责，其次是 IETF。

W3C 诞生后，HTML 的发展再度发生变化。1995 年，首次尝试扩充 HTML 内容失败，即 HTML3.0。1997 年 HTML3.2 完成。同年 HTML4 也完成。

之后的几年，W3C 成员决定停止 HTML 的研发，取而代之的开始研发基于 XML 的 XHTML。以重制 HTML4 为 XHTML1.0 开始，没有增加新特性，except the new serialization，直到 2000 年才结束。XHTML1.0 之后，W3C 的工作重心转移到，使其他工作组更便于在 XHTML 的模块下扩展它上。与此同时，W3C 还在开发一款新语言，即不兼容之前的 HTML 和 XHTML 的 XHTML2。

大约在 1998 年，HTML 的改革停止的时候，浏览器厂商们开发出了 HTML 的部分 API，并以 DOM Level 1（1998 年）、DOM Level 2 Core 和 DOM Level 2 HTML(从 2000 年到 2003 年) 的命名发布。这些成果随着 DOM Level 3 规范在 2004 年发布的同时而逐渐被淡化，但是在 Level 3 草案完成前，其工作组就被迫关闭。

在 2003 年，被认为是下一代 web 技术产物的 XForms 发布，它重新引起了开发人员们扩展 HTML 的兴趣，而不是寻找 HTML 的替代品。这份兴趣也使得开发人员们认识到作为 web 技术的 XML 受限于新的技术（如 RSS 和后来的 Atom），而不是替代了当前的技术（如 HTML）。

重新引起兴趣后，开发人员们首先扩展了 HTML4 以提供更多在 Xforms 中介绍的特性，而不需要浏览器启动与当前 HTML web 页面不兼容的渲染引擎。在此之前，草案已公之于众和代码也已实装的时候，这份规范的版权归 Opera 软件公司所有。

2004 年，HTML 的改进被重新提起，并在 W3C 下的一个工作室测试。一些 HTML5 标准下的机制和早前提及的与 form 相关的草案提议被 Mozilla 和 Opera 联合提交给了 W3C。提议因为与之前选定的 web 发展方向相冲突而被拒绝。取而代之的是，W3C 的工作人员和会员们投票决定继续开发以 XML 为基础的技术作为替代。

不久之后，Apple,Mozilla 和 Opera 联名宣布它们组建 WHATWG 组织以继续 HTML5 的开发工作。一个公众邮件列表被建立，同时，草案也被移到了 WHATWG 的网站上。版权被修订为三方共同所有且可复用该规范。

WHATWG 制定了几个主要原则，科技需要向后兼容、即便在要改动规范而不是实例的情况下，规范和实例也需要保持一致、规范需要描述的足够清楚以至于实例可以完全达成交互而不用对调引擎。

后来急需确定 HTML5 规范的范围，包括之前在 HTML4,XHTML1 和 DOM2 HTML 中明确了的内容。这意味着 HTML5 包含了更多的内容。

2006 年，W3C 终于表明了对 HTML5 开发的兴趣，并在 2007 年成立了工作组特许与 WHATWG 就 HTML5 规范的制定而协同工作。Apple,Mozilla 和 Opera 准许了 W3C 以 W3C 的版权发布 HTML5 规范，同时保持一个低限制证书的版本在 WHATWG 的网站上。

许多年后，W3C 和 WHATWG 的 HTML5 工作组都在 Ian Hickson 的带领下工作。2011 年，这两个小组得出一个结论，彼此的目标不同：W3C 想制定一个 HTML5 特性的绝对建议标准，而 WHATWG 想要一个不断迭代的 HTML5，持续不断地维护规范和增加特性。在 2012 年中，W3C 成立了一个新的编辑队伍来编辑 HTML5 规范和为下一代 HTML 准备工作草案。

自那以后，W3C HTML 的工作组一直在通过 cherry picking 的方式从 WHATWG 获取补丁，来修补在 W3C HTML 规范中或者确实存在问题的 UA 上的 BUG。在此文发布的时候，WHATWG HTML 规范已经合并补丁到 8152 版本了。W3C HTML 编辑们从 W3C HTML 小组的讨论和决定中和未被 WHATWG 共享的 bug fixes 中获取补丁并修补。

认识元素

我们会发现 HTML 本质上是由一系列的元素（Element）构成的；

什么是元素（Element）呢？
- 元素是网页的一部分；
- 一个元素可以包含一个数据项，或是一块文本，或是一张照片，亦或是什么也不包含；
那么 HTML 有哪些元素呢？
- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
我们会发现元素非常非常的多，这么多能记得住吗？
- 常用的，用的多自然就记住了；
- 不常用的，知道在哪里查找即可；

元素的组成

剖析一个 HTML 元素的组成：

HTML 元素

<!-- 元素 -->
<!-- 开始标签 (<p>)    内容 (我的猫咪脾气爆:))    结束标签 (</p>) -->
<p>我的猫咪脾气爆:)</p>

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右尖括号所包围。表示元素从这里开始或者开始起作用 - 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 - 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content/Enclosed text content）：元素的内容，本例中就是所输入的文本本身。
元素（Element/An attribute and its value）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素的属性

元素也可以拥有属性（Attribute）：

HTML 属性

<!-- 属性名 class  属性值 editor-note -->
<p class="editor-note">我的猫咪脾气爆:)</p>

属性包含元素的额外信息，这些信息不会出现在实际的内容中。
一个属性必须包含如下内容：
- 一个空格，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)
- 属性名称，后面跟着一个等于号。
- 一个属性值，由一对引号 "" 引起来。
创建一个超链接元素 a：<a href="https://www.baidu.com">百度一下</a>
- href 属性是必需的，指向链接的 URL；
- target 属性是可选的，指定在何处打开链接文档；
- title 属性是可选的，为链接添加额外的信息；
有些属性是公共的，每一个元素都可以设置，比如 class、id、title 属性
有些属性是元素特有的，不是每一个元素都可以设置，比如 meta 元素的 charset 属性、img 元素的 alt 属性等。

note

不包含 ASCII 空格（以及 " ' `` = < >`）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。

单标签元素/双标签元素

双标签元素：我们会发现前面大部分看到的元素都是双标签的；<html></html>
- html、body、head、h2、p、a 元素；
单标签元素：也有一些元素是只有一个标签；<input type="text">
- br、img、hr、meta、input；

note

HTML 元素不区分大小写，但是推荐小写。

元素的嵌套关系

某些元素的内容除了可以是文本之外，还可以去其他元素，这样就形成了元素的嵌套。

<ul>
  <li>
    <div>
      <span>第一段文字</span>
      <span>第二段文字</span>
      <span>第三段文字</span>
    </div>
    <div></div>
    <div></div>
  </li>
</ul>

注释

HTML 的注释

什么是注释？
- 简单来说，注释就是一段代码说明
- 
- 注释是只给开发者看的，浏览器并不会把注释显示给用户看
注释的意义：
- 帮助我们自己理清代码的思路，方便以后进行查阅。
- 与别人合作开发时，添加注释，可以减少沟通成本。(同事之间分模块开发)
- 开发自己的框架时，加入适当的注释，方便别人使用和学习。(开源精神)
- 可以临时注释掉一段代码，方便调试。
注释快捷键：ctrl + /

为什么需要注释

程序员才懂的冷笑话：
- 在我写这段代码的时候，只有我和上帝知道这段代码是什么意思。
- 一段时间之后，只有上帝知道是什么意思了。
为什么会出现这样的情况呢？
- 随着学习的深入，你的一个程序不再是几行代码就可以搞定的了。
- 可能我们需要写出有上千行，甚至上万行的程序。
- 某些代码完成某个功能后，你写的时候思路很清晰，但是过段时间会出现忘记为什么这样写的情况，这很正常。
和同事协同开发
- 在实际工作中，一个项目通常是多人协作完成的。可能是几个或者十几个等等。
- 这个时候，你可能需要使用别人写出的代码功能，别人也可能使用你的代码功能。
- 如果你的代码自己都看不懂了，更何况你的同事呢？

HTML 结构分析

HTML 文档详解

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

这里有：

<!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
<html></html> — html 元素。该元素包含整个页面的内容，也称作根元素。
<head></head> — head 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
<title></title> — ttile 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body> — body 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

完整的 HTML 结构

一个完整的 HTML 结构包括哪几部分呢？

文档声明
html 元素
- head 元素
- body 元素

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 文档结构</title>
  </head>
  <body>
    <h1>我是标题</h1>
  </body>
</html>

文档声明

HTML 最上方的一段文本我们称之为 文档类型声明，用于声明文档类型。<!DOCTYPE html>
<!DOCTYPE html>
- HTML 文档声明，告诉浏览器当前页面是 HTML5 页面；
- 让浏览器用 HTML5 的标准去解析识别 内容；
- 必须 放在 HTML 文档的最前面，不能省略，省略了会出现兼容性问题；
HTML5 的文档声明比 HTML 4.01、XHTML 1.0 简洁非常多 (了解即可)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

html 元素

<html> 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。
- 所有其他元素必须是 此元素的后代。
```
<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>
```
W3C 标准建议为 html 元素增加一个 lang 属性，作用是
- 帮助语音合成工具确定要使用的发音；
- 帮助翻译工具确定要使用的翻译规则；
比如常用的规则：
- lang="en"表示这个 HTML 文档的语言是英文；
- lang="zh-CN"表示这个 HTML 文档的语言是中文。

head 元素

HTML head 元素 规定文档相关的配置信息（也称之为元数据），包括文档的标题，引用的文档样式和脚本等。
- 什么是元数据（meta data），是描述数据的；
- 这里我们可以理解成对整个页面的配置：
常见的设置有哪些呢？一般会至少包含如下 2 个设置。
- 网页的标题：title 元素 <title>网页标题</title>
- 网页的编码：meta 元素
  - 可以用于设置网页的 字符编码，让浏览器更精准地显示每一个文字，不设置或者错误会导致乱码；
  - 一般都使用 utf-8 编码，可以显示世界上所有的文字；<meta charset="utf-8">

body 元素

body 元素里面的内容将是你 在浏览器窗口中看到的东西，也就是 网页的具体内容和结构。
- 之后学习的大部分 HTML 元素都是在 body 中编写呈现的。

<body>
  <input type="text" />
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
  </ul>
</body>

HTML 的元素

HTML 元素本身很多，但是常用的元素就是那么几个。
- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
- 我们只需要记住常用的，不常用的学会查看文档即可；
常用的元素（暂时掌握下面几个就够了，90% 时间都在写这几个）
- p 元素、h 元素；
- img 元素、a 元素、iframe 元素；
- div 元素、span 元素；
下阶段学习的元素：
- ul、ol、li 元素；
- button 元素、input 元素；
- table 、thead 、tbody 、thead 、th 、tr 、td ；
HTML5 新增元素（后续学习）

认识 HTML​

HTML 历史​

认识元素​

元素的组成​

元素的属性​

单标签元素/双标签元素​

元素的嵌套关系​

注释​

HTML 的注释​

为什么需要注释​

HTML 结构分析​

HTML 文档详解​

完整的 HTML 结构​

文档声明​

html 元素​

head 元素​

body 元素​

HTML 的元素​