编程技术

Document

HTML5基础

1、HTML5概述

2014年10月28日，W3C（world wide web consortium，万维网联盟）的HTML工作组发布了HTML5的正式推荐标准。HTML5作为构建开放Web平台的核心，增加了支持Web应用的许多新特性，以及更符合开发者使用习惯的新元素，更关注定义的清晰、一致的标准，确保Web应用和内容在不同浏览器中的互操作性。

1.1、HTML发展历程

在这里插入图片描述
**提示：**从 HTML语言的发展历程来看，HTML没有1.0版本，这主要是因为当时有很多不同的版本。有些人认为，Tim Berners-Lee的版本应该算初版，但这个版本没有img元素，也就是说，HTML刚开始时仅能够显示文本信息。

2019年5月28日，W3C与WHATWG宣布放下分歧，签署新的谅解备忘录，根据这项新协议，W3C正式放弃发布HTML和DOM标准，将HTML和DOM标准的制定权全权移交给浏览器厂商联盟WHATWG。

1.2、HTML5组织

HTML5是W3C与WHATWG合作的结晶。HTML5的开发主要由下面三个组织负责。

  • WHATWG：WHATWG由来自Apple、Mozilla、Google、Opera等浏览器厂商的专家组成，成立于2004年，负责开发HTML和Web应用API。
  • W3C：W3C指万维网联盟(world wide web consortium)，负责发布HTML5规范。
  • IETF（因特网工程任务组）：IETF负责因特网(Internet)协议开发。HTML5定义的WebSocket API依赖于新的WebSocket协议，IETF工作组负责开发这个协议。

1.3、HTML5规则

为了避免HTML5开发过程中出现的各种分歧和偏差，HTML5开发工作组在共识基础上建立了一套行事规则。

  • 新特性应该基于HTML、CSS、DOM以及JavaScript。
  • 减少对外部插件的依赖，如Flash。
  • 更优秀的错误处理。
  • 更多取代脚本的标记。
  • HTML5应该独立于设备。
  • 开发进程应即时、透明，倾听技术社区的声音，吸纳社区内优秀的Web应用。
  • 允许试错，允许纠偏，从实践中来，服务于实践，快速迭代。

1.4、HTML5特性

1.4.1、兼容性

考虑到在互联网上HTML文档已经存在20多年，因此支持所有现存HTML文档是非常重要的。HTML5不是颠覆性的革新，它的核心理念就是要保持与过去技术的兼容和过渡。一旦浏览器不支持HTML5的某项功能，针对该功能的备选行为就会悄悄运行。

1.4.2、实用性

HTML5新增加的元素都是对现有网页和用户习惯进行跟踪、分析和概括而推出的。例如，Google分析了上百万的页面，从中分析出DIV标签的通用ID名称，并且发现其重复量很大，如很多开发人员使用<div id="header">标记页眉区域，为了解决实际问题，HTML5就直接添加一个<header>标签。也就是说，HTML5新增的很多元素、属性或者功能都是根据现实互联网中已经存在的各种应用进行技术精炼，而不是在实验室中进行理想化的虚构新功能。

1.4.3、效率

HTML5规范是基于用户优先的原则编写的，其宗旨是用户即上帝。这意味着，在遇到无法解决的冲突时，首先是用户，其次是页面制作者，再次是浏览器解析标准和规范制定者（如W3C、WHATWG），最后才考虑理论的纯粹性。因此，HTML5的绝大部分功能是实用的，只是在有些情况下还不够完美。例如，下面的几种代码写法在HTML5中都能被识别。

    id="prohtml5"
    id=prohtml5
    ID="prohtml5"

当然，上面几种写法比较混乱，不够严谨，但是从用户和开发的角度考虑，用户不在乎代码怎么写，开发人员根据个人习惯书写反而提高了代码的编写效率。

1.4.4、安全性

为保证足够安全，HTML5引入了一种新的基于来源的安全模型，该模型不仅易用，而且对各种不同的API都通用。这个安全模型不需要借助于任何所谓聪明、有创意却不安全的hack就能跨域进行安全对话。

1.4.5、分离

在清晰分离表现与内容方面，HTML5迈出了很大的步伐。HTML5在所有可能的地方都努力进行分离，包括HTML和CSS。实际上，HTML5规范已经不支持旧版本HTML的大部分表现功能。

