HTML5 & CSS3 新手指南 - 第二部分（共 12 部分）
4.86/5 (22投票s)
构建基础
在第 1 部分中，我们学习了一些关于 HTML5 和 CSS3 的历史。我们还研究了 HTML5 的语法规则，以及一些必需和基本元素。在本文中，我们将扩展我们的知识，并研究
作者的抱怨
我必须强调的一件事（我可能会在每一章中都这样做）是我对 HTML 验证的重视。代码不必经过验证即可工作，但当你的老板决定偷偷运行自己的验证时，它肯定会给你的老板带来奇迹。是的，我遇到过这种情况，但那时我并不那么聪明。此外，那是在糟糕的 XHTML 世界中，它远不如 HTML5 宽容。
元素和模板杂项
这些文章在描述 HTML 元素时使用特定的约定。首先，我通过将元素名称括在 '<' 和 ' />' 中来表示一个空或空元素。结束括号前的斜杠表示这种类型的元素。其次，我使用其开始和结束标签来描述非空元素
<emptyelement />
<normalelement></normalelement>
此外，所有代码示例都假定它们放置在此代码的 body 元素中
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Beginner's HTML5 Practice Page</title>
</head>
<body></body>
</html>
属性
HTML 元素通常可以通过元素的属性以某种方式指定或修改。
属性在元素的开始标签中以 name="value" 的形式声明。在 HTML5 中，属性名称和值不区分大小写。以下是所有元素共有的某些全局属性（以及示例）
id |
id="top_element"
id 属性为单个元素分配一个唯一的名称。任何两个元素不能具有相同的 id 值，否则通过 id 引用元素的脚本将失败。 |
title |
title="第 2 章"
title 属性保存当鼠标悬停在元素上时像工具提示一样弹出的文本。 |
类 |
class="ornamented"
class 属性指定分配给元素的类（或多个类）。 |
样式 |
style="width: 100px;"
style 属性是为元素定义 CSS 属性的内联方法。 |
在本 12 部分系列的其余部分中，元素定义将只显示该元素特有的属性，然后只显示最常用的属性。
图像和不同类型的超链接
图像有两种类型：栅格和矢量。栅格图像将颜色和透明度值映射到单个像素。矢量图像包含绘制图像的指令。每种类型都有其优缺点，如下所示。
栅格
当你用智能手机拍照时，你创建了一个栅格图像。栅格图像具有定义的尺寸和颜色属性。BMP、JPG、GIF 和 PNG 文件都是栅格格式图像的示例。当你检查栅格图像的文件属性时（取决于你使用的工具），你会发现图片尺寸和有时是颜色深度。
尺寸告诉你图片有多少像素宽和高。颜色深度告诉你图像中可能有多少种颜色。
BMP 文件是最初为 Windows 和 OS/2 操作系统创建的栅格图像。这些文件可以有 32 位的位深度。此格式中颜色深度为 16 位或更高的图像始终是未压缩的，因此很大。因此，BMP 文件在网页上很少见。
JPEG 文件可以显示 1600 万种颜色，因为它们具有 24 位颜色深度。当我们戴上思考帽时，我们很快就会看到 24 位分解为三个通道，每个通道 8 位。这是 RGB 颜色，红色、绿色和蓝色通道的值从 0 到 255。JPEG 文件具有可伸缩的压缩容量，使其能够以图像清晰度为代价进行非常小的压缩。
GIF 文件格式创建于 1987 年。它支持 8 位颜色深度，这意味着从调色板中选择 256 种颜色。但是，GIF 格式有两个优点：小尺寸和动画功能。
PNG 文件可以包含高达 48 位的位深度（每个通道 16 位），但通常任何大于每个通道 8 位都是浪费的。PNG 格式压缩得相当好，并且仍然保持非常清晰的图像。
调整栅格图像大小需要算法来在图片变大时填充像素或在图片缩小时将它们合并。重复调整大小会迅速损坏栅格图片，因此网页设计师通常会将尺寸不同的栅格图像放到网站上。
向量
矢量图像文件在调整大小后不会遭受损坏。它们基本上是文本文件，如你从 W3C SVG 文档结构页面获取的此示例中可以看到
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1" xmlns="http://www.w3.org/2000/svg">
<desc>Four separate rectangles
</desc>
<rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
<rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
<rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
<rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>
<!-- Show outline of canvas using 'rect' element -->
<rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm" fill="none" stroke="blue" stroke-width=".02cm" />
</svg>
因为矢量图像文件只是指令，所以调整大小的矢量图像不会出现像素化。维基百科关于 SVG 文件的文章显示了两者差异的良好比较。
所有这些听起来 SVG 文件应该取代栅格，但矢量图像不能像栅格文件那样在特定位置映射数千个像素。矢量图像主要由线条和填充组成。快速的Google 搜索会带来许多矢量图像的示例。从这些图片中，你应该能够看到为什么矢量图像不能取代栅格图像。
在页面上显示图像
HTML5 只提供一个元素用于显示图像
<img src="" alt="" width="" height="" usemap="" />
img 元素可以显示上面列出的所有图像类型，包括 SVG 文件。默认情况下，img 元素将以其原始尺寸显示图片。图片可以拉伸或缩小，具体取决于元素属性的值。
IMG 属性
src 这是图像的位置。 alt 如果找不到图像，此属性中的文本将显示在图像所在的空间中。 宽度，高度 这些属性将图像限制为指定的宽度和/或高度。省略这些属性会导致图像以其原始大小显示。 usemap 这是图像映射的名称，下面将在超链接部分进行描述
在下面的示例中，img 元素显示图片 profile.jpg
<img src="profile.jpg" />
上面的示例假定图像文件与 HTML5 文档位于同一目录中。对于放置在其他位置的图像，必须使用正确的寻址方案。
area 元素必须作为 map 元素的子元素出现。map 和 area 元素协同工作以形成图像映射。现在让我们看看图像映射可能为我们做什么。
超链接
在我们进入图像映射之前，我们需要讨论超链接。超链接是网页上可点击的区域，它将浏览器引导到另一个位置。如果目的地是当前文档中的位置，则称为内部链接。如果目的地是另一个网页，我们称之为外部链接。
a 元素表示存在链接。
<a href="" target=""></a>
当 href 属性缺失时，a 元素变成一个锚点。
<a target=""></a>
a 属性的锚点格式使其成为超链接可以到达的地方。让我们看几个作为超链接的 a 元素的例子，并熟悉它
<a href="/profile.jpg">Root Link</a> <a href="../images/profile.jpg">Relative Link</a> <a href="https://db.tt/rD8Ye5QS" target="_blank">External Link</a> <a href="#some_place_below">Internal Link</a>
根链接示例告诉我们图像位于网站的根目录中。相比之下，相对链接示例返回一个目录，然后进入图像目录以查找图像文件。外部链接示例指向另一个服务器上的位置，它使用 target 属性创建一个新选项卡并在那里打开 href 位置。内部链接示例指向当前文档上的位置。
请注意，href 通过使用 '#' 后跟锚点的标识符来定位锚点。
a 元素只需要一个标识符即可成为锚点。标识符可以是全局属性 id 或全局属性 name。下面的示例使用 id 属性
<a id="some_place_below">Destination of Internal Link</a>
超链接上下文中的文本会下划线并显示不同的颜色，具体取决于链接的状态。
- 未访问：蓝色
- 已访问：紫色
- 活动：红色
下面的部分屏幕截图向你展示了它们在网页上的样子。请注意，活动颜色（红色）仅在鼠标悬停在链接上并单击时显示。
关于 a 元素的另一件事是它可以包含几乎任何你想要的内容：文本、图像、段落、图像和段落。唯一的限制是超链接区域中不能有交互元素，例如按钮或其他链接。可以想象，整个页面可能是一个链接。
图像映射
好的，现在我们可以开始图像映射了。首先，你需要知道这种结构在代码中是什么样子。我们从图像开始
<img src="https://db.tt/rD8Ye5QS" width="200" height="200" usemap="#samplemap" alt="sample mapped image" />
然后，我们将 map 元素与其 area 元素子元素组合在一起
<map name="samplemap">
<area shape="rect" coords="0,0,200,100" href="#top_slice" alt="The top half" />
<area shape="rect" coords="0,101,200,200" href="#bottom_slice" alt="The bottom half" />
</map>
在浏览器中，它看起来像这样
请注意，图像上没有添加任何内容来告诉你它上面有一个地图。但是，当你将光标移到图像上时，你会看到熟悉的选中图标，表示存在链接。当你单击链接时，点击区域周围会出现一个淡淡的蓝色边框，浏览器会将你发送到目的地。对于此示例，目的地是内部的，但它们也可以是外部的。
简而言之，map 元素只是一个容器，而 area 元素是自定义形状的超链接。
你必须为 map 的 name 属性提供一个值，并且该名称必须与引用的 img 元素的 usemap 属性的值匹配。在我们的示例中，我们使用“samplemap”。
area 元素的 shape 属性可以是几个值之一
- rect：一个矩形，其中 coords 属性包含区域的左上角和右下角坐标。格式为 top-left-x, top-left-y, bottom-right-x, bottom-right-y。坐标是相对于图像而不是网页的。
- circle：一个圆形区域，其中 coords 属性包含圆的中心和半径。格式为 center-x, center-y, radius。半径值以像素为单位。
- poly：一个多边形，（表面上）具有无限数量的顶点。coords 属性包含顶点信息，如 x1, y1, x2, y2,...xn, yn。如果最后一个顶点与第一个顶点不同，浏览器仍将连接第一个和最后一个顶点。
- default：这是值，而不仅仅是默认值 (shape="default")。此值指定整个地图区域。
区域元素包含重叠的坐标信息是完全有效的。但是，只有重叠区域中第一个指定的区域元素包含链接的目的地。
这提供了一种有趣的方式来在形状中创建孔洞。例如，如果你想在一个环形中有一个可点击的区域，你会将“孔洞”区域首先列出，比第二个区域元素小，并居中在同一位置。要使中心区域成为死区，请省略 href 和 alt 属性。这是一个示例
<map>
<area shape="circle" coords="50,50,10" />
<area shape="circle" coords="50,50,100" href="#ring_shaped_link" alt="Ring Shape Destination" />
</map>
顺便说一句，如果你在阅读超链接部分时对外部链接地址感到好奇，并且你去了那里，你会注意到图像比我们的地图示例的 img 元素定义的尺寸大得多。
列表和表格
内容可以通过列表和表格元素轻松地以列和行或仅列的形式进行格式化。
列表
有两种 HTML 列表，有序列表和无序列表
<ol type="" start="" reversed=""></ol> <ul></ul>
这两个列表元素都充当列表项的容器，列表项由 li 元素表示
<li value=""></li>
li 元素的 value 属性仅对有序列表有意义，因为 ol 元素中的 li 元素具有序数值。属性的内容需要是整数，并且它指示显示数字的值。
如果我有一个没有值的有序列表，我将得到一个从 1 开始编号的列表
<ol>
<li>Kiwi</li>
<li>Orange</li>
<li>Apple</li>
<li>Melon</li>
</ol>
如果我包含 value 属性，编号会改变
<ol>
<li value="4">Kiwi</li>
<li value="3">Orange</li>
<li value="2">Apple</li>
<li value="1">Melon</li>
</ol>
请注意，我们也可以通过将 ol 元素的 reversed 属性设置为“reversed”来做同样的事情……
如果我只为列表中的一个项目指定一个值
<ol>
<li>Kiwi</li>
<li>Orange</li>
<li value="16">Apple</li>
<li>Melon</li>
</ol>
你可以看到，对于没有指定 value 属性的项目，列表编号基本正常递增。
OL 属性
type 指定编号类型。值如下
- "1"：十进制（默认）
- "a"：小写拉丁字母
- "A"：大写拉丁字母
- "i"：小写罗马数字
- "I"：大写罗马数字
start 设置系列中的第一个值。通过设置第一个 li 元素的 value 属性也可以做到这一点。 颠倒 这将从顶部向下计数，或从列表底部向上计数。
ul 元素除了全局属性之外没有其他属性。
表格
HTML 表格创建一个网格，网格中的每个单元格都可以容纳内容。所有构成表格的元素都列在下面
<table></table> <thead></thead> <tbody></tbody> <tfoot></tfoot> <tr></tr> <td colspan="" rowspan=""></td> <th colspan="" rowspan=""></th>
所有表格元素都充当容器。HTML5 建议说不需要结束标签，但我发现当包含它们时，我的理智大部分保持完好，尤其是我已经盯着代码看了几个小时。
简单来说，table 元素包含一个 thead、一个 tbody 和一个 tfoot 元素；或者它包含零个或多个 tr 元素；或者它包含这四者的混合。根据作者的经验，thead、tbody 和 tfoot 元素可以以任何顺序出现，表格看起来仍然很好，但前提是你为这些元素包含结束标签。
thead、tbody 和 tfoot 元素可以包含零个或多个 tr 元素。tr 元素可以包含零个或多个 td 或 th 元素。
而且，如果你此刻彻底困惑，一张图片可能会让事情更清楚
<table>
<thead>
<tr>
<th>Day</th>
<th>Max</th>
<th>Min</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>4.01</td>
<td>1.12</td>
</tr>
<tr>
<td>Tuesday</td>
<td>2.67</td>
<td>0.57</td>
</tr>
<tr>
<td>Wednesday</td>
<td>0.33</td>
<td>0.09</td>
</tr>
</tbody>
<tfoot>
<th>Total:</th>
<td>7.01</td>
<td>1.78</td>
</tfoot>
</table>
表格很适合显示表格数据，但它们也可以用于页面格式化。几乎任何东西都可以放入 td 元素中，包括其他表格。
表格的一个强大功能是它的调整大小能力。单元格的宽度可以按百分比指定，这使得单元格宽度在表格缩小或放大时（通常是由于操作系统中浏览器窗口的调整大小）保持成比例。
上面显示的表格图像包含边框，即使 HTML 代码中没有指定边框。（作者用 CSS 作弊！）边框可以在单元格级别绘制，这意味着我们可以有形成除网格之外的线条。
单元格也可以加宽以跨越多个列，或垂直拉伸以跨越多个行。这就是 colspan 和 rowspan 属性对单元格（td 元素）的作用。这是示例表格的另一个版本，带有一个转折
<table>
<thead>
<tr>
<th>Day</th>
<th>Max</th>
<th>Min</th>
<th>Avg</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>4.01</td>
<td>1.12</td>
<td>2.57</td>
</tr>
<tr>
<td>Tuesday</td>
<td rowspan="2" colspan="2"></td>
<td>0.00</td>
</tr>
<tr>
<td>Wednesday</td>
<td>0.00</td>
</tr>
</tbody>
<tfoot>
<th>Total:</th>
<td>4.01</td>
<td>1.12</td>
<td>2.57</td>
</tfoot>
</table>
请注意带有 rowspan 和 colspan 属性的 td 元素是如何展开的。该单元格始于 Tuesday 行和 Max 列的交点，但它占用下面的行和右边的列。
为了保持表格为矩形，一些单元格必须被移除。一个从 Tuesday 行中移除，两个从 Wednesday 行中移除。
大量的文本可以专门用于表格，因为它们曾经在网页设计中占据非常重要的位置。然而，随着 HTML5 和 CSS3 的出现，表格元素的出现频率已经下降。相反，表格作为格式化代理的需求已经减少了。
强调元素（粗体、下划线、斜体等）
W3C 建议将强调元素归类为 文本语义。该组中有 31 个元素。你最可能使用的元素如下
<em></em> <strong></strong> <small></small> <code></code> <q></q> <sub></sub> <sup></sup> <i></i> <b></b> <u></u> <span></span> <hr />
W3C 建议中对这些元素的描述比本文现在将采取的更抽象。例如，建议说 em 元素“表示对其内容的强调”，而不是简单地说“以斜体显示”。那么，这里是实用解释和语义解释
文本语义元素
| 元素 | 理性描述 | 语义描述1 |
|---|---|---|
| em | 以斜体显示文本。 | 表示对其内容的强调 |
| strong | 以粗体显示文本。 | 表示对其内容的高度重要性、严肃性或紧迫性 |
| small | 显示小文本。本质上，它将 CSS 元素 font-size 设置为“smaller”。 | 表示附带评论，例如小字号文字。 |
| code | 以等宽字体显示文本，通常是 Courier New。 | 表示计算机代码片段。 |
| q | 在内容周围加上引号。 | 表示从其他来源引用的一些措辞内容。 |
| 子 | 下标 | sup 元素表示上标，sub 元素表示下标 |
| sup | 上标 | (见上文) |
| i | 以斜体显示文本。 | 表示一种替代的声音或情绪的文本片段，或者以指示文本不同质量的方式与正常散文错开，例如分类名称、技术术语、另一种语言的习语短语、音译、思想或西方文本中的船名。 |
| b | 以粗体显示文本。 | 表示一段文本，出于实用目的引起注意，而不传达任何额外的重要性，也不暗示替代的声音或情绪，例如文档摘要中的关键词、评论中的产品名称、交互式文本驱动软件中的可操作词或文章导语。 |
| u | 文本下划线。 | 表示一段带有未明确但明确渲染的非文本注释的文本，例如将文本标记为中文文本中的专有名词（中文专有名词标记），或将文本标记为拼写错误。 |
| span | 表示文本的内联部分，通常用于更改强调、颜色或情绪的属性。 | span 元素本身没有任何意义，但可能很有用…… |
1 语义描述取自 W3C 建议，未作任何修改。
<p>This is the default font style and size.</p>
<p>
<b>This is bold.</b><br />
<i>This is italic.</i><br />
<u>This is underlined.</u><br />
<em>This is the em element.</em><br />
<strong>This is STRONG.</strong><br />
Regular alongside <small>some small</small> text<br />
To use a library in C#: <code>using System.Text;</code><br />
He said: <q>Put out the fire!</q><br />
Here we have <sup>superscript</sup> and now <sub>subscript</sub>.<br />
The SPAN element <span>doesn't seem to do much.</span><br />
</p>
编辑元素
有两个元素用于演示编辑
<ins cite="" datetime=""></ins> <del cite="" datetime=""></del>
编辑元素属性
cite 包含一个 URL，该 URL 应指向解释更改的位置。 datetime 更改的日期和时间。请注意，此属性只是一个字符串值，可以包含任何 ascii 文本。但是，如果你想要有效的代码，则此属性应包含可以解析为日期和时间的文本。
在浏览器中，ins 和 del 元素会给其内容加下划线。del 元素用删除线装饰文本。这是它的样子
<del> <p>This is the default font style and size.</p> </del>
以前有一个 strike 元素，它以删除线显示文本，但该元素已从 W3C HTML5 建议中删除。然而，如果你使用它，浏览器仍然会正确解析 strike 元素
<strike><p>This is the default font style and size.</p></strike>
使用注释
注释以“<!--”开始，以“-->”结束。在这两个标记之间，你可以有任何文本，但不能有额外的注释标记。
此外，不要以“>”或序列“->”开头注释文本。一个好的经验法则是，在注释标记和注释文本之间至少插入一个空格，以免混淆你要注释的文本
<!-- This is supposed <!-- to be fully commented --> but it isn't --> <!-- This is supposed to be commented and it is -->
注释标记也可以跨多行
<!--
<p>This paragraph should never be shown.</p>
<ol>
<li>Keep this list commented out</li>
<li>until we find a reason for it.</li>
</ol>
-->
代码结构和可读性提示
HTML5 文档没有格式要求。因此，解析引擎足够宽松，允许所有内容都被挤压在一起，形成一个扭曲的混乱。然而，人类是必须维护这些文档的代理，我们需要结构才能轻松阅读、解释和调试 HTML5 源代码。因此，应始终实践源代码格式化。
以下规则并非旨在严格遵守。然而，你会发现
规则 1：像层次结构一样组织所有内容。
根元素 html 应该单独占一行，左侧没有任何空格。此后，html 元素的所有子元素都应该缩进一个空格单位（通常是四个空格或一个制表符）。
这些子元素的子元素应该比它们的父元素向右缩进一个空格单位。子元素的子元素的子元素应该再缩进一个空格单位，依此类推。
<!DOCTYPE html>
<html> <!-- the root element -->
<head> <!-- first child of the root element -->
<title>Home Page</title> <!-- first child of the child of the root element -->
</head>
<body>
Text in the BODY element. <!-- Content is also indented. -->
</body>
</html>
请注意上面的代码是如何将某些元素的内容或子元素缩进的。你只需注意开始和结束标签之间缩进的内容，即可立即查看 head 元素的内容。
在这样一个简单的示例中，混淆的可能性很小，但有时情况会变得很糟糕，例如表格结构
<table><thead><tr><th>Day</th><th>Max</th><th>Min</th></tr></thead><tbody><tr><td>Monday</td><td>4.01</td><td>1.12</td></tr><tr><td>Tuesday</td><td>2.67</td><td>0.57</td></tr><tr><td>Wednesday</td><td>0.33</td><td>0.09</td></tr></tbody><tfoot><th>Total:</th><td>7.01</td><td>1.78</td></tfoot></table>
哇。在第三行第三列中找到单元格需要长时间扫描文本，而且很有可能出错。
分层格式使上面的混乱更容易阅读
<table>
<thead>
<tr>
<th>Day</th>
<th>Max</th>
<th>Min</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>4.01</td>
<td>1.12</td>
</tr>
<tr>
<td>Tuesday</td>
<td>2.67</td>
<td>0.57</td>
</tr>
<tr>
<td>Wednesday</td>
<td>0.33</td>
<td>0.09</td> <!-- Here is the 3rd column in the 3rd row of tbody -->
</tr>
</tbody>
<tfoot>
<th>Total:</th>
<td>7.01</td>
<td>1.78</td>
</tfoot>
</table>
这使得理解和维护变得如此容易。
现在，你可能已经注意到 th 和 td 元素的内容没有放在单独的行上并缩进。这没关系，因为——如前所述——规则真的不需要总是遵循。有时将标签和内容放在同一行更有意义。
在上面的表格示例中，编码人员可能认为将内容与 th 和 td 标签放在一起实际上会促进理解。
规则 2：决定一种大小写并坚持使用。
正如本系列示例所示，作者喜欢对所有元素和属性名称使用小写。但这并非必需，因为 HTML5 解析器不关心大小写。
所以，如果你想要大写的元素名称，那就放手去做吧。但是，如果你这样做，请确保你所有的元素名称都是大写的。混合大小写会导致混淆，而混淆总是导致错误。
规则 3：力求逻辑组织
元素在文档中出现时，它们也将以这种方式出现在文档解析时的流程中。默认情况下，这就是事物在网页中展开的方式。每个元素的内容紧随前一个元素之后显示。然后，下一个元素的内容紧随其后。这会一直持续到页面结束。
但这并不是大多数页面向客户端展开的方式。CSS 使视觉格式化文档的工作相对容易。这意味着元素在源代码中的位置不一定决定其内容的显示方式。
编码人员可以做的一件事，就是为元素制定一个组织，使文档易于阅读。将所有导航元素放在一个地方，所有标题元素放在另一个地方，依此类推。
规则 4：查看其他编码人员的作品，看看什么是好的，什么是坏的
查看你经常访问的网站的源代码，看看它是否容易阅读。有些网站的代码格式很差，有些则不然。记下你认为容易理解和不容易理解的地方。将其与你编写的代码进行比较，然后找到方法让你的代码更好看。
模仿他人的格式并不违反版权法，只要你不逐字输入他人的源代码。切勿直接复制他人的代码。只需汲取概念，然后以你自己的方式在你的代码中使用它。
在大多数浏览器中，你可以在页面上的任何位置右键单击，然后会弹出一个下拉菜单，其中包含一个菜单选项，可让你查看源代码。这是 Chrome 下拉菜单（部分）显示的内容
Chrome 和 Firefox 将在新标签页中打开文档的源代码。
浏览器支持
创建浏览器的供应商非常努力地使其产品符合当前的建议，同时支持 HTML 的早期版本。通常，所有浏览器都支持目前与 HTML4 一起使用的技术。本节强调的问题是它们对 HTML5 新功能的支持。
在合规性从高到低进行排序后，我发现 Chrome 的合规性最高，而 IE 的合规性最低。你可以在 Html5test.com 测试你自己的浏览器。仅仅为了好玩，我日常使用的四种浏览器得分如下（满分 555 分）
Chrome 505 Opera 496 Firefox 432 IE 11 365
这意味着主要浏览器大部分支持 HTML5，但并非完全支持。而且，如果你希望你的页面在尽可能多的浏览器上正确渲染，你必须为合规性最差的浏览器编写代码：在本例中是 IE。
你可以自己查看，但各种浏览器不支持的支持项与本系列第 1 章和第 2 章中讨论的元素无关。然而，对于认真的 HTML 编码人员来说，许多这些不受支持的元素将引起一些不安。
例如，IE 不支持 Ogg Theora、WebM with VP8 或 WebM with VP9 视频格式，但 Chrome 支持。Chrome 支持所有文本语义元素，除了 time 元素，但 IE 只支持 mark 和 wbr 元素。
历史
2014-03-30：首次发布