Web前端开发技术与实践 第3章：初识HTML5 阮晓龙 /

Presentation on theme: "Web前端开发技术与实践 第3章：初识HTML5 阮晓龙 /"— Presentation transcript:

1 Web前端开发技术与实践 第3章：初识HTML5 阮晓龙 13938213680 / rxl@hactcm.edu.cn
河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.9

2 本章主要内容 HTML概述 HTML5的优势 HTML5的新特征 HTML5的文档结构

3 1.HTML概述 1.1什么是HTML 1982年，英国人蒂姆·伯纳斯·李为了方便世界各地的物理学家能够进行合作研究以及信息共享，创造了HTML语言，之后HTML发展成了互联网上应用最为广泛的标记语言。 HTML是Hypertext Markup Language的缩写，中文翻译为超文本标识语言。使用HTML元素编写的文档称为HTML文档，目前最新版本是HTML5.0。 HTML是目前在网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文档是由HTML元素组成的描述性文本，HTML标签可以识别文字、图形、动画、声音、表格和链接等网页中常用的组成部分。

4 1.HTML概述 1.2 HTML的发展历程 从1993年互联网工程工作小组（IETF）工作草案发布，到1999年W3C发布HTML4.01标准，HTML共经历过5个版本。 HTML不仅成为Web上最主要的文档格式，而且在个人及商业应用中都发挥着重要作用。

5 1.HTML概述 在HTML语言的发展历史中，大致经历了如下发展历史。 HTML：1993年6月由互联网工程小组发布的HTML工作草案。
HTML2.0：1995年11月作为RFC 1866发布。 HTML3.2：1996年1月14日由W3C组织发布，是HTML文档第一个被广泛使用的标准。 HTML4.0：1997年12月18日由W3C组织发布，也是W3C推荐标准。

6 1.HTML概述 在HTML语言的发展历史中，大致经历了如下发展历史。
HTML4.01：1999年12月24日由W3C组织发布，是HTML文档另一个重要的、广泛使用的标准。 XHTML1.0：发布于2000年1月26日，是W3C组织推荐标准，后来经过修订于2002年8月1重新发布。 HTML5：2014年10月29日，W3C的HTML工作组正式发布了HTML5的正式推荐标准（W3C Recommendation）。

7 1.HTML概述 1.3 HTML5的发展史 为了推动Web标准化运动的发展，一些公司联合起来，成立了Web Hypertext Application Technology Working Group（Web超文本应用技术工作组 -WHATWG）的组织。 WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟）专注于XHTML2.0。 在2006年，双方决定进行合作，来创建一个新版本的HTML，即HTML5。

8 1.HTML概述 HTML5的第一份正式草案已于2008年1月22日公布。目前，HTML5 仍处于不断的完善之中。
2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。 根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

9 1.HTML概述 1.3 HTML5的发展史 2013年5月6日，HTML5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素的操作性。 2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。

10 1.HTML概述 1.4 HTML5的开发团队 在2004年W3C成员内部的一次研讨会上，Opera公司的代表伊恩•希克森（Ian Hickson）提出了一个扩展和改进HTML的建议。他建议新任务组可以跟XHTML2并行，并在已有HTML的基础上开展工作，目标是对HTML进行扩展。 但是W3C并未通过该建议，之后Opera、Apple等浏览器厂商以及其他成员脱离了W3C，并成立了WHATWG（Web Hypertext Application Technology Working Group，Web超文本应用技术工作组），致力于Web表单和应用程序的研究。

11 1.HTML概述 1.4 HTML5的开发团队 WHATWG在HTML的基础上开展工作，向其中添加新功能。该工作组成员大部分为浏览器厂商，因此可以保证实现各种新奇、可使用的创新。不断提出的创新，逐一在浏览器中实现。WHATWG的工作效率很高，不久就初见成效。在此期间，W3C的XHTML2没有什么实质性的进展。 W3C在2007年组建了HTML5工作组。在这两个工作组共同的努力下，确定了设计HTML5所要坚持的原则，统一了HTML5语言规范，经过8年的艰辛努力，于2014年10月29日由W3C公开发布。