1.4.6、简化

HTML5要的就是简单，避免不必要的复杂性。HTML5的口号是：简单至上，尽可能简化。因此，HTML5做了以下改进。

  • 以浏览器原生能力替代复杂的JavaScript代码。
  • 简化的DOCTYPE。
  • 简化的字符集声明。
  • 简单而强大的HTML5 API。

1.4.7、通用性

通用访问的原则可以分成三个概念。

  • 可访问性：出于对残障用户的考虑，HTML5与WAI（Web可访问性倡议）和ARIA（可访问的富Internet应用）做到了紧密结合，WAI-ARIA中以屏幕阅读器为基础的元素已经被添加到HTML中。
  • 媒体中立：如果可能的话，HTML5的功能在所有不同的设备和平台上应该都能正常运行。
  • 支持所有语种：如新的元素支持在东亚页面排版中会用到的Ruby注释。

1.4.8、无插件

在传统Web应用中，很多功能只能通过插件或者复杂的hack实现，但在HTML5中提供了对这些功能的原生支持。插件的方式存在以下问题。

  • 插件安装可能失败。
  • 插件可以被禁用或屏蔽，如Flash插件。
  • 插件自身会成为被攻击的对象。
  • 因为插件边界、剪裁和透明度的问题，插件不容易与HTML文档的其他部分集成。

以HTML5中的canvas元素为例，有很多非常底层的操作以前是没办法做到的，如在HTML4的页面中就很难画出对角线，而有了canvas就可以很轻易地实现了。基于HTML5的各类API的优秀设计，可以轻松地对它们进行组合应用。例如，从video元素中抓取的帧可以显示在canvas里面，用户单击canvas即可播放这帧对应的视频文件。

最后，用万维网联盟创始人Tim Berners-Lee的评论来小结：“今天，我们想做的事情已经不再是通过浏览器观看视频或收听音频，或者在一部手机上运行浏览器。我们希望通过不同的设备，在任何地方，都能够共享照片、网上购物、阅读新闻，以及查找信息。虽然大多数用户对HTML5和开放Web平台(Open Web Platform, OWP)并不熟悉，但是它们正在不断改进用户体验。”

1.5、浏览器支持

HTML5发展的速度非常快，主流浏览器对于HTML5各API的支持也不尽统一，用户需要访问https://www.caniuse.com/，在首页输入API的名称或关键词了解各浏览器，以及各版本对其支持的详细情况，如下图所示。在默认主题下，绿色表示完全支持，紫色表示部分支持，红色表示不支持。
在这里插入图片描述
如果访问http://html5test.com/，可以获取用户当前浏览器和版本对于HTML5规范的所有API支持的详情。另外，也可以使用Modernizr（JavaScript库）进行特性检测，它提供了非常先进的HTML5和CSS3检测功能。

2、HTML5设计原则

