第2章 HTML、XHTML、HTML5

第2章HTML、XHTML、HTML5第1页第2章HTML、XHTML、HTML5本章概述本章的学习目标主要内容第2章HTML、XHTML、HTML5第2页本章概述1993年，HTML首次以草案的形式发布，20世纪90年代是HTML发展速度最快的时期，直到1999年的4.01版。在这个过程中，W3C主要负责HTML规范的制定。HTML4.01发布之后，业界普遍认为HTML已经到了穷途末路，对Web标准的焦点也开始移到了XML和XHTML上，HTML被放在了次要的位置。HTML以HTML为基础，对HTML进行了大量的修改。本章将从总体上介绍HTML5与以往版本的不同，以及HTML5和HTML4之间的区别。第2章HTML、XHTML、HTML5第3页本章的学习目标了解HTML语言的作用、结构和语法了解XHTML和XML的关系，及XHTML的语法特点掌握HTML5的语法和元素掌握HTML5中新增的以及废除的元素掌握HTML5中新增的和废除的属性掌握HTML5新增的全局属性掌握HTML5新增的事件第2章HTML、XHTML、HTML5第4页主要内容2.1HTML基础2.2XHTML基础2.3HTML5基础2.4新增和废除的属性2.5全局属性2.6新增的事件2.7本章小结第2章HTML、XHTML、HTML5第5页2.1HTML基础2.1.1HTML简介2.1.2HTML结构2.1.3HTML语法第2章HTML、XHTML、HTML5第6页2.1.1HTML简介HTML是HypertextMarkupLanguage的缩写，中文翻译为超文本标识语言。使用HTML标签编写的文档称为HTML文档，目前最新版本为HTML5.0，这是目前使用得最广泛的版本。HTML4.01已逐步淘汰。第2章HTML、XHTML、HTML5第7页2.1.2HTML结构HTML文档一般都应包含两个部分：头部区域和主体区域。HTML文档基本结构由3个标签负责组织：html、head和body。其中html标签标识HTML文档,head标签标识头部区域，而body标签标识主题区域。第2章HTML、XHTML、HTML5第8页2.1.3HTML语法所有标签都包含在“”和“”起止标识符中，构成一个标签如style、head、body和div等。绝大多数元素都有起始标签和结束标签。起始标签包含元素的名称以及可选属性。元素的属性包含属性名称和属性值两部分，中间通过等号进行连接，多个属性之间通过空格进行分隔。少数元素的属性也可能不包含属性值，仅包含一个属性名称。一般属性值应该包含在引号内。属性是可选的。标签可以相互嵌套。HTML文档所有信息必须包含在html标签中，所有元素的元信息应包含在head子标签中，而HTML传递信息和网页显示内容应包含在body子标签中。第2章HTML、XHTML、HTML5第9页主要内容2.1HTML基础2.2XHTML基础2.3HTML5基础2.4新增和废除的属性2.5全局属性2.6新增的事件2.7本章小结第2章HTML、XHTML、HTML5第10页2.2XHTML基础2.2.1XHTML结构2.2.2XHTML语法2.2.3XHTML类型2.2.4DTD解析2.2.5命名空间第2章HTML、XHTML、HTML5第11页2.2.1XHTML结构下面是Dreamweaver自动生成的一个标准XHTML页面模板文件，包含以下代码：第2章HTML、XHTML、HTML5第12页2.2.2XHTML语法在文档的开头必须定义文档类型。在根元素中应声明命名空间，即设置xmlns属性。所有标签都必须是闭合的。所有元素和属性都必须小写。所有的属性必须用引号括起来。所有标签都必须合理嵌套。所有属性都必须被赋值，没有值的属性就用自身来赋值。XHTML规范废除了name属性，而使用id属性作为统一的名称。第2章HTML、XHTML、HTML5第13页2.2.3XHTML类型XHTML文档类型有3种：STRICT（严格类型）、TRANSITIONAL（过渡类型）、FRAMESET（框架类型）。►!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN►!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN►!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN第2章HTML、XHTML、HTML5第14页2.2.4DTD解析DTD是一套关于标签的语法规则。DTD文件是一个ASCII的文本文件，后缀名为.dtd。利用DOCTYPE声明中的URL可以访问指定类型的DTD详细信息。例如，在XHTML1.0过渡型DTD的URL为第2章HTML、XHTML、HTML5第15页2.2.5命名空间在XHTML文档中，还有一句常见的代码：htmlxmlns=，即XHTMLNamespace的缩写，即命名空间。该属性声明了html顶级元素的命名空间，用来定义该顶级元素以及其包含的各级子元素的唯一性。由于XML语言允许用户自定义标签，使用命名空间，可以避免自己定义的标签和别人定义的标签发生冲突。比如，如果两个人定义了一个一模一样的文档，若文件头部没有xmlns命名空间的区分，就会发生冲突，如果在文档头部加上了不同的命名空间，则文档不会冲突。通俗地讲，命名空间就是给文档做一个标签，标明该文档是属于哪个网站的。对于HTML文档来说，由于它的元素是固定的，不允许用户进行定义，所以指定的命名空间永远是。第2章HTML、XHTML、HTML5第16页主要内容2.1HTML基础2.2XHTML基础2.3HTML5基础2.4新增和废除的属性2.5全局属性2.6新增的事件2.7本章小结第2章HTML、XHTML、HTML5第17页2.3HTML5基础2.3.1HTML5语法2.3.2HTML5元素第2章HTML、XHTML、HTML5第18页2.3.1HTML5语法HTML5的文件扩展名仍然是.html或者.htm，内容类型仍然为text/html。HTML5的文档类型声明为：!DOCTYPEhtml。在HTML5中，使用charset属性来指定字符编码，例如：metacharset=“utf-8”。HTML5力图兼容旧版本的语法。省略引号。第2章HTML、XHTML、HTML5第19页2.3.2HTML5元素HTML5中引入了新标记元素被分成七大类，如表所示。标记类型说明内嵌在文档中添加其他类型的内容，如audio、video、canvas和iframe等流在文档和应用的body中使用的元素，如form、h1和small等标题段落标题，如h1、h2和hgroup等交互与用户交互的内容，如音频和视频的控件、button和textarea等元数据通常出现在页面的head中，设置页面其他部分的表现和行为，如script、style和title等短语文本和文本标记元素，如mark、kbd、sub和sup等第2章HTML、XHTML、HTML5第20页主要内容2.1HTML基础2.2XHTML基础2.3HTML5基础2.4新增和废除的属性2.5全局属性2.6新增的事件2.7本章小结第2章HTML、XHTML、HTML5第21页2.4新增和废除的属性2.4.1新增的属性2.4.2废除的属性第2章HTML、XHTML、HTML5第22页2.4.1新增的属性HTML5中新增的属性主要体现在表单属性、链接属性以及其他属性。第2章HTML、XHTML、HTML5第23页2.4.1新增的属性增加的表单属性属性名称说明autofocusinput、select、textarea和button元素拥有，以指定属性的方式让元素在画面打开时自动获得焦点placeholderinput、textarea元素拥有，提示用户可以输入的内容forminput、output、select、textarea、button与fieldset拥有，声明这些控件属于哪个表单，然后放置在页面上的任何位置，而不是表单之内required表示必填项autocomplete、min、max、multiple、pattern、step为input元素新增的属性。datalist元素和autocomplete属性配合使用。multiple允许在上传文件时一次上传多个文件formactionformenctypeformmethodformnovalidateformtargetinput和button元素拥有，重载form元素的action、enctype、method、novalidate、target属性novalidate取消提交时进行的有关检查，表单可以被无条件提交第2章HTML、XHTML、HTML5第24页2.4.1新增的属性增加的链接属性属性名称说明media规定目标URL是为哪种类型的媒介和设备进行优化的，只能在href属性存在时使用hreflangrel为area元素增加的属性，以保持和a、link元素保持一致sizes为link元素增加的属性，可以和icon元素结合使用，指定关联图标的大小target为base元素增加的属性，目的是保持和a元素一致第2章HTML、XHTML、HTML5第25页2.4.1新增的属性增加的其他属性属性名称说明reversed为ol元素增加的属性，用于指定列表倒序显示charset为meta元素增加的属性typelabel为menu元素新增的属性，label属性为菜单定义一个可见的标注，type属性让菜单可以以上下文菜单、工具条和列表菜单形式出现scoped为style元素增加的属性，规定样式的作用范围async为script元素增加的属性，定义脚本是否异步执行manifest为html增加的属性，开发离线Web应用程序时，与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息sandboxseamlesssrcdoc为iframe元素增加的属性，用来提高页面安全性，防止不信任的Web页面执行某些操作第2章HTML、XHTML、HTML5第26页2.4.2废除的属性HTML5废除了HTML4中过时的属性，而采用其他属性或其他方案进行替代（详见课文）第2章HTML、XHTML、HTML5第27页主要内容2.1HTML基础2.2XHTML基础2.3HTML5基础2.4新增和废除的属性2.5全局属性2.6新增的事件2.7本章小结第2章HTML、XHTML、HTML5第28页2.5全局属性2.5.1contentEditable属性2.5.2designMode属性2.5.3hidden属性2.5.4spellcheck属性2.5.5tabindex属性第2章HTML、XHTML、HTML5第29页2.5.1contentEditable属性contentEditable属性的主要功能是允许用户在线编辑元素中的内容。contentEditable是一个布尔值属性，可以被指定为true或false。此外，该属性还有个隐藏的inherit状态，属