12 1.HTML概述 HTML5的开发是由三个重要组织负责的，具体如下。
WHATWG：由来自Apple、Mozilla、Google、Opera等浏览器厂商组成，成立于2004年。WHATWG开发HTML和Web应用API，同时为各浏览器厂商以及其他有意向的组织提供开放式合作。 W3C：W3C管辖的HTML工作组，目前负责发布HTML5规范。 IETF（Internet Engineering Task Force，因特网工程任务组）：该任务组下辖HTTP等负责Internet协议的团队。HTML5定义的一种新API（WebSocket API）依赖于新的WebSocket协议，IETF工作组负责开发协议。

13 1.HTML概述 1.5 HTML5官方资源 W3School是W3C中国社区成员，致力于推广W3C标准技术，是因特网上最大的Web开发者资源，同时是完全免费的、非盈利性的，并且在不断升级和更新中。 W3School包括全面的教程、完善的参考手册以及庞大的代码库，可供HTML5学习者快速学习并了解HTML5的开发及使用方法。

14 2.HTML5优势 相对于之前的版本，HTML5有着以下优势。 跨浏览器的兼容性 增强交互功能 更好的存储技术 用户优先 更简单的代码
2.1优势 相对于之前的版本，HTML5有着以下优势。 跨浏览器的兼容性 增强交互功能 更好的存储技术 用户优先 更简单的代码 通用访问

15 2.HTML5优势 2.1优势 跨浏览器的兼容性 在一个浏览器中可以正常运行的HTML+CSS+JavaScript页面，换一个浏览器之后，可能会出现很多问题，比如页面布局混乱、JavaScript运行出错等等。因此跨浏览器兼容就显得尤为重要了。 目前各种主流浏览器（如Internet Explorer、Chrome、Firefox、Opera、Safari等）都对HTML5有着良好的兼容性。 在HTML5以前，各种浏览器对HTML、JavaScript的支持很不统一，这样就造成了同一个页面在不同浏览器中的表现不一致。HTML5的目标是详细分析各浏览器所具有的功能，并为此基础制定一个通用规范，并要求各浏览器能支持这通用标准。

16 2.HTML5优势 2.1优势 增强交互功能 在传统的Web应用中，很多功能只能通过插件或者复杂程序来实现。在Web中使用插件的方式虽然很常见，但是存在很多问题： 插件安装可能失败。 插件可以被禁用或者屏蔽（如Flash插件）。 插件自身会成为被攻击的对象。 插件不容易与HTML文档的其他部分集成，因为存在插件边界、剪裁和透明度问题。

17 2.HTML5优势 2.1优势 增强交互功能 插件使用的是自带的渲染模型，与普通Web页面所使用的不一样，所以当弹出来的或者其他的可视化元素与插件重叠时，会发生错误。HTML5很好地解决了这些问题，它提供了一些不依托于插件的解决方案，如不使用Flash插件的视频播放和音频播放。 以HTML5中的canvas元素为例，有很多非常底层的事情以前是没办法做到的（比如在HTML4的页面中就很难画出对角线），而有了canvas就可以很容易地实现了。

18 2.HTML5优势 2.1优势 更好的存储技术 HTML5中提供了本地存储功能。其中将比较老的技术cookie和客户端数据库融合。但是它比cookie更好用，因为支持多个存储，HTML5存储技术拥有更好的安全和性能，即使浏览器关闭后也可以保存并且所有主流浏览器都支持。 本地存储对于Web前端开发的改变可以说是革命性的，它能够保存数据到用户的浏览器中，这就意味者可以通过此功能创建一些应用特性，例如：保存用户信息、缓存数据、加载用户上一次的应用状态等。

19 2.HTML5优势 2.1优势 用户优先 HTML5规范是基于用户优先准则编写的，其宗旨是“用户即上帝”，这意味着在遇到无法解决的冲突时，规范会把用户放到第一位，其次是页面作者，再者是实现者（浏览器），接着是规范制定者，最后才考虑理论的纯粹性。因此，HTML5的绝大部分是非常实用的。 例如，下面的几种代码写法在HTML5中都能被识别。

20 2.HTML5优势 2.1优势 更简单的代码 HTML5要的就是简单、避免不必要复杂性。HTML5的口号是“简单至上，尽可能简化”，因此，HTML做了如下改进。 以浏览器原生能力替代复杂的JavaScript代码。 新的简化的DOCTYPE。 新的简化的字符集声明。 简单而强大的HTML5 API。

21 2.HTML5优势 通用访问 通用访问远侧分为三个概念进行描述：
2.1优势 通用访问 通用访问远侧分为三个概念进行描述： 可访问性：出于对残障用户的考虑，HTML5与WAI（Web Accessibility Initiative，Web可访问性倡议）和ARIA（Accessible Rich Internet Application，可访问的富Internet应用）做到了紧密结合，WAI-ARIA中以屏幕阅读器为基础的元素已经被添加到HTML中。 媒体中立：如果可能得话，HTML5的功能在所有不同设备和平台上应该都能正常运行。 支持所有语种：例如，新的<ruby>元素支持，东南亚页面排版中会用到的Ruby注释为页面中的内容添加注释，如拼音。

22 2.HTML5优势 HTML5的新功能有： 新的DOCTYPE和字符集 语义化标记 更灵活的选择符 JavaScript的日志和调试
2.2新功能 HTML5的新功能有： 新的DOCTYPE和字符集 语义化标记 更灵活的选择符 JavaScript的日志和调试 DOM Level 3

23 2.HTML5优势 新的DOCTYPE和字符集 根据HTML5设计准则，Web页面的DOCTYPE被极大地简化了。
2.2新功能 新的DOCTYPE和字符集 根据HTML5设计准则，Web页面的DOCTYPE被极大地简化了。 HTML4中 DOCTYPE代码如下所示。 HTML5中DOCTYPE代码如下所示。 HTML5之前的字符集声明如下所示。 HTML5中的字符集声明如下所示。

24 2.HTML5优势 2.2新功能 语义化标记 在HTML5出来之前，Web前端开发者使用div来表示页面章节，但div没有实际意义，即使通过添加class和id的方式形容这块内容的意义，标签本身却没有含义，仅仅是提供给浏览器的指令，只是定义一个网页的某些部分。 HTML5为页面章节定义了含义，也就是语义化元素。虽然对Web前端开发者来说这些语义化元素和普通的div元素没有任何区别，但却为浏览器提供了语义的支持，使得浏览器对HTML的解析更智能快捷。

25 2.HTML5优势 2.2新功能 语义化标记 HTML5引入了一组新的片段类元素，在目前主流的浏览器中已经支持。

26 2.HTML5优势 2.2新功能 更灵活的选择符 除了语义化元素外，HTML5还引入了一种用于查找页面DOM元素的快捷方式。在HTML5出现之前，用来在页面中查找特定元素的函数如表所示。

27 2.HTML5优势 2.2新功能 更灵活的选择符 新的Selectors API发布之后，可以用更精确的方式来指定希望获取的元素，而不必再用标准DOM的方式循环遍历。Selector API与CSS中使用的选择规则一样，通过它可以查找页面中的一个或多个元素。例如，CSS可以基于嵌套、兄弟节点和子模式进行元素选择，CSS最新版本添加了更多对伪类的支持，还支持对属性和层次的随意组合叠加。 能按照CSS规则来选取DOM的元素的函数如表所示。

28 2.HTML5优势 更灵活的选择符 Selectors API函数可以同时指定多个选择规则，例如：
2.2新功能 更灵活的选择符 Selectors API函数可以同时指定多个选择规则，例如： 对于querySelector()来说，选择的是满足规则中任意条件的第一个元素。对于querySelectorAll()来说，页面中的元素只要满足规则中的任何一个条件，都会被返回。多条规则是用逗号分隔的。

29 2.HTML5优势 JavaScript日志和调试
2.2新功能 JavaScript日志和调试 JavaScript日志和浏览器内调试从技术上讲不属于HTML5的功能，但是过去几年里，相关工具的发展出现了质的飞跃。第一个可以用来分析Web页面及其所运行脚本的强大工具是一款名为Firebug的Firefox插件。目前，大部分主流浏览器已经具有相同调试功能，例如Safari的Web Inspector、Google的Chrome开发者工具（Developer Tools）、IE的开发者工具（Developer Tools），以及Opera的Dragonfly等。 很多调试工具支持设置断点来暂停代码执行、分析程序状态以及查看变量的当前值。console.log API已成为JavaScript开发人员记录日志的事实标准。为了便于开发人员查看记录到控制台的信息，很多浏览器提供了分栏窗格的视图。

30 2.HTML5优势 2.2新功能 DOM Level 3 事件处理是目前Web应用开发中最为复杂的内容之一。绝大数浏览器都支持处理事件和元素的标准API。早期IE实现的是与最终标准不同的事件模型，IE9之后版本也逐步支持DOM Level 2和DOM Level 3的特性。 在所有支持HTML5的浏览器中，可以使用相同的代码来实现DOM操作和事件处理，包括非常重要的addEventListener()和dispatchEvent()方法。

31 3.HTML5新特征 3.1语法的改变 与HTML 4相比，HTML5在语法上发生了很大的变化。但是，HTML5中的语法变化，与其他开发语言中的语法变化在根本意义上有所不同。 最大的问题在于在HTML5之前几乎没有符合标准规范的Web浏览器。 HTML的语法是在SGML（Standard Generalized Markup Language）语言的基础上建立起来的。 SGML语法非常复杂，要开发能够解析SGML语法的程序也很不容易，很多浏览器都不包含SGML的分析器。 虽然HTML基本上遵循SGML的语法，但是对于HTML的执行在各浏览器之间并没有一个统一的标准。

32 3.HTML5新特征 3.1语法的改变 在这种情况下，各浏览器之间的兼容性和操作性在很大程度上取决于网站或网络应用程序的开发者们在开发上所做的共同努力，而浏览器本身始终是存在缺陷的。 在HTML5的制定中提高Web浏览器之间的兼容性是一个很大的目标，为了确保兼容性，就要有一个统一的标准。在HTML5中，围绕着Web标准，重新定义了一套在现有HTML基础上修改而来的语法，使运行在各浏览器时都能够符合这个通用标准。 因为HTML5语法解析的算法也都是提供了详细的记载，所以各Web浏览器的供应商们可以把HTML5分析器集中封装在浏览器中。

33 3.HTML5新特征 3.2元素 在HTML5中，新增加了很多元素，同时也移除了一些旧元素。

34 3.HTML5新特征 新增的结构元素： section元素 article元素 aside元素
3.2元素 新增的结构元素： section元素 section元素表示页面中的一个内容区块，比如章节、页眉、页脚或者页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。 article元素 article元素表示页面中的一块与上下文不相关的独立内容，如博客中一篇文章。 aside元素 aside元素表示article元素的内容之外的。与article元素的内容相关的辅助信息。

35 3.HTML5新特征 新增的结构元素： header元素 hgroup元素 footer元素 nav元素
3.2元素 新增的结构元素： header元素 header元素表示页面中一个内容区域或整个页面的标题。 hgroup元素 hgroup元素用于对整个页面或者页面中一个内容区块的标题进行组合。 footer元素 footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息。 nav元素 nav元素表示页面中导航链接的部分。

36 3.HTML5新特征 新增的结构元素： figure元素
3.2元素 新增的结构元素： figure元素 figure元素表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。

37 3.HTML5新特征 新增的其他元素： video元素 audio元素 embed元素 video元素定义视频，比如电影片段或者其他视频流。
3.2元素 新增的其他元素： video元素 video元素定义视频，比如电影片段或者其他视频流。 audio元素 audio元素定义音频，比如音乐或者其他音频流。 embed元素 embed元素用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。

38 3.HTML5新特征 新增的其他元素： mark元素 time元素 ruby元素
3.2元素 新增的其他元素： mark元素 mark元素主要用来在视觉上向用户呈现需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。 time元素 time元素表示日期或时间，也可以同时表示两者。 ruby元素 ruby元素表示ruby注释(中文注音或字符)。

39 3.HTML5新特征 新增的其他元素： rt元素 rp元素 wbr元素 menu元素 rt元素表示字符〔中文注音或字符)的解释或发音。
3.2元素 新增的其他元素： rt元素 rt元素表示字符〔中文注音或字符)的解释或发音。 rp元素 rp元素在ruby注释中使用，以定义不支持ruby素的浏览器所显示的内容。 wbr元素 wbr元素表示软换行。 menu元素 menu元素表示菜单列表，当希望列出表单控件时使用该标签。

40 3.HTML5新特征 新增的其他元素： canvas元素 command元素 details元素
3.2元素 新增的其他元素： canvas元素 canvas元素表示图形，比如图表和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。 command元素 command元素表示命令按钮，比如单选按钮、复选框或按钮。 details元素 details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示出细节信息。summary元素应该是details元素的第一个子元素。

41 3.HTML5新特征 新增的其他元素： datagrid元素 keygen元素 output元素 source元素
3.2元素 新增的其他元素： datagrid元素 datagrid元素表示可选数据的列表，与input元素配合便用，可以制作出输入值的下拉列表。 keygen元素 keygen元素表示生成秘钥。 output元素 output元素表示不同类型的输出，比如脚本的输出。 source元素 source元素为媒介元素(比如<video>和<audio)定义媒介资源。

42 3.HTML5新特征 新增的input元素： email元素 url元素 number元素 Range元素
3.2元素 新增的input元素： 元素 类型表示必须输入 地址的文本输入框。 url元素 rul类型表示必须输入URl地址的文本输入框。 number元素 number类型表示必须输入数值的文本输入框。 Range元素 range类型表示必须输入一定范围内数字值的文本输入框。

43 3.HTML5新特征 新增的input元素： 时间Date Pickers元素 HTML5拥有多个可供选取日期和时间的新型输入文本框：
3.2元素 新增的input元素： 时间Date Pickers元素 HTML5拥有多个可供选取日期和时间的新型输入文本框： date：选取日、月、年。 month：选取月、年。 week：选取周和年。 time：选取时间(小时和分钟)。 datetime：选取时间、日，月、年(PTT时间)。 datetime-local：选取时间、日、月、年(本地时间)。

44 3.HTML5新特征 3.3属性 HTML5中，属性方面也有一些改变。

45 3.HTML5新特征 3.3属性 新增的表单相关属性： 可以对input(type=text)、select、textarea元素指定button属性。它以指定属性的方式让元素在画面打开时自动获得焦点。 可以对input元素(type=text)与textarea元素指定placeholder属性，它会对用户的输入进行提示，提示用户可以输人的内容。 可以对input、output、select、textarea、button与fieldset指定form属性，声明它属于哪个表单，然后将其放置在页面上任何位置，而不是表单之内。 可以对input元素(type=text)与textarea元素指定required属性。该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容。

46 3.HTML5新特征 3.3属性 新增的表单相关属性： 为input元素增加了几个新的属性：autocomplete、min、max、multiple、pattern与step。同时还有新的list元素与datalist元素配合使用，datalist元素与autocomplete属性配合使用。multiple属性允许在上传文件时一次上传多个文件。 为input元素与button元素增加了新属性formaciton、formenctype、formmethod、formnovalidate与formtarget，可以重载form元素的action、enctype、method、novalidate与target属性。为fieldset元素增加了disabled属性，可以把它的子元素设为disabled状态。 为input元素、button元素、form元素增加了novalidate属性，该属性可以取消提交时进行的有关检查，表单可以被无条件地提交。

47 3.HTML5新特征 3.3属性 新增链接相关属性： 为a与area元素增加了media属性，该属性规定目标URL是以什么类型的媒介/设备进行优化的，只能在href属性存在时使用。 为area元素增加了hreflang属性与rel属性，以保持与a元素、link元素的一致。 为link元素增加了新属性size，该属性可以与icon元素结合使用，该属性指定关联图标的大小。 为base元素增加了target属性，主要目的是保持与a元素的一致性。

48 3.HTML5新特征 新增其他属性： 为ol元素增加属性reversed，它指定列表倒序显示。
3.3属性 新增其他属性： 为ol元素增加属性reversed，它指定列表倒序显示。 为meta元素增加charset属性，因为这个属性已经被广泛支持了，并且可以使文档的字符编码的指定变得更加的友好。 为menu元素增加了两个新的属性：type与label。label属性为菜单定义一个可见的标签，type属性让菜单可以以上下文菜单、工具条与列表菜单三种形式展示。 为style元素增加scoped属性，用来规定样式作用范围，譬如只对页面上某个树起作用。

49 3.HTML5新特征 新增其他属性： 为script元素增加async属性，定义脚本是否异步执行。
3.3属性 新增其他属性： 为script元素增加async属性，定义脚本是否异步执行。 为html元素增加属性manifest，开发离线Web应用程序时与API结合使用，定义一个URL，在URL上描述文档的缓存信息。 为iframe元素增加三个属性sandbox、seamless与srcdoc，用来提高页面安全性，防止不信任的Web页面执行某些操作。

50 3.HTML5新特征 3.3属性 移除的旧属性：

51 3.HTML5新特征 3.3属性 移除的旧属性：

52 3.HTML5新特征 3.3属性 移除的旧属性：

53 3.HTML5新特征 3.3属性 移除的旧属性：

54 3.HTML5新特征 HTML5新增 “全局属性”概念。所谓全局属性，是指可以对任何元素都使用的属性。 conentEditable属性
3.3全局属性 HTML5新增 “全局属性”概念。所谓全局属性，是指可以对任何元素都使用的属性。 conentEditable属性 conentEditable是由微软开发、被其他浏览器反编译并投入应用的一个全局属性。该属性的主要功能是允许用户编辑元素中的内容，所以使用该属性的元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容允许编辑。 designMode属性 designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上文所述的conentEditable属性的元素都变成了可编辑状态。

55 3.HTML5新特征 hidden属性 spellcheck属性 tabindex属性
3.3全局属性 hidden属性 在HTML5中，所有的元素都允许使用hidden属性。该属性类似于input元素中的hidden元素，功能是通知浏览器不渲染该元素，使该元素处于不可见状态。 spellcheck属性 spellcheck属性是HTML5针对input元素（type=text）与textarea这两个文本输入框提供的新属性，它的功能为对用户输入的文本内容进行拼写和语法检查。 tabindex属性 tabindex是开发中的一个基本概念，当不断敲击Tab键让窗口或页面中的控件获得焦点，对窗口或页面中的所有控件进行遍历的时候，控件的tabindex表示该控件是第几个被访问到的。

56 4.HTML5文档结构 4.1认识文档结构 在没有接触到HTML5文档之前，很多人对XHTML文档结构比较熟悉，由于XHTML文档是HTML向XML规范的过渡版本，其文档格式也基本按XML规范进行要求。常见的XHTML文件结构的要求如下。 必须为文档定义命名空间，其值为 MIME type不能是text/html，而是text/xml、application/xml或者application/xml+html。 必须有根元素，根元素为<html>。即<html>的开始和结束标签不能省略。 所有元素只要有了开始标签，就不能没有结束标签，或者自闭和。 所有元素都要沿革遵守大小写，元素名称必须小写。

57 4.HTML5文档结构 因此XHTML文档格式变得严格，也因为是XML，其可读性和规范性提高了不少。
4.1认识文档结构 因此XHTML文档格式变得严格，也因为是XML，其可读性和规范性提高了不少。 HTML5最终要在HTML的宽容性和XML的规范性之间找到最佳的平衡点。

58 4.HTML5文档结构 为了能够更好地对HTML5网页理解和认识，下面给出一个简单的、符合标准的HTML5文档结构代码，并进行详细注释。
4.1认识文档结构 为了能够更好地对HTML5网页理解和认识，下面给出一个简单的、符合标准的HTML5文档结构代码，并进行详细注释。

59 现场演示： 使用TXT文本创建一个简单的网页。

60 页面代码

61 页面效果展示

62 Thanks.