标记元素没有任何语义，浏览器不能根据标记的ID名称推断它的作用，因为ID名称是随意变化的。而HTML5新增元素header，明确地告诉浏览器此处是页头，aside元素用于构建页面辅助栏目，article元素用于构建页面正文内容，footer元素定义页脚注释内容，这样极大地提高了开发者的便利性和浏览器的解析效率。
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名称，并且发现其重复量很大，如很多开发人员使用 HTML5规范是基于用户优先的原则编写的，其宗旨是用户即上帝。这意味着，在遇到无法解决的冲突时，首先是用户，其次是页面制作者，再次是浏览器解析标准和规范制定者（如W3C、WHATWG），最后才考虑理论的纯粹性。因此，HTML5的绝大部分功能是实用的，只是在有些情况下还不够完美。例如，下面的几种代码写法在HTML5中都能被识别。 当然，上面几种写法比较混乱，不够严谨，但是从用户和开发的角度考虑，用户不在乎代码怎么写，开发人员根据个人习惯书写反而提高了代码的编写效率。 为保证足够安全，HTML5引入了一种新的基于来源的安全模型，该模型不仅易用，而且对各种不同的API都通用。这个安全模型不需要借助于任何所谓聪明、有创意却不安全的hack就能跨域进行安全对话。 在清晰分离表现与内容方面，HTML5迈出了很大的步伐。HTML5在所有可能的地方都努力进行分离，包括HTML和CSS。实际上，HTML5规范已经不支持旧版本HTML的大部分表现功能。 HTML5要的就是简单，避免不必要的复杂性。HTML5的口号是：简单至上，尽可能简化。因此，HTML5做了以下改进。 通用访问的原则可以分成三个概念。 在传统Web应用中，很多功能只能通过插件或者复杂的hack实现，但在HTML5中提供了对这些功能的原生支持。插件的方式存在以下问题。 以HTML5中的canvas元素为例，有很多非常底层的操作以前是没办法做到的，如在HTML4的页面中就很难画出对角线，而有了canvas就可以很轻易地实现了。基于HTML5的各类API的优秀设计，可以轻松地对它们进行组合应用。例如，从video元素中抓取的帧可以显示在canvas里面，用户单击canvas即可播放这帧对应的视频文件。 最后，用万维网联盟创始人Tim Berners-Lee的评论来小结：“今天，我们想做的事情已经不再是通过浏览器观看视频或收听音频，或者在一部手机上运行浏览器。我们希望通过不同的设备，在任何地方，都能够共享照片、网上购物、阅读新闻，以及查找信息。虽然大多数用户对HTML5和开放Web平台(Open Web Platform, OWP)并不熟悉，但是它们正在不断改进用户体验。” HTML5发展的速度非常快，主流浏览器对于HTML5各API的支持也不尽统一，用户需要访问https://www.caniuse.com/，在首页输入API的名称或关键词了解各浏览器，以及各版本对其支持的详细情况，如下图所示。在默认主题下，绿色表示完全支持，紫色表示部分支持，红色表示不支持。 为了规范HTML5开发的兼容性、实用性和可操作性，W3C发布了HTML5设计原则(http://www.w3.org/ TR/html-design-principles/)，简单说明如下。 规范可以写得十分复杂，但浏览器的实现应该非常简单。把复杂的工作留给浏览器后台去处理，用户仅需要输入最简单的字符，甚至不需要输入，这才是最佳文档规范。因此，HTML5首先采用化繁为简的思路进行设计。 **【示例1】**在HTML 4.01中定义文档类型的代码如下： HTML5简化如下: HTML 4.01和XHTML中的DOCTYPE过于冗长，连自己都记不住这些内容，但在HTML5中只需要简单的就可以了。DOCTYPE是给验证器用的，而非给浏览器，浏览器只需在DOCTYPE切换时关注这个标签，因此并不需要写得太复杂。 **【示例2】**在HTML 4.01中定义字符编码的代码如下： 在XHTML 1.0中还需要再次声明XML标签，并在其中指定字符编码： HTML5简化如下： 关于省略不必要的复杂性，或者说避免不必要的复杂性的例子还有不少，但关键是既能避免不必要的复杂性，又不会妨碍在现有浏览器中使用。 在HTML5中，如果使用link元素链接到一个样式表，先定义rel=“stylesheet”，然后再定义type=“text/css”，这样就重复了。对浏览器而言，只要设置rel="stylesheet"就够了，因为它可以猜出要链接的是一个CSS样式表，不必再指定type属性。 对Web开发而言，大家都使用JavaScript脚本语言，也就是默认的通用语言，用户可以为script元素定义type="text/javascript"属性，也可以什么都不写，浏览器自然会假设在使用JavaScript。 XHTML 2.0最大的问题就是不支持已经存在的内容，这违反了Postel法则（即对自己发送的内容要严格，对接收的内容则要宽容）。现实中，开发者可以写出各种风格的HTML，浏览器遇到这些代码时，在内部所构建的结构应该是一样的，呈现的效果也应该是一样的。 **【示例】**下面代码展示了编写同样内容的4种不同写法，4种写法唯一的不同点就是语法。 从浏览器解析的角度分析，这些写法实际上都是一样的。HTML5必须支持已经存在的约定，以适应不同的用户习惯，而不是要求用户适应浏览器的严格解析标准。 规范应该解决现实中实际遇到的问题，而不应该考虑复杂的理论问题。 **【示例】**既然有在 如果块内容包含一个标题、一个段落，按HTML4规范，必须至少使用2个链接。例如： 在HTML5中，只需要把所有内容都包裹在一个链接中。例如： 其实，这种写法早已经存在，当然以前这样写是不合乎规范的。HTML5解决现实的问题，其本质还是纠正因循守旧的规范标准，现在把标准改了，允许用户这样写。 当一个实践已经被广泛接受时，就应该考虑将它吸纳进来，而不是禁止它或搞一个新的实践。例如，HTML5新增了nav、section、article、aside等标签，引入了新的文档模型，即文档中的文档。在section中，还可以嵌套h1～h6的标签，这样就有了无限的标题层级，这也是很早之前Tim Berners-Lee所设想的。 **【示例】**下面几行代码都是频繁使用过的ID名称。 在HTML5中，可以用新的元素代替它们。 实际上，这并不是HTML5工作组发明的，也不是W3C开会研究出来的，而是谷歌根据大数据分析用户习惯总结出来的。 渐进增强的另一面就是优雅地回退。最典型的例子就是使用type属性增强表单。 **【示例1】**下面代码列出了可以为type属性指定的新值，如number、search、range等。 最关键的问题在于：当浏览器看到新type值时会如何处理。旧版本浏览器是无法解析新type值的，但是当它们看到不理解的type值时，会将type的值解析为text。 **【示例2】**对于新的video元素，它设计得很简单且实用。针对不支持video元素的浏览器可以这样写： 这样HTML5视频与Flash视频就可以协同起来，用户就不用纠结如何进行选择了。 这样HTML5视频与Flash视频就可以协同起来，用户就不用纠结如何进行选择了。 如果愿意的话，还可以使用source元素，而非用src属性来指定不同的视频格式。 上面代码包含以下4个不同的层次： 总之，无论是HTML5，还是Flash，一个也不能少。如果只使用video元素提供视频，难免会遇到问题；如果只提供Flash影片，性质是一样的。所以，还是应该两者兼顾。 用户与开发者的重要性要远远高于规范和理论。在考虑优先级时，应该按照下面的顺序： 这个设计原则本质上是一种解决冲突的机制。例如，当面临一个要解决的问题时，如果W3C给出了一种解决方案，而WHATWG给出了另一种解决方案。一旦遇到冲突，第一是最终用户，第二是编写HTML的开发者，第三是浏览器厂商，第四是规范制定者，第五才是理论上的完美。 根据最终用户优先原理，开发人员在链条中的位置高于实现者。假如我们发现规范中的某些地方有问题，不支持实现这个特性，那么就等于把相应的特性给否定了，其在规范里就得删除，因为用户有更高的权重。在本质上，用户拥有更大的发言权，开发人员也拥有更多的主动性。 HTML5以HTML4为基础，对HTML 4进行了全面的升级改造。与HTML4相比，HTML5在语法上有很大的变化，具体说明如下。 HTML5的文件扩展名和内容类型保持不变。例如，扩展名仍然为“.html”或“.htm”，内容类型(ContentType)仍然为“text/html”。 在HTML4中，文档类型的声明方法如下： 在HTML5中，文档类型的声明方法如下： 当使用工具时，也可以在DOCTYPE声明中加入SYSTEM识别符，声明方法如下： 在HTML5中，DOCTYPE的声明方式是不区分大小写的，引号也不区分是单引号还是双引号。 注意：使用HTML5的DOCTYPE会触发浏览器以标准模式显示页面。众所周知，网页都有多种显示模式，如怪异模式(Quirks)、标准模式(Standards)。浏览器根据DOCTYPE识别应该使用哪种解析模式。 在HTML4中，使用meta元素定义文档的字符编码，如下所示： 在HTML5中，继续沿用meta元素定义文档的字符编码，但是简化了charset属性的写法，如下所示： 对于HTML5来说，上述两种方法都有效，用户可以继续使用前面一种方式，即通过content元素的属性指定。但是不能同时混用两种方式。 **注意：**在传统网页中，下面标记是合法的。在HTML 5中，这种字符编码方式将被认为是错误的。 从HTML5开始，对于文件的字符编码推荐使用UTF-8。 HTML5语法是为了保证与HTML4语法达到最大程度的兼容而设计的。 在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。 **提示：**不允许写结束标记的元素是指不允许使用开始标记与结束标记将元素括起来的形式，只允许使用<元素/>的形式进行书写。 正确的书写方式如下： HTML5之前的版本中 开始标记和结束标记可以全部省略的元素是指元素可以完全被省略。注意，该元素还是会以隐式的方式存在的。例如，将body元素省略时，它在文档结构中还是存在的，可以使用document.body进行访问。 对于布尔型属性，如disabled与readonly等，当只写属性而不指定属性值时，表示属性值为true；如果属性值为false，可以不使用该属性。另外，要想将属性值设定为true，可以将属性名设定为属性值，或将空字符串设定为属性值。 【示例1】下面是几种正确的书写方法： 属性值可以加双引号，也可以加单引号。HTML5在此基础上做了一些改进，当属性值不包括空字符串、<、>、=、单引号、双引号等字符时，属性值两边的引号可以省略。 **【示例2】**下面的写法都是合法的。 完整的HTML5文档结构一般包括两部分：头部消息( 在 在 **【示例1】**使用记事本或者其他类型的文本编辑器新建文本文件，保存为index.html。注意，扩展名为.html，而不是.txt。 输入下面的代码，由于网页没有包含任何信息，在浏览器中显示为空，如下图所示： 由于网页内容都由文本构成，因此网页可以保存为纯文本格式，可以在任何平台使用任何编辑器查看源代码，这个特性也确保了用户能够很容易地创建HTML页面。 提示：如果使用专业网页编辑器，如VSCode等，在新建网页文件时，会自动构建基本的网页结构。 本帖所称HTML泛指HTML语言本身。如果需要强调某个版本的特殊性，则使用它们各自的名称。例如，HTML5引入了一些新的元素，并重新定义或删除了HTML 4和XHTML 1.0中的某些元素。 **【示例2】**在示例1基础上，为页面添加内容，代码如下： 示例2演示了6种最常用的标签：a、article、em、h1、img和p。每个标签都表示不同的语义，例如，h1定义标题，a定义链接，img定义图像。 **注意：**在代码中行与行之间通过回车符分开，不过它不会影响页面的呈现效果。对HTML进行代码缩进显示，与在浏览器中的显示效果没有任何关系，但是pre元素是一个例外。习惯上，我们会对嵌套结构的代码进行缩进排版，这样更容易看出元素之间的层级关系。 一个标签由3部分组成：元素、属性和值。 元素表示标签的名称。大多数标签由开始标签和结束标签配对使用。习惯上，标签名称采用小写形式，HTML5对此未做强制要求，也可以使用大写字母。除非特殊需要，否则不推荐使用大写字母。例如： 还有一些标签不包含文本，仅有开始标签，称为孤标签。例如： 在HTML5中，孤标签名称结尾处的空格和斜杠是可选的。不过，“>”是必需的。 元素包含父元素和子元素。 如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。子元素中包含的任何元素都是外层父元素的后代。这种类似家谱结构的HTML代码的结构特性，有助于在元素上添加样式和应用JavaScript行为。 当元素中包含其他元素时，每个元素都必须嵌套正确，也就是子元素必须完全包含在父元素中，不能把子元素的结束标签放在外面。例如： 属性用来设置标签的特性。在HTML5中，属性的值可以不加引号，习惯上建议添加，同时尽量使用小写形式。例如： 一个标签可以设置多个属性，每个属性都有各自的值。属性的顺序并不重要。不同的属性之间用空格隔开。例如： 有的属性可以接收任何值，有的属性则有限制。最常见的是仅接收预定义值（即枚举值）的属性。此时，用户必须从一个标准列表中选一个值，枚举值一般用小写字母编写。例如： 用户只能将link元素的media属性设为all、screen、print等值中的一个，不能像href属性和title属性可以输入任意值。 有很多属性的值需要设置为数字，特别是描述大小和长度的属性。数字值不需要包含单位，只需输入数字本身。图像和视频的宽度和高度是有单位的，默认为像素。 有的属性（如href和src）用于引用其他文件，它们只能包含URL形式的字符串。 有一种特殊的属性称为布尔属性，这种属性的值是可选的，只要这种属性出现就表示其值为真。布尔属性是预定义好的，无法自创。例如： 上面代码提供了一个让用户输入电子邮件地址的输入框。布尔属性required表示用户必须填写该输入框。布尔属性不需要属性值，如果一定要加上属性值，则可以编写为required=“required”。 网页中显示的文本内容，就是元素中包含的文本，它是网页最基本的构成成分。在HTML早期的版本中，只能使用ASCII字符。 ASCII字符仅包括英语字母、数字和少数几个常用符号。开发人员必须用特殊的字符引用创建很多日常符号。例如， **注意：**浏览器在呈现HTML页面时，会把文本内容中的多个空格或制表符压缩成单个空格，把回车符和换行符转换成单个空格或者忽略。字符引用也替换成对应的符号，如把 Unicode字符集极大地缓解了特殊字符的显示问题。使用UTF-8对页面进行编码，并用同样的编码保存HTML文件已成为一种标准做法。推荐在网页中将charset值指定为UTF-8。HTML5不区分大小写，UTF-8和utf-8的编码结果是一样的。 在网页中除了大量的文本内容外，还有很多非文本内容，如链接、图像、视频、音乐等。从网页外引用图像和其他非文本内容时，浏览器会将这些内容与文本一起显示。在默认情况下，链接文本的颜色与其他文本的颜色不一样，而且带有下画线。 在基本HTML文档中，有一个对图像文件xiaobai.jpg的引用（img标签的src属性），浏览器在加载页面其他部分的同时，会请求、加载和显示这个图像，该页面包括一个指向HTML5参考页面的链接（a标签的href属性）。 浏览器可以处理链接和图像，不过无法处理其他任何文件类型。例如，对于一般浏览器来说，要查看PDF格式的外部文件，就需要在系统中预先安装Adobe Reader软件，要查看电子表格就需要预先安装Open Office等软件。早期HTML没有内置的方法播放视频和音频文件，各软件厂商都开发出相应的播放软件，用户可以下载并安装这些软件，从而弥补浏览器缺失的功能。这样的软件称为插件。 在浏览器插件中，使用最广泛的是Flash插件。多年以来，Flash插件是网页视频必备的工具。不过，这个插件也有一些问题，如它会耗费较多的计算资源。HTML5新增了audio和video元素，这样无须使用插件就可以播放音频和视频。新的浏览器提供了内置的媒体播放器，用户仍然可以使用Flash播放器作为旧浏览器的备用工具。 示例将遵循HTML5语法规范编写一个文档。本例文档省略了 效果如下： 第一行代码如下： 不需要版本号，仅告诉浏览器需要一个doctype触发标准模式，可谓简明扼要。 接下来，说明文档的字符编码，否则将出现浏览器不能正确解析的情况: HTML5不区分大小写，不需要标记结束符，不介意属性值是否加引号，即下列代码是等效的。 在主体中，可以省略主体标记，直接编写需要显示的内容。虽然在编写代码时省略了 下面通过示例具体说明HTML 5是如何使用全新的结构化标签编织网页的。 **【示例1】**本例设计将页面分成上、中、下三部分：上面显示网站标题；中间分两部分，左侧为辅助栏，右侧显示网页正文内容；下面显示版权信息，如下图所示。使用HTML4构建文档基本结构如下： **【示例2】**下面使用HTML5新增元素重新构建页面结构，明确定义每部分在页面中的作用。 虽然示例1和示例2的两段代码不一样，但比较这两段代码可以发现，使用HTML5新增元素创建的页面代码更简洁、明晰。通过比较可以很容易地看出，HTML4使用标记页眉区域，为了解决实际问题，HTML5就直接添加一个
1.4.3、效率
id="prohtml5"
id=prohtml5
ID="prohtml5"
1.4.4、安全性
1.4.5、分离
1.4.6、简化
1.4.7、通用性
1.4.8、无插件
1.5、浏览器支持
如果访问http://html5test.com/，可以获取用户当前浏览器和版本对于HTML5规范的所有API支持的详情。另外，也可以使用Modernizr（JavaScript库）进行特性检测，它提供了非常先进的HTML5和CSS3检测功能。2、HTML5设计原则
2.1、避免不必要的复杂性
DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
2.2、支持已有内容
<img src="foo" alt="bar" />
<p class="foo">Hello worldp>
<img src="foo" alt="bar">
<p class="foo">Hello world
<IMG SRC="foo" ALT="bar">
<P CLASS="foo">Hello worldP>
<img src=foo alt=bar>
<p class=foo>Hello worldp>
2.3、解决实际问题
中嵌套多个段落标签的需要，那就让规范支持它。 <h2><a href="#">标题文本a>h2>
<p><a href="#">段落文本a>p>
<a href="#">
<h2>标题文本h2>
<p>段落文本p>
a>
2.4、根据用户使用习惯设计规范
<div id="header">...div>
<div id="navigation">...div>
<div id="main">...div>
<div id="aside">...div>
<div id="footer">...div>
<header>...header>
<nav>...nav>
<div id="main">...div>
<aside>...aside>
<footer>...footer>
2.5、优雅的降级
<input type="number" />
<input type="search" />
<input type="range" />
<input type="email" />
<input type="date" />
<input type="url" />
<video src="movie.mp4">
video>
<video src="movie.mp4">
<object data="movie.swf">
object>
video>
<video src="movie.mp4">
<object data="movie.swf">
object>
video>
<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">downloada>
object>
video>
2.6、支持优先级
用户 > 编写HTML的开发者 > 浏览器厂商 > 规范制定者 > 理论3、HTML5语法特性
3.1、文档和标记
3.1.1、内容类型
3.1.2、文档类型
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DOCTYPE html>
DOCTYPE HTML SYSTEM "about:legacy-compat">
3.1.3、字符编码
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta charset="UTF-8">
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">
3.2、宽松的约定
3.2.1、标记省略
例如：
错误的书写方式如下：<br>br>
br>
这种写法可以继续沿用。3.2.2、布尔值
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">
3.2.3、属性值
<input type="text">
<input type='text'>
<input type=text>
4、HTML5基本结构
4.1、新建HTML5文档
)和主体信息()。和标签之间的内容表示网页文档的头部消息。在头部代码中，有一部分是浏览者可见的，如和标签之间的内容表示网页文档的主体信息。它包括三部分。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>网页标题title>
head>
<body>
body>
html>
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参考手册" >
HTML5a>p>
article>
body>
html>
4.2、标签
4.2.1、元素
<em>小白em>
<img src="images/xiaobai.jpg" width="50" alt="小白者，我也" />
<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参考手册">
HTML5a>p>
article>
4.2.2、属性和值
<label for="email">电子邮箱label>
<a href="https://www.w3.org/TR/html5/" rel="external" title="HTML5参考手册">HTML5a>
<link rel="stylesheet" media="screen" href="style.css" />
<input type="email" name="emailaddr" required />
4.2.3、文本内容
表示空格，©表示版权符号©，®表示注册商标符号®等。完整列表请访问http://www.elizabethcastro.com/html/extras/entities.html。©显示为©。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参考手册">
HTML5a>p>
article>
5、代码示例
5.1、编写简洁的HTML5文档
、、等标签，使用HTML5的DOCTYPE声明文档类型，简化的charset属性设置，省略标签的结束标记，使用<元素/>的方式结束和 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>
<meta charset="utf-8">
<meta charset="utf-8">
<META charset="utf-8" />
<META charset=utf-8>
、和标记，但在浏览器进行解析时，将会自动进行添加。考虑到代码的可维护性，在编写代码时，应该尽量增加基本结构标签。5.2、比较HTML4与HTML5文档结构
<div id="header">[标题栏]div>
<div id="aside">[侧边栏]div>
<div id="article">[正文内容]div>
<div id="footer">[页脚栏]div>
尽管上述代码不存在任何语法错误，也可以在HTML5中很好地解析，但该页面结构对于浏览器来说不具有区分度。对于不同的用户来说，ID命名可能因人而异；但对浏览器来说，就无法辨别每个div元素在页面中的作用，必然影响其对页面的语义解析。 <header>[标题栏]header>
<aside>[侧边栏]aside>
<article>[正文内容]article>
<footer>[页脚栏]footer>
、
、
和