1. HTML历史

HTML全程叫Hyper Text Markup Language（超文本标记语言），说白了就是一些标记符号告诉浏览器怎么显示一个Document（文档）。HTML标签有各种属性，包括样式属性，为了更好地维护样式即内容和样式分离管理，便出现了CSS（Cascading Style Sheets）层叠样式表。作为标记语言，其本身是没有流程控制和逻辑处理等能力的，JavaScript脚本可以嵌入在HTML里面，操控DOM执行各种任务。

HTML各个版本时间轴：

HTML 1：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
HTML 2：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
HTML 3：1997年1月14日，W3C推荐标准。
HTML 4：1997年12月18日，W3C推荐标准。
HTML 5：2014年10月28日，W3C推荐标准。其实2007年就发布了draft版本，2012年被提名为候选标准版本。

1.1 插曲 XHTML

XHTML（eXtensible HyperText Markup Language）可扩展超文本标记语言，相对HTML语法更严谨。但XHTML有个问题，它和HTML是两个独立标准，而且不兼容HTML。看名字感觉XHTML更高级些，当初我刚学HTML时也这么认为，毕竟人家是extensible HTML。事实上XHTML已经没落了：

2007年，W3C宣布HTML5作为下一代的HTML的标准
2009年，W3C允许XHTML2工作小组解散，XHTML5作为HTML下一代唯一的标准，包括XML和non-XML，建议不要再用XHTML。

1.2 杂谈HTML5和XHTML

首先认识三个组织：

IETF (Internet Engineering Task Force) 互联网工程任务组
W3C (World Wide Web Consortium 万维网联盟、web领域中，最具权威和影响力的国际中立性技术标准机构
WHATWG（Web Hypertet Application Technology Working Group）超文本应用技术工作组、由浏览器厂商组成的。

Tim Berners Lee是WEB之父，1991年Tim Berners Lee这个人编写了一个HTML的文档。

W3C和XHTML的由来

1995年11月IETF发表了HTML2.0.1994年，Tim Berners Lee成立了W3C组织，成了web标准的制定者。W3C发布了HTML4，并引入了XML，发展成XHTML。

XHTML的没落和HTML5的崛起

W3C闭门造车的作风引起了各大浏览器厂商的不满，于是各大浏览器厂商联合起来成立了WHATWG组织，在HTML基础上进行扩展，致力于研发HTML5。而于此同时，W3C继续研发XHTML。由于HTML5同时向后兼容HTML和XHTML，所以W3C无奈放弃了自家研发的XHTML，声明采用HTML5作为下一代HTML的标准。从此，计算机学生再也不用多学一个叫做XHTML的语言了。

1.3 前端技术发展阶段

从前端技术的角度，互联网的发展可分为4个阶段：

Web 1.0以内容为主的网络，主流技术是HTML + CSS。
Web 2.0的Ajax应用，热门技术是JavaScript/DOM/异步数据请求。
HTML5 + CSS3的时代，两者相辅相成。
单页面前端UI开发框架，热么技术是NodeJS, React, Vue, TypeScript, Electron等

注：前三个阶段是2010年，微软工程师在MIX10大会上总结的。

2. HTML基本概念

HTML页面是由许许多多不同的标签（tag）构成，学习HTML，首先就是掌握各种标签的用法。

<a href="/" id="home">Home</a>

‘a’就是标签名字，‘href’和’id’是标签属性，与XML里的概念一样。标签被渲染后，形成一个DOM树，每一个标签在DOM树里，就对应一个元素（element）。

2.1 块级元素，行内元素

所有元素可以分成两大类：块级元素（block）和行内元素（inline）。

块级元素默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。

<p>hello</p>
<p>world</p>

hello

world

行内元素默认与其他元素在同一行，不产生换行。比如，span就是行内元素，通常用来为某些文字指定特别的样式。

<p><span>hello</span> the <span>world</span></p>

hello the world

2.2 声明一个HTML5网页

第一行定义文件类型<!DOCTYPE html>，浏览器会按照HTML5的规则处理网页。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
</body>
</html>

2.3 空格和换行

<p>       hello



world

</p>

hello

world

上面的标签和“<p>Hello world</p>”等价，原因是：

浏览器忽略内容头部和尾部的空白，相当于执行了trim()。
内容中间的换行会替换成空白，并且多个连续空白会替换成一个空格。

2.4 如何在HTML中使用CSS和Javascript

3. 结构标签

HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。

下面介绍常用的结构标签：<header>, <footer>, <main>, <article>, <aside>, <section, <nav>及<hgroup>。这些标签本身和<div>没有区别，显示效果一样，只是为了增强语义，相当于给div起了别名。这是一个典型的语义结构的网页：

<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>

3.1 <header>, <footer>

<header>标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。

如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在<header>里面。

<!DOCTYPE html>
<html>
  <header>
    <h1>公司名称</h1>
    <ul>
      <li><a href="/home">首页</a></li>
      <li><a href="/about">关于</a></li>
      <li><a href="/contact">联系</a></li>
    </ul>
    <form target="/search">
      <input name="q" type="search" />
      <input type="submit" />
    </form>
  </header>
</html>

如果<header>用在文章的头部，则可以把文章标题、作者等信息放进去。

<article>
  <header>
    <h2>文章标题</h2>
    <p>张三，发表于2010年1月1日</p>
  </header>
</article>

<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。

<body>
  <footer>
    <p>© 2018 xxx 公司</p>
  </footer>
</body>

3.2 <main>

<main>标签表示页面的主体内容，放在<body>里。

3.3 <article>

<article>标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。

3.4 <aside>

<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<aside>，可以用来放置补充信息、评论或注释。

3.5 <section>

<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。

<article>
  <h1>文章标题</h1>
  <section>
    <h2>第一章</h2>
    <p>...</p>
  </section>
  <section>
    <h2>第二章</h2>
    <p>...</p>
  </section>
</article>

3.6 <nav>

<nav>标签用于放置页面或文档的导航信息.，一个页面可以有多个<nav>，比如一个用于站点导航，另一个用于文章导航。

3.7 <hgroup>

用于将页面或section里的标题进行group，例如一个文章有一个大标题和一个小标题。

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

4. 文本标签

4.1 <div>

<div>是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。

它的最常见用途就是提供 CSS 的钩子，用来指定各种样式，所谓的css + div。

<div class="main">
  <div class="article">
    <div class="title">
      <h1>文章标题</h1>
    </div>
  </div>
</div>

上面代码读起来很费力，因为不带有语义。后来，HTML 5 就提出了语义标签，改进了上面的代码。

<main>
  <article>
    <header>
      <h1>文章标题</h1>
    </header>
  </article>
</main>

4.2 <wbr>可选换行

如果一行的宽度足够，则不断行；如果宽度不够，需要断行，就在<wbr>的位置的断行。它是为了防止浏览器在一个很长的单词中间，不正确地断行或者不断行，所以事先标明可以断行的位置，主要用于欧洲一些单词很长的语言或者 URL 的断行。

<p>
Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz
</p>

Fernstraßenbauprivatfinanzierungsgesetz

4.3 <pre> preformatted，保留空白

<pre>是一个块级元素，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。

<pre>hello

 <strong>the</strong>   world</pre>

hello

 the   world

注意，HTML 标签在<pre>里面还是起作用的。<pre>只保留空格和换行，不会保留 HTML 标签。

4.4 <strong>, <b>，粗体

<p>开会时间是<strong>下午两点</strong>。</p>

开会时间是下午两点。

4.5 <em>, <i> emphasize 斜体

<p>我们<em>已经</em>讨论过这件事情了。</p>

我们已经讨论过这件事情了。

4.6 <sub>，<sup>，<var>

<sub>表示下标，<sup>表示上标。

<p>水分子是 H<sub>2</sub>O</p>
<p>3<sup>2</sup> = 9</p>

水分子是 H₂O

3² = 9

<var>标签表示代码或数学公式的变量。

<p>勾股定理是
  <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup>。
</p>

勾股定理是 a² + b² = c² 。

4.7 <u> underline, <s> strikethrough

<u>标签是一个行内元素，表示对内容提供某种注释，提醒用户这里可能有问题，基本上只用来表示拼写错误。浏览器默认以下划线渲染内容。

<p>
一个容易写错的成语是把<em>安分守己</em>写成<u>安份守己</u>。
</p>

一个容易写错的成语是把安分守己写成安份守己。

<s>标签是一个行内元素，为内容加上删除线。

<p>今天特价商品：<s>三文鱼</s>（售完）</p>

今天特价商品：~~三文鱼~~（售完）

4.8 <blockquote>，<cite>，<q>

<blockquote>是一个块级标签，表示引用他人的话。<blockquote>标签有一个cite属性，它的值是一个网址，表示引言来源，不会显示在网页上。

<blockquote cite="https://quote.example.com">
  <p>天才就是 1% 的天赋和99%的汗水。</p>
</blockquote>

天才就是 1% 的天赋和99%的汗水。

<cite>也可以作为内联标签单独使用。

<p>更多资料请看<cite>维基百科</cite>。</p>

更多资料请看维基百科。

<q>是一个行内标签，也表示引用。它与<blockquote>的区别，就是它不会产生换行。

<p>
  莎士比亚的《哈姆雷特》有一句著名的台词：
  <q cite="https://quote.example.com">活着还是死亡，这是一个问题。</q>
</p>

莎士比亚的《哈姆雷特》有一句著名的台词：活着还是死亡，这是一个问题。

4.9 <code>

<code>标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。如果要表示多行代码，<code>标签必须放在<pre>内部。

<pre>
<code>
  let a = 1;
  console.log(a);
</code>
</pre>


  let a = 1;
  console.log(a);

4.10 <kbd>, <samp>

<kbd> Keyboard Input element，是一个行内元素，指用户从键盘输入的内容。

<p>Windows 可以按下 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Del</kbd> 重启。</p>

Windows 可以按下 Ctrl + Shift + Del 重启。

<samp>标签是一个行内元素，表示计算机程序输出内容。浏览器默认以等宽字体显示。

<p>如果使用没有定义的变量，浏览器会报错：
<samp>Uncaught ReferenceError: foo is not defined</samp>。
</p>

如果使用没有定义的变量，浏览器会报错： Uncaught ReferenceError: foo is not defined。

4.11 <mark>高亮显示

<mark>是一个行内标签，表示突出显示的内容。Chrome 浏览器默认会以亮黄色背景，显示该标签的内容。

<p>我们讨论以后决定，<mark>运行会在下周三举办</mark>。</p>

我们讨论以后决定，运行会在下周三举办。

4.12 <small> 小一号字条

<small>是一个行内标签，浏览器会将它包含的内容，以小一号的字号显示，不需要使用 CSS 样式。它通常用于文章附带的版权信息或法律信息。

<p><small>以上内容使用创意共享许可证。</small></p>

以上内容使用创意共享许可证。

4.13 <time>, <data>

<time>是一个行内标签，为跟时间相关的内容提供机器可读的格式。这方便搜索引擎抓取，或者下一步的其他处理。<time>的datetime属性，用来指定机器可读的日期，可以有多种格式。

有效年份：2011
有效月份：2011-11
有效日期：2011-11-18
无年份的日期：11-18
年度的第几周：2011-W47
有效时间：14:54、14:54:39、14:54:39.929
日期和时间：2011-11-18T14:54:39.929

<p>运动会预定<time datetime="2015-06-10">下周三</time>举行。</p>

运动会预定下周三举行。

<data>标签与<time>类似，也是提供机器可读的内容，但是用于非时间的场合。

<p>本次马拉松比赛第一名是<data value="39">张三</data></p>。

本次马拉松比赛第一名是张三

4.13 <address>

<address>标签是一个块级元素，表示某人或某个组织的联系方式。

<p>作者的联系方式：</p>

<address>
  <p><a href="mailto:foo@example.com">foo@example.com</a></p>
  <p><a href="tel:+555-34762301">+555-34762301</a></p>
</address>

作者的联系方式：

foo@example.com

+555-34762301

4.14 <abbr> 缩写

<abbr>标签是一个行内元素，表示标签内容是一个缩写。它的title属性给出缩写的完整形式，或者缩写的描述。鼠标悬停在该元素上方时，title属性值作为提示，会完整显示出来。

<abbr title="HyperText Markup Language">HTML</abbr>

HTML

4.15 <ins>插入, <del>删除

<ins>标签是一个行内元素，表示原始文档添加（insert）的内容。<del>与之类似，表示删除（delete）的内容。它们通常用于展示文档的删改。浏览器默认为<del>标签的内容加上删除线，为<ins>标签的内容加上下划线。

<del><p>会议定于5月8日举行。</p></del>
<ins><p>会议定于5月9日举行。</p></ins>

会议定于5月8日举行。

会议定于5月9日举行。

4.16 <dfn> definition

<dfn>是一个行内元素，表示标签内容是一个术语（definition），可以把术语的定义写入<dfn>标签的title属性。

<p>
通过 TCP/IP 协议连接的全球性计算机网络，叫做
<dfn title=”全球性计算机网络”>Internet</dfn>。
</p>

通过 TCP/IP 协议连接的全球性计算机网络，叫做 Internet。

4.17 <bdo>, <bdi>

<bdo>Bi-Directional Override，是一个行内元素。<bdo>的dir属性，指定具体的文字方向。它有两个值，ltr表示从左到右，rtl表示从右到左。

<p>床前明月光，<bdo dir="rtl">霜上地是疑</bdo>。</p>

床前明月光，霜上地是疑。

<bdi>The Bidirectional Isolate element，用于不确定文字方向的情况。比如，网页有一个部分是用户输入的内容，但是不知道输入内容的文字方向。让浏览器决定要文字方向。

<p><bdi>床前明月光，疑是地上霜。</bdi></p>

床前明月光，疑是地上霜。