HTML、XHTML、HTML5PPT演示课件

第1页,第1页,第2章 HTML、XHTML、HTML5,本章概述 本章的学习目标主要内容,第2页,第2页,本章概述,1993年，HTML首次以草案的形式发布，20世纪90年代是HTML发展速度最快的时期，直到1999年的4.01版。在这个过程中，W3C主要负责HTML规范的制定。HTML4.01发布之后，业界普遍认为HTML已经到了穷途末路，对Web标准的焦点也开始移到了XML和XHTML上，HTML被放在了次要的位置。HTML以HTML为基础，对HTML进行了大量的修改。本章将从总体上介绍HTML5与以往版本的不同，以及HTML5和HTML4之间的区别。,第3页,第3页,本章的学习目标,了解H TML语言的作用、结构和语法了解XHTML和XML的关系，及XHTML的语法特点掌握HTML5的语法和元素掌握HTML5中新增的以及废除的元素掌握HTML5中新增的和废除的属性掌握HTML5新增的全局属性掌握HTML5新增的事件,第4页,第4页,主要内容,2.1 HTML基础2.2 XHTML基础2.3 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结,第5页,第5页,2.1 HTML基础,2.1.1 HTML简介2.1.2 HTML结构2.1.3 HTML语法,第6页,第6页,2.1.1 HTML简介,HTML是Hypertext Markup Language的缩写，中文翻译为超文本标识语言。使用HTML标签编写的文档称为HTML文档，目前最新版本为HTML 5.0，这是目前使用得最广泛的版本。HTML 4.01已逐步淘汰。,第7页,第7页,2.1.2 HTML结构,HTML文档一般都应包含两个部分：头部区域和主体区域。HTML文档基本结构由3个标签负责组织：、和。其中标签标识HTML文档,标签标识头部区域，而标签标识主题区域。,第8页,第8页,2.1.3 HTML语法,所有标签都包含在“”起止标识符中，构成一个标签如、和等。绝大多数元素都有起始标签和结束标签。起始标签包含元素的名称以及可选属性。元素的属性包含属性名称和属性值两部分，中间通过等号进行连接，多个属性之间通过空格进行分隔。少数元素的属性也可能不包含属性值，仅包含一个属性名称。一般属性值应该包含在引号内。属性是可选的。标签可以相互嵌套。HTML文档所有信息必须包含在标签中，所有元素的元信息应包含在子标签中，而HTML传递信息和网页显示内容应包含在子标签中。,第9页,第9页,主要内容,2.1 HTML基础2.2 XHTML基础2.3 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结,第10页,第10页,2.2 XHTML基础,2.2.1 XHTML结构2.2.2 XHTML语法2.2.3 XHTML类型2.2.4 DTD解析2.2.5 命名空间,第11页,第11页,2.2.1 XHTML结构,下面是Dreamweaver自动生成的一个标准XHTML页面模板文件，包含以下代码：,第12页,第12页,2.2.2 XHTML语法,在文档的开头必须定义文档类型。在根元素中应声明命名空间，即设置xmlns属性。所有标签都必须是闭合的。所有元素和属性都必须小写。所有的属性必须用引号括起来。所有标签都必须合理嵌套。所有属性都必须被赋值，没有值的属性就用自身来赋值。XHTML规范废除了name属性，而使用id属性作为统一的名称。,第13页,第13页,2.2.3 XHTML类型,XHTML文档类型有3种：STRICT（严格类型）、TRANSITIONAL（过渡类型）、FRAMESET（框架类型）。,第14页,第14页,2.2.4 DTD解析,DTD是一套关于标签的语法规则。DTD文件是一个ASCII的文本文件，后缀名为.dtd。利用DOCTYPE声明中的URL可以访问指定类型的DTD详细信息。例如，在XHTML1.0过渡型DTD的URL为/TR/XHTML1/DTD/xhtml1-transitional.dtd,第15页,第15页,2.2.5 命名空间,在XHTML文档中，还有一句常见的代码： xmlns，即XHTML Namespace的缩写，即命名空间。该属性声明了html顶级元素的命名空间，用来定义该顶级元素以及其包含的各级子元素的唯一性。由于XML语言允许用户自定义标签，使用命名空间，可以避免自己定义的标签和别人定义的标签发生冲突。比如，如果两个人定义了一个一模一样的文档，若文件头部没有xmlns命名空间的区分，就会发生冲突，如果在文档头部加上了不同的命名空间，则文档不会冲突。通俗地讲，命名空间就是给文档做一个标签，标明该文档是属于哪个网站的。对于HTML文档来说，由于它的元素是固定的，不允许用户进行定义，所以指定的命名空间永远是/1999/xhtml。,第16页,第16页,主要内容,2.1 HTML基础2.2 XHTML基础2.3 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结,第17页,第17页,2.3 HTML5基础,2.3.1 HTML5语法2.3.2 HTML5元素,第18页,第18页,2.3.1 HTML5语法,HTML5的文件扩展名仍然是.html或者.htm，内容类型仍然为text/html。HTML5的文档类型声明为：。在HTML5中，使用charset属性来指定字符编码，例如：。HTML5力图兼容旧版本的语法。省略引号。,第19页,第19页,2.3.2 HTML5元素,HTML5中引入了新标记元素被分成七大类，如表所示。,第20页,第20页,主要内容,2.1 HTML基础2.2 XHTML基础2.3 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结,第21页,第21页,2.4 新增和废除的属性,2.4.1 新增的属性2.4.2 废除的属性,第22页,第22页,2.4.1 新增的属性,HTML5中新增的属性主要体现在表单属性、链接属性以及其他属性。,第23页,第23页,2.4.1 新增的属性,增加的表单属性,第24页,第24页,2.4.1 新增的属性,增加的链接属性,第25页,第25页,2.4.1 新增的属性,增加的其他属性,第26页,第26页,2.4.2 废除的属性,HTML5废除了HTML4中过时的属性，而采用其他属性或其他方案进行替代（详见课文）,第27页,第27页,主要内容,2.1 HTML基础2.2 XHTML基础2.3 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结,第28页,第28页,2.5 全局属性,2.5.1 contentEditable属性2.5.2 designMode属性2.5.3 hidden属性2.5.4 spellcheck属性2.5.5 tabindex属性,第29页,第29页,2.5.1 contentEditable属性,contentEditable属性的主要功能是允许用户在线编辑元素中的内容。contentEditable是一个布尔值属性，可以被指定为true或false。此外，该属性还有个隐藏的inherit状态，属性值为true时，元素被指定为允许编辑；属性值为false时，元素被指定为不可编辑；未指定true和false时，则由inherit状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的。,第30页,第30页,2.5.2 designMode属性,designMode属性用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持上文所述的contentEditable属性的元素都变成了可编辑状态。designMode属性只能在JavaScript脚本里被编辑修改。该属性值有两个值：on和off。属性被指定为on时，页面可编辑；被指定为off时，页面不可编辑。,第31页,第31页,2.5.3 hidden属性,在HTML5中，所有的元素都允许使用一个hidden属性。该属性类似于input元素中的hidden元素，功能是通知浏览器是否渲染该元素。但是元素中的内容还是浏览器创建的。也就是说，页面装载后，允许使用JavaScript脚本把该属性取消，取消后该元素变为可见状态，同时元素中的内容也即时显示出来。hidden属性是一个布尔值的属性，当设为true时，元素处于不可见状态；当设为false时，元素处于可见状态。,第32页,第32页,2.5.4 spellcheck属性,spellcheck属性是HTML5针对input（type=text）和textarea元素提供的一个拼写和语法检查属性。该属性取值布尔值，true或者false，书写时需注意，必须明确声明属性值为true或者false。需要注意的是，如果元素的readOnly属性或disabled属性设为true，则不执行拼写检查。,第33页,第33页,2.5.5 tabindex属性,tabindex是开发中的一个基本概念，当不断按Tab键让窗口或页面中的控件获得焦点，对窗口或页面中的所有控件进行遍历的时候，每一个控件的tabindex表示该控件是第几个被访问到的。,第34页,第34页,主要内容,2.1 HTML基础2.2 XHTML基础2.3 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结,第35页,第35页,2.6 新增的事件,HTML5中对页面、表单、键盘元素新增了许多事件，见课文的表2-9所示。,第36页,第36页,主要内容,2.1 HTML基础2.2 XHTML基础2.3 HTML5基础2.4 新增和废除的属性2.5 全局属性2.6 新增的事件 2.7 本章小结,第37页,第37页,2.7 本章小结,本章从语法上对HTML、XHTML、HTM