为了规范HTML5开发的兼容性、实用性和可操作性，W3C发布了HTML5设计原则(http://www.w3.org/ TR/html-design-principles/)，简单说明如下。

2.1、避免不必要的复杂性

规范可以写得十分复杂，但浏览器的实现应该非常简单。把复杂的工作留给浏览器后台去处理，用户仅需要输入最简单的字符，甚至不需要输入，这才是最佳文档规范。因此，HTML5首先采用化繁为简的思路进行设计。

**【示例1】**在HTML 4.01中定义文档类型的代码如下：

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

HTML5简化如下:

    <!DOCTYPE html>

HTML 4.01和XHTML中的DOCTYPE过于冗长，连自己都记不住这些内容，但在HTML5中只需要简单的就可以了。DOCTYPE是给验证器用的，而非给浏览器，浏览器只需在DOCTYPE切换时关注这个标签，因此并不需要写得太复杂。

**【示例2】**在HTML 4.01中定义字符编码的代码如下：

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

在XHTML 1.0中还需要再次声明XML标签，并在其中指定字符编码：

    <?xml version="1.0" encoding="utf-8" ?>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML5简化如下：

    <meta charset="utf-8">

关于省略不必要的复杂性，或者说避免不必要的复杂性的例子还有不少，但关键是既能避免不必要的复杂性，又不会妨碍在现有浏览器中使用。

在HTML5中，如果使用link元素链接到一个样式表，先定义rel=“stylesheet”，然后再定义type=“text/css”，这样就重复了。对浏览器而言，只要设置rel="stylesheet"就够了，因为它可以猜出要链接的是一个CSS样式表，不必再指定type属性。

对Web开发而言，大家都使用JavaScript脚本语言，也就是默认的通用语言，用户可以为script元素定义type="text/javascript"属性，也可以什么都不写，浏览器自然会假设在使用JavaScript。

2.2、支持已有内容

XHTML 2.0最大的问题就是不支持已经存在的内容，这违反了Postel法则（即对自己发送的内容要严格，对接收的内容则要宽容）。现实中，开发者可以写出各种风格的HTML，浏览器遇到这些代码时，在内部所构建的结构应该是一样的，呈现的效果也应该是一样的。

**【示例】**下面代码展示了编写同样内容的4种不同写法，4种写法唯一的不同点就是语法。

    <!--写法1-->
    <img src="foo" alt="bar" />
    <p class="foo">Hello world</p>
    <!--写法2-->
    <img src="foo" alt="bar">
    <p class="foo">Hello world
    <!--写法3-->
    <IMG SRC="foo" ALT="bar">
    <P CLASS="foo">Hello world</P>
    <!--写法4-->
    <img src=foo alt=bar>
    <p class=foo>Hello world</p>

从浏览器解析的角度分析，这些写法实际上都是一样的。HTML5必须支持已经存在的约定，以适应不同的用户习惯，而不是要求用户适应浏览器的严格解析标准。

2.3、解决实际问题

规范应该解决现实中实际遇到的问题，而不应该考虑复杂的理论问题。

**【示例】**既然有在<a>中嵌套多个段落标签的需要，那就让规范支持它。

如果块内容包含一个标题、一个段落，按HTML4规范，必须至少使用2个链接。例如：

    <h2><a href="#">标题文本</a></h2>
    <p><a href="#">段落文本</a></p>

在HTML5中，只需要把所有内容都包裹在一个链接中。例如：

    <a href="#">
        <h2>标题文本</h2>
        <p>段落文本</p>
    </a>

其实，这种写法早已经存在，当然以前这样写是不合乎规范的。HTML5解决现实的问题，其本质还是纠正因循守旧的规范标准，现在把标准改了，允许用户这样写。

2.4、根据用户使用习惯设计规范

当一个实践已经被广泛接受时，就应该考虑将它吸纳进来，而不是禁止它或搞一个新的实践。例如，HTML5新增了nav、section、article、aside等标签，引入了新的文档模型，即文档中的文档。在section中，还可以嵌套h1～h6的标签，这样就有了无限的标题层级，这也是很早之前Tim Berners-Lee所设想的。

**【示例】**下面几行代码都是频繁使用过的ID名称。

    <div id="header">...</div>
    <div id="navigation">...</div>
    <div id="main">...</div>
    <div id="aside">...</div>
    <div id="footer">...</div>

在HTML5中，可以用新的元素代替它们。

    <header>...</header>
    <nav>...</nav>
    <div id="main">...</div>
    <aside>...</aside>
    <footer>...</footer>

实际上，这并不是HTML5工作组发明的，也不是W3C开会研究出来的，而是谷歌根据大数据分析用户习惯总结出来的。

2.5、优雅的降级

渐进增强的另一面就是优雅地回退。最典型的例子就是使用type属性增强表单。

**【示例1】**下面代码列出了可以为type属性指定的新值，如number、search、range等。

    <input type="number" />
    <input type="search" />
    <input type="range" />
    <input type="email" />
    <input type="date" />
    <input type="url" />

最关键的问题在于：当浏览器看到新type值时会如何处理。旧版本浏览器是无法解析新type值的，但是当它们看到不理解的type值时，会将type的值解析为text。

**【示例2】**对于新的video元素，它设计得很简单且实用。针对不支持video元素的浏览器可以这样写：

    <video src="movie.mp4">
        <!-- 回退内容 -->
    </video>

这样HTML5视频与Flash视频就可以协同起来，用户就不用纠结如何进行选择了。

    <video src="movie.mp4">
        <object data="movie.swf">
            <!-- 回退内容 -->
        </object>
    </video>

这样HTML5视频与Flash视频就可以协同起来，用户就不用纠结如何进行选择了。

    <video src="movie.mp4">
        <object data="movie.swf">
            <!-- 回退内容 -->
        </object>
    </video>

如果愿意的话，还可以使用source元素，而非用src属性来指定不同的视频格式。

    <video>
        <source src="movie.mp4">
        <source src="movie.ogv">
        <object data="movie.swf">
            <a href="movie.mp4">download</a>
        </object>
    </video>

上面代码包含以下4个不同的层次：

  • 如果浏览器支持video元素，也支持H264，那么用第一个视频。
  • 如果浏览器支持video元素，也支持Ogg，那么用第二个视频。
  • 如果浏览器不支持video元素，那么就要试试Flash视频。
  • 如果浏览器不支持video元素，也不支持Flash视频，那么可以给出下载链接。

总之，无论是HTML5，还是Flash，一个也不能少。如果只使用video元素提供视频，难免会遇到问题；如果只提供Flash影片，性质是一样的。所以，还是应该两者兼顾。

2.6、支持优先级

用户与开发者的重要性要远远高于规范和理论。在考虑优先级时，应该按照下面的顺序： 用户 > 编写HTML的开发者 > 浏览器厂商 > 规范制定者 > 理论

这个设计原则本质上是一种解决冲突的机制。例如，当面临一个要解决的问题时，如果W3C给出了一种解决方案，而WHATWG给出了另一种解决方案。一旦遇到冲突，第一是最终用户，第二是编写HTML的开发者，第三是浏览器厂商，第四是规范制定者，第五才是理论上的完美。

根据最终用户优先原理，开发人员在链条中的位置高于实现者。假如我们发现规范中的某些地方有问题，不支持实现这个特性，那么就等于把相应的特性给否定了，其在规范里就得删除，因为用户有更高的权重。在本质上，用户拥有更大的发言权，开发人员也拥有更多的主动性。

3、HTML5语法特性

HTML5以HTML4为基础，对HTML 4进行了全面的升级改造。与HTML4相比，HTML5在语法上有很大的变化，具体说明如下。

3.1、文档和标记

3.1.1、内容类型

HTML5的文件扩展名和内容类型保持不变。例如，扩展名仍然为“.html”或“.htm”，内容类型(ContentType)仍然为“text/html”。

3.1.2、文档类型

在HTML4中，文档类型的声明方法如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在HTML5中，文档类型的声明方法如下：

    <!DOCTYPE html>

当使用工具时，也可以在DOCTYPE声明中加入SYSTEM识别符，声明方法如下：

    <!DOCTYPE HTML SYSTEM "about:legacy-compat">

在HTML5中，DOCTYPE的声明方式是不区分大小写的，引号也不区分是单引号还是双引号。

注意：使用HTML5的DOCTYPE会触发浏览器以标准模式显示页面。众所周知，网页都有多种显示模式，如怪异模式(Quirks)、标准模式(Standards)。浏览器根据DOCTYPE识别应该使用哪种解析模式。

3.1.3、字符编码

在HTML4中，使用meta元素定义文档的字符编码，如下所示：

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

在HTML5中，继续沿用meta元素定义文档的字符编码，但是简化了charset属性的写法，如下所示：

    <meta charset="UTF-8">

对于HTML5来说，上述两种方法都有效，用户可以继续使用前面一种方式，即通过content元素的属性指定。但是不能同时混用两种方式。

**注意：**在传统网页中，下面标记是合法的。在HTML 5中，这种字符编码方式将被认为是错误的。

<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">

从HTML5开始，对于文件的字符编码推荐使用UTF-8。

3.2、宽松的约定

HTML5语法是为了保证与HTML4语法达到最大程度的兼容而设计的。

3.2.1、标记省略

在HTML5中，元素的标记可以分为三种类型：不允许写结束标记、可以省略结束标记、开始标记和结束标记可以全部省略。下面简单介绍这三种类型各包括哪些HTML5元素。

(1)不允许写结束标记的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

(2)可以省略结束标记的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

(3)开始标记和结束标记可以全部省略的元素有：html、head、body、colgroup、tbody。

**提示：**不允许写结束标记的元素是指不允许使用开始标记与结束标记将元素括起来的形式，只允许使用<元素/>的形式进行书写。
例如：
错误的书写方式如下：

<br></br>

正确的书写方式如下：

</br>

HTML5之前的版本中
这种写法可以继续沿用。

开始标记和结束标记可以全部省略的元素是指元素可以完全被省略。注意，该元素还是会以隐式的方式存在的。例如，将body元素省略时，它在文档结构中还是存在的，可以使用document.body进行访问。

3.2.2、布尔值

对于布尔型属性，如disabled与readonly等，当只写属性而不指定属性值时，表示属性值为true；如果属性值为false，可以不使用该属性。另外，要想将属性值设定为true，可以将属性名设定为属性值，或将空字符串设定为属性值。

【示例1】下面是几种正确的书写方法：

    <!--只写属性，不写属性值，代表属性为true-->
    <input type="checkbox" checked>
    <!--不写属性，代表属性为false-->
    <input type="checkbox">
    <!--属性值=属性名，代表属性为true-->
    <input type="checkbox" checked="checked">
    <!--属性值=空字符串，代表属性为true-->
    <input type="checkbox" checked="">

3.2.3、属性值

属性值可以加双引号，也可以加单引号。HTML5在此基础上做了一些改进，当属性值不包括空字符串、<、>、=、单引号、双引号等字符时，属性值两边的引号可以省略。

**【示例2】**下面的写法都是合法的。

    <input type="text">
    <input type='text'>
    <input type=text>

4、HTML5基本结构

4.1、新建HTML5文档

完整的HTML5文档结构一般包括两部分：头部消息(<head>)和主体信息(<body>)。

在<head>和</head>标签之间的内容表示网页文档的头部消息。在头部代码中，有一部分是浏览者可见的，如<title>和</title>之间的文本，也称为网页标题，会显示在浏览器标签页中；但是大部分内容是不可见的，是专门为浏览器解析网页服务的，如网页字符编码、各种元信息等。

在<body>和</body>标签之间的内容表示网页文档的主体信息。它包括三部分。

  • 文本内容：在页面上让访问者了解页面信息的纯文字，如关于产品、资讯的内容，以及其他任何内容。
  • 外部引用：用来加载图像、音视频文件，以及CSS样式表文件、JavaScript脚本文件等，还可以指向其他HTML页面或资源。
  • 标签：对文本内容进行分类标记，以确保浏览器能够正确显示。

**【示例1】**使用记事本或者其他类型的文本编辑器新建文本文件，保存为index.html。注意，扩展名为.html，而不是.txt。

输入下面的代码，由于网页没有包含任何信息，在浏览器中显示为空，如下图所示：

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

由于网页内容都由文本构成，因此网页可以保存为纯文本格式，可以在任何平台使用任何编辑器查看源代码，这个特性也确保了用户能够很容易地创建HTML页面。

提示：如果使用专业网页编辑器，如VSCode等，在新建网页文件时，会自动构建基本的网页结构。

本帖所称HTML泛指HTML语言本身。如果需要强调某个版本的特殊性，则使用它们各自的名称。例如，HTML5引入了一些新的元素，并重新定义或删除了HTML 4和XHTML 1.0中的某些元素。

**【示例2】**在示例1基础上，为页面添加内容，代码如下：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>HTML5示例</title>
    </head>
    <body>
    <article>
        <h1>第一个HTML5网页</h1>
        <img src="images/html5.jpg" width="200" alt="html5图标" />
        <p>我是<em>小白</em>, 现在准备学习<a href="https://www.w3.org/TR/html5/" rel="external" title="HTML5参考手册" >
HTML5</a></p>
    </article>
    </body>
    </html>

示例2演示了6种最常用的标签：a、article、em、h1、img和p。每个标签都表示不同的语义，例如，h1定义标题，a定义链接，img定义图像。

**注意：**在代码中行与行之间通过回车符分开，不过它不会影响页面的呈现效果。对HTML进行代码缩进显示，与在浏览器中的显示效果没有任何关系，但是pre元素是一个例外。习惯上，我们会对嵌套结构的代码进行缩进排版，这样更容易看出元素之间的层级关系。

4.2、标签

一个标签由3部分组成：元素、属性和值。

4.2.1、元素

元素表示标签的名称。大多数标签由开始标签和结束标签配对使用。习惯上，标签名称采用小写形式，HTML5对此未做强制要求，也可以使用大写字母。除非特殊需要，否则不推荐使用大写字母。例如：

<em>小白</em>
  • 开始标签：<em>
  • 被标记的文本：小白
  • 结束标签：</em>

还有一些标签不包含文本，仅有开始标签，称为孤标签。例如：

<img src="images/xiaobai.jpg" width="50" alt="小白者，我也" />

在HTML5中，孤标签名称结尾处的空格和斜杠是可选的。不过，“>”是必需的。

元素包含父元素和子元素。

如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。子元素中包含的任何元素都是外层父元素的后代。这种类似家谱结构的HTML代码的结构特性，有助于在元素上添加样式和应用JavaScript行为。

当元素中包含其他元素时，每个元素都必须嵌套正确，也就是子元素必须完全包含在父元素中，不能把子元素的结束标签放在外面。例如：

    <article>
        <h1>小白自语</h1>
        <img src="images/xiaobai.jpg" width="50" alt="小白者，我也" />
        <p>我是<em>小白</em>, 现在准备学习<a href="https://www.w3.org/TR/html5/" rel="external" title="HTML5参考手册">
HTML5</a></p>
    </article>

4.2.2、属性和值

属性用来设置标签的特性。在HTML5中，属性的值可以不加引号，习惯上建议添加，同时尽量使用小写形式。例如：

    <label  for="email">电子邮箱</label>

一个标签可以设置多个属性，每个属性都有各自的值。属性的顺序并不重要。不同的属性之间用空格隔开。例如：

<a href="https://www.w3.org/TR/html5/" rel="external" title="HTML5参考手册">HTML5</a>

有的属性可以接收任何值，有的属性则有限制。最常见的是仅接收预定义值（即枚举值）的属性。此时，用户必须从一个标准列表中选一个值，枚举值一般用小写字母编写。例如：

<link  rel="stylesheet"  media="screen" href="style.css"  />

用户只能将link元素的media属性设为all、screen、print等值中的一个，不能像href属性和title属性可以输入任意值。

有很多属性的值需要设置为数字，特别是描述大小和长度的属性。数字值不需要包含单位，只需输入数字本身。图像和视频的宽度和高度是有单位的，默认为像素。

有的属性（如href和src）用于引用其他文件，它们只能包含URL形式的字符串。

有一种特殊的属性称为布尔属性，这种属性的值是可选的，只要这种属性出现就表示其值为真。布尔属性是预定义好的，无法自创。例如：

<input  type="email"  name="emailaddr"  required />

上面代码提供了一个让用户输入电子邮件地址的输入框。布尔属性required表示用户必须填写该输入框。布尔属性不需要属性值，如果一定要加上属性值，则可以编写为required=“required”。

4.2.3、文本内容

网页中显示的文本内容，就是元素中包含的文本，它是网页最基本的构成成分。在HTML早期的版本中，只能使用ASCII字符。

ASCII字符仅包括英语字母、数字和少数几个常用符号。开发人员必须用特殊的字符引用创建很多日常符号。例如，&nbsp;表示空格，&copy;表示版权符号©，&reg;表示注册商标符号®等。完整列表请访问http://www.elizabethcastro.com/html/extras/entities.html。

**注意：**浏览器在呈现HTML页面时，会把文本内容中的多个空格或制表符压缩成单个空格，把回车符和换行符转换成单个空格或者忽略。字符引用也替换成对应的符号，如把&copy;显示为©。

Unicode字符集极大地缓解了特殊字符的显示问题。使用UTF-8对页面进行编码，并用同样的编码保存HTML文件已成为一种标准做法。推荐在网页中将charset值指定为UTF-8。HTML5不区分大小写，UTF-8和utf-8的编码结果是一样的。

4.2.3、超文本内容

在网页中除了大量的文本内容外，还有很多非文本内容，如链接、图像、视频、音乐等。从网页外引用图像和其他非文本内容时，浏览器会将这些内容与文本一起显示。在默认情况下，链接文本的颜色与其他文本的颜色不一样，而且带有下画线。

    <article>
        <h1>小白自语</h1>
        <img src="images/xiaobai.jpg" width="50" alt="小白者，我也" />
        <p>我是<em>小白</em>, 现在准备学习<a href="https://www.w3.org/TR/html5/" rel="external" title="HTML5参考手册">
HTML5</a></p>
    </article>

在基本HTML文档中，有一个对图像文件xiaobai.jpg的引用（img标签的src属性），浏览器在加载页面其他部分的同时，会请求、加载和显示这个图像，该页面包括一个指向HTML5参考页面的链接（a标签的href属性）。

浏览器可以处理链接和图像，不过无法处理其他任何文件类型。例如，对于一般浏览器来说，要查看PDF格式的外部文件，就需要在系统中预先安装Adobe Reader软件，要查看电子表格就需要预先安装Open Office等软件。早期HTML没有内置的方法播放视频和音频文件，各软件厂商都开发出相应的播放软件，用户可以下载并安装这些软件，从而弥补浏览器缺失的功能。这样的软件称为插件。

在浏览器插件中，使用最广泛的是Flash插件。多年以来，Flash插件是网页视频必备的工具。不过，这个插件也有一些问题，如它会耗费较多的计算资源。HTML5新增了audio和video元素，这样无须使用插件就可以播放音频和视频。新的浏览器提供了内置的媒体播放器，用户仍然可以使用Flash播放器作为旧浏览器的备用工具。

5、代码示例

5.1、编写简洁的HTML5文档

示例将遵循HTML5语法规范编写一个文档。本例文档省略了<html>、<head>、<body>等标签，使用HTML5的DOCTYPE声明文档类型，简化<meta>的charset属性设置，省略<p>标签的结束标记，使用<元素/>的方式结束<meta>和<br>标签等。

    <!DOCTYPE html>
    <meta charset="UTF-8">
    <title>HTML5基本语法</title>
    <h1>HTML5的目标</h1>
    <p>HTML 5的目标是为了能够创建更简单的Web程序，书写出更简洁的HTML代码。
    <br/>例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出了新的属性、
新的元素等。总体来说，为下一代Web平台提供了许许多多新的功能。

效果如下：
在这里插入图片描述
过短短几行代码就完成一个页面的设计，这充分说明HTML5语法的简洁，同时也说明HTML5不是一种XML语言，其语法也很随意。下面从这两方面进行逐句分析。

第一行代码如下：

<!DOCTYPE HTML>

不需要版本号，仅告诉浏览器需要一个doctype触发标准模式，可谓简明扼要。

接下来，说明文档的字符编码，否则将出现浏览器不能正确解析的情况:

    <meta charset="utf-8">

HTML5不区分大小写，不需要标记结束符，不介意属性值是否加引号，即下列代码是等效的。

    <meta charset="utf-8">
    <META charset="utf-8" />
    <META charset=utf-8>

在主体中，可以省略主体标记，直接编写需要显示的内容。虽然在编写代码时省略了<html>、<head>和<body>标记，但在浏览器进行解析时，将会自动进行添加。考虑到代码的可维护性，在编写代码时，应该尽量增加基本结构标签。

5.2、比较HTML4与HTML5文档结构

下面通过示例具体说明HTML 5是如何使用全新的结构化标签编织网页的。

**【示例1】**本例设计将页面分成上、中、下三部分：上面显示网站标题；中间分两部分，左侧为辅助栏，右侧显示网页正文内容；下面显示版权信息，如下图所示。使用HTML4构建文档基本结构如下：

    <div id="header">[标题栏]</div>
    <div id="aside">[侧边栏]</div>
    <div id="article">[正文内容]</div>
    <div id="footer">[页脚栏]</div>

在这里插入图片描述
尽管上述代码不存在任何语法错误，也可以在HTML5中很好地解析，但该页面结构对于浏览器来说不具有区分度。对于不同的用户来说，ID命名可能因人而异；但对浏览器来说，就无法辨别每个div元素在页面中的作用，必然影响其对页面的语义解析。

**【示例2】**下面使用HTML5新增元素重新构建页面结构，明确定义每部分在页面中的作用。

    <header>[标题栏]</header>
    <aside>[侧边栏]</aside>
    <article>[正文内容]</article>
    <footer>[页脚栏]</footer>

虽然示例1和示例2的两段代码不一样，但比较这两段代码可以发现，使用HTML5新增元素创建的页面代码更简洁、明晰。通过比较可以很容易地看出，HTML4使用<div id="header">、<div id="aside">、<div id="article">和<div id="footer">标记元素没有任何语义，浏览器不能根据标记的ID名称推断它的作用，因为ID名称是随意变化的。而HTML5新增元素header，明确地告诉浏览器此处是页头，aside元素用于构建页面辅助栏目，article元素用于构建页面正文内容，footer元素定义页脚注释内容，这样极大地提高了开发者的便利性和浏览器的解析效